From b4c4542f5d6bf84d1f35a62513a9feaabe9fc570 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 20:04:40 +0200 Subject: [PATCH] Cover the timepicker's dial holding its size at a 20px root font size 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 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- tests/Browser/TimepickerTest.php | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/tests/Browser/TimepickerTest.php b/tests/Browser/TimepickerTest.php index 85edb8d9..81bedb4f 100644 --- a/tests/Browser/TimepickerTest.php +++ b/tests/Browser/TimepickerTest.php @@ -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"); +});