Andreas Reinhold / reiniandClaude Opus 5
145f60aa11
tests / feature (8.4) (push) Successful in 1m51s
tests / feature (8.5) (push) Successful in 1m57s
tests / browser (chrome, chromium) (push) Successful in 7m45s
tests / browser (firefox, firefox) (push) Failing after 12m42s
tests / browser (safari, webkit) (push) Failing after 13m15s
The test that holds the dial to its pixel size at a 20px root font size read the dial's width straight after the click, so on a loaded machine it caught the dialog mid-entry: scale 0.95 of 256px rounds to 243, a number the stylesheet never sets. The assertion then compared the settled dial against that, and failed for the whole retry window. It now waits for the dialog's own animations to finish before taking the resting width, the way the sheet tests already wait. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
425 lines
21 KiB
PHP
425 lines
21 KiB
PHP
<?php
|
||
|
||
use Illuminate\Support\Facades\Blade;
|
||
use Illuminate\Support\Facades\Route;
|
||
use Livewire\Component;
|
||
use Livewire\Livewire;
|
||
|
||
class TimeProbe extends Component
|
||
{
|
||
public ?string $meeting = '09:30';
|
||
|
||
public ?string $alarm = null;
|
||
|
||
public ?string $appointment = '10:00';
|
||
|
||
public int $renders = 0;
|
||
|
||
public function touch(): void
|
||
{
|
||
$this->renders++;
|
||
}
|
||
|
||
public function render(): string
|
||
{
|
||
return <<<'BLADE'
|
||
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
|
||
<p>meeting: <span id="meeting-value">{{ $meeting ?? 'null' }}</span></p>
|
||
<p>alarm: <span id="alarm-value">{{ $alarm ?? 'null' }}</span></p>
|
||
<p>appointment: <span id="slot-value">{{ $appointment ?? 'null' }}</span></p>
|
||
<p>renders: <span id="renders">{{ $renders }}</span></p>
|
||
|
||
<x-timepicker id="meeting" label="Meeting" wire:model.live="meeting" format="12" />
|
||
<x-timepicker id="alarm" label="Alarm" wire:model.live="alarm" locale="de" />
|
||
<x-timepicker id="slot" label="Slot" wire:model.live="appointment" format="24" step="15" min="09:00" max="17:00" />
|
||
</div>
|
||
BLADE;
|
||
}
|
||
}
|
||
|
||
function timeProbe()
|
||
{
|
||
Livewire::component('time-probe', TimeProbe::class);
|
||
|
||
Route::middleware('web')->get('/time-probe', fn () => Blade::render(<<<'BLADE'
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<x-theme-script />
|
||
@vite(config('livewire-material.showcase.vite'))
|
||
@livewireStyles
|
||
</head>
|
||
<body style="background-color: var(--md-sys-color-surface);">
|
||
<livewire:time-probe />
|
||
@livewireScripts
|
||
</body>
|
||
</html>
|
||
BLADE));
|
||
|
||
return ready(visit('/time-probe'));
|
||
}
|
||
|
||
/** A JavaScript expression for an element inside the named picker's dialog. */
|
||
function inPicker(string $id, string $selector): string
|
||
{
|
||
return "document.querySelector('#{$id}-dialog {$selector}')";
|
||
}
|
||
|
||
/** A JavaScript expression for the text under a time field, without its word joiners. */
|
||
function supportText(string $id): string
|
||
{
|
||
return "document.querySelector('#{$id}-support').textContent.replaceAll('\\u2060', '')";
|
||
}
|
||
|
||
it('opens the dial on the hour, as the bound time says', function () {
|
||
timeProbe()
|
||
->assertValue('#meeting', '9:30 AM')
|
||
->click('#meeting')
|
||
->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->assertAttribute('#meeting', 'aria-expanded', 'true')
|
||
->assertSeeIn('#meeting-title', 'Select time')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-box="hour"]', 'aria-pressed', 'true')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '09')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="minute"]', '30')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="am"]', 'aria-checked', 'true')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuenow', '9')
|
||
->assertScript('document.activeElement === '.inPicker('meeting', '[data-md-timepicker-dial]'));
|
||
});
|
||
|
||
it('writes the hour and the minute pressed on the dial to Livewire on OK', function () {
|
||
$dial = inPicker('meeting', '[data-md-timepicker-dial]');
|
||
|
||
$page = timeProbe()
|
||
->click('#meeting')
|
||
->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="3"]')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '03')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-box="minute"]', 'aria-pressed', 'true')
|
||
// The selector turns to the value it chose: the handle ends over the number.
|
||
->assertScript(<<<JS
|
||
(() => {
|
||
const handle = {$dial}.querySelector('[data-md-timepicker-handle]').getBoundingClientRect();
|
||
const label = {$dial}.querySelector('[data-md-timepicker-label="minute"][data-md-value="30"]').getBoundingClientRect();
|
||
|
||
return Math.abs(handle.x - label.x) < 1 && Math.abs(handle.y - label.y) < 1;
|
||
})()
|
||
JS);
|
||
|
||
$page->click('#meeting-dialog [data-md-timepicker-label="minute"][data-md-value="45"]')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="minute"]', '45')
|
||
->assertSeeIn('#meeting-value', '09:30')
|
||
->click('#meeting-dialog [data-md-timepicker-confirm]')
|
||
->assertSeeIn('#meeting-value', '03:45')
|
||
->assertValue('#meeting', '3:45 AM')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertAttribute('#meeting', 'aria-expanded', 'false');
|
||
});
|
||
|
||
it('leaves the time alone when the picker is cancelled', function () {
|
||
timeProbe()
|
||
->click('#meeting')
|
||
->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="7"]')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '07')
|
||
->click('#meeting-dialog [data-md-timepicker-cancel]')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '09:30')
|
||
->assertValue('#meeting', '9:30 AM');
|
||
});
|
||
|
||
it('turns three o\'clock into 15 with PM', function () {
|
||
timeProbe()
|
||
->click('#meeting')
|
||
->click('#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="pm"]')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="pm"]', 'aria-checked', 'true')
|
||
->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="3"]')
|
||
->click('#meeting-dialog [data-md-timepicker-label="minute"][data-md-value="15"]')
|
||
->click('#meeting-dialog [data-md-timepicker-confirm]')
|
||
->assertSeeIn('#meeting-value', '15:15')
|
||
->assertValue('#meeting', '3:15 PM');
|
||
});
|
||
|
||
it('draws a German dial with 24 hours, 12 to 23 on the inner ring', function () {
|
||
$dial = inPicker('alarm', '[data-md-timepicker-dial]');
|
||
$radius = fn (string $value): string => <<<JS
|
||
(() => {
|
||
const dial = {$dial}.getBoundingClientRect();
|
||
const label = {$dial}.querySelector('[data-md-timepicker-label="hour24"][data-md-value="{$value}"]').getBoundingClientRect();
|
||
|
||
return Math.round(Math.hypot(label.x + label.width / 2 - dial.x - dial.width / 2, label.y + label.height / 2 - dial.y - dial.height / 2));
|
||
})()
|
||
JS;
|
||
|
||
$page = timeProbe()
|
||
->click('#alarm')
|
||
->assertAttribute('#alarm-dialog [data-md-timepicker-dial]', 'data-md-cycle', '24')
|
||
->assertScript("getComputedStyle(document.querySelector('#alarm-dialog [data-md-timepicker-period]')).display === 'none'")
|
||
->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"0\"]').textContent.trim() === '00'")
|
||
->assertScript($radius('0').' === 101')
|
||
->assertScript($radius('11').' === 101')
|
||
->assertScript($radius('12').' === 69')
|
||
->assertScript($radius('13').' === 69')
|
||
->assertScript($radius('23').' === 69');
|
||
|
||
$page->click('#alarm-dialog [data-md-timepicker-label="hour24"][data-md-value="15"]')
|
||
->assertSeeIn('#alarm-dialog [data-md-timepicker-box="hour"]', '15')
|
||
->assertAttribute('#alarm-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->click('#alarm-dialog [data-md-timepicker-label="minute"][data-md-value="0"]')
|
||
->click('#alarm-dialog [data-md-timepicker-confirm]')
|
||
->assertSeeIn('#alarm-value', '15:00')
|
||
->assertValue('#alarm', '15:00');
|
||
|
||
// The outer ring is the morning.
|
||
$page->click('#alarm')
|
||
->click('#alarm-dialog [data-md-timepicker-label="hour24"][data-md-value="3"]')
|
||
->assertSeeIn('#alarm-dialog [data-md-timepicker-box="hour"]', '03')
|
||
->click('#alarm-dialog [data-md-timepicker-label="minute"][data-md-value="0"]')
|
||
->click('#alarm-dialog [data-md-timepicker-confirm]')
|
||
->assertSeeIn('#alarm-value', '03:00');
|
||
});
|
||
|
||
it('follows a drag round the dial and settles on the nearest hour', function () {
|
||
$dial = inPicker('meeting', '[data-md-timepicker-dial]');
|
||
|
||
$page = timeProbe()->click('#meeting');
|
||
|
||
// Pointer events built in the page's own realm, from twelve o'clock round to just past four.
|
||
$send = fn (string $type, int $degrees): string => <<<JS
|
||
window.eval(`(() => {
|
||
const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]');
|
||
const box = dial.getBoundingClientRect();
|
||
const radians = {$degrees} * Math.PI / 180;
|
||
|
||
dial.dispatchEvent(new PointerEvent('{$type}', {
|
||
bubbles: true, cancelable: true, pointerId: 1, isPrimary: true, button: 0, buttons: 1,
|
||
clientX: box.x + box.width / 2 + Math.sin(radians) * 90,
|
||
clientY: box.y + box.height / 2 - Math.cos(radians) * 90,
|
||
}));
|
||
})()`)
|
||
JS;
|
||
|
||
$page->script($send('pointerdown', 0).';'.$send('pointermove', 20).';'.$send('pointermove', 60).';'.$send('pointermove', 125));
|
||
|
||
// While dragging, the handle stays under the pointer rather than on a number.
|
||
$page->assertScript("{$dial}.hasAttribute('data-md-dragging') && parseFloat(getComputedStyle({$dial}).getPropertyValue('--timepicker-angle')) % 360 === 125")
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '04');
|
||
|
||
$page->script($send('pointerup', 125));
|
||
|
||
$page->assertScript("! {$dial}.hasAttribute('data-md-dragging')")
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '04');
|
||
});
|
||
|
||
it('changes the focused hour and minute with the arrow keys and confirms with Enter', function () {
|
||
$page = timeProbe();
|
||
|
||
$page->script("document.querySelector('#meeting').focus()");
|
||
|
||
$page->keys('#meeting', 'Enter')
|
||
->assertScript('document.activeElement === '.inPicker('meeting', '[data-md-timepicker-dial]'))
|
||
->keys(':focus', 'ArrowUp')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuenow', '10')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '10')
|
||
// The keyboard never moves on to the minutes by itself.
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'hour');
|
||
|
||
$page->script(inPicker('meeting', '[data-md-timepicker-box="minute"]').'.focus()');
|
||
|
||
$page->keys(':focus', 'Enter')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute');
|
||
|
||
$page->script(inPicker('meeting', '[data-md-timepicker-dial]').'.focus()');
|
||
|
||
$page->keys(':focus', ['ArrowDown', 'ArrowLeft'])
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuenow', '28')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuetext', '28 minutes')
|
||
->keys(':focus', 'Enter')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '10:28');
|
||
});
|
||
|
||
it('takes a typed time in the input variant and says what is wrong with it', function () {
|
||
$page = timeProbe()
|
||
->click('#meeting')
|
||
->click('#meeting-dialog [data-md-timepicker-mode="input"]')
|
||
->assertSeeIn('#meeting-title', 'Enter time')
|
||
->assertScript("document.activeElement.id === 'meeting-hour'")
|
||
->assertValue('#meeting-hour', '09')
|
||
->assertValue('#meeting-minute', '30');
|
||
|
||
$page->type('#meeting-hour', '13')
|
||
->assertAttribute('#meeting-hour', 'aria-invalid', 'true')
|
||
// Word joiners keep the range on one line in the narrow column.
|
||
->assertScript(supportText('meeting-hour')." === 'Hour must be 1–12'")
|
||
->click('#meeting-dialog [data-md-timepicker-confirm]')
|
||
->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '09:30');
|
||
|
||
$page->clear('#meeting-hour')
|
||
->typeSlowly('#meeting-hour', '11', 20)
|
||
->assertScript("document.activeElement.id === 'meeting-minute'")
|
||
->assertScript(supportText('meeting-hour')." === 'Hour'")
|
||
->assertScript("! document.querySelector('#meeting-hour').hasAttribute('aria-invalid')");
|
||
|
||
$page->clear('#meeting-minute')
|
||
->typeSlowly('#meeting-minute', '75', 20)
|
||
->assertScript(supportText('meeting-minute')." === 'Minute must be 0–59'")
|
||
->clear('#meeting-minute')
|
||
->typeSlowly('#meeting-minute', '05', 20)
|
||
->keys('#meeting-minute', 'Enter')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '11:05');
|
||
});
|
||
|
||
it('keeps to the step and the limits', function () {
|
||
$dial = inPicker('slot', '[data-md-timepicker-dial]');
|
||
|
||
$page = timeProbe()
|
||
->click('#slot')
|
||
->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"8\"]').hasAttribute('data-md-disabled')")
|
||
->assertScript("! {$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"9\"]').hasAttribute('data-md-disabled')")
|
||
->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"18\"]').hasAttribute('data-md-disabled')")
|
||
// An hour outside the limits is not taken.
|
||
->click('#slot-dialog [data-md-timepicker-label="hour24"][data-md-value="20"]')
|
||
->assertSeeIn('#slot-dialog [data-md-timepicker-box="hour"]', '10')
|
||
->click('#slot-dialog [data-md-timepicker-label="hour24"][data-md-value="16"]')
|
||
->assertAttribute('#slot-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"minute\"][data-md-value=\"20\"]').hasAttribute('data-md-disabled')")
|
||
// A press between the steps lands on the nearest one.
|
||
->click('#slot-dialog [data-md-timepicker-label="minute"][data-md-value="20"]')
|
||
->assertSeeIn('#slot-dialog [data-md-timepicker-box="minute"]', '15');
|
||
|
||
$page->script("{$dial}.focus()");
|
||
|
||
$page->keys(':focus', 'ArrowUp')
|
||
->assertAttribute('#slot-dialog [data-md-timepicker-dial]', 'aria-valuenow', '30')
|
||
->click('#slot-dialog [data-md-timepicker-mode="input"]')
|
||
->type('#slot-hour', '18')
|
||
->assertSeeIn('#slot-dialog [data-md-timepicker-range-error]', 'Choose a time from 09:00 to 17:00')
|
||
->type('#slot-hour', '16')
|
||
->type('#slot-minute', '20')
|
||
->assertSeeIn('#slot-minute-support', 'Minute must be a multiple of 15')
|
||
->click('#slot-dialog [data-md-timepicker-confirm]')
|
||
->assertScript("document.activeElement.id === 'slot-minute'")
|
||
->type('#slot-minute', '45')
|
||
->click('#slot-dialog [data-md-timepicker-confirm]')
|
||
->assertSeeIn('#slot-value', '16:45');
|
||
});
|
||
|
||
it('gives focus back to the field on Escape', function () {
|
||
$page = timeProbe();
|
||
|
||
$page->script("document.querySelector('#meeting').focus()");
|
||
|
||
$page->keys('#meeting', 'Enter')
|
||
->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->keys(':focus', 'ArrowUp')
|
||
->keys(':focus', 'Escape')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertScript("document.activeElement.id === 'meeting'")
|
||
->assertSeeIn('#meeting-value', '09:30');
|
||
});
|
||
|
||
it('stays open with its draft through a Livewire render', function () {
|
||
$page = timeProbe()
|
||
->click('#meeting')
|
||
->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="5"]')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute');
|
||
|
||
$page->script('window.eval("Livewire.first().touch()")');
|
||
|
||
$page->assertSeeIn('#renders', '1')
|
||
->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '05')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->click('#meeting-dialog [data-md-timepicker-label="minute"][data-md-value="10"]')
|
||
->click('#meeting-dialog [data-md-timepicker-confirm]')
|
||
->assertSeeIn('#meeting-value', '05:10');
|
||
});
|
||
|
||
it('moves the period selector between AM and PM with arrow keys, as a radio group', function () {
|
||
$am = '#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="am"]';
|
||
$pm = '#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="pm"]';
|
||
|
||
$page = timeProbe()
|
||
->click('#meeting')
|
||
->assertAttribute($am, 'role', 'radio')
|
||
->assertAttribute($am, 'aria-checked', 'true')
|
||
->assertAttribute($pm, 'aria-checked', 'false')
|
||
// show() moves focus to the dial from inside Alpine's $nextTick, which Livewire's bundled
|
||
// Alpine defers with a real setTimeout(0) rather than a microtask: wait for the dialog to
|
||
// actually open before stealing focus onto the period selector, or .focus() below is a no-op
|
||
// on a still-closed <dialog> and the element beneath it keeps focus instead.
|
||
->wait(0.15)
|
||
->assertScript("document.querySelector('#meeting-dialog').open");
|
||
|
||
$page->script("document.querySelector('{$am}').focus()");
|
||
|
||
$page->keys(':focus', 'ArrowRight')
|
||
->assertAttribute($pm, 'aria-checked', 'true')
|
||
->assertAttribute($am, 'aria-checked', 'false')
|
||
->assertScript("document.activeElement.dataset.mdTimepickerPeriodOption === 'pm'")
|
||
// M3's radio-in-a-list: an arrow key moves to the other option and selects it, so PM
|
||
// reaches the dial straight away — the hour turns 9 into 21 without a confirm.
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '09');
|
||
|
||
$page->keys(':focus', 'ArrowLeft')
|
||
->assertAttribute($am, 'aria-checked', 'true')
|
||
->assertAttribute($pm, 'aria-checked', 'false')
|
||
->assertScript("document.activeElement.dataset.mdTimepickerPeriodOption === 'am'");
|
||
});
|
||
|
||
it('lies the dial on its side in a short landscape window', function () {
|
||
$page = timeProbe()
|
||
->resize(700, 400)
|
||
->click('#meeting')
|
||
->assertScript("document.querySelector('#meeting-dialog').open");
|
||
|
||
// Side by side rather than stacked: the display (216px wide) sits centred in the dial's row,
|
||
// inside its height, with the dial 36px after it, and the picker's own layout (flex column)
|
||
// gives way to the grid areas.
|
||
$page->assertScript(<<<'JS'
|
||
(() => {
|
||
const display = document.querySelector('#meeting-dialog [data-md-timepicker-display]').getBoundingClientRect();
|
||
const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]').getBoundingClientRect();
|
||
|
||
return display.top > dial.top && display.bottom < dial.bottom && Math.abs(dial.left - display.right - 36) < 1 && Math.round(display.width) === 216;
|
||
})()
|
||
JS)
|
||
->assertScript("getComputedStyle(document.querySelector('#meeting-dialog [data-md-timepicker-picker]')).display === 'contents'");
|
||
|
||
$page->resize(390, 800)
|
||
->assertScript(<<<'JS'
|
||
(() => {
|
||
const display = document.querySelector('#meeting-dialog [data-md-timepicker-display]').getBoundingClientRect();
|
||
const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]').getBoundingClientRect();
|
||
|
||
return dial.top >= display.bottom;
|
||
})()
|
||
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');
|
||
|
||
// After the dialog's entry, not during it: mid-scale the dial measures 0.95 of its own size,
|
||
// which would make the resting width this test compares against a number the CSS never sets.
|
||
$page->assertScript("document.querySelector('#meeting-dialog').getAnimations({ subtree: true }).length === 0");
|
||
|
||
$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");
|
||
});
|