From 25a7e57dfc33e96df74b27954fcc5e39c31484af Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Thu, 31 Oct 2024 13:52:09 -0700
Subject: [PATCH] Make <selectedoption> stop responding to mutations

This patch makes <selectedoption> stop using the MutationObserver for
<option>: https://github.com/openui/open-ui/issues/825

This patch also uncovered a small bug with the
selectedoptionelement attribute when assigning null to the IDL
attribute, which I fixed by removing a null check.

Bug: 336844298
Change-Id: I3fed171bf687cabb9474d8ff8741071c28bbad0b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5941575
Reviewed-by: Dominic Farolino <dom@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1376573}
---
 .../selectedoption.tentative.html                 | 15 +++++++++------
 .../selectedoptionelement-attr.tentative.html     |  7 +++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/html/semantics/forms/the-select-element/customizable-select/selectedoption.tentative.html b/html/semantics/forms/the-select-element/customizable-select/selectedoption.tentative.html
index b3381ac510a990..398b0b988de057 100644
--- a/html/semantics/forms/the-select-element/customizable-select/selectedoption.tentative.html
+++ b/html/semantics/forms/the-select-element/customizable-select/selectedoption.tentative.html
@@ -44,20 +44,21 @@
   assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
     'The innerHTML of <selectedoption> should change after the selected option is changed.');
 
+  let oldInnerHTML = optionTwo.innerHTML;
   spanTwo.textContent = 'new span';
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
-    '<selectedoption> should respond to text content changes.');
+  assert_equals(selectedOption.innerHTML, oldInnerHTML,
+    '<selectedoption> should not respond to <option> text content changes.');
 
   spanTwo.appendChild(document.createElement('div'));
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
-    '<selectedoption> should respond to new elements being added to descendants.');
+  assert_equals(selectedOption.innerHTML, oldInnerHTML,
+    '<selectedoption> should not respond to new elements being added to descendants of <option>.');
 
   spanTwo.setAttribute('data-foo', 'bar');
   await new Promise(queueMicrotask);
-  assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
-    '<selectedoption> should respond to attributes being added to descendants.');
+  assert_equals(selectedOption.innerHTML, oldInnerHTML,
+    '<selectedoption> should not respond to attributes being added to descendants of <option>.');
 
   form.reset();
   await new Promise(queueMicrotask);
@@ -90,5 +91,7 @@
   optionOne.remove();
   assert_equals(selectedOption.innerHTML, '',
     'The content of <selectedoption> should be cleared if there is no selected <option>.');
+
+  // TODO(crbug.com/336844298): Add tests for mutation records during parsing
 }, 'The <selectedoption> element should reflect the HTML contents of the selected <option>.');
 </script>
diff --git a/html/semantics/forms/the-select-element/customizable-select/selectedoptionelement-attr.tentative.html b/html/semantics/forms/the-select-element/customizable-select/selectedoptionelement-attr.tentative.html
index 63b4af3abc8bf7..f7ef48c24e401f 100644
--- a/html/semantics/forms/the-select-element/customizable-select/selectedoptionelement-attr.tentative.html
+++ b/html/semantics/forms/the-select-element/customizable-select/selectedoptionelement-attr.tentative.html
@@ -34,11 +34,14 @@
     'Removing the selectedoptionelement attribute via IDL should synchronously clear the contents of the <selectedoption>.');
 
   select.selectedOptionElement = selectedoption;
+  assert_equals(selectedoption.innerHTML, optionOne.innerHTML,
+    'Re-setting the selectedoptionelement attribute via IDL should synchronously assign the contents of <selectedoption>.');
 
+  let oldInnerHTML = optionOne.innerHTML;
   optionOne.querySelector('span').remove();
   await new Promise(queueMicrotask);
-  assert_equals(selectedoption.innerHTML, optionOne.innerHTML,
-    'Mutating the selected <option> should update the <selectedoption> contents after a microtask.');
+  assert_equals(selectedoption.innerHTML, oldInnerHTML,
+    'Mutating the selected <option> should not update the <selectedoption> contents.');
 
   select.value = 'two';
   assert_equals(selectedoption.innerHTML, optionTwo.innerHTML,