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')"; $select = "document.querySelector('#hours-field')";
$option = "{$select}.querySelector('option')"; $option = "{$select}.querySelector('option')";
$page = fieldProbe() $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. // menu.css only styles the picker inside @supports (appearance: base-select). A browser without
->assertScript("CSS.supports('appearance', 'base-select') === true") // it (Firefox) keeps its own native picker, which is the fallback, and there is no M3 menu to open.
->assertScript("getComputedStyle({$select}).appearance === 'base-select'"); 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') $page->click('#hours-field')
->assertScript("{$select}.matches(':open')") ->assertScript("{$select}.matches(':open')")