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

Cover the timepicker's dial holding its size at a 20px root font size

Browse Source 
Browser-test coverage the reviewer asked for on the step 36 batch: the
256px dial and the hour/minute boxes keep their pixel size at a 20px
root font size, while their (rem-sized) text grows and nothing spills
out of the dialog surface.

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-14 20:04:40 +02:00
co-authored by Claude Sonnet 5
parent 0b7dd7d46a
commit b4c4542f5d
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/TimepickerTest.php
+20
View File
@@ -399,3 +399,23 @@ it('lies the dial on its side in a short landscape window', function () {
})()
JS);
});
it('keeps the dial and the boxes their fixed pixel size at a 20px root font size, growing only their text', function () {
$dial = "document.querySelector('#meeting-dialog [data-md-timepicker-dial]')";
$hourBox = "document.querySelector('#meeting-dialog [data-md-timepicker-box=\"hour\"]')";
$surface = "document.querySelector('#meeting-dialog [data-md-timepicker-surface]')";
$dialWidth = "Math.round({$dial}.getBoundingClientRect().width)";
$font = "getComputedStyle({$hourBox}).fontSize";
$page = timeProbe()->click('#meeting');
$restingWidth = (int) $page->script($dialWidth);
$restingFont = $page->script($font);
$page->script("document.documentElement.style.fontSize = '20px'");
$page->assertScript("({$dialWidth}) === {$restingWidth}")
->assertScript("({$font}) !== '{$restingFont}'")
// The px-sized surface sets the dialog's size, not the (rem-sized) text now growing inside it.
->assertScript("{$surface}.scrollWidth <= {$surface}.clientWidth + 1 && {$surface}.scrollHeight <= {$surface}.clientHeight + 1");
});