Add content to appearance:base-select fallback button
This patch adds extra content and styling to the fallback button in the
UA shadowroot of <select> which gets rendered when it is
appearance:base-select and the author does not provide a <button>
element to replace it with.
In order to do this, this patch also adds 3 pseudo-elements to the
<select> element:
- ::select-fallback-button which targets the fallback <button>
- ::select-fallback-button-icon which targets the <div> inside the
fallback <button> which renders an svg as its background-image
- ::select-fallback-selectedoption which targets the <span> inside the
fallback <button> which gets the selected <option>'s text content
copied into it.
The CSS and contents are all exactly the same as they are in
<selectlist>. <selectlist> also has the same pseudo elements.
This patch also changes some tests to inherit from PageTestBase. Adding
the svg background-image caused a scheduling crash in v8 with something
about microtask queues. I don't know what PageTestBase does differently
from these tests which are making their own TaskEnvironment, but
PageTestBase does it in a way which doesn't make the test crash.
Bug: 1511354
Change-Id: Iaf362dd1253f4dd9e5984cc3301c31e9e9ae558c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5464171
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1295509}
diff --git a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
index ed57266..5ee317d 100644
--- a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
+++ b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
@@ -11,7 +11,8 @@
overflow: auto;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25em;
- padding: 0.25em 0;
+ padding-block: 0.25em;
+ padding-inline: 0;
background-color: Field;
margin: 0;
inset: auto;
@@ -32,3 +33,46 @@
padding: 0px 2px 1px;
white-space: nowrap;
}
+
+.stylable-select-button {
+ color: FieldText;
+ background-color: Field;
+ appearance: none;
+ padding: 0.25em;
+ border: 1px solid ButtonBorder;
+ cursor: default;
+ text-align: inherit;
+ display: inline-flex;
+ flex-grow: 1;
+ flex-shrink: 1;
+ align-items: center;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+.stylable-select-button-icon {
+ background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%206%20L10%2012%20L%2016%206%22%20stroke%3D%22WindowText%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
+ background-origin: content-box;
+ background-repeat: no-repeat;
+ background-size: contain;
+ opacity: 1;
+ outline: none;
+ margin-inline-start: 0.25em;
+ padding-block: 2px;
+ padding-inline: 3px;
+ block-size: 1.0em;
+ inline-size: 1.2em;
+ min-inline-size: 1.2em;
+ max-inline-size: 1.2em;
+ display: block;
+}
+
+.stylable-select-selectedoption {
+ color: inherit;
+ min-inline-size: 0px;
+ max-block-size: 100%;
+ flex-grow: 1;
+ flex-shrink: 1;
+ overflow: hidden;
+ display: inline;
+}
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html
similarity index 87%
rename from html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
rename to html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html
index 8e5eada..10c966a 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html
@@ -2,7 +2,7 @@
<link rel=stylesheet href="resources/stylable-select-styles.css">
<div id=container class=stylable-select-container>
- <button popovertarget=popover id=button>one</button>
+ <button>one</button>
<div id=popover popover=auto anchor=container class=stylable-select-datalist>
<div class=stylable-select-option>one</div>
<div class=stylable-select-option>two</div>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html
index 94d7fd5..aaceabc 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html
@@ -2,8 +2,7 @@
<html class=reftest-wait>
<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-no-button-custom-datalist-ref.html">
-<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css">
+<link rel=match href="select-appearance-custom-button-no-datalist-ref.html">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html
index 87425cf..cc8a4c6 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html
@@ -2,8 +2,7 @@
<html class=reftest-wait>
<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-no-button-custom-datalist-ref.html">
-<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css">
+<link rel=match href="select-appearance-no-button-no-datalist-ref.html">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
similarity index 67%
copy from html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
copy to html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
index 8e5eada..3c6e941 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
@@ -2,7 +2,10 @@
<link rel=stylesheet href="resources/stylable-select-styles.css">
<div id=container class=stylable-select-container>
- <button popovertarget=popover id=button>one</button>
+ <button class=stylable-select-button popovertarget=popover id=button>
+ <span class=stylable-select-selectedoption>one</span>
+ <div class=stylable-select-button-icon></div>
+ </button>
<div id=popover popover=auto anchor=container class=stylable-select-datalist>
<div class=stylable-select-option>one</div>
<div class=stylable-select-option>two</div>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html
index b2a6b5a..29261b7 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html
@@ -2,8 +2,7 @@
<html class=reftest-wait>
<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-no-button-custom-datalist-ref.html">
-<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css">
+<link rel=match href="select-appearance-no-button-no-datalist-ref.html">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
similarity index 61%
copy from html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
copy to html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
index 8e5eada..8b7e640 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
@@ -1,8 +1,17 @@
<!DOCTYPE html>
<link rel=stylesheet href="resources/stylable-select-styles.css">
+<style>
+html {
+ writing-mode: vertical-lr;
+}
+</style>
+
<div id=container class=stylable-select-container>
- <button popovertarget=popover id=button>one</button>
+ <button class=stylable-select-button popovertarget=popover id=button>
+ <span class=stylable-select-selectedoption>one</span>
+ <div class=stylable-select-button-icon></div>
+ </button>
<div id=popover popover=auto anchor=container class=stylable-select-datalist>
<div class=stylable-select-option>one</div>
<div class=stylable-select-option>two</div>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html
new file mode 100644
index 0000000..2f8a6aa
--- /dev/null
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<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-writing-mode-vertical-lr-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+html {
+ writing-mode: vertical-lr;
+}
+select {
+ appearance: base-select;
+}
+</style>
+
+<select>
+ <option>one</option>
+ <option>two</option>
+</select>
+
+<script>
+(async () => {
+ await test_driver.bless();
+ document.querySelector('select').showPicker();
+ document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
similarity index 61%
copy from html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
copy to html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
index 8e5eada..158807b 100644
--- a/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
@@ -1,8 +1,17 @@
<!DOCTYPE html>
<link rel=stylesheet href="resources/stylable-select-styles.css">
+<style>
+html {
+ writing-mode: vertical-rl;
+}
+</style>
+
<div id=container class=stylable-select-container>
- <button popovertarget=popover id=button>one</button>
+ <button class=stylable-select-button popovertarget=popover id=button>
+ <span class=stylable-select-selectedoption>one</span>
+ <div class=stylable-select-button-icon></div>
+ </button>
<div id=popover popover=auto anchor=container class=stylable-select-datalist>
<div class=stylable-select-option>one</div>
<div class=stylable-select-option>two</div>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html
new file mode 100644
index 0000000..c2ea647
--- /dev/null
+++ b/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<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-writing-mode-vertical-rl-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+html {
+ writing-mode: vertical-rl;
+}
+select {
+ appearance: base-select;
+}
+</style>
+
+<select>
+ <option>one</option>
+ <option>two</option>
+</select>
+
+<script>
+(async () => {
+ await test_driver.bless();
+ document.querySelector('select').showPicker();
+ document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
