From c24f4fb99a29c337856621b6dbf9b7a45e145cd2 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 5 Aug 2024 13:59:16 -0700
Subject: [PATCH] Improve <selectedoption> performance

This patch improves the performance of <selectedoption> by replacing the
SynchronousMutationObserver with the existing async MutationObserver in
HTMLOptionElement.

The change from sync to async impacts some tests. The timing is being
discussed in a standards issue here:
https://github.com/whatwg/html/issues/10520

Fixed: 336844298
Change-Id: I9693de9cf35913e7daaebb364c4923dcd4a2dc39
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5758741
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1337462}
---
 .../stylable-select/selectedoption.tentative.html         | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/html/semantics/forms/the-select-element/stylable-select/selectedoption.tentative.html b/html/semantics/forms/the-select-element/stylable-select/selectedoption.tentative.html
index 16d711515c931c..ad006a8b38e038 100644
--- a/html/semantics/forms/the-select-element/stylable-select/selectedoption.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/selectedoption.tentative.html
@@ -36,22 +36,27 @@
     'The innerHTML of <selectedoption> should initially match the innerHTML of the selected <option>.');
 
   select.value = 'two';
+  await new Promise(queueMicrotask);
   assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
     'The innerHTML of <selectedoption> should change after the selected option is changed.');
 
   spanTwo.textContent = 'new span';
+  await new Promise(queueMicrotask);
   assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
     '<selectedoption> should respond to 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.');
 
   spanTwo.setAttribute('data-foo', 'bar');
+  await new Promise(queueMicrotask);
   assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
     '<selectedoption> should respond to attributes being added to descendants.');
 
   form.reset();
+  await new Promise(queueMicrotask);
   assert_equals(select.value, 'one',
     'form.reset() should change the selects value to one.');
   assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
@@ -60,12 +65,14 @@
   await test_driver.bless();
   select.showPicker();
   await test_driver.click(optionTwo);
+  await new Promise(queueMicrotask);
   assert_equals(select.value, 'two',
     'Clicking on another option should change select.value.');
   assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
     'Clicking on an option element should update the <selectedoption>.');
 
   selectedOption.remove();
+  await new Promise(queueMicrotask);
   assert_equals(selectedOption.innerHTML, '',
     'Removing the <selectedoption> from the <select> should make it clear its contents.');
   button.appendChild(selectedOption);
@@ -73,6 +80,7 @@
     'Re-inserting the <selectedoption> should make it update its contents.');
 
   optionTwo.remove();
+  await new Promise(queueMicrotask);
   assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
     'The innerHTML of <selectedoption> should be updated in response to selected <option> removal.');
   optionOne.remove();