commit 4dcb6f068fa5ad5289013a81dbcfc59b421f1191 parent 7fa9b2a851f818bc569055a3539a8daec1fdf3ad Author: Joey Arhar <jarhar@chromium.org> Date: Tue, 14 Oct 2025 22:23:25 +0000 Bug 1992323 [wpt PR 55201] - Use calc() to size base appearance listbox, a=testonly Automatic update from web-platform-tests Use calc() to size base appearance listbox This patch uses calc() and attr() to implement something like intrinsic sizing based on the select element's size attribute, as described here: https://github.com/w3c/csswg-drafts/issues/12510#issuecomment-3314016143 Bug: 357649033 Fixed: 448877675 Change-Id: Ie4b2e0ee5572c8774819f208c4cb6cc8f7945fb3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7001761 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1525826} -- wpt-commits: a2942134c85aa2057d4d9de1b95eccaa3a6171e3 wpt-pr: 55201 Diffstat:
3 files changed, 72 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select-in-page/customizable-select-in-page-sizing-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select-in-page/customizable-select-in-page-sizing-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel=stylesheet href="resources/customizable-select-in-page.css"> +<link rel=stylesheet href="../customizable-select/resources/customizable-select-styles.css"> + +<style> +#size4 { + height: calc(24px * 4); +} +#size2 { + height: calc(24px * 2); +} +#big2 { + font-size: 26px; + height: 2lh; +} +</style> + +<div class=customizable-select-in-page id=size4> + <div class="customizable-select-option selected">one</div> + <div class=customizable-select-option>two</div> + <div class=customizable-select-option>three</div> + <div class=customizable-select-option>four</div> +</div> + +<div class=customizable-select-in-page id=size2> + <div class="customizable-select-option selected">one</div> + <div class=customizable-select-option>two</div> + <div class=customizable-select-option>three</div> + <div class=customizable-select-option>four</div> +</div> + +<div class=customizable-select-in-page id=big2> + <div class="customizable-select-option selected">big one</div> + <div class=customizable-select-option>big two</div> + <div class=customizable-select-option>big three</div> + <div class=customizable-select-option>big four</div> +</div> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select-in-page/customizable-select-in-page-sizing.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select-in-page/customizable-select-in-page-sizing.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/12510#issuecomment-3361831625"> +<link rel=match href="customizable-select-in-page-sizing-ref.html"> + +<style> +select { + appearance: base-select; +} +#big { + font-size: 26px; +} +</style> + +<select multiple> + <option selected>one</option> + <option>two</option> + <option>three</option> + <option>four</option> +</select> + +<select size=2> + <option selected>one</option> + <option>two</option> + <option>three</option> + <option>four</option> +</select> + +<select size=2 id=big> + <option selected>big one</option> + <option>big two</option> + <option>big three</option> + <option>big four</option> +</select> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select-in-page/resources/customizable-select-in-page.css b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select-in-page/resources/customizable-select-in-page.css @@ -3,6 +3,7 @@ overflow-inline: auto; overflow-block: auto; border: 1px solid; + block-size: calc(max(24px, 1lh) * attr(size type(<integer>), 4)); } .customizable-select-in-page.disabled {