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 <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Auto-Submit: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1397608}
web-platform-tests · Dec 17, 2024 · 89dd48f · 89dd48f
1 parent 343a084
commit 89dd48f
Show file tree

Hide file tree

Showing 13 changed files with 22 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:jarhar@chromium.org">
 <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:jarhar@chromium.org">
 <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:jarhar@chromium.org">
 <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:jarhar@chromium.org">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-appearance-font-inheriting-ref.html">

diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html b/html/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:jarhar@chromium.org">
 <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:jarhar@chromium.org">
 <link rel=help href="https://github.com/whatwg/html/issues/9799">
 <link rel=match href="select-appearance-switching-invalidation-ref.html">

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:jarhar@chromium.org">
 <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:jarhar@chromium.org">
 <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:jarhar@chromium.org">
 <link rel=help href="https://github.com/whatwg/html/pull/10629">
 <link rel=match href="select-second-child-button-ref.html">