Update customizable select UA styles
This patch updates the UA styles based on this demo:
https://codepen.io/argyleink/pen/VwoRQmz/b1cccf461547cb8bafa3d7f52d224234
Additional changes have been made in this thread. This patch brings the
UA stylesheet up to date with the proposed styles in the issue
descrioption:
https://github.com/w3c/csswg-drafts/issues/10857
Change-Id: I2f38a41b0c7baf6b8aeec21f52f9bf7fa473a364
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6024158
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1388280}
NOKEYCHECK=True
GitOrigin-RevId: 16966322ebe275a762b2e2beca91f7e14de045c1
diff --git a/blink/renderer/core/html/resources/customizable_select.css b/blink/renderer/core/html/resources/customizable_select.css
index 88b908e..5144a5b 100644
--- a/blink/renderer/core/html/resources/customizable_select.css
+++ b/blink/renderer/core/html/resources/customizable_select.css
@@ -13,7 +13,8 @@
color: -internal-appearance-auto-base-select(FieldText, inherit);
background-color: -internal-appearance-auto-base-select(Field, color-mix(in lab, currentColor 10%, transparent));
border: 1px solid -internal-appearance-auto-base-select(light-dark(#767676, #858585), currentColor);
- padding: -internal-appearance-auto-base-select(0, 0.25em);
+ padding-block: -internal-appearance-auto-base-select(0, 0.25em);
+ padding-inline: -internal-appearance-auto-base-select(0, 0.5em);
/* min-size rules ensure that we meet accessibility guidelines for minimum target size.
* https://github.com/openui/open-ui/issues/1026
@@ -22,9 +23,15 @@
* default select option rules at some point. This should be re-evaluated
* before StylableSelect is shipped. */
min-inline-size: -internal-appearance-auto-base-select(auto, 24px);
- /* The 1.2em here makes sure that options with no text still make the button
+ /* The 1lh here makes sure that options with no text still make the button
* have the same height as options with text. */
- min-block-size: -internal-appearance-auto-base-select(auto, max(24px, 1.2em));
+ min-block-size: -internal-appearance-auto-base-select(auto, max(24px, 1lh));
+
+ display: -internal-appearance-auto-base-select(inline-block, inline-flex);
+ gap: -internal-appearance-auto-base-select(initial, 0.5em);
+ border-radius: -internal-appearance-auto-base-select(0, 0.25em);
+
+ align-items: -internal-appearance-auto-base-select(center, unset);
}
select:not(:-internal-list-box) > button:first-child {
@@ -55,9 +62,8 @@
select:not(:-internal-list-box)::picker(select) {
box-sizing: border-box;
overflow: auto;
- border: solid;
- padding-block: 0.25em;
- padding-inline: 0;
+ border: 1px solid;
+ padding: 0;
color: CanvasText;
background-color: Canvas;
margin: 0;
@@ -99,9 +105,13 @@
* default select option rules at some point. This should be re-evaluted
* before CustomizableSelect is shipped. */
min-inline-size: 24px;
- min-block-size: max(24px, 1.2em);
- align-content: center;
+ min-block-size: max(24px, 1lh);
font-weight: -internal-appearance-auto-base-select(normal, inherit);
+ padding-inline: -internal-appearance-auto-base-select(2px, 0.5em);
+ padding-block-end: -internal-appearance-auto-base-select(1px, 0);
+ display: -internal-appearance-auto-base-select(block, flex);
+ place-items: center;
+ gap: 0.5em;
}
select:not(:-internal-list-box) option:enabled:hover {
@@ -146,26 +156,20 @@
}
select:not(-internal-list-box)::select-arrow {
+ content: -internal-appearance-auto-base-select(none, counter(fake-counter-name, disclosure-open));
/* We don't have to use -internal-appearance-auto-base-select() here because
* the pseudo-element won't get generated unless the content property is set. */
- padding-inline-start: 0.5em;
display: block;
-}
-select:not(:-internal-list-box)::select-arrow {
- content: -internal-appearance-auto-base-select(none, counter(fake-counter-name, disclosure-open));
+ margin-inline-start: auto;
}
-select:not(:-internal-list-box) optgroup {
- padding-inline: 2px;
-}
/* This can be merged with the :-internal-list-box rule in html.css */
select:not(:-internal-list-box) optgroup option {
- padding-inline-start: 20px;
+ padding-inline-start: -internal-appearance-auto-base-select(20px, 0.5em);
font-weight: normal;
}
-/* These styles are copied from optgroup's label attribute inline style properties */
select:not(:-internal-list-box) optgroup legend {
- padding: 0 2px 1px 2px;
- min-height: 1.2em;
+ padding-inline: -internal-appearance-auto-base-select(2px, 0.5em);
+ min-block-size: -internal-appearance-auto-base-select(initial, 1lh);
}
diff --git a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
index aaccf75..6b96aac 100644
--- a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
+++ b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -8,9 +8,7 @@
.customizable-select-popover {
overflow: auto;
- border: solid;
- padding-block: 0.25em;
- padding-inline: 0;
+ border: 1px solid;
color: CanvasText;
background-color: Canvas;
margin: 0;
@@ -19,19 +17,18 @@
min-block-size: 1lh;
inset-block-start: anchor(self-end);
inset-inline-start: anchor(self-start);
+ padding: 0;
}
-/* These are the UA styles for <option> in chromium.
- * They will either have to be specced or also added to the main test file.
- * TODO(crbug.com/1511354): Spec these UA styles. */
.customizable-select-option {
- padding-inline: 2px;
- padding-block-start: 0;
- padding-block-end: 1px;
- white-space: nowrap;
min-inline-size: 24px;
- min-block-size: max(24px, 1.2em);
- align-content: center;
+ min-block-size: max(24px, 1lh);
+ padding-inline: 0.5em;
+ padding-block-end: 0;
+ display: flex;
+ place-items: center;
+ gap: 0.5em;
+ white-space: nowrap;
}
.customizable-select-option.disabled {
@@ -49,25 +46,30 @@
color: inherit;
background-color: color-mix(in lab, currentColor 10%, transparent);
appearance: none;
- padding: 0.25em;
+ padding-block: 0.25em;
+ padding-inline: 0.5em;
border: 1px solid currentColor;
+ border-radius: 0.25em;
cursor: default;
text-align: inherit;
/* TODO(crbug.com/1511354): Make display match the UA stylesheet. */
display: inline-flex;
- flex-grow: 1;
- flex-shrink: 1;
- align-items: center;
+ gap: 0.5em;
overflow-x: hidden;
overflow-y: hidden;
/* min-size rules ensure that we meet accessibility guidelines for minimum target size.
* https://github.com/openui/open-ui/issues/1026
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
min-inline-size: 24px;
- min-block-size: max(24px, 1.2em);
+ min-block-size: max(24px, 1lh);
}
.customizable-select-button::after {
- padding-inline-start: 0.5em;
content: counter(fake-counter-name, disclosure-open);
}
+
+.customizable-select-legend {
+ font-weight: bolder;
+ padding-inline: 0.5em;
+ min-block-size: 1lh;
+}
diff --git a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
index 69803f7..d2ea44a 100644
--- a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
+++ b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-12">
<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/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
index fbedf09..6321281 100644
--- a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
+++ b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
@@ -10,7 +10,7 @@
</div>
<style>
-* {
+body {
font-style: italic !important;
font-weight: bold !important;
font-stretch: expanded !important;
diff --git a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
index 7d03ce1..f90e7c8 100644
--- a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
+++ b/blink/web_tests/wpt_internal/html/semantics/forms/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-21;totalPixels=0-8">
+<meta name=fuzzy content="maxDifference=0-50;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/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-ref.html b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-ref.html
index bd100ec..6d75f62 100644
--- a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-ref.html
+++ b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-ref.html
@@ -1,27 +1,13 @@
<!DOCTYPE html>
<link rel=stylesheet href="resources/customizable-select-styles.css">
-<style>
-.optgroup {
- padding-inline: 2px;
-}
-.legend {
- padding: 0 2px 1px;
- min-height: 1.2em;
- font-weight: bolder;
-}
-.optgroup .customizable-select-option {
- padding-inline-start: 20px;
-}
-</style>
-
<div class=customizable-select-button popovertarget=popover id=button>
<span class=customizable-select-selectedcontent>one</span>
</div>
<div id=popover popover=auto anchor=button class=customizable-select-popover>
<div class="customizable-select-option selected">one</div>
- <div class=optgroup>
- <div class=legend>legend</div>
+ <div class=customizable-select-optgroup>
+ <div class=customizable-select-legend>legend</div>
<div class=customizable-select-option>two</div>
</div>
</div>
diff --git a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering-ref.html b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering-ref.html
index 8e2c836..25bb734 100644
--- a/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering-ref.html
+++ b/blink/web_tests/wpt_internal/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering-ref.html
@@ -5,16 +5,10 @@
.border {
border: 2px solid green;
}
-.optgroup {
- padding-inline: 2px;
-}
-.optgroup-label {
- padding: 0 2px 1px;
+/* TODO(crbug.com/379886419): Remove these proprietary styles */
+.customizable-select-legend {
+ padding: 0px 2px 1px;
min-height: 1.2em;
- font-weight: bolder;
-}
-.optgroup .customizable-select-option {
- padding-inline-start: 20px;
}
</style>
@@ -23,8 +17,8 @@
</div>
<div id=popover popover=auto anchor=button class=customizable-select-popover>
<div class="customizable-select-option selected">one</div>
- <div class=optgroup>
- <div class=optgroup-label>labelattribute</div>
+ <div class=customizable-select-optgroup>
+ <div class=customizable-select-legend>labelattribute</div>
<div class=customizable-select-option>two</div>
<div class=border>
<div class=customizable-select-option>three</div>
