Implement appearance:bikeshed for StylableSelect

This patch gates all the new rendering and interaction behavior for StylableSelect behind a new "bikeshed" value for the appearance property. No name has been decided for this property yet, hence the "bikeshed" name. The UA stylesheet will still only look at whether there is a slotted button or datalist present rather than the appearance property because looking at the appearance property to determine whether to apply UA style rules or not would cause circular style and would at least require two style updates in order to work, which is not acceptable. Bug: 1511354 Change-Id: I5f476f9a912aee7391dc4409473676de48c4028c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5315083 Reviewed-by: Mason Freed <masonf@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1269013}
BruceDai · Mar 25, 2024 · d18acb6 · d18acb6
1 parent be51ffc
commit d18acb6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/...ics/forms/the-select-element/select-child-button-and-datalist-invalidation.tentative.html b/...ics/forms/the-select-element/select-child-button-and-datalist-invalidation.tentative.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=match href="select-child-button-and-datalist-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <button type=popover>button</button>
+  <datalist>
+    <option>one</option>
+    <option>two</option>
+  </datalist>
+</select>
+
+<script>
+requestAnimationFrame(() => {
+  document.querySelector('select').style = 'appearance:bikeshed';
+  document.querySelector('button').click();
+  document.documentElement.classList.remove('reftest-wait');
+});
+</script>
diff --git a/html/semantics/forms/the-select-element/select-child-button-and-datalist.tentative.html b/html/semantics/forms/the-select-element/select-child-button-and-datalist.tentative.html
@@ -5,7 +5,7 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<select>
+<select style="appearance:bikeshed">
   <button type=popover>button</button>
   <datalist>
     <option>one</option>