commit 042787b793b235f060eebefbca151fc1acf462ca parent be60c7db493783f90952e2662d2b1d3d3792d46e Author: Emilio Cobos Álvarez <emilio@crisal.io> Date: Sun, 4 Jan 2026 11:31:17 +0000 Bug 2007620 - Make listbox options take their min-content width. r=jwatt This fixes the rendering here by making sure the background covers the whole text. We don't allow them to wrap so this seems simple enough. Differential Revision: https://phabricator.services.mozilla.com/D277705 Diffstat:
| M | layout/style/res/forms.css | | | 1 | + |
| A | testing/web-platform/tests/html/semantics/forms/the-select-element/select-listbox-selected-hscroll.html | | | 26 | ++++++++++++++++++++++++++ |
2 files changed, 27 insertions(+), 0 deletions(-)
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css @@ -300,6 +300,7 @@ option { will-change: -moz-fixed-pos-containing-block !important; min-block-size: 1em; + min-inline-size: min-content; padding-block: 2px; user-select: none; /* diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/select-listbox-selected-hscroll.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-listbox-selected-hscroll.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<title>Listbox selected option should be visible after horizontal scroll</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2007620"> +<link rel="mismatch" href="/css/reference/blank.html"> +<style> +#s { + box-sizing: content-box; + width: 1ch; + font: monospace; + overflow: scroll; + outline: none; + border: none; + scrollbar-width: none; +} +</style> +<select id="s" size="2"> + <option selected>AAAAA</option> +</select> +<script> + s.focus(); + s.scrollLeft = 100000; +</script>