From acb7713bebb3bafe405f37d3502d6dbd615ccb1f Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Mon, 16 Dec 2024 22:48:02 +0000
Subject: [PATCH] Bug 1937242 [wpt PR 49688] - Move all customizable-<select>
 reference tests out of wpt_internal, a=testonly

Automatic update from web-platform-tests
Move all customizable-<select> reference tests out of wpt_internal

See conversations at:

https://github.com/web-platform-tests/rfcs/pull/211
https://github.com/web-platform-tests/wpt/issues/13183

As of today, this can land:

https://github.com/web-platform-tests/wpt/pull/48486

See, e.g.:

https://chromium-review.googlesource.com/c/chromium/src/+/6088404

Change-Id: I43ffb77f93f4fa28e7aaa65beea8780f52f87242
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6077774
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1396273}

--

wpt-commits: 2134b52a0ed40aeb768cd2c2856db9b4724527a7
wpt-pr: 49688
---
 .../border-rendering-ref.html                 |  12 +++
 .../border-rendering.tentative.html           |  15 +++
 .../native-popup-with-wrapper-div-ref.html    |  19 ++++
 ...tive-popup-with-wrapper-div.tentative.html |  25 +++++
 .../picker-and-slotted-ref.html               |  32 ++++++
 .../picker-and-slotted.tentative.html         |  41 +++++++
 .../resources/customizable-select-styles.css  |  82 ++++++++++++++
 .../resources/customizable-select-utils.js    |   8 ++
 .../resources/fallback-helper.js              | 102 ++++++++++++++++++
 .../select-appearance-active-ref.html         |  19 ++++
 .../select-appearance-active.tentative.html   |  30 ++++++
 .../select-appearance-button-ref.html         |  14 +++
 ...ct-appearance-custom-button.tentative.html |  27 +++++
 .../select-appearance-dark-mode-ref.html      |  20 ++++
 ...select-appearance-dark-mode.tentative.html |  30 ++++++
 ...t-appearance-default-button.tentative.html |  27 +++++
 ...select-appearance-disabled-option-ref.html |  14 +++
 ...-appearance-disabled-option.tentative.html |  27 +++++
 ...t-appearance-fallback-bottom-left-ref.html |  15 +++
 ...nce-fallback-bottom-left-scroller-ref.html |  17 +++
 ...llback-bottom-left-scroller.tentative.html |  13 +++
 ...arance-fallback-bottom-left.tentative.html |  14 +++
 ...-appearance-fallback-bottom-right-ref.html |  15 +++
 ...ce-fallback-bottom-right-scroller-ref.html |  18 ++++
 ...lback-bottom-right-scroller.tentative.html |  14 +++
 ...rance-fallback-bottom-right.tentative.html |  14 +++
 ...lect-appearance-fallback-top-left-ref.html |  15 +++
 ...arance-fallback-top-left-scroller-ref.html |  17 +++
 ...-fallback-top-left-scroller.tentative.html |  13 +++
 ...ppearance-fallback-top-left.tentative.html |  14 +++
 ...ect-appearance-fallback-top-right-ref.html |  15 +++
 ...rance-fallback-top-right-scroller-ref.html |  18 ++++
 ...fallback-top-right-scroller.tentative.html |  14 +++
 ...pearance-fallback-top-right.tentative.html |  14 +++
 ...select-appearance-font-inheriting-ref.html |  24 +++++
 ...-appearance-font-inheriting.tentative.html |  34 ++++++
 .../select-appearance-hover-ref.html          |  12 +++
 .../select-appearance-hover.tentative.html    |  29 +++++
 ...e-optgroup-legend-and-label.tentative.html |  30 ++++++
 ...select-appearance-optgroup-legend-ref.html |  17 +++
 ...-appearance-optgroup-legend.tentative.html |  30 ++++++
 ...ect-appearance-optgroup-rendering-ref.html |  33 ++++++
 ...pearance-optgroup-rendering.tentative.html |  36 +++++++
 ...ppearance-option-with-label.tentative.html |  27 +++++
 ...t-appearance-picker-select-border-ref.html |  19 ++++
 ...arance-picker-select-border.tentative.html |  29 +++++
 ...appearance-switching-invalidation-ref.html |  24 +++++
 ...ance-switching-invalidation.tentative.html |  37 +++++++
 ...pearance-writing-mode-vertical-lr-ref.html |  20 ++++
 ...ce-writing-mode-vertical-lr.tentative.html |  29 +++++
 ...pearance-writing-mode-vertical-rl-ref.html |  20 ++++
 ...ce-writing-mode-vertical-rl.tentative.html |  29 +++++
 ...rance-wrong-picker-argument.tentative.html |  29 +++++
 .../select-explicit-size-ref.tentative.html   |  17 +++
 .../select-explicit-size.tentative.html       |  17 +++
 .../select-font-size-ref.tentative.html       |  13 +++
 .../select-font-size.tentative.html           |  20 ++++
 .../select-icon-color-ref.html                |  12 +++
 .../select-icon-color.tentative.html          |  18 ++++
 .../select-only-button-opt-in.tentative.html  |  26 +++++
 .../select-only-picker-opt-in-ref.html        |  16 +++
 .../select-only-picker-opt-in.tentative.html  |  25 +++++
 .../select-open-invalidation-ref.html         |  20 ++++
 .../select-open-invalidation.tentative.html   |  38 +++++++
 .../select-option-images-ref.html             |  14 +++
 .../select-option-images.tentative.html       |  32 ++++++
 .../select-popover-exit-animation-ref.html    |  15 +++
 ...lect-popover-exit-animation.tentative.html |  40 +++++++
 .../select-second-child-button-ref.html       |  14 +++
 .../select-second-child-button.tentative.html |  27 +++++
 .../select-selected-value-behavior-ref.html   |  13 +++
 ...ect-selected-value-behavior.tentative.html |  14 +++
 .../select-text-only-ref.html                 |   7 ++
 .../select-text-only.tentative.html           |  15 +++
 74 files changed, 1705 insertions(+)
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-utils.js
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/fallback-helper.js
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-button-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-custom-button.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-default-button.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-option-with-label.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-lr-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-lr.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-rl-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-rl.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-wrong-picker-argument.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size-ref.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size-ref.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-button-opt-in.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-selected-value-behavior-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-selected-value-behavior.tentative.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only-ref.html
 create mode 100644 testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only.tentative.html

diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering-ref.html
new file mode 100644
index 0000000000000..2ecb3a06bfe85
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button>
+  <span class=customizable-select-selectedcontent>Option 1</span>
+</div>
+
+<style>
+.customizable-select-button {
+  border: 7px solid cornflowerblue;
+}
+</style>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering.tentative.html
new file mode 100644
index 0000000000000..c4025a153a63d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/border-rendering.tentative.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta name=fuzzy content="maxDifference=0-56;totalPixels=0-9">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=match href="border-rendering-ref.html">
+
+<style>
+select {
+  appearance: base-select;
+  border: 7px solid cornflowerblue;
+}
+</style>
+
+<select>
+  <option>Option 1</option>
+</select>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div-ref.html
new file mode 100644
index 0000000000000..6540e324b5d93
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <option>one</option>
+  <hr>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  document.activeElement.blur();
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div.tentative.html
new file mode 100644
index 0000000000000..608fbb86546ef
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/native-popup-with-wrapper-div.tentative.html
@@ -0,0 +1,25 @@
+<!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="native-popup-with-wrapper-div-ref.html">
+<link rel=assert title="The native popup of a select should show options descending from a wrapper div">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <div>
+    <option>one</option>
+    <hr>
+    <option>two</option>
+  </div>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  document.activeElement.blur();
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted-ref.html
new file mode 100644
index 0000000000000..8ae5c7978ddfe
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+select::picker(select) {
+  border: thick solid blue;
+  background: lime;
+  color: maroon;
+}
+</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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted.tentative.html
new file mode 100644
index 0000000000000..3e57757eb0100
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/picker-and-slotted.tentative.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=match href="picker-and-slotted-ref.html">
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<div id="host">
+  <select>
+    <option>one</option>
+    <option>two</option>
+  </select>
+</div>
+
+<script>
+
+let host = document.getElementById("host");
+let shadow = host.attachShadow({mode: "open"});
+shadow.innerHTML = `
+  <style>
+    #myslot::slotted(select), #myslot::slotted(select)::picker(select) {
+      appearance: base-select;
+    }
+    #myslot::slotted(select)::picker(select) {
+      border: thick solid blue;
+      background: lime;
+      color: maroon;
+    }
+  </style>
+  <slot id="myslot"></slot>
+`;
+
+
+(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/customizable-select/resources/customizable-select-styles.css b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
new file mode 100644
index 0000000000000..65b3c39019aec
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -0,0 +1,82 @@
+/* These are UA styles for select and customizable select. */
+/* TODO(crbug.com/41483940): These rules will probably change here:
+ * https://github.com/w3c/csswg-drafts/issues/10857 */
+
+.customizable-select-button, .customizable-select-popover {
+  box-sizing: border-box;
+}
+
+.customizable-select-popover {
+  box-sizing: border-box;
+  border: 1px solid;
+  padding: 0;
+  color: CanvasText;
+  background-color: Canvas;
+  margin: 0;
+  inset: auto;
+  min-inline-size: anchor-size(self-inline);
+  min-block-size: 1lh;
+  max-block-size: -webkit-fill-available; /* Can be removed when stretch ships */
+  max-block-size: stretch;
+  overflow: auto;
+  position-area: block-end span-inline-end;
+  position-try-order: most-block-size;
+  position-try-fallbacks:
+    block-start span-inline-end,
+    block-end span-inline-start,
+    block-start span-inline-start;
+}
+
+.customizable-select-option {
+  min-inline-size: 24px;
+  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 {
+  color: color-mix(in lab, currentColor 50%, transparent);
+}
+
+.customizable-select-option::before {
+  content: '\2713' / '';
+}
+.customizable-select-option:not(.selected)::before {
+  visibility: hidden;
+}
+
+.customizable-select-button {
+  color: inherit;
+  background-color: color-mix(in lab, currentColor 10%, transparent);
+  appearance: none;
+  padding-block: 0.25em;
+  padding-inline: 0.5em;
+  border: 1px solid currentColor;
+  border-radius: 0.25em;
+  cursor: default;
+  text-align: inherit;
+  /* TODO(crbug.com/41483940): Make display match the UA stylesheet. */
+  display: inline-flex;
+  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, 1lh);
+}
+
+.customizable-select-button::after {
+  content: counter(fake-counter-name, disclosure-open);
+}
+
+.customizable-select-legend {
+  font-weight: bolder;
+  padding-inline: 0.5em;
+  min-block-size: 1lh;
+}
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-utils.js b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-utils.js
new file mode 100644
index 0000000000000..ed3f9642a865f
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-utils.js
@@ -0,0 +1,8 @@
+function populateFallbackButtonIcon() {
+  document.querySelectorAll('.customizable-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/customizable-select/resources/fallback-helper.js b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/fallback-helper.js
new file mode 100644
index 0000000000000..d2b9343e8d3fc
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/resources/fallback-helper.js
@@ -0,0 +1,102 @@
+const testSelectOptionText = `Long options, wider than select`;
+const frameWidth = 500;
+const frameHeight = 300;
+
+async function createFrameWithContent(content) {
+  const frame = document.createElement('iframe');
+  frame.width = frameWidth;
+  frame.height = frameHeight;
+  frame.srcdoc = content;
+  const loaded = new Promise(resolve => frame.addEventListener('load',resolve));
+  document.body.appendChild(frame);
+  await loaded;
+  return frame.contentDocument;
+}
+
+async function wait2Frames(doc) {
+  await new Promise(resolve => doc.defaultView.requestAnimationFrame(resolve));
+  await new Promise(resolve => doc.defaultView.requestAnimationFrame(resolve));
+}
+
+async function scroll(doc,x,y) {
+  await wait2Frames(doc);
+  doc.defaultView.scrollTo({left: x, top: y, behavior: "instant"});
+  await wait2Frames(doc);
+}
+
+async function capture(doc) {
+  await wait2Frames(doc);
+  document.documentElement.classList.remove('reftest-wait');
+}
+
+const commonStyleBlock = `
+  html {
+    scrollbar-width: none;
+  }
+  body {
+    width: 2000px;
+    height: 2000px;
+    /* Workaround for crbug.com/364669904. Shouldn't negatively affect other
+       implementations or the validity of this test. */
+    background: white;
+  }
+  .select {
+    position: relative;
+    top: 1000px;
+    left: 600px;
+  }
+  .select,::picker(select) {
+    appearance:base-select;
+  }
+`;
+
+async function generateTestFrame(numOptions,initialx,initialy) {
+  const singleOption = `<option>${testSelectOptionText}</option>`
+  const options = Array(numOptions).fill(singleOption).join('\n');
+  const content = `
+    <!DOCTYPE html>
+    <head>
+      <style>
+        ${commonStyleBlock}
+      </style>
+    </head>
+
+    <select class="select">
+      <option value="" selected>Select</option>
+      ${options}
+    </select>
+  `;
+  const doc = await createFrameWithContent(content);
+
+  await scroll(doc,initialx,initialy);
+  await test_driver.bless();
+  doc.querySelector('select').showPicker();
+  await capture(doc);
+}
+
+async function generateReferenceFrame(numOptions,initialx,initialy,extraStyleRules) {
+  const singleOption = `<div tabindex=0 class="customizable-select-option">${testSelectOptionText}</div>`
+  const options = Array(numOptions).fill(singleOption).join('\n');
+  const content = `
+    <!DOCTYPE html>
+    <head>
+      <link rel=stylesheet href="resources/customizable-select-styles.css">
+      <style>
+        ${commonStyleBlock}
+        ${extraStyleRules}
+      </style>
+    </head>
+
+    <div class="select customizable-select-button" id=button style="anchor-name:--button">
+      <span class=customizable-select-selectedoption>Select</span>
+    </div>
+    <div id=popover popover=auto anchor=button class=customizable-select-popover style="position-anchor:--button">
+      <div tabindex=0 autofocus class="customizable-select-option selected">Select</div>
+      ${options}
+    </div>
+  `;
+  const doc = await createFrameWithContent(content);
+  await scroll(doc,initialx,initialy);
+  doc.getElementById('popover').showPopover();
+  await capture(doc);
+}
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html
new file mode 100644
index 0000000000000..9c62188a4934d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button 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>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html
new file mode 100644
index 0000000000000..3873969a2875d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-active.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-29;totalPixels=0-1">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10909">
+<link rel=match href="select-appearance-active-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>option</option>
+</select>
+
+<script>
+(async () => {
+  const select = document.querySelector('select');
+  await (new test_driver.Actions()
+    .pointerMove(1, 1, {origin: select})
+    .pointerDown())
+    .send();
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-button-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-button-ref.html
new file mode 100644
index 0000000000000..7b6a075237edd
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-button-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<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=customizable-select-option>two</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-custom-button.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-custom-button.tentative.html
new file mode 100644
index 0000000000000..89683d29f6ec0
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-custom-button.tentative.html
@@ -0,0 +1,27 @@
+<!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-button-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <button>one</button>
+  <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/customizable-select/select-appearance-dark-mode-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode-ref.html
new file mode 100644
index 0000000000000..9d80e27d86de9
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+:root {
+  color-scheme: dark;
+}
+</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=customizable-select-option>two</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
new file mode 100644
index 0000000000000..d2ea44a20e417
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-dark-mode.tentative.html
@@ -0,0 +1,30 @@
+<!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">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+:root {
+  color-scheme: dark;
+}
+select, select::picker(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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-default-button.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-default-button.tentative.html
new file mode 100644
index 0000000000000..f0e17ff349b2f
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-default-button.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-1">
+<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-button-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option-ref.html
new file mode 100644
index 0000000000000..0b59f2839b5cd
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div class="customizable-select-option selected">option</div>
+  <div class="customizable-select-option disabled">disabled option</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html
new file mode 100644
index 0000000000000..b4cd7ba67e031
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-option.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-37;totalPixels=0-1">
+<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-disabled-option-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>option</option>
+  <option disabled>disabled option</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/customizable-select/select-appearance-fallback-bottom-left-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-ref.html
new file mode 100644
index 0000000000000..fbc1b25e72bbf
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(5,200,1000,`
+    [popover] {
+      position-area: bottom span-left;
+      position-try: unset;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller-ref.html
new file mode 100644
index 0000000000000..687e64da292c8
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(15,200,1000,`
+    [popover] {
+      position-area: bottom span-left;
+      position-try: unset;
+      height: 100%;
+      overflow: auto;
+      align-self: stretch;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller.tentative.html
new file mode 100644
index 0000000000000..77f97efab212c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left-scroller.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-bottom-left-scroller-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+<body>
+<script>
+(async () => {
+  await generateTestFrame(15,200,1000);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left.tentative.html
new file mode 100644
index 0000000000000..c8fa2f60d24ac
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-left.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-bottom-left-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateTestFrame(5,200,1000);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-ref.html
new file mode 100644
index 0000000000000..ba9867ddd5167
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(5,600,1000,`
+    [popover] {
+      position-area: bottom span-right;
+      position-try: unset;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller-ref.html
new file mode 100644
index 0000000000000..97af58d6d38e5
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(15,600,1000,`
+    [popover] {
+      position-area: bottom span-right;
+      position-try: unset;
+      height: 100%;
+      overflow: auto;
+      align-self: stretch;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller.tentative.html
new file mode 100644
index 0000000000000..b7eefc25585e1
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right-scroller.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-bottom-right-scroller-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateTestFrame(15,600,1000);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right.tentative.html
new file mode 100644
index 0000000000000..9ce12bc20e744
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-bottom-right.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-bottom-right-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateTestFrame(5,600,1000);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-ref.html
new file mode 100644
index 0000000000000..e325f74ef99fe
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(5,200,800,`
+    [popover] {
+      position-area: top span-left;
+      position-try: unset;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller-ref.html
new file mode 100644
index 0000000000000..3822fb30f2824
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(15,200,800,`
+    [popover] {
+      position-area: top span-left;
+      position-try: unset;
+      height: 100%;
+      overflow: auto;
+      align-self: stretch;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller.tentative.html
new file mode 100644
index 0000000000000..3f8358f65405a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left-scroller.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-top-left-scroller-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+<body>
+<script>
+(async () => {
+  await generateTestFrame(15,200,800);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left.tentative.html
new file mode 100644
index 0000000000000..6e276aef8d2bc
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-left.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-top-left-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateTestFrame(5,200,800);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-ref.html
new file mode 100644
index 0000000000000..3b1260427f7e9
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(5,600,800,`
+    [popover] {
+      position-area: top span-right;
+      position-try: unset;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller-ref.html
new file mode 100644
index 0000000000000..548846160950a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateReferenceFrame(15,600,800,`
+    [popover] {
+      position-area: top span-right;
+      position-try: unset;
+      height: 100%;
+      overflow: auto;
+      align-self: stretch;
+    }
+  `);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller.tentative.html
new file mode 100644
index 0000000000000..4d04a7caa9c82
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right-scroller.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-top-right-scroller-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateTestFrame(15,600,800);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right.tentative.html
new file mode 100644
index 0000000000000..b0c4c510e7d0a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-fallback-top-right.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=match href="select-appearance-fallback-top-right-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/fallback-helper.js"></script>
+
+<body>
+<script>
+(async () => {
+  await generateTestFrame(5,600,800);
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
new file mode 100644
index 0000000000000..6321281fa8f71
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class="customizable-select-button open" 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=customizable-select-option>two</div>
+</div>
+
+<style>
+body {
+  font-style: italic !important;
+  font-weight: bold !important;
+  font-stretch: expanded !important;
+  font-size: 13px !important;
+  font-family: monospace !important;
+}
+</style>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
new file mode 100644
index 0000000000000..f90e7c8896f90
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-font-inheriting.tentative.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<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">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+body {
+  font-style: italic;
+  font-weight: bold;
+  font-stretch: expanded;
+  font-size: 13px;
+  font-family: monospace;
+}
+</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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html
new file mode 100644
index 0000000000000..fc658306da3d4
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button 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>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html
new file mode 100644
index 0000000000000..b5e24d07947c8
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-hover.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-33;totalPixels=0-1">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10909">
+<link rel=match href="select-appearance-hover-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>option</option>
+</select>
+
+<script>
+(async () => {
+  const select = document.querySelector('select');
+  await (new test_driver.Actions()
+    .pointerMove(1, 1, {origin: select}))
+    .send();
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label.tentative.html
new file mode 100644
index 0000000000000..666dde2f60e31
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label.tentative.html
@@ -0,0 +1,30 @@
+<!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=mismatch href="select-appearance-optgroup-legend-ref.html">
+<meta name=assert content="The label attribute should take precedence over the legend element">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <optgroup label=label>
+    <legend>legend</legend>
+    <option>two</option>
+  </optgroup>
+</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/customizable-select/select-appearance-optgroup-legend-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-ref.html
new file mode 100644
index 0000000000000..6d75f62efcd41
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<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=customizable-select-optgroup>
+    <div class=customizable-select-legend>legend</div>
+    <div class=customizable-select-option>two</div>
+  </div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend.tentative.html
new file mode 100644
index 0000000000000..6b973bc84ec7e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend.tentative.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-1">
+<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-optgroup-legend-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <optgroup>
+    <legend>legend</legend>
+    <option>two</option>
+  </optgroup>
+</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/customizable-select/select-appearance-optgroup-rendering-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering-ref.html
new file mode 100644
index 0000000000000..25bb73492a809
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+.border {
+  border: 2px solid green;
+}
+/* TODO(crbug.com/379886419): Remove these proprietary styles */
+.customizable-select-legend {
+  padding: 0px 2px 1px;
+  min-height: 1.2em;
+}
+</style>
+
+<div class=customizable-select-button 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=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>
+    </div>
+  </div>
+  <div class=customizable-select-option>four</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
+
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering.tentative.html
new file mode 100644
index 0000000000000..fd48e61731d32
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-rendering.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-1">
+<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-optgroup-rendering-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+div {
+  border: 2px solid green;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <optgroup label=labelattribute>
+    <option>two</option>
+    <div>
+      <option>three</option>
+    </div>
+  </optgroup>
+  <option>four</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/customizable-select/select-appearance-option-with-label.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-option-with-label.tentative.html
new file mode 100644
index 0000000000000..c5abc14c3860e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-option-with-label.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-1">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/openui/open-ui/issues/1115">
+<link rel=match href="select-appearance-button-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option label=one>text one</option>
+  <option label=two>text 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/customizable-select/select-appearance-picker-select-border-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border-ref.html
new file mode 100644
index 0000000000000..d09f9bc421669
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button id=button>
+  <span class=customizable-select-selectedcontent>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-popover {
+  border: 5px solid red;
+}
+</style>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html
new file mode 100644
index 0000000000000..c708af4db1f7b
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-picker-select-border.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-6">
+<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-picker-select-border-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+select::picker(select) {
+  border: 5px solid red;
+}
+</style>
+
+<select>
+  <option>option</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/customizable-select/select-appearance-switching-invalidation-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation-ref.html
new file mode 100644
index 0000000000000..293653055558e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+.blue {
+  color: blue;
+}
+</style>
+
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedoption>button</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div class="customizable-select-option selected">
+    <span class=blue>option</span> one
+  </div>
+  <div class=customizable-select-option>
+    <span class=blue>option</span> two
+  </div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html
new file mode 100644
index 0000000000000..fd67d013a5641
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-switching-invalidation.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-40;totalPixels=0-2">
+<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-switching-invalidation-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+.blue {
+  color: blue;
+}
+select.base, select.base::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <button>button</button>
+  <option>
+    <span class=blue>option</span> one
+  </option>
+  <option>
+    <span class=blue>option</span> two
+  </option>
+</select>
+
+<script>
+requestAnimationFrame(async () => {
+  await test_driver.bless();
+  const select = document.querySelector('select');
+  select.classList.add('base');
+  select.showPicker();
+  document.documentElement.classList.remove('reftest-wait');
+});
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-lr-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-lr-ref.html
new file mode 100644
index 0000000000000..2e36e0a6c8e53
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-lr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+html {
+  writing-mode: vertical-lr;
+}
+</style>
+
+<div class=customizable-select-button id=button>
+  <div class=customizable-select-selectedcontent>one</div>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div class="customizable-select-option selected">one</div>
+  <div class=customizable-select-option>two</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-lr.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-lr.tentative.html
new file mode 100644
index 0000000000000..4932ea37f7216
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-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, select::picker(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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-rl-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-rl-ref.html
new file mode 100644
index 0000000000000..e24aec5ad2303
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-rl-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+html {
+  writing-mode: vertical-rl;
+}
+</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=customizable-select-option>two</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-rl.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-writing-mode-vertical-rl.tentative.html
new file mode 100644
index 0000000000000..4b532a6f0257a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-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, select::picker(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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-wrong-picker-argument.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-wrong-picker-argument.tentative.html
new file mode 100644
index 0000000000000..a5ca3faea25dd
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-wrong-picker-argument.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/w3c/csswg-drafts/issues/10440">
+<link rel=mismatch href="select-appearance-button-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select {
+  appearance: base-select;
+}
+select::picker(foo) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size-ref.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size-ref.tentative.html
new file mode 100644
index 0000000000000..91066653a30c3
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size-ref.tentative.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+<div class="customizable-select-button open" style="anchor-name:--button" popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
+<div id=popover popover=auto style="position-anchor:--button" class=customizable-select-popover>
+  <div class="customizable-select-option selected">one</div>
+  <div class=customizable-select-option>two</div>
+</div>
+
+<style>
+  button {
+    width: 400px;
+    height: 50px;
+  }
+</style>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size.tentative.html
new file mode 100644
index 0000000000000..4fefc96c2be32
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-explicit-size.tentative.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!-- Tests that select respects explicit size -->
+<link rel=author href="mailto:pkotwicz@chromium.org">
+<link rel="match" href="select-explicit-size-ref.tentative.html">
+
+<style>
+select {
+  width:400px;
+  height:50px;
+}
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+<select>
+  <option>option</option>
+</select>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size-ref.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size-ref.tentative.html
new file mode 100644
index 0000000000000..eb7867b554ded
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size-ref.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+<div class="customizable-select-button open" style="anchor-name:--button" popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
+<div id=popover popover=auto style="position-anchor:--button" class=customizable-select-popover>
+</div>
+
+<style>
+  select {
+    font-size: 48px;
+  }
+</style>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size.tentative.html
new file mode 100644
index 0000000000000..3b6b65db071cf
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-font-size.tentative.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- Tests that select respects explicit size -->
+<link rel=author href="mailto:pkotwicz@chromium.org">
+<link rel="match" href="select-font-size-ref.tentative.html">
+
+<style>
+select {
+  font-size:48px;
+}
+</style>
+<select>
+  <option>option</option>
+</select>
+
+<style>
+  select, ::picker(select) {
+    appearance: base-select;
+  }
+</style>
+
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color-ref.html
new file mode 100644
index 0000000000000..b351c80c27394
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+.customizable-select-button::after {
+  color: red;
+}
+</style>
+
+<div class=customizable-select-button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color.tentative.html
new file mode 100644
index 0000000000000..59f015b86b4fa
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-icon-color.tentative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-6">
+<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::picker-icon {
+  color: red;
+}
+</style>
+
+<select>
+  <option>option</option>
+</select>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-button-opt-in.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-button-opt-in.tentative.html
new file mode 100644
index 0000000000000..b010d15e8adab
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-button-opt-in.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/w3c/csswg-drafts/issues/10440">
+<link rel=mismatch href="select-appearance-button-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in-ref.html
new file mode 100644
index 0000000000000..67a0abe43f2d1
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <option>option</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in.tentative.html
new file mode 100644
index 0000000000000..51cdabe18b466
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-only-picker-opt-in.tentative.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10440">
+<link rel=match href="select-only-picker-opt-in-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>option</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.click(document.querySelector('select'));
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation-ref.html
new file mode 100644
index 0000000000000..e0631712ef70e
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+.customizable-select-selectedoption {
+  color: green;
+}
+</style>
+
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedoption>button</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div tabindex=0 class="customizable-select-option selected">one</div>
+  <div class=customizable-select-option>two</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html
new file mode 100644
index 0000000000000..10a441703be9a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-open-invalidation.tentative.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-40;totalPixels=0-2">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=match href="select-open-invalidation-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select > button {
+  color: red;
+}
+select:open > button {
+  color: green;
+}
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <button>button</button>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.bless();
+  await new Promise(requestAnimationFrame);
+  try {
+    document.querySelector('select').showPicker();
+  } catch (error) {}
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images-ref.html
new file mode 100644
index 0000000000000..9c675e4f21018
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedoption>button</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div tabindex=0 class="customizable-select-option selected"><img alt="" src="/images/green-16x16.png">green-16x16</div>
+  <div tabindex=0 class=customizable-select-option><img alt="" src="/images/red-16x16.png">red-16x16</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html
new file mode 100644
index 0000000000000..b0c8f279b700d
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-option-images.tentative.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-40;totalPixels=0-2">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=match href="select-option-images-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+<select>
+  <button>button</button>
+<option><img alt="" src="/images/green-16x16.png">green-16x16</option>
+<option class=two><img alt="" src="/images/red-16x16.png">red-16x16</option>
+</select>
+
+<script>
+(async () => {
+  await test_driver.bless();
+  const select = document.querySelector('select');
+  select.showPicker();
+  // <img> elements should still be rendered after removing and re-appending
+  const option = document.querySelector('option.two');
+  option.remove();
+  select.appendChild(option);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation-ref.html
new file mode 100644
index 0000000000000..994d3a5fb2163
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div>hover target</div>
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div class="customizable-select-option selected">option</div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
+
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html
new file mode 100644
index 0000000000000..f047474d9b394
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-popover-exit-animation.tentative.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-6">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=match href="select-popover-exit-animation-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<div>hover target</div>
+<select>
+  <option>option</option>
+</select>
+
+<style>
+select,::picker(select) {
+  appearance: base-select;
+}
+select.animate::picker(select) {
+  transition: display 10000s allow-discrete, overlay 10000s allow-discrete;
+}
+</style>
+
+<script>
+(async () => {
+  const select = document.querySelector('select');
+  await test_driver.click(select);
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  select.classList.add('animate');
+  await test_driver.click(select);
+  select.blur();
+  await (new test_driver.Actions()
+    .pointerMove(1, 1, {origin: document.querySelector('div')}))
+    .send();
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button-ref.html
new file mode 100644
index 0000000000000..636d0514c454a
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
+<div id=popover popover=auto anchor=button class=customizable-select-popover>
+  <div class="customizable-select-option selected">option</div>
+  <button>button</button>
+</div>
+
+<script>
+document.getElementById('popover').showPopover();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html
new file mode 100644
index 0000000000000..ae216294ee547
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-second-child-button.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-37;totalPixels=0-1">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/pull/10629">
+<link rel=match href="select-second-child-button-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option>option</option>
+  <button>button</button>
+</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/customizable-select/select-selected-value-behavior-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-selected-value-behavior-ref.html
new file mode 100644
index 0000000000000..7260b24274365
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-selected-value-behavior-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+<div class="customizable-select-button open" style="anchor-name:--button" popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
+<div id=popover popover=auto style="position-anchor:--button" class=customizable-select-popover>
+</div>
+
+<style>
+  .customizable-select-selectedcontent {
+    color: blue;
+  }
+</style>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-selected-value-behavior.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-selected-value-behavior.tentative.html
new file mode 100644
index 0000000000000..a55fbce739357
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-selected-value-behavior.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=match href="select-selected-value-behavior-ref.html">
+
+<select>
+  <selectedcontent style="color:blue"></selectedcontent>
+  <option>option</option>
+</select>
+
+<style>
+  select, ::picker(select) {
+    appearance: base-select;
+  }
+</style>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only-ref.html
new file mode 100644
index 0000000000000..154fbad9ca3a4
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+<div class="customizable-select-button open" style="anchor-name:--button" popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
+<div id=popover popover=auto style="position-anchor:--button" class=customizable-select-popover>
+</div>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only.tentative.html
new file mode 100644
index 0000000000000..a27ef3d1636ad
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-text-only.tentative.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/openui/open-ui/issues/702">
+<link rel=match href="select-text-only-ref.html">
+
+<select>
+  text node
+  <option>option</option>
+</select>
+
+<style>
+  select, ::picker(select) {
+    appearance: base-select;
+  }
+</style>