From 2bfed6891874453109436a15a328f35ab4d51ecf Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Fri, 20 Dec 2024 16:56:30 -0800
Subject: [PATCH] [Reland] Handle appearance value changes during <select>
 showPicker.

When the appearance value changes as the result of the picker
opening (e.g. via `::picker(select):open {appearance:auto}` or
similar), we close the picker to avoid any oscillation or
nonsensical behavior. This CL implements this change.

The original CL [1] was reverted due to a strange bot failure [2]
where the new set of promise_tests somehow fail because
blink_wpt_tests is expecting an expectation file with a single blank
line. I added a "Failure" expectation to hopefully avoid that, in
Patchset 3.

[1] https://chromium-review.googlesource.com/c/chromium/src/+/6094831
[2] https://ci.chromium.org/ui/p/chromium/builders/ci/mac11-arm64-rel-tests/50289/overview

Fixed: 376097114,370536090,367426156
Bug: 384394713
Change-Id: I2ab4e43db3de4b7125b564c366fe86bdf9f85cc4
---
 .../switch-picker-appearance.tentative.html   | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/html/semantics/forms/the-select-element/customizable-select/switch-picker-appearance.tentative.html b/html/semantics/forms/the-select-element/customizable-select/switch-picker-appearance.tentative.html
index 75cb63fce804f5..09bea44a3409b1 100644
--- a/html/semantics/forms/the-select-element/customizable-select/switch-picker-appearance.tentative.html
+++ b/html/semantics/forms/the-select-element/customizable-select/switch-picker-appearance.tentative.html
@@ -14,10 +14,10 @@
 </select>
 
 <style>
-  select#test1::picker(select) {
+  #test1::picker(select) {
     background-color: red;
   }
-  select#test1::picker(select):popover-open {
+  #test1::picker(select):popover-open {
     background-color: green;
   }
 </style>
@@ -33,7 +33,7 @@
   t.add_cleanup(() => style.remove());
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
   assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red);
-  style.innerHTML = '::picker(select) {appearance: base-select}';
+  style.innerHTML = '#test1::picker(select) {appearance: base-select}';
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'base-select');
   assert_equals(getComputedStyle(select1,'::picker(select)').backgroundColor,red,'still closed, so popover-open doesn\'t match');
 
@@ -57,7 +57,7 @@
   document.head.append(style);
   t.add_cleanup(() => style.remove());
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
-  style.innerHTML = '::picker(select) {appearance: auto}';
+  style.innerHTML = '#test1::picker(select) {appearance: auto}';
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'auto');
   await test_driver.bless('showPicker');
   select1.showPicker();
@@ -72,7 +72,7 @@
   document.head.append(style);
   t.add_cleanup(() => style.remove());
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
-  style.innerHTML = '::picker(select) {appearance: none}';
+  style.innerHTML = '#test1::picker(select) {appearance: none}';
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
   await test_driver.bless('showPicker');
   select1.showPicker();
@@ -88,8 +88,8 @@
   t.add_cleanup(() => style.remove());
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
   style.innerHTML = `
-    ::picker(select) {appearance: base-select}
-    ::picker(select):popover-open {appearance: auto}
+    #test1::picker(select) {appearance: base-select}
+    #test1::picker(select):popover-open {appearance: auto}
     `;
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'base-select');
   await test_driver.bless('showPicker');
@@ -109,18 +109,17 @@
   document.head.append(style);
   t.add_cleanup(() => style.remove());
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
-  style.innerHTML = '::picker(select) {appearance: none}';
+  style.innerHTML = '#test1::picker(select) {appearance: base-select}';
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'base-select');
   await test_driver.bless('showPicker');
   select1.showPicker();
   assert_true(select1.matches(':open'));
   style.remove();
-  assert_false(select1.matches(':open'),'changing appearance while the picker is open should close it');
   assert_equals(getComputedStyle(select1,'::picker(select)').appearance,'none');
+  assert_false(select1.matches(':open'),'changing appearance while the picker is open should close it');
 }, 'Switching appearance in JS after picker is open should close the picker');
 </script>
 
-
 <button id=reset>Reset</button>
 <select id=test2>
   <button><selectedcontent></selectedcontent></button>
@@ -130,13 +129,13 @@
 </select>
 
 <style>
-  select#test2, ::picker(select) {
+  #test2, #test2::picker(select) {
     appearance: base-select;
   }
-  select#test2.controlswitch:open {
+  #test2.controlswitch:open {
     appearance: auto;
   }
-  select#test2.pickerswitch:open::picker(select) {
+  #test2.pickerswitch:open::picker(select) {
     appearance: auto;
   }
   </style>
@@ -200,7 +199,7 @@
   assert_equals(getComputedStyle(select2).appearance,'base-select');
   t.add_cleanup(() => select2.removeAttribute('style'));
   select2.setAttribute('style','appearance:auto');
-  assert_false(select2.matches(':open'),'Adding inline style should close the picker');
   assert_equals(getComputedStyle(select2).appearance,'auto','appearance should still be auto from inline style');
+  assert_false(select2.matches(':open'),'Adding inline style should close the picker');
 },'The select picker is closed if the <select> inline appearance value is changed while the picker is open');
 </script>