Bug 1937928 [wpt PR 49746] - Update customizable select styles, a=tes…

…tonly Automatic update from web-platform-tests Update customizable select styles This patch updates background-color and border-radius to the latest proposal here: w3c/csswg-drafts#10857 Change-Id: Icc6ec70d27cc9f1131f5e164b1db66e63e8847fb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6072270 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Mason Freed <[email protected]> Auto-Submit: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1397608} -- wpt-commits: 441d9bfafda626484b081e3cd4964489e9608ca2 wpt-pr: 49746
i3roly · Dec 20, 2024 · f567d92 · f567d92
1 parent 89a2582
commit f567d92
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 26 deletions.
diff --git a/...ics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/...ics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -51,12 +51,12 @@
 
 .customizable-select-button {
   color: inherit;
-  background-color: color-mix(in lab, currentColor 10%, transparent);
+  background-color: transparent;
   appearance: none;
   padding-block: 0.25em;
   padding-inline: 0.5em;
   border: 1px solid currentColor;
-  border-radius: 0.25em;
+  border-radius: 0.5em;
   cursor: default;
   text-align: inherit;
   /* TODO(crbug.com/41483940): Make display match the UA stylesheet. */
@@ -71,6 +71,14 @@
   min-block-size: max(24px, 1lh);
 }
 
+.customizable-select-button.hover {
+  background-color: color-mix(in lab, currentColor 10%, transparent);
+}
+
+.customizable-select-button.active {
+  background-color: color-mix(in lab, currentColor 20%, transparent);
+}
+
 .customizable-select-button::after {
   content: counter(fake-counter-name, disclosure-open);
 }

diff --git a/.../semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html b/.../semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html
@@ -1,19 +1,13 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/customizable-select-styles.css">
 
-<div class=customizable-select-button popovertarget=popover id=button>
+<div class="customizable-select-button active" popovertarget=popover id=button>
   <span class=customizable-select-selectedoption>option</span>
 </div>
 <div id=popover popover=auto anchor=button class=customizable-select-popover>
   <div class="customizable-select-option selected">option</div>
 </div>
 
-<style>
-.customizable-select-button {
-  background-color: color-mix(in lab, currentColor 30%, transparent);
-}
-</style>
-
 <script>
 document.getElementById('popover').showPopover();
 </script>
diff --git a/...tics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html b/...tics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-29;totalPixels=0-1">
+<meta name=fuzzy content="maxDifference=0-33;totalPixels=0-1">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/10909">
 <link rel=match href="select-appearance-active-ref.html">

diff --git a/...s/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html b/...s/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-12">
+<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-15">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-appearance-dark-mode-ref.html">

diff --git a/...s/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html b/...s/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-37;totalPixels=0-1">
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-1">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-appearance-disabled-option-ref.html">

diff --git a/...s/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html b/...s/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-50;totalPixels=0-8">
+<meta name=fuzzy content="maxDifference=0-55;totalPixels=0-8">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-appearance-font-inheriting-ref.html">

diff --git a/...l/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html b/...l/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html
@@ -1,12 +1,6 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/customizable-select-styles.css">
 
-<div class=customizable-select-button popovertarget=popover id=button>
+<div class="customizable-select-button hover" popovertarget=popover id=button>
   <span class=customizable-select-selectedoption>option</span>
 </div>
-
-<style>
-.customizable-select-button {
-  background-color: color-mix(in lab, currentColor 20%, transparent);
-}
-</style>
diff --git a/...ntics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html b/...ntics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-33;totalPixels=0-1">
+<meta name=fuzzy content="maxDifference=0-37;totalPixels=0-1">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/10909">
 <link rel=match href="select-appearance-hover-ref.html">

diff --git a/...elect-element/customizable-select/select-appearance-switching-invalidation.tentative.html b/...elect-element/customizable-select/select-appearance-switching-invalidation.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-40;totalPixels=0-2">
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-2">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-appearance-switching-invalidation-ref.html">

diff --git a/...mantics/forms/the-select-element/customizable-select/select-mouse-behavior.tentative.html b/...mantics/forms/the-select-element/customizable-select/select-mouse-behavior.tentative.html
@@ -15,6 +15,8 @@
 }
 </style>
 
+<div id=lightdismiss>light dismiss</div>
+
 <label for=custombutton>custom button</label>
 <select id=custombutton>
   <button>button</button>
@@ -29,6 +31,15 @@
 </select>
 
 <script>
+function touch(element) {
+  return (new test_driver.Actions()
+    .addPointer('finger', 'touch')
+    .pointerMove(1, 1, {origin: element})
+    .pointerDown()
+    .pointerUp())
+    .send();
+}
+
 for (const id of ['fallbackbutton', 'custombutton']) {
   const select = document.getElementById(id);
   const optionOne = select.querySelector('option.one');
@@ -79,5 +90,26 @@
     assert_false(select.matches(':open'),
       'select picker should be closed after clicking the label.');
   }, `${id}: Clicking the label should focus the select button without opening the picker.`);
+
+  promise_test(async () => {
+    select.value = 'one';
+    await touch(select);
+    assert_true(select.matches(':open'),
+      'Select should open after touching button.');
+
+    await touch(optionTwo);
+    assert_equals(select.value, 'two',
+      'select.value should be updated after touching another option.');
+    assert_false(select.matches(':open'),
+      'Picker should close after touching an option.');
+
+    await touch(select);
+    assert_true(select.matches(':open'),
+      'Select should re-open after touching button.');
+
+    await touch(document.getElementById('lightdismiss'));
+    assert_false(select.matches(':open'),
+      'Select should close via light dismiss when touching outside the picker.');
+  }, `${id}: Touch input should work the same as mouse input.`);
 }
 </script>
diff --git a/...tics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html b/...tics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-40;totalPixels=0-2">
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-2">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-open-invalidation-ref.html">

diff --git a/...cs/forms/the-select-element/customizable-select/select-option-hover-styles.tentative.html b/...cs/forms/the-select-element/customizable-select/select-option-hover-styles.tentative.html
@@ -37,7 +37,7 @@
   await new Promise(requestAnimationFrame);
   assert_equals(getComputedStyle(optionOne).color, 'rgb(0, 0, 0)',
     'Option color while hovering.');
-  assert_equals(getComputedStyle(optionOne).backgroundColor, 'lab(0 0 0 / 0.2)',
+  assert_equals(getComputedStyle(optionOne).backgroundColor, 'lab(0 0 0 / 0.1)',
     'Option background-color while hovering.');
 
   await (new test_driver.Actions()

diff --git a/...emantics/forms/the-select-element/customizable-select/select-option-images.tentative.html b/...emantics/forms/the-select-element/customizable-select/select-option-images.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-40;totalPixels=0-2">
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-2">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-option-images-ref.html">

diff --git a/...cs/forms/the-select-element/customizable-select/select-second-child-button.tentative.html b/...cs/forms/the-select-element/customizable-select/select-second-child-button.tentative.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class=reftest-wait>
-<meta name=fuzzy content="maxDifference=0-37;totalPixels=0-1">
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-1">
 <link rel=author href="mailto:[email protected]">
 <link rel=help href="https://github.com/whatwg/html/pull/10629">
 <link rel=match href="select-second-child-button-ref.html">