Open the M3 select picker only where the browser has base-select

The browser test asserted CSS.supports('appearance', 'base-select') as a
precondition, so it failed in Firefox, which has no customizable select.
menu.css styles the picker only inside @supports (appearance: base-select),
and the native picker is the intended fallback there; the test now checks
that fallback where the property is missing and the M3 menu where it is.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-16 12:13:32 +02:00
co-authored by Claude Opus 5
parent f2a3c4d056
commit 59a24f6c11
+11 -5
View File
@@ -148,11 +148,17 @@ it('opens the customizable select picker as M3\'s menu, where the browser suppor
$select = "document.querySelector('#hours-field')";
$option = "{$select}.querySelector('option')";
$page = fieldProbe()
// menu.css only styles the picker inside @supports (appearance: base-select), so this
// also confirms the browser running the suite actually has it.
->assertScript("CSS.supports('appearance', 'base-select') === true")
->assertScript("getComputedStyle({$select}).appearance === 'base-select'");
$page = fieldProbe();
// menu.css only styles the picker inside @supports (appearance: base-select). A browser without
// it (Firefox) keeps its own native picker, which is the fallback, and there is no M3 menu to open.
if ($page->script("CSS.supports('appearance', 'base-select')") !== true) {
$page->assertScript("getComputedStyle({$select}).appearance !== 'base-select'");
return;
}
$page->assertScript("getComputedStyle({$select}).appearance === 'base-select'");
$page->click('#hours-field')
->assertScript("{$select}.matches(':open')")