commit e92eadabf55002c549e84f90d7af246f2299ffec parent ab7a3a3920f1185c328585a6bd01b0808cf4afcb Author: Joey Arhar <jarhar@chromium.org> Date: Wed, 7 Jan 2026 09:19:10 +0000 Bug 2008568 [wpt PR 56988] - Remove special layout code for customizable select, a=testonly Automatic update from web-platform-tests Remove special layout code for customizable select Now that we can control the rendering of everything in customizable select in the UA stylesheet with -internal-appearance-base-select(), we don't need code in layout to specially construct the layout tree anymore. This adds some logic to the UA stylesheet and removes everything in LayoutFlexibleBox::IsChildAllowed in the case that the CustomizableSelect flag is disabled. Bug: 364348901, 427778335 Fixed: 452087739 Change-Id: Ia18b10714cf437e971f7dc265565835a3fbf84e9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6208372 Reviewed-by: Kent Tamura <tkent@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1564394} -- wpt-commits: 93fc2439398d296fe7eebbe82e603ece4e03677e wpt-pr: 56988 Diffstat:
7 files changed, 154 insertions(+), 1 deletion(-)
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 @@ -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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex-ref.html b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-appearance-sizing-in-flex.html b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-display-block-ref.html b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-display-block.tentative.html b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after-ref.html b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-grid-before-after.html b/testing/web-platform/tests/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>