diff --git a/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
index 427ffe3e93d487..90ecced4f1ca28 100644
--- a/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
+++ b/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -60,7 +60,6 @@
   border-radius: 0.5em;
   cursor: default;
   text-align: inherit;
-  /* TODO(crbug.com/41483940): Make display match the UA stylesheet. */
   display: inline-flex;
   gap: 0.5em;
   overflow-x: hidden;
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex-ref.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex-ref.html
index 66b27ea686ef28..c7f900e67591b1 100644
--- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex-ref.html
+++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex-ref.html
@@ -13,6 +13,10 @@
   select {
     appearance: base-select;
   }
+
+  ::picker-icon {
+    display: none;
+  }
 </style>
 
 <div class="container">
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex.html
index 563cf72b5f3e76..94e9ad3c22e61d 100644
--- a/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex.html
+++ b/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex.html
@@ -20,6 +20,13 @@
   select, .after {
     white-space: nowrap;
   }
+
+  /* ::picker-icon will render inline in this test but on a new line in the
+   * reference because the select's inner element is display:block and can't be
+   * changed. */
+  ::picker-icon {
+    display: none;
+  }
 </style>
 
 <div class="container">
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-display-block-ref.html b/html/semantics/forms/the-select-element/customizable-select/select-display-block-ref.html
new file mode 100644
index 00000000000000..c02e2898cb1d1e
--- /dev/null
+++ b/html/semantics/forms/the-select-element/customizable-select/select-display-block-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<style>
+.customizable-select-button {
+  display: block;
+  width: 100px;
+}
+.customizable-select-button::after {
+  display: block;
+}
+</style>
+
+<div class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>one</span>
+</div>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-display-block.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-display-block.tentative.html
new file mode 100644
index 00000000000000..a29d54d00cf14f
--- /dev/null
+++ b/html/semantics/forms/the-select-element/customizable-select/select-display-block.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta name=fuzzy content="maxDifference=0-3;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-display-block-ref.html">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+select {
+  width: 100px;
+}
+.block {
+  display: block;
+}
+</style>
+
+<select>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+(async () => {
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  document.querySelector('select').classList.add('block');
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  document.documentElement.classList.remove('reftest-wait');
+})();
+</script>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after-ref.html b/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after-ref.html
new file mode 100644
index 00000000000000..e3ed37c6a48274
--- /dev/null
+++ b/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+<style>
+  div {
+    display: inline-grid;
+    width: 200px;
+    height: 200px;
+    box-sizing: border-box;
+    vertical-align: top;
+    place-items: center;
+    background: orange;
+    padding: 8px;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+
+    &::before {
+      content: 'before';
+      grid-row: 1;
+      grid-column: 1;
+      background: yellow;
+      padding: 8px;
+    }
+
+    &::after {
+      content: 'after';
+      grid-row: 2;
+      grid-column: 2;
+      background: yellow;
+      padding: 8px;
+    }
+  }
+</style>
+
+<div>
+  <template shadowrootmode="open">
+    <div></div>
+  </template>
+</div>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after.html b/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after.html
new file mode 100644
index 00000000000000..a9ce9661680f92
--- /dev/null
+++ b/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://issues.chromium.org/issues/452087739">
+<link rel=match href="select-grid-before-after-ref.html">
+
+<style>
+  select {
+    appearance: base-select;
+
+    &::picker-icon {
+      display: none;
+    }
+  }
+
+  select {
+    display: inline-grid;
+    width: 200px;
+    height: 200px;
+    box-sizing: border-box;
+    vertical-align: top;
+    place-items: center;
+    background: orange;
+    padding: 8px;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+
+    &::before {
+      content: 'before';
+      grid-row: 1;
+      grid-column: 1;
+      background: yellow;
+      padding: 8px;
+    }
+
+    &::after {
+      content: 'after';
+      grid-row: 2;
+      grid-column: 2;
+      background: yellow;
+      padding: 8px;
+    }
+  }
+</style>
+
+<select></select>
