From 441d9bfafda626484b081e3cd4964489e9608ca2 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 17 Dec 2024 15:21:52 -0800 Subject: [PATCH] Update customizable select styles This patch updates background-color and border-radius to the latest proposal here: https://github.com/w3c/csswg-drafts/issues/10857 Change-Id: Icc6ec70d27cc9f1131f5e164b1db66e63e8847fb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6072270 Commit-Queue: Joey Arhar Reviewed-by: Mason Freed Auto-Submit: Joey Arhar Cr-Commit-Position: refs/heads/main@{#1397608} --- .../resources/customizable-select-styles.css | 12 ++++++++++-- .../select-appearance-active-ref.html | 8 +------- .../select-appearance-active.tentative.html | 2 +- .../select-appearance-dark-mode.tentative.html | 2 +- .../select-appearance-disabled-option.tentative.html | 2 +- .../select-appearance-font-inheriting.tentative.html | 2 +- .../select-appearance-hover-ref.html | 8 +------- .../select-appearance-hover.tentative.html | 2 +- ...-appearance-switching-invalidation.tentative.html | 2 +- .../select-open-invalidation.tentative.html | 2 +- .../select-option-hover-styles.tentative.html | 2 +- .../select-option-images.tentative.html | 2 +- .../select-second-child-button.tentative.html | 2 +- 13 files changed, 22 insertions(+), 26 deletions(-) diff --git a/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css index 65b3c39019aec0..ac6d403cca2f00 100644 --- a/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css +++ b/html/semantics/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/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html index 9c62188a4934de..879138cf6f13a4 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html @@ -1,19 +1,13 @@ -
+
option
option
- - diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html index 3873969a2875d6..1efbed1a57585c 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html @@ -1,6 +1,6 @@ - + diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html index d2ea44a20e417d..57622ad7feed88 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html @@ -1,6 +1,6 @@ - + diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html index b4cd7ba67e031b..cfc87b506864ad 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html @@ -1,6 +1,6 @@ - + diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html index f90e7c8896f90d..972b6d5dac047e 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html @@ -1,6 +1,6 @@ - + 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 index fc658306da3d4f..8aef34cc3f36e3 100644 --- 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 @@ -
+
option
- - diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html index b5e24d07947c89..ec1a84d9042dcb 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html @@ -1,6 +1,6 @@ - + diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html index fd67d013a56413..d02c2a52314165 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html @@ -1,6 +1,6 @@ - + diff --git a/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html index 10a441703be9ad..9fe59fb1f664e9 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html @@ -1,6 +1,6 @@ - + diff --git a/html/semantics/forms/the-select-element/customizable-select/select-option-hover-styles.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-option-hover-styles.tentative.html index 48b1a56071ecad..0df62f0810ef0b 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-option-hover-styles.tentative.html +++ b/html/semantics/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/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html index b0c8f279b700d9..34678a0ae79c3d 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html @@ -1,6 +1,6 @@ - + diff --git a/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html index ae216294ee5473..4affdee231cde9 100644 --- a/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html +++ b/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html @@ -1,6 +1,6 @@ - +