Andreas Reinhold / reiniandClaude Opus 5
1ccf0b639e
Giving a closing standard sheet its room back made the root's inline size a transition, with an `@starting-style` for the entry, so a sheet that starts open grew in on every page load: its open state arrives through Alpine, after the first paint of the closed root. Nothing should move while a page loads. The view now marks the root `data-md-drawer-settled` two frames after the first `settle()` — once the state Alpine starts with has been painted — and drawer.css gives the standard sheet's root and sheet no transitions until then. The browser test loads a page with slowed motion tokens and a sheet that starts open, and finds it standing at its full width, shown, with nothing animating; closing it afterwards still animates. It fails without the change in Chrome and Firefox and passes in all three engines. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1226 lines
55 KiB
PHP
1226 lines
55 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\Blade;
|
|
use Illuminate\Support\Facades\Route;
|
|
use Livewire\Component;
|
|
use Livewire\Livewire;
|
|
|
|
class OverlayProbe extends Component
|
|
{
|
|
public bool $confirming = false;
|
|
|
|
public ?int $deletingId = null;
|
|
|
|
public int $renders = 0;
|
|
|
|
public function touch(): void
|
|
{
|
|
$this->renders++;
|
|
}
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div style="display: flex; flex-direction: column; gap: var(--md-sys-measurement-space200); padding: var(--md-sys-measurement-space200);">
|
|
<p>confirming: <span id="confirming">{{ var_export($confirming, true) }}</span></p>
|
|
<p>deleting: <span id="deleting">{{ var_export($deletingId, true) }}</span></p>
|
|
<p>renders: <span id="renders">{{ $renders }}</span></p>
|
|
|
|
<x-button label="Confirm" wire:click="$set('confirming', true)" />
|
|
<x-button label="Delete 7" wire:click="$set('deletingId', 7)" />
|
|
|
|
<x-modal wire:model="confirming" title="Are you sure?">
|
|
<x-slot:actions>
|
|
<x-button label="Re-render" wire:click="touch" />
|
|
</x-slot:actions>
|
|
</x-modal>
|
|
|
|
<x-modal wire:model="deletingId" title="Delete share?" />
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
class CollapseProbe extends Component
|
|
{
|
|
public bool $fineTuning = false;
|
|
|
|
public int $renders = 0;
|
|
|
|
public function touch(): void
|
|
{
|
|
$this->renders++;
|
|
}
|
|
|
|
public function expand(): void
|
|
{
|
|
$this->fineTuning = true;
|
|
}
|
|
|
|
public function collapse(): void
|
|
{
|
|
$this->fineTuning = false;
|
|
}
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div style="display: flex; flex-direction: column; gap: var(--md-sys-measurement-space200); padding: var(--md-sys-measurement-space200);">
|
|
<p>fine tuning: <span id="fine-tuning">{{ var_export($fineTuning, true) }}</span></p>
|
|
<p>renders: <span id="renders">{{ $renders }}</span></p>
|
|
|
|
<x-button label="Re-render" wire:click="touch" />
|
|
<x-button label="Open from the server" wire:click="expand" />
|
|
<x-button label="Close from the server" wire:click="collapse" />
|
|
|
|
<x-collapse id="fine-tuning-collapse" title="Fine-tuning" wire:model="fineTuning">Zones and paces.</x-collapse>
|
|
|
|
<div x-data="{ advanced: false }">
|
|
<p>advanced: <span id="advanced" x-text="advanced"></span></p>
|
|
<x-button label="Close from Alpine" x-on:click="advanced = false" />
|
|
<x-collapse id="advanced-collapse" title="Advanced" x-model="advanced">Everything else.</x-collapse>
|
|
</div>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
function collapseProbe()
|
|
{
|
|
Livewire::component('collapse-probe', CollapseProbe::class);
|
|
|
|
Route::middleware('web')->get('/collapse-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:collapse-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/collapse-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
function overlayProbe()
|
|
{
|
|
Livewire::component('overlay-probe', OverlayProbe::class);
|
|
|
|
Route::middleware('web')->get('/overlay-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:overlay-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/overlay-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
function containment()
|
|
{
|
|
return visit('/material/containment')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('writes back what closed means: false for a flag, null for an id', function () {
|
|
$page = overlayProbe();
|
|
|
|
$page->click('button:has-text("Confirm")')
|
|
->assertScript("[...document.querySelectorAll('dialog')].some((d) => d.open && d.textContent.includes('Are you sure?'))");
|
|
|
|
$page->click('dialog[open] button:has-text("Re-render")')
|
|
->assertSeeIn('#renders', '1')
|
|
->assertScript("[...document.querySelectorAll('dialog')].some((d) => d.open && d.textContent.includes('Are you sure?'))");
|
|
|
|
$page->keys('dialog[open] button:has-text("Re-render")', 'Escape')
|
|
->assertScript("! [...document.querySelectorAll('dialog')].some((d) => d.open)")
|
|
->assertSeeIn('#confirming', 'false');
|
|
|
|
$page->click('button:has-text("Delete 7")')
|
|
->assertSeeIn('#deleting', '7')
|
|
->assertScript("[...document.querySelectorAll('dialog')].some((d) => d.open && d.textContent.includes('Delete share?'))");
|
|
|
|
$page->script("document.querySelector('dialog[open]').dispatchEvent(new Event('cancel', { cancelable: true }))");
|
|
|
|
$page->assertSeeIn('#deleting', 'NULL');
|
|
});
|
|
|
|
it('closes a showcase dialog on Escape and gives focus back to its trigger', function () {
|
|
// Opened from the keyboard: Safari does not focus a button on click, so after a click there
|
|
// is nothing for the dialog to hand focus back to.
|
|
$page = containment();
|
|
|
|
$page->script("[...document.querySelectorAll('#containment button')].find((b) => b.textContent.trim() === 'Basic dialog').focus()");
|
|
|
|
$page->keys(':focus', 'Enter')
|
|
->assertScript("document.querySelector('#containment dialog').open");
|
|
|
|
$page->keys('#containment dialog[open] button:has-text("Cancel")', 'Escape')
|
|
->assertScript("! document.querySelector('#containment dialog').open")
|
|
->assertScript("document.activeElement.textContent.trim() === 'Basic dialog'");
|
|
});
|
|
|
|
it('slides a side sheet in, traps the page, and closes on the scrim', function () {
|
|
$sheet = "document.querySelector('#containment aside[role=\"dialog\"]')";
|
|
|
|
$page = containment()
|
|
->click('#containment button:has-text("Side sheet")')
|
|
->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->assertScript("document.querySelector('header').closest('[aria-hidden=\"true\"]') !== null");
|
|
|
|
// This sheet's own scrim: the standard side sheet above it on the page is a `[data-md-drawer]` too.
|
|
$page->script("{$sheet}.parentElement.querySelector(':scope > [aria-hidden=\"true\"]').click()");
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display === 'none'")
|
|
->assertScript("document.querySelector('header').closest('[aria-hidden=\"true\"]') === null");
|
|
});
|
|
|
|
it('dismisses a bottom sheet dragged down past a quarter of its height', function () {
|
|
$sheet = "document.querySelector('#containment section[role=\"dialog\"]')";
|
|
|
|
$page = containment()
|
|
->click('#containment button:has(> span:text-is("Bottom sheet"))')
|
|
->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->wait(0.5);
|
|
|
|
$page->script(<<<JS
|
|
(() => {
|
|
const handle = {$sheet}.querySelector('[data-md-bottom-sheet-handle]');
|
|
const box = handle.getBoundingClientRect();
|
|
const x = box.x + box.width / 2, y = box.y + box.height / 2;
|
|
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, clientX: x, clientY: y, button: 0 }));
|
|
window.dispatchEvent(new PointerEvent('pointermove', { clientX: x, clientY: y + 400 }));
|
|
window.dispatchEvent(new PointerEvent('pointerup', { clientX: x, clientY: y + 400 }));
|
|
})()
|
|
JS);
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display === 'none'");
|
|
});
|
|
|
|
class NestedDialogProbe extends Component
|
|
{
|
|
public bool $outer = false;
|
|
|
|
public bool $inner = false;
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div>
|
|
<x-button label="Open outer" wire:click="$set('outer', true)" />
|
|
|
|
<x-modal wire:model="outer" title="Outer">
|
|
{{-- Short, and the trigger for the inner dialog right after it: both stay in
|
|
view without scrolling, so opening the inner dialog is not itself a
|
|
scroll of the outer one's body — the very thing this test rules out. --}}
|
|
<p>Outer body, short enough to fit without scrolling.</p>
|
|
|
|
<x-button label="Open inner" wire:click="$set('inner', true)" />
|
|
|
|
<x-modal wire:model="inner" title="Inner">
|
|
<p>Inner body, line one of several, independent of the outer dialog it opened from and its own paragraphs so the stack genuinely overflows the box regardless of the window's height.</p>
|
|
<p>Inner body, line two, long enough on its own to take real vertical room in the scrolling body.</p>
|
|
<p>Inner body, line three, long enough on its own to take real vertical room in the scrolling body.</p>
|
|
<p>Inner body, line four, long enough on its own to take real vertical room in the scrolling body.</p>
|
|
<p>Inner body, line five, long enough on its own to take real vertical room in the scrolling body.</p>
|
|
<p>Inner body, line six, long enough on its own to take real vertical room in the scrolling body.</p>
|
|
</x-modal>
|
|
</x-modal>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
function nestedDialogProbe()
|
|
{
|
|
Livewire::component('nested-dialog-probe', NestedDialogProbe::class);
|
|
|
|
Route::middleware('web')->get('/nested-dialog-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:nested-dialog-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/nested-dialog-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('marks a scrolling dialog\'s divider at the edge with more content, and a nested dialog keeps its own marks', function () {
|
|
// Short and narrow so the probes' paragraphs genuinely overflow their body.
|
|
$page = nestedDialogProbe()->resize(320, 300);
|
|
|
|
$page->click('button:has-text("Open outer")');
|
|
|
|
// Matched by each dialog's own title element, not its full (recursive) textContent: the
|
|
// outer dialog's textContent also contains the nested inner dialog's text, "Inner" included,
|
|
// so a substring match on the whole dialog would find the outer one for both.
|
|
$outer = "[...document.querySelectorAll('dialog[open]')].find((d) => d.querySelector('[data-md-modal-title]')?.textContent === 'Outer')";
|
|
$outerHead = "{$outer}.querySelector('[data-md-modal-head]')";
|
|
$outerBody = "{$outer}.querySelector('[data-md-modal-body]')";
|
|
|
|
// Scrolled to the top: nothing hidden above, so the head's rule stays off.
|
|
$page->assertScript("getComputedStyle({$outerHead}, '::after').opacity === '0'");
|
|
|
|
$page->click('button:has-text("Open inner")');
|
|
|
|
$inner = "[...document.querySelectorAll('dialog[open]')].find((d) => d.querySelector('[data-md-modal-title]')?.textContent === 'Inner')";
|
|
$innerHead = "{$inner}.querySelector('[data-md-modal-head]')";
|
|
$innerBody = "{$inner}.querySelector('[data-md-modal-body]')";
|
|
|
|
$page->assertScript("getComputedStyle({$innerHead}, '::after').opacity === '0'");
|
|
|
|
$page->script("{$innerBody}.scrollTop = {$innerBody}.scrollHeight");
|
|
|
|
// The scroll listener that marks the dialog runs off the native `scroll` event, which fires
|
|
// asynchronously after the assignment above.
|
|
$page->wait(0.2);
|
|
|
|
// The inner dialog's own body scrolled to its end marks its own head; the outer dialog, whose
|
|
// body was never touched, keeps its own mark off — each dialog watches only its own scroll.
|
|
$page->assertScript("getComputedStyle({$innerHead}, '::after').opacity === '1'")
|
|
->assertScript("getComputedStyle({$outerHead}, '::after').opacity === '0'");
|
|
});
|
|
|
|
it('shows a full-screen dialog\'s 56px phone bar below 600px, and the basic dialog above it', function () {
|
|
// Opened wide, before narrowing: the standard side sheet example further down the page opens
|
|
// by default too, and below 840px its scrim (correctly) covers the whole viewport and traps
|
|
// the page — narrowing first would leave nothing else clickable. The bar's visibility is pure
|
|
// CSS on the fullscreen flag, so which comes first makes no difference to what is asserted.
|
|
$page = containment();
|
|
|
|
$page->click('#containment button:has-text("Full screen on a phone")');
|
|
|
|
$page->resize(400, 800);
|
|
|
|
$dialog = "document.querySelector('#containment dialog[open]')";
|
|
$bar = "{$dialog}.querySelector('[data-md-modal-bar]')";
|
|
|
|
$page->assertScript("getComputedStyle({$bar}).display !== 'none'")
|
|
->assertScript("Math.round({$bar}.getBoundingClientRect().height) === 56");
|
|
|
|
$page->resize(900, 800)
|
|
->assertScript("getComputedStyle({$bar}).display === 'none'");
|
|
});
|
|
|
|
it('draws separator dividers whatever the scroll, on a dialog that fits without scrolling', function () {
|
|
$page = containment();
|
|
|
|
$page->click('#containment button:has-text("Always divided (separator)")');
|
|
|
|
$dialog = "document.querySelector('#containment dialog[open]')";
|
|
$head = "{$dialog}.querySelector('[data-md-modal-head]')";
|
|
$actions = "{$dialog}.querySelector('[data-md-modal-actions]')";
|
|
$body = "{$dialog}.querySelector('[data-md-modal-body]')";
|
|
|
|
// The body fits without scrolling, so an unmarked dialog would show neither rule.
|
|
$page->assertScript("{$body}.scrollHeight <= {$body}.clientHeight + 1")
|
|
->assertScript("getComputedStyle({$head}, '::after').opacity === '1'")
|
|
->assertScript("getComputedStyle({$actions}, '::before').opacity === '1'");
|
|
});
|
|
|
|
it('opens a dialog with no fade under reduced motion, but a real one without it', function () {
|
|
$dialog = "document.querySelector('#containment dialog[open]')";
|
|
|
|
// Without reduced motion: the spring is a real, non-zero transition.
|
|
$normal = containment()
|
|
->assertScript("! window.matchMedia('(prefers-reduced-motion: reduce)').matches");
|
|
|
|
$normal->click('#containment button:has-text("Basic dialog")');
|
|
|
|
$normal->assertScript("parseFloat(getComputedStyle({$dialog}).transitionDuration) > 0");
|
|
|
|
// With reduced motion (the plugin's own emulation, `visit(..., ['reducedMotion' => 'reduce'])`):
|
|
// tokens/motion.css takes the same spring's duration to zero, so there is no transition to run,
|
|
// and the dialog is at its final opacity at once rather than mid-fade.
|
|
$reduced = visit('/material/containment', ['reducedMotion' => 'reduce'])->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
|
|
->assertScript("window.matchMedia('(prefers-reduced-motion: reduce)').matches");
|
|
|
|
$reduced->click('#containment button:has-text("Basic dialog")');
|
|
|
|
$reduced->assertScript("parseFloat(getComputedStyle({$dialog}).transitionDuration) === 0")
|
|
->assertScript("getComputedStyle({$dialog}).opacity === '1'");
|
|
});
|
|
|
|
class TextOnlyDialogProbe extends Component
|
|
{
|
|
public bool $open = false;
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div>
|
|
<x-button label="Open" wire:click="$set('open', true)" />
|
|
|
|
<x-modal wire:model="open" title="Read this">
|
|
<p>Line one of a body with nothing else focusable inside it, so the dialog hands its first focus to the scrolling body itself: line two, line three, line four, line five, line six, line seven, line eight, line nine, line ten, line eleven, line twelve, line thirteen, line fourteen, line fifteen.</p>
|
|
</x-modal>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
function textOnlyDialogProbe()
|
|
{
|
|
Livewire::component('text-only-dialog-probe', TextOnlyDialogProbe::class);
|
|
|
|
Route::middleware('web')->get('/text-only-dialog-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:text-only-dialog-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/text-only-dialog-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('gives the scrolling body an inset focus ring when a text-only dialog opens from the keyboard', function () {
|
|
// A short, narrow window so the paragraph genuinely overflows the body before the dialog
|
|
// opens: showModal() picks its initial focus once, at open, from what is focusable then.
|
|
$page = textOnlyDialogProbe()->resize(320, 300);
|
|
|
|
$page->script("document.querySelector('button').focus()");
|
|
|
|
$page->keys(':focus', 'Enter');
|
|
|
|
$body = "document.querySelector('dialog[open] [data-md-modal-body]')";
|
|
|
|
$page->assertScript("document.activeElement.matches('[data-md-modal-body]')")
|
|
->assertScript("getComputedStyle({$body}).outlineStyle === 'solid'")
|
|
->assertScript("getComputedStyle({$body}).outlineWidth === '3px'")
|
|
->assertScript("getComputedStyle({$body}).outlineOffset === '-3px'");
|
|
|
|
// Outside Chrome the body holds the focus through a tabindex materialShowModal() gives it; a
|
|
// Livewire render keeps it (the body is wire:ignore.self), so the focus stays in the dialog.
|
|
$page->script('window.eval("Livewire.first().$refresh()")');
|
|
|
|
$page->assertScript("document.querySelector('dialog[open]') !== null")
|
|
->assertScript("document.activeElement.matches('[data-md-modal-body]')");
|
|
});
|
|
|
|
it('cycles a bottom sheet\'s preset heights from its handle, announcing each, and closes from the last', function () {
|
|
$page = containment();
|
|
|
|
$page->click('#containment button:has-text("Bottom sheet with preset heights")');
|
|
|
|
$sheet = "document.querySelector('#containment [data-md-bottom-sheet-panel][data-md-preset]')";
|
|
$handle = "{$sheet}.querySelector('[data-md-bottom-sheet-grip]')";
|
|
$announce = "{$sheet}.querySelector('[data-md-bottom-sheet-announce]')";
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->assertScript("{$sheet}.style.getPropertyValue('--sheet-stop').trim() === '50dvh'");
|
|
|
|
$gripSelector = '#containment [data-md-bottom-sheet-panel][data-md-preset] [data-md-bottom-sheet-grip]';
|
|
|
|
$page->click($gripSelector);
|
|
|
|
$page->assertScript("{$sheet}.style.getPropertyValue('--sheet-stop').trim() === '90dvh'")
|
|
->assertScript("{$announce}.textContent.trim() === 'Height 3 of 3'");
|
|
|
|
// From the last stop, activating the handle closes the sheet, as a handle with no stops does.
|
|
$page->click($gripSelector);
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display === 'none'");
|
|
});
|
|
|
|
it('settles a dragged bottom sheet on the nearest preset height', function () {
|
|
$page = containment();
|
|
|
|
$page->click('#containment button:has-text("Bottom sheet with preset heights")');
|
|
|
|
$sheet = "document.querySelector('#containment [data-md-bottom-sheet-panel][data-md-preset]')";
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->wait(0.5);
|
|
|
|
// Drag up from the 50dvh stop a little way — not as far as 90dvh — and release: it settles
|
|
// back on 50dvh, the nearest stop, rather than creep on to the next one.
|
|
$page->script(<<<JS
|
|
(() => {
|
|
const handle = {$sheet}.querySelector('[data-md-bottom-sheet-handle]');
|
|
const box = handle.getBoundingClientRect();
|
|
const x = box.x + box.width / 2, y = box.y + box.height / 2;
|
|
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, clientX: x, clientY: y, button: 0 }));
|
|
window.dispatchEvent(new PointerEvent('pointermove', { clientX: x, clientY: y - 40 }));
|
|
window.dispatchEvent(new PointerEvent('pointerup', { clientX: x, clientY: y - 40 }));
|
|
})()
|
|
JS);
|
|
|
|
$page->assertScript("{$sheet}.style.getPropertyValue('--sheet-stop').trim() === '50dvh'");
|
|
});
|
|
|
|
it('is a standard side sheet from 840px, without a scrim or a focus trap, and the modal one below', function () {
|
|
$page = containment()->resize(1000, 800);
|
|
|
|
$sheet = "document.querySelector('#containment aside[data-md-side]')";
|
|
$scrim = "{$sheet}.parentElement.querySelector(':scope > [data-md-drawer-scrim]')";
|
|
$toggle = '#containment button:has-text("Show or hide the filters")';
|
|
|
|
// From 840px it opens co-planar (the example starts `open: true`): no scrim shown, and the
|
|
// rest of the page stays interactive.
|
|
$page->assertScript("getComputedStyle({$sheet}).position === 'relative'")
|
|
->assertScript("getComputedStyle({$scrim}).display === 'none'")
|
|
->assertScript("document.querySelector('header').closest('[aria-hidden=\"true\"]') === null")
|
|
->assertScript("! {$sheet}.hasAttribute('inert')");
|
|
|
|
$page->click($toggle);
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).opacity === '0'");
|
|
|
|
// Below 840px the same sheet becomes the modal one: fixed, with a scrim, and the page inert.
|
|
$page->resize(700, 800)
|
|
->click($toggle);
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).position === 'fixed'")
|
|
->assertScript("getComputedStyle({$scrim}).display !== 'none'")
|
|
->assertScript("document.querySelector('header').closest('[aria-hidden=\"true\"]') !== null");
|
|
});
|
|
|
|
it('gives a closing standard side sheet\'s room back to the content beside it as it leaves, from 840px', function () {
|
|
$sheet = "document.querySelector('#containment aside[data-md-side]')";
|
|
$root = "{$sheet}.parentElement";
|
|
$column = "{$root}.previousElementSibling";
|
|
$toggle = "Array.from(document.querySelectorAll('#containment button')).find((button) => button.textContent.trim() === 'Show or hide the filters')";
|
|
|
|
// The example starts open, and stands open from the first frame Alpine draws: full 400px, fully
|
|
// shown, nothing on it animating.
|
|
$page = containment()->resize(1000, 800)
|
|
->assertScript("{$root}.hasAttribute('data-md-open') && Math.round({$root}.getBoundingClientRect().width) === 400 && getComputedStyle({$sheet}).opacity === '1' && {$root}.getAnimations({ subtree: true }).length === 0");
|
|
|
|
// Closed and sampled in one round trip: the sheet's root caught part-way between its width
|
|
// and none, still in the layout, while the column beside it has grown part of the way — not
|
|
// the whole sheet and its gap handed back in one jump at the end.
|
|
$midExit = $page->script(<<<JS
|
|
(async () => {
|
|
const root = {$root}
|
|
const column = {$column}
|
|
const open = { root: root.getBoundingClientRect().width, column: column.getBoundingClientRect().width, row: root.parentElement.getBoundingClientRect().width }
|
|
{$toggle}.click()
|
|
|
|
for (let i = 0; i < 80; i++) {
|
|
const width = root.getBoundingClientRect().width
|
|
const columnWidth = column.getBoundingClientRect().width
|
|
|
|
if (! root.hasAttribute('data-md-drawer-collapsed') && getComputedStyle(root).display !== 'none' && width > 1 && width < open.root - 1 && columnWidth > open.column + 1 && columnWidth < open.row - 1) return true
|
|
await new Promise((resolve) => setTimeout(resolve, 5))
|
|
}
|
|
return false
|
|
})()
|
|
JS);
|
|
|
|
expect($midExit)->toBeTrue();
|
|
|
|
// Settled: out of the layout, and the column is the whole row, gap included.
|
|
$page->assertScript("{$root}.hasAttribute('data-md-drawer-collapsed') && getComputedStyle({$root}).display === 'none'")
|
|
->assertScript("Math.abs({$column}.getBoundingClientRect().width - {$root}.parentElement.getBoundingClientRect().width) < 1");
|
|
|
|
// Reopened part-way through its exit, it ends open, not collapsed. Each script stays well under
|
|
// the browser plugin's one-second call timeout, past which it runs the script a second time.
|
|
$page->script("{$toggle}.click()");
|
|
$page->wait(0.6)
|
|
->assertScript("{$root}.hasAttribute('data-md-open') && {$root}.getAnimations({ subtree: true }).length === 0");
|
|
|
|
$page->script(<<<JS
|
|
(async () => {
|
|
{$toggle}.click()
|
|
await new Promise((resolve) => setTimeout(resolve, 60))
|
|
{$toggle}.click()
|
|
})()
|
|
JS);
|
|
|
|
$page->wait(0.9)
|
|
->assertScript("{$root}.hasAttribute('data-md-open') && ! {$root}.hasAttribute('data-md-drawer-collapsed') && Math.abs({$root}.getBoundingClientRect().width - 400) < 1 && getComputedStyle({$sheet}).opacity === '1'");
|
|
});
|
|
|
|
it('draws a standard side sheet that starts open standing open, without growing it in on load', function () {
|
|
// Slow tokens, so a load-time entry would still be running when the page is first read.
|
|
Route::middleware('web')->get('/standard-sheet-load-probe', fn () => Blade::render(<<<'BLADE'
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<x-theme-script />
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
<style>:root { --md-sys-motion-spatial-default-duration: 3000ms; --md-sys-motion-effects-default-duration: 3000ms; }</style>
|
|
</head>
|
|
<body>
|
|
<x-row align="stretch" gap="space300" x-data="{ open: true }">
|
|
<x-stack style="flex: 1 1 0%; min-width: 0;">
|
|
<button type="button" id="toggle-sheet" x-on:click="open = ! open">Show or hide the filters</button>
|
|
</x-stack>
|
|
<x-drawer standard title="Filters">Filter the list</x-drawer>
|
|
</x-row>
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$root = "document.querySelector('[data-md-drawer]')";
|
|
|
|
$page = visit('/standard-sheet-load-probe')->resize(1000, 800)->waitForEvent('networkidle')
|
|
->assertScript("typeof window.Alpine !== 'undefined' && {$root}.hasAttribute('data-md-drawer-settled')")
|
|
->assertScript("{$root}.hasAttribute('data-md-open') && Math.abs({$root}.getBoundingClientRect().width - 400) < 1")
|
|
->assertScript("{$root}.getAnimations({ subtree: true }).length === 0")
|
|
->assertScript("getComputedStyle({$root}.querySelector('[data-md-drawer-sheet]')).opacity === '1'");
|
|
|
|
// Settled, it still moves when someone closes it.
|
|
$page->script("document.getElementById('toggle-sheet').click()");
|
|
$page->assertScript("{$root}.getAnimations({ subtree: true }).length > 0");
|
|
});
|
|
|
|
it('opens a row\'s opener from a press anywhere on the row, but not from its own buttons', function () {
|
|
$page = containment();
|
|
|
|
$row = '#containment [data-md-card][data-md-list-row]:not([data-md-list-actionable])';
|
|
|
|
$page->script("window.__opened = 0; document.querySelector('{$row} [data-md-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
|
|
|
|
$page->click("{$row} p")
|
|
->assertScript('window.__opened === 1');
|
|
|
|
$page->click("{$row} button:has-text(\"Copy link\")")
|
|
->assertScript('window.__opened === 1');
|
|
});
|
|
|
|
it('makes a directly actionable card the one tab stop, answering Enter', function () {
|
|
$card = '#containment [data-md-card][data-md-list-actionable]';
|
|
|
|
$page = containment();
|
|
|
|
$page->script("window.__opened = 0; document.querySelector('{$card} [data-md-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
|
|
|
|
$page->script("document.querySelector('{$card}').focus()");
|
|
|
|
$page->assertScript("document.activeElement.matches('{$card}')");
|
|
|
|
$page->keys($card, 'Enter')
|
|
->assertScript('window.__opened === 1');
|
|
});
|
|
|
|
it('binds a collapse to a Livewire property both ways', function () {
|
|
$collapse = "document.querySelector('#fine-tuning-collapse')";
|
|
|
|
$page = collapseProbe()
|
|
->assertScript("{$collapse}.open === false");
|
|
|
|
$page->click('#fine-tuning-collapse summary')
|
|
->assertScript("{$collapse}.open === true")
|
|
->click('button:has-text("Re-render")')
|
|
->assertSeeIn('#renders', '1')
|
|
->assertSeeIn('#fine-tuning', 'true')
|
|
->assertScript("{$collapse}.open === true");
|
|
|
|
$page->click('button:has-text("Close from the server")')
|
|
->assertSeeIn('#fine-tuning', 'false')
|
|
->assertScript("{$collapse}.open === false");
|
|
|
|
$page->click('button:has-text("Open from the server")')
|
|
->assertSeeIn('#fine-tuning', 'true')
|
|
->assertScript("{$collapse}.open === true");
|
|
});
|
|
|
|
it('binds a collapse to an Alpine property both ways', function () {
|
|
$collapse = "document.querySelector('#advanced-collapse')";
|
|
|
|
$page = collapseProbe()
|
|
->assertScript("{$collapse}.open === false");
|
|
|
|
$page->click('#advanced-collapse summary')
|
|
->assertScript("{$collapse}.open === true")
|
|
->assertSeeIn('#advanced', 'true');
|
|
|
|
$page->click('button:has-text("Close from Alpine")')
|
|
->assertSeeIn('#advanced', 'false')
|
|
->assertScript("{$collapse}.open === false");
|
|
});
|
|
|
|
it('fades the side sheet\'s scrim out on close, rather than making it vanish', function () {
|
|
$sheet = "document.querySelector('#containment aside[role=\"dialog\"]')";
|
|
$scrim = "{$sheet}.parentElement.querySelector(':scope > [data-md-drawer-scrim]')";
|
|
|
|
$page = containment()
|
|
->click('#containment button:has-text("Side sheet")')
|
|
->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->assertScript("getComputedStyle({$scrim}).opacity === '1'");
|
|
|
|
// Triggering the close and sampling for a mid-fade opacity in the same round trip: a round
|
|
// trip apiece for a separate `script` and `assertScript` already costs real time, easily as
|
|
// much as the 200ms fade itself, so a click, then a later separate read, can just as easily
|
|
// land before the fade starts or after it ends. This samples every few ms, in the page itself,
|
|
// for whether it was ever caught strictly between fully shown and fully hidden, rather than
|
|
// simply gone at once.
|
|
$midFade = $page->script(<<<JS
|
|
(async () => {
|
|
{$scrim}.click()
|
|
|
|
for (let i = 0; i < 60; i++) {
|
|
const opacity = parseFloat(getComputedStyle({$scrim}).opacity)
|
|
if (opacity > 0.02 && opacity < 0.98) return true
|
|
await new Promise((resolve) => setTimeout(resolve, 5))
|
|
}
|
|
return false
|
|
})()
|
|
JS);
|
|
|
|
expect($midFade)->toBeTrue();
|
|
|
|
$page->assertScript("getComputedStyle({$scrim}).display === 'none'");
|
|
});
|
|
|
|
it('fades the bottom sheet\'s scrim out on close, rather than making it vanish', function () {
|
|
$sheet = "document.querySelector('#containment section[role=\"dialog\"]')";
|
|
$scrim = "{$sheet}.parentElement.querySelector(':scope > [data-md-bottom-sheet-scrim]')";
|
|
|
|
$page = containment()
|
|
->click('#containment button:has(> span:text-is("Bottom sheet"))')
|
|
->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->assertScript("getComputedStyle({$scrim}).opacity === '1'");
|
|
|
|
$midFade = $page->script(<<<JS
|
|
(async () => {
|
|
{$scrim}.click()
|
|
|
|
for (let i = 0; i < 60; i++) {
|
|
const opacity = parseFloat(getComputedStyle({$scrim}).opacity)
|
|
if (opacity > 0.02 && opacity < 0.98) return true
|
|
await new Promise((resolve) => setTimeout(resolve, 5))
|
|
}
|
|
return false
|
|
})()
|
|
JS);
|
|
|
|
expect($midFade)->toBeTrue();
|
|
|
|
$page->assertScript("getComputedStyle({$scrim}).display === 'none'");
|
|
});
|
|
|
|
it('slides the side sheet out on close, rather than making it vanish', function () {
|
|
$sheet = "document.querySelector('#containment aside[role=\"dialog\"]')";
|
|
$scrim = "{$sheet}.parentElement.querySelector(':scope > [data-md-drawer-scrim]')";
|
|
|
|
$page = containment()
|
|
->click('#containment button:has-text("Side sheet")')
|
|
->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->assertScript("Math.abs(parseFloat(getComputedStyle({$sheet}).translate)) < 0.5");
|
|
|
|
// Sampled in the page, in the same round trip as the close, as the scrim's fade is above: the
|
|
// sheet must be caught still displayed and part of the way to its closed offset (one sheet
|
|
// width past its edge), not gone at once — which is what Firefox showed while the exit leaned
|
|
// on `allow-discrete` holding `display`.
|
|
$midSlide = $page->script(<<<JS
|
|
(async () => {
|
|
const width = {$sheet}.getBoundingClientRect().width
|
|
{$scrim}.click()
|
|
|
|
for (let i = 0; i < 60; i++) {
|
|
const style = getComputedStyle({$sheet})
|
|
const offset = Math.abs(parseFloat(style.translate) || 0)
|
|
if (style.display !== 'none' && offset > 1 && offset < width - 1) return true
|
|
await new Promise((resolve) => setTimeout(resolve, 5))
|
|
}
|
|
return false
|
|
})()
|
|
JS);
|
|
|
|
expect($midSlide)->toBeTrue();
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display === 'none'");
|
|
});
|
|
|
|
it('slides the bottom sheet down on close, rather than making it vanish', function () {
|
|
$sheet = "document.querySelector('#containment section[role=\"dialog\"]')";
|
|
$scrim = "{$sheet}.parentElement.querySelector(':scope > [data-md-bottom-sheet-scrim]')";
|
|
$offset = "(parseFloat(getComputedStyle({$sheet}).translate.split(' ')[1]) || 0)";
|
|
|
|
$page = containment()
|
|
->click('#containment button:has(> span:text-is("Bottom sheet"))')
|
|
->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->assertScript("Math.abs({$offset}) < 0.5");
|
|
|
|
$midSlide = $page->script(<<<JS
|
|
(async () => {
|
|
const height = {$sheet}.getBoundingClientRect().height
|
|
{$scrim}.click()
|
|
|
|
for (let i = 0; i < 60; i++) {
|
|
const offset = {$offset}
|
|
if (getComputedStyle({$sheet}).display !== 'none' && offset > 1 && offset < height - 1) return true
|
|
await new Promise((resolve) => setTimeout(resolve, 5))
|
|
}
|
|
return false
|
|
})()
|
|
JS);
|
|
|
|
expect($midSlide)->toBeTrue();
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display === 'none'");
|
|
});
|
|
|
|
it('slides the side sheet in from its own edge in a right-to-left page', function () {
|
|
Route::middleware('web')->get('/drawer-rtl-probe', fn () => Blade::render(<<<'BLADE'
|
|
<!DOCTYPE html>
|
|
<html dir="rtl">
|
|
<head>
|
|
<x-theme-script />
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
</head>
|
|
<body style="background-color: var(--md-sys-color-surface);">
|
|
<div x-data="{ open: false }" style="padding: var(--md-sys-measurement-space200);">
|
|
<x-button label="Open" x-on:click="open = true" />
|
|
<x-drawer title="Filters">Narrow the list down.</x-drawer>
|
|
</div>
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$page = visit('/drawer-rtl-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'");
|
|
|
|
$sheet = "document.querySelector('aside[data-md-side]')";
|
|
|
|
$page->click('button:has-text("Open")');
|
|
|
|
// `side="end"` (the default) is the trailing edge — the *left* of a right-to-left page — so it
|
|
// slides in from off the left, not the right (the CSS mirror reads `[dir='rtl']` rather than
|
|
// `:dir(rtl)`, plan step 39 — Vite's own minifier rewrote that to a `:lang()` list, same as
|
|
// Tailwind's build did): caught well before the 500ms spatial transition ends, it is still
|
|
// off-screen on the left.
|
|
$page->wait(0.05);
|
|
|
|
$page->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
|
->assertScript("{$sheet}.getBoundingClientRect().left < 0");
|
|
|
|
// And settles flush against that same left edge, not the right.
|
|
$page->wait(0.6)
|
|
->assertScript("Math.round({$sheet}.getBoundingClientRect().left) === 0");
|
|
});
|
|
|
|
class NestedFullscreenDialogProbe extends Component
|
|
{
|
|
public bool $settings = false;
|
|
|
|
public bool $confirm = false;
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div>
|
|
<x-button label="Open settings" wire:click="$set('settings', true)" />
|
|
|
|
<x-modal wire:model="settings" title="Share settings" fullscreen>
|
|
A form that needs the room.
|
|
|
|
<x-button label="Delete the share" danger wire:click="$set('confirm', true)" />
|
|
|
|
<x-modal wire:model="confirm" title="Delete this share?">
|
|
Recipients lose access at once.
|
|
<x-slot:actions><x-button label="Delete" danger x-on:click="close()" /></x-slot:actions>
|
|
</x-modal>
|
|
</x-modal>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
it('keeps a basic dialog\'s own title and padding when it is nested inside a full-screen dialog at 400px', function () {
|
|
Livewire::component('nested-fullscreen-dialog-probe', NestedFullscreenDialogProbe::class);
|
|
|
|
Route::middleware('web')->get('/nested-fullscreen-dialog-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:nested-fullscreen-dialog-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$page = visit('/nested-fullscreen-dialog-probe')->resize(400, 800)->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
|
|
$page->click('button:has-text("Open settings")');
|
|
|
|
$outerBar = "document.querySelector('dialog[data-md-fullscreen][open] [data-md-modal-bar]')";
|
|
|
|
// The rule hiding a full-screen dialog's own head below 600px, so the phone bar alone names
|
|
// it, is scoped to that dialog's own box — confirmed here, since the nested basic dialog below
|
|
// must keep its own head regardless.
|
|
$page->assertScript("getComputedStyle({$outerBar}).display !== 'none'");
|
|
|
|
$page->click('button:has-text("Delete the share")');
|
|
|
|
$inner = "[...document.querySelectorAll('dialog[open]')].find((d) => d.querySelector('[data-md-modal-title]')?.textContent === 'Delete this share?')";
|
|
$innerHead = "{$inner}.querySelector('[data-md-modal-head]')";
|
|
$innerTitle = "{$inner}.querySelector('[data-md-modal-title]')";
|
|
|
|
$page->assertScript("getComputedStyle({$innerHead}).display !== 'none'")
|
|
->assertScript("getComputedStyle({$innerTitle}).display !== 'none'")
|
|
->assertScript("parseFloat(getComputedStyle({$innerHead}).paddingTop) > 0")
|
|
->assertScript("parseFloat(getComputedStyle({$innerHead}).paddingInlineStart) > 0");
|
|
});
|
|
|
|
it('shows the 16% dragged state layer on the showcase card being dragged', function () {
|
|
$page = containment();
|
|
|
|
$card = "[...document.querySelectorAll('#containment [data-md-card]')].find((c) => c.textContent.includes('Elevation 4 and the 16% state layer'))";
|
|
|
|
$page->assertScript("getComputedStyle({$card}, '::before').opacity === '0'");
|
|
|
|
$page->click('#containment button:has-text("Pick it up or put it down")');
|
|
|
|
$page->assertScript("{$card}.hasAttribute('data-md-dragged')")
|
|
->assertScript("getComputedStyle({$card}, '::before').opacity === '0.16'");
|
|
|
|
$page->click('#containment button:has-text("Pick it up or put it down")');
|
|
|
|
$page->assertScript("! {$card}.hasAttribute('data-md-dragged')")
|
|
->assertScript("getComputedStyle({$card}, '::before').opacity === '0'");
|
|
});
|
|
|
|
it('keeps a selected segmented row\'s fill under the hover and focus tint', function () {
|
|
Route::middleware('web')->get('/segmented-selected-row-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);">
|
|
<div style="padding: var(--md-sys-measurement-space200); max-width: 400px;">
|
|
<x-list segmented label="Rows">
|
|
<x-list-item title="Selected" link="#segmented-selected-row-probe" :selected="true" />
|
|
<x-list-item title="Plain" link="#segmented-selected-row-probe" />
|
|
</x-list>
|
|
</div>
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$page = visit('/segmented-selected-row-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'");
|
|
|
|
$selected = "document.querySelector('[data-md-selected]')";
|
|
$plain = "document.querySelector('[data-md-list-item]:not([data-md-selected])')";
|
|
|
|
$restBackground = $page->script("getComputedStyle({$selected}).backgroundColor");
|
|
|
|
$page->hover('[data-md-selected]');
|
|
$selectedHoverBackground = $page->script("getComputedStyle({$selected}).backgroundColor");
|
|
|
|
$page->hover('[data-md-list-item]:not([data-md-selected])');
|
|
$plainHoverBackground = $page->script("getComputedStyle({$plain}).backgroundColor");
|
|
|
|
// The hover tint is mixed *over* the row's own fill (`--md-list-row-fill`, list-item.css):
|
|
// the selected row's secondary-container stays under it, so its hover colour differs from
|
|
// both its own resting colour and a plain row's hover, which has no fill to keep.
|
|
expect($selectedHoverBackground)->not->toBe($restBackground)
|
|
->and($selectedHoverBackground)->not->toBe($plainHoverBackground);
|
|
|
|
$page->script("document.querySelector('[data-md-selected] [data-md-list-open]').focus()");
|
|
|
|
$selectedFocusBackground = $page->script("getComputedStyle({$selected}).backgroundColor");
|
|
|
|
expect($selectedFocusBackground)->not->toBe($restBackground)
|
|
->and($selectedFocusBackground)->not->toBe($selectedHoverBackground);
|
|
});
|
|
|
|
/**
|
|
* Collapses to watch move: one on its own with a paragraph under it, one bound to Alpine, and a
|
|
* `name` group of two with the first open. Each body is tall enough for a height caught part-way
|
|
* to be told from both ends.
|
|
*/
|
|
function collapseMotionProbe(string $durations = ''): mixed
|
|
{
|
|
Route::middleware('web')->get('/collapse-motion-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);">
|
|
<x-collapse id="plain" title="How long do links last?">
|
|
<p style="block-size: 240px">Until the expiry the sender chose, at most thirty days.</p>
|
|
</x-collapse>
|
|
<p id="below">Under the collapse.</p>
|
|
|
|
<div x-data="{ advanced: false }">
|
|
<x-collapse id="bound" title="Advanced" x-model="advanced">
|
|
<p style="block-size: 240px">Everything else.</p>
|
|
</x-collapse>
|
|
<button type="button" id="open-bound" x-on:click="advanced = true">Open from Alpine</button>
|
|
<button type="button" id="close-bound" x-on:click="advanced = false">Close from Alpine</button>
|
|
<output id="advanced" x-text="advanced"></output>
|
|
</div>
|
|
|
|
<x-collapse id="first" title="First" name="faq" open>
|
|
<p style="block-size: 240px">The first answer.</p>
|
|
</x-collapse>
|
|
<x-collapse id="second" title="Second" name="faq">
|
|
<p style="block-size: 240px">The second answer.</p>
|
|
</x-collapse>
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$page = visit('/collapse-motion-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'");
|
|
|
|
if ($durations !== '') {
|
|
$page->script("document.head.insertAdjacentHTML('beforeend', '<style>:root { --md-sys-motion-spatial-fast-duration: {$durations}; }</style>')");
|
|
}
|
|
|
|
return $page;
|
|
}
|
|
|
|
/**
|
|
* Runs `$act` in the page and samples `$details` every frame until its animation has run: whether
|
|
* its height was ever caught strictly between where it started and where it ended, what `open` and
|
|
* the closing mark said as it began, whether the chevron was caught turning, and how it ended. In one round trip, because a separate read
|
|
* costs about as long as the 350ms spring.
|
|
*/
|
|
function collapseMotion(mixed $page, string $act, string $details): array
|
|
{
|
|
return $page->script(<<<JS
|
|
(async () => {
|
|
const details = document.querySelector('{$details}')
|
|
const chevron = details.querySelector('[data-md-collapse-chevron]')
|
|
const below = details.nextElementSibling
|
|
const start = details.getBoundingClientRect().height
|
|
const belowStart = below?.getBoundingClientRect().top ?? 0
|
|
const heights = []
|
|
const belows = []
|
|
|
|
{$act}
|
|
|
|
// A binding reaches the collapse from Alpine's own flush, a microtask on; a task later
|
|
// both routes have begun, and the close's attribute and `open` hold for its whole run.
|
|
await new Promise((resolve) => setTimeout(resolve, 0))
|
|
|
|
const first = { open: details.open, closing: details.hasAttribute('data-md-collapse-closing') }
|
|
let chevronTurning = false
|
|
|
|
for (let i = 0; i < 120; i++) {
|
|
await new Promise((resolve) => requestAnimationFrame(resolve))
|
|
heights.push(details.getBoundingClientRect().height)
|
|
belows.push(below?.getBoundingClientRect().top ?? 0)
|
|
const rotate = getComputedStyle(chevron).rotate
|
|
chevronTurning ||= rotate !== 'none' && rotate !== '180deg' && rotate !== '0deg'
|
|
if (i > 5 && details.getAnimations().length === 0) break
|
|
}
|
|
|
|
const end = details.getBoundingClientRect().height
|
|
const low = Math.min(start, end)
|
|
const high = Math.max(start, end)
|
|
|
|
return {
|
|
between: heights.some((height) => height > low + 2 && height < high - 2),
|
|
belowMoved: belows.some((top) => top > Math.min(belowStart, belows.at(-1)) + 2 && top < Math.max(belowStart, belows.at(-1)) - 2),
|
|
first,
|
|
chevronTurning,
|
|
start,
|
|
end,
|
|
open: details.open,
|
|
closing: details.hasAttribute('data-md-collapse-closing'),
|
|
style: details.getAttribute('style'),
|
|
animations: details.getAnimations().length,
|
|
}
|
|
})()
|
|
JS);
|
|
}
|
|
|
|
it('eases a collapse open and shut in every engine, moving what is under it', function () {
|
|
$page = collapseMotionProbe();
|
|
|
|
$opened = collapseMotion($page, "details.querySelector('summary').click()", '#plain');
|
|
|
|
expect($opened['first']['open'])->toBeTrue()
|
|
->and($opened['between'])->toBeTrue()
|
|
->and($opened['belowMoved'])->toBeTrue()
|
|
->and($opened['open'])->toBeTrue()
|
|
->and($opened['end'])->toBeGreaterThan($opened['start'] + 200)
|
|
->and($opened['style'])->toBeNull()
|
|
->and($opened['animations'])->toBe(0);
|
|
|
|
$closed = collapseMotion($page, "details.querySelector('summary').click()", '#plain');
|
|
|
|
// Still open while the height goes, so there is content to clip; the chevron turns back at once.
|
|
expect($closed['first'])->toBe(['open' => true, 'closing' => true])
|
|
->and($closed['chevronTurning'])->toBeTrue()
|
|
->and($closed['between'])->toBeTrue()
|
|
->and($closed['belowMoved'])->toBeTrue()
|
|
->and($closed['open'])->toBeFalse()
|
|
->and($closed['closing'])->toBeFalse()
|
|
->and($closed['end'])->toBe($opened['start'])
|
|
->and($closed['style'])->toBeNull()
|
|
->and($closed['animations'])->toBe(0);
|
|
|
|
// Clipped while it moves, so the content never shows past the edge that is moving.
|
|
$clipped = $page->script(<<<'JS'
|
|
(async () => {
|
|
const details = document.querySelector('#plain')
|
|
details.querySelector('summary').click()
|
|
await new Promise((resolve) => requestAnimationFrame(resolve))
|
|
const overflow = getComputedStyle(details).overflowY
|
|
await Promise.all(details.getAnimations().map((animation) => animation.finished))
|
|
return overflow
|
|
})()
|
|
JS);
|
|
|
|
expect($clipped)->toBe('clip');
|
|
|
|
// From the keyboard: Enter on the summary is the same press, taken over the same way.
|
|
$page->script("document.querySelector('#plain summary').focus()");
|
|
$page->keys('#plain summary', 'Enter')
|
|
->assertScript("document.querySelector('#plain').open === false && document.querySelector('#plain').getAnimations().length === 0");
|
|
});
|
|
|
|
it('eases a collapse bound to Alpine open and shut, keeping the binding in step', function () {
|
|
$page = collapseMotionProbe();
|
|
|
|
$opened = collapseMotion($page, "document.querySelector('#open-bound').click()", '#bound');
|
|
|
|
expect($opened['between'])->toBeTrue()
|
|
->and($opened['open'])->toBeTrue();
|
|
|
|
$page->assertSeeIn('#advanced', 'true');
|
|
|
|
$closed = collapseMotion($page, "document.querySelector('#close-bound').click()", '#bound');
|
|
|
|
expect($closed['first']['closing'])->toBeTrue()
|
|
->and($closed['between'])->toBeTrue()
|
|
->and($closed['open'])->toBeFalse()
|
|
->and($closed['end'])->toBe($opened['start']);
|
|
|
|
$page->assertSeeIn('#advanced', 'false');
|
|
|
|
// A press on the summary tells the binding when the section has closed, and never loops.
|
|
$page->click('#bound summary')
|
|
->assertSeeIn('#advanced', 'true')
|
|
->assertScript("document.querySelector('#bound').open === true");
|
|
});
|
|
|
|
it('turns a collapse round from the height it has reached, ending as the last press asked', function () {
|
|
$page = collapseMotionProbe('1500ms');
|
|
|
|
$result = $page->script(<<<'JS'
|
|
(async () => {
|
|
const details = document.querySelector('#plain')
|
|
const summary = details.querySelector('summary')
|
|
const closed = details.getBoundingClientRect().height
|
|
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
|
|
|
summary.click()
|
|
await wait(300)
|
|
const midway = details.getBoundingClientRect().height
|
|
summary.click()
|
|
await new Promise((resolve) => requestAnimationFrame(resolve))
|
|
const turned = details.getBoundingClientRect().height
|
|
|
|
await wait(1700)
|
|
|
|
return { closed, midway, turned, end: details.getBoundingClientRect().height, open: details.open, style: details.getAttribute('style') }
|
|
})()
|
|
JS);
|
|
|
|
expect($result['midway'])->toBeGreaterThan($result['closed'] + 2)
|
|
// Turned round from where it was, not from either end.
|
|
->and(abs($result['turned'] - $result['midway']))->toBeLessThan(40)
|
|
->and($result['open'])->toBeFalse()
|
|
->and($result['end'])->toBe($result['closed'])
|
|
->and($result['style'])->toBeNull();
|
|
});
|
|
|
|
it('closes the open member of a name group on the same spring as the one opening', function () {
|
|
$page = collapseMotionProbe();
|
|
|
|
$first = "document.querySelector('#first')";
|
|
|
|
$result = $page->script(<<<'JS'
|
|
(async () => {
|
|
const first = document.querySelector('#first')
|
|
const second = document.querySelector('#second')
|
|
const start = first.getBoundingClientRect().height
|
|
let caught = false
|
|
|
|
second.querySelector('summary').click()
|
|
const stillOpen = first.open
|
|
|
|
for (let i = 0; i < 120; i++) {
|
|
await new Promise((resolve) => requestAnimationFrame(resolve))
|
|
const height = first.getBoundingClientRect().height
|
|
caught ||= first.open && height > 60 && height < start - 2
|
|
if (i > 5 && first.getAnimations().length === 0 && second.getAnimations().length === 0) break
|
|
}
|
|
|
|
return { stillOpen, caught, first: first.open, second: second.open, name: first.getAttribute('name') }
|
|
})()
|
|
JS);
|
|
|
|
expect($result)->toBe(['stillOpen' => true, 'caught' => true, 'first' => false, 'second' => true, 'name' => 'faq']);
|
|
|
|
// The group still keeps one open: the browser's own exclusivity, with the name back.
|
|
$page->script("document.querySelector('#first').open = true");
|
|
$page->assertScript("{$first}.open === true && document.querySelector('#second').open === false");
|
|
});
|
|
|
|
it('opens and closes a collapse at once under reduced motion, leaving nothing behind', function () {
|
|
$page = collapseMotionProbe('0ms');
|
|
|
|
$result = $page->script(<<<'JS'
|
|
(() => {
|
|
const details = document.querySelector('#plain')
|
|
details.querySelector('summary').click()
|
|
const opened = { open: details.open, animations: details.getAnimations().length }
|
|
details.querySelector('summary').click()
|
|
return { opened, open: details.open, animations: details.getAnimations().length, closing: details.hasAttribute('data-md-collapse-closing'), style: details.getAttribute('style') }
|
|
})()
|
|
JS);
|
|
|
|
expect($result)->toBe(['opened' => ['open' => true, 'animations' => 0], 'open' => false, 'animations' => 0, 'closing' => false, 'style' => null]);
|
|
});
|