From 18213abf11daf5d878742fe9be5b54471ddc7bee Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 4 Sep 2024 10:25:35 -0700
Subject: [PATCH] Require ::picker(select) appearance:base-select opt-in

This patch requires that not only appearance:base-select be applied to
<select> to make the popup be a popover, but also for
appearance:base-select to be applied to select::picker(select). This is
being discussed here: https://github.com/w3c/csswg-drafts/issues/10440

Change-Id: Ib089a9f8a4c0bea30d2f4fb9da1df185f4272db0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5819694
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1350885}
---
 ...elect-accessibility-minimum-target-size.tentative.html | 8 +++++++-
 .../select-fallback-datalist-animations.tentative.html    | 2 +-
 .../select-keyboard-behavior.tentative.html               | 2 +-
 .../stylable-select/select-mouse-behavior.tentative.html  | 2 +-
 .../select-option-hover-styles.tentative.html             | 5 ++++-
 .../stylable-select/selectedoption.tentative.html         | 8 +++++++-
 6 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/html/semantics/forms/the-select-element/stylable-select/select-accessibility-minimum-target-size.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-accessibility-minimum-target-size.tentative.html
index 364efd15542194..3155849a5863bf 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-accessibility-minimum-target-size.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-accessibility-minimum-target-size.tentative.html
@@ -7,7 +7,13 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<select style="appearance:base-select">
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
   <option></option>
 </select>
 
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-fallback-datalist-animations.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-fallback-datalist-animations.tentative.html
index 6d063b59a280c9..907b668c3f2d70 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-fallback-datalist-animations.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-fallback-datalist-animations.tentative.html
@@ -8,7 +8,7 @@
 <script src="/resources/testdriver-vendor.js"></script>
 
 <style>
-select {
+select, select::picker(select) {
   appearance: base-select;
 }
 
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html
index 1e0ffb28a48a2e..d09f410ea00725 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html
@@ -11,7 +11,7 @@
 <script src="/resources/testdriver-actions.js"></script>
 
 <style>
-select {
+select, select::picker(select) {
   appearance: base-select;
 }
 </style>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html
index f4333c410465fc..b6463b57b750a2 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-mouse-behavior.tentative.html
@@ -10,7 +10,7 @@
 <script src="/resources/testdriver-actions.js"></script>
 
 <style>
-select {
+select, select::picker(select) {
   appearance: base-select;
 }
 </style>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-option-hover-styles.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-option-hover-styles.tentative.html
index 4361229b8f15df..42231b7900a9e4 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-option-hover-styles.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-option-hover-styles.tentative.html
@@ -12,10 +12,13 @@
   color: SelectedItemText;
   background-color: SelectedItem;
 }
+select, select::picker(select) {
+  appearance: base-select;
+}
 </style>
 <div id=selecteditem>SelectedItem test colors</div>
 
-<select style="appearance:base-select">
+<select>
   <option class=one>one</option>
   <option class=two>two</option>
   <option class=three disabled>disabled</option>
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 b315eb621559a1..b3381ac510a990 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
@@ -6,8 +6,14 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
 <form>
-  <select style="appearance:base-select">
+  <select>
     <button>
       <selectedoption></selectedoption>
     </button>