From d2245ad122aaeb5dc861b73a8832710c33222967 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Wed, 16 Sep 2026 12:16:17 +0200 Subject: [PATCH] Measure the error shape's laid-out width, not its turning bounding rect The error page's shape turns once a minute (material-error-turn), and getBoundingClientRect() returns the axis-aligned box of what is drawn, which is wider than the 240px art box as soon as the turn has begun. The browser test compared that rect with 240: Chrome sampled it before the first frame of the animation (currentTime 0) and passed, while Firefox (33ms, 240.83px) and Safari (4ms, 240.20px) had already turned a fraction of a degree and failed. The layout itself was right in all three: the SVG's computed width is 240px. The test now reads the SVG's computed width, which the rotation does not touch. It still guards the regression it was written for: with the inlined layout rules removed, the SVG computes to 1280px in every engine. Co-Authored-By: Claude Opus 5 (1M context) --- tests/Browser/ErrorPagesTest.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/Browser/ErrorPagesTest.php b/tests/Browser/ErrorPagesTest.php index 2e964900..186a19b8 100644 --- a/tests/Browser/ErrorPagesTest.php +++ b/tests/Browser/ErrorPagesTest.php @@ -136,7 +136,9 @@ it('draws the layout from its own inlined rules under a build that never imports // The layout: a centred column, the art at its 240px from medium, not a shape filling the window. ->assertScript("getComputedStyle(document.querySelector('[data-md-error-page]')).display === 'flex'") ->assertScript("Math.round(document.querySelector('[data-md-error-art]').getBoundingClientRect().width) === 240") - ->assertScript("document.querySelector('[data-md-error-shape] svg').getBoundingClientRect().width <= 240") + // The shape's laid-out width, not its bounding rect: the shape turns once a minute, and a + // rotated box's axis-aligned rect is wider than the box as soon as the turn has begun. + ->assertScript("parseFloat(getComputedStyle(document.querySelector('[data-md-error-shape] svg')).width) <= 240") ->assertScript("(() => { const r = document.querySelector('[data-md-error-headline]').getBoundingClientRect(); return Math.abs((r.left + r.right) / 2 - window.innerWidth / 2) <= 2; })()") // The button and shape rules the layout imports, and the scheme from the application's build. ->assertScript("getComputedStyle(document.querySelector('[data-md-button]')).borderRadius !== '0px'")