diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
index 5ee317d61a9fad..7eed2ea351a6b2 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
@@ -51,10 +51,6 @@
}
.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;
@@ -65,6 +61,11 @@
min-inline-size: 1.2em;
max-inline-size: 1.2em;
display: block;
+
+ color: light-dark(black, white);
+ stroke: currentColor;
+ stroke-width: 3;
+ stroke-linejoin: round;
}
.stylable-select-selectedoption {
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
new file mode 100644
index 00000000000000..38e93459161422
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
@@ -0,0 +1,8 @@
+function populateFallbackButtonIcon() {
+ document.querySelectorAll('.stylable-select-button-icon').forEach(element => {
+ element.innerHTML =
+ `<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M4 6 L10 12 L 16 6"></path>
+ </svg>`;
+ });
+}
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html
new file mode 100644
index 00000000000000..d4d4da5d48bd31
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
+
+<style>
+:root {
+ color-scheme: dark;
+}
+</style>
+
+<div id=container class=stylable-select-container>
+ <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>
+ </div>
+</div>
+
+<script>
+populateFallbackButtonIcon();
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html
new file mode 100644
index 00000000000000..a121b0b864b7b0
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-dark-mode.tentative.html
@@ -0,0 +1,26 @@
+<!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-dark-mode-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+:root {
+ color-scheme: dark;
+}
+</style>
+
+<select style="appearance:base-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/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
index 3c6e9416b06aeb..79f1d662c57a94 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
<div id=container class=stylable-select-container>
<button class=stylable-select-button popovertarget=popover id=button>
@@ -13,5 +14,6 @@
</div>
<script>
+populateFallbackButtonIcon();
document.getElementById('popover').showPopover();
</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
index 8b7e6402fb8d26..9f1976ba04112d 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
<style>
html {
@@ -19,5 +20,6 @@
</div>
<script>
+populateFallbackButtonIcon();
document.getElementById('popover').showPopover();
</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
index 158807ba58fdf1..3e67e99436f7ae 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
<style>
html {
@@ -19,5 +20,6 @@
</div>
<script>
+populateFallbackButtonIcon();
document.getElementById('popover').showPopover();
</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
new file mode 100644
index 00000000000000..575b42a200e382
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/stylable-select-styles.css">
+<script src="resources/stylable-select-utils.js"></script>
+
+<style>
+.stylable-select-button-icon svg {
+ stroke: red !important;
+}
+</style>
+
+<div class=stylable-select-container>
+ <button class=stylable-select-button popovertarget=popover id=button>
+ <span class=stylable-select-selectedoption>option</span>
+ <div class=stylable-select-button-icon></div>
+ </button>
+</div>
+
+<script>
+populateFallbackButtonIcon();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html
new file mode 100644
index 00000000000000..13026cd5f8c4ae
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/openui/open-ui/issues/881">
+<link rel=match href="select-icon-color-ref.html">
+
+<style>
+select {
+ appearance: base-select;
+}
+select::select-fallback-button-icon {
+ stroke: red;
+}
+</style>
+
+<select>
+ <option>option</option>
+</select>