Skip to content

Commit

Permalink
Update customizable select styles
Browse files Browse the repository at this point in the history 
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}
  • Loading branch information
@josepharhar @chromium-wpt-export-bot
josepharhar authored and chromium-wpt-export-bot committed Dec 17, 2024
1 parent a0020c1 commit 441d9bf
Show file tree
Hide file tree
Showing 13 changed files with 22 additions and 26 deletions.
12 changes: 10 additions & 2 deletions ...ics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand All @@ -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);
}
Expand Down
8 changes: 1 addition & 7 deletions .../semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion ...tics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ...s/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ...s/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ...s/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
8 changes: 1 addition & 7 deletions html/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html
View file
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion ...ntics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ...elect-element/customizable-select/select-appearance-switching-invalidation.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ...tics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ...cs/forms/the-select-element/customizable-select/select-option-hover-styles.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
2 changes: 1 addition & 1 deletion ...emantics/forms/the-select-element/customizable-select/select-option-images.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ...cs/forms/the-select-element/customizable-select/select-second-child-button.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down

0 comments on commit 441d9bf

Please sign in to comment.