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:
co-authored by
Claude Opus 5
parent
f2a3c4d056
commit
59a24f6c11
@@ -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')")
|
||||
|
||||
Reference in New Issue
Block a user