noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Measure the error shape's laid-out width, not its turning bounding rect

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-16 12:16:35 +02:00
co-authored by Claude Opus 5
parent 59a24f6c11
commit d2245ad122
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ErrorPagesTest.php
+3 -1
View File
@@ -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. // 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("getComputedStyle(document.querySelector('[data-md-error-page]')).display === 'flex'")
->assertScript("Math.round(document.querySelector('[data-md-error-art]').getBoundingClientRect().width) === 240") ->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; })()") ->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. // 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'") ->assertScript("getComputedStyle(document.querySelector('[data-md-button]')).borderRadius !== '0px'")