Wait past LayoutTest's FAB spring before measuring, fix its safe-area math

Three FAB position tests chained ->assertScript() off a bare
$page->script(), which returns the script's value, not the page.
Fixing that surfaced a real settling issue: layoutPage() opens wider
than the 599/600px these tests probe before resize() narrows it, so
the FAB's inset-block-end (a spatial spring, scaffold.css) is still
animating in from the wider default margin when the page first
reports ready. Any baseline captured then is mid-flight, not the
resting value, so both tests now wait past the spring before taking
one. The safe-area test's inline-end (right) assertion also assumed
its margin and the safe area add together; the CSS is
max(margin, safe-right), an alternative to the margin, not additive
with it, unlike the bottom edge (plan step 36, navigation group).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 01:48:26 +02:00
co-authored by Claude Sonnet 5
parent 98f861c124
commit bc6a4d68c6
+24 -7
View File
@@ -462,11 +462,18 @@ it('drops the bar\'s own height from the FAB\'s offset once hide-bar-on-scroll s
</x-scaffold> </x-scaffold>
BLADE; BLADE;
$page = layoutPage($body, 599, 800); // The window opens wider than 599 before resize() narrows it (layoutPage()), so the FAB's own
// spatial-spring transition is still settling from the wider margin when the page first
// reports ready; wait it out before the baseline below or it captures a mid-flight value.
$page = layoutPage($body, 599, 800)->wait(0.6);
$shown = (int) $page->script(layoutRect(SCAFFOLD_FAB, 'bottom')); $shown = (int) $page->script(layoutRect(SCAFFOLD_FAB, 'bottom'));
$page->script('window.scrollTo(0, 400)') $page->script('window.scrollTo(0, 400)');
->assertScript("document.querySelector('[data-md-navigation-bar]').hasAttribute('data-md-hidden')")
$page->assertScript("document.querySelector('[data-md-navigation-bar]').hasAttribute('data-md-hidden')")
// The FAB's inset-block-end is a spatial spring (scaffold.css), so its move down is not
// done the instant the bar's data-md-hidden attribute flips; wait past it before measuring.
->wait(0.6)
// The bar's own 64px is what --material-bottom-bar drops once the bar has slid off, so the // The bar's own 64px is what --material-bottom-bar drops once the bar has slid off, so the
// FAB moves down by exactly that much (navigation-bar.css, layout/scaffold.css). // FAB moves down by exactly that much (navigation-bar.css, layout/scaffold.css).
->assertScript(layoutRect(SCAFFOLD_FAB, 'bottom')." === {$shown} + 64") ->assertScript(layoutRect(SCAFFOLD_FAB, 'bottom')." === {$shown} + 64")
@@ -487,14 +494,24 @@ it('clears a safe area an application sets on the FAB\'s inline-end and bottom e
</x-scaffold> </x-scaffold>
BLADE; BLADE;
$page = layoutPage($body, 599, 800); // The window opens wider than 599 before resize() narrows it (layoutPage()), so the FAB's
// margin (and with it inset-block-end, a spatial spring) is still settling from the wider
// default when the page first reports ready; wait it out before either baseline below.
$page = layoutPage($body, 599, 800)->wait(0.6);
$right = (int) $page->script('window.innerWidth - '.layoutRect(SCAFFOLD_FAB, 'right')); $right = (int) $page->script('window.innerWidth - '.layoutRect(SCAFFOLD_FAB, 'right'));
$bottom = (int) $page->script('window.innerHeight - '.layoutRect(SCAFFOLD_FAB, 'bottom')); $bottom = (int) $page->script('window.innerHeight - '.layoutRect(SCAFFOLD_FAB, 'bottom'));
$page->script("document.documentElement.style.setProperty('--material-safe-right', '20px')") // inset-inline-end (right) has no transition of its own, so this one applies at once. It is
->assertScript('window.innerWidth - '.layoutRect(SCAFFOLD_FAB, 'right')." === {$right} + 20"); // max(margin, safe-right) — an alternative to the margin, not additive with it — unlike the
// bottom edge below, which always adds its margin on top of the greater of the two.
$page->script("document.documentElement.style.setProperty('--material-safe-right', '20px')");
$page->script("document.documentElement.style.setProperty('--material-safe-bottom', '30px')") $page->assertScript('window.innerWidth - '.layoutRect(SCAFFOLD_FAB, 'right')." === Math.max({$right}, 20)");
// inset-block-end (bottom) is the spatial spring scaffold.css transitions; wait past it.
$page->script("document.documentElement.style.setProperty('--material-safe-bottom', '30px')");
$page->wait(0.6)
->assertScript('window.innerHeight - '.layoutRect(SCAFFOLD_FAB, 'bottom')." === {$bottom} + 30") ->assertScript('window.innerHeight - '.layoutRect(SCAFFOLD_FAB, 'bottom')." === {$bottom} + 30")
->assertNoJavaScriptErrors(); ->assertNoJavaScriptErrors();
}); });