Andreas Reinhold / reiniandClaude Opus 5
5b05e52e1c
Plan step 46, M3 § Tabs: "Labels: single row by default; may wrap to a max second line if needed with truncation, or use scrollable tabs to give longer titles more room." In fixed tabs (<x-tabs>, <x-section-nav> up to four sections) the label's text, now its own data-md-tab-text in both views, wraps and truncates at two lines. The tab's 48px (64px stacked) is a minimum, the bar stretches its tabs to one height, and the content stretches with them, so the indicator stays on the divider. Scrollable tabs keep one row. SealShare's "Two-Factor Auth" and "Appearance" showed an ellipsis at 600px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
501 lines
25 KiB
PHP
501 lines
25 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\Blade;
|
|
use Illuminate\Support\Facades\Route;
|
|
use Livewire\Component;
|
|
use Livewire\Livewire;
|
|
|
|
class BarsProbe extends Component
|
|
{
|
|
public string $tab = 'files';
|
|
|
|
public string $deferredTab = 'files';
|
|
|
|
public int $deferredUpdates = 0;
|
|
|
|
// Only runs while the server processes a request that carries $deferredTab along — never on
|
|
// the click alone, since a plain wire:model (no `.live`) only changes it locally until then.
|
|
public function updatedDeferredTab(): void
|
|
{
|
|
$this->deferredUpdates++;
|
|
}
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div>
|
|
<x-app-bar variant="medium" title="Recipients" id="bar">
|
|
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
|
<x-slot:actions><x-theme-toggle id="toggle" /></x-slot:actions>
|
|
</x-app-bar>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
|
|
<p>tab: <span id="tab">{{ $tab }}</span></p>
|
|
|
|
<x-tabs id="share" wire:model.live="tab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'locked', 'label' => 'Locked', 'disabled' => true], ['name' => 'activity', 'label' => 'Activity']]">
|
|
<x-tab name="files">Three files.</x-tab>
|
|
<x-tab name="people">Anna and Ben.</x-tab>
|
|
<x-tab name="activity">Two downloads.</x-tab>
|
|
</x-tabs>
|
|
|
|
<p>deferred tab: <span id="deferred-tab">{{ $deferredTab }}</span>, updates: <span id="deferred-updates">{{ $deferredUpdates }}</span></p>
|
|
|
|
<x-tabs id="deferred" wire:model="deferredTab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People']]">
|
|
<x-tab name="files">Deferred files.</x-tab>
|
|
<x-tab name="people">Deferred people.</x-tab>
|
|
</x-tabs>
|
|
|
|
<x-toolbar label="Formatting">
|
|
<button type="button" id="bold">B</button>
|
|
<button type="button" id="italic">I</button>
|
|
<button type="button" id="underline">U</button>
|
|
</x-toolbar>
|
|
|
|
<x-theme-toggle mode="cycle" id="cycle" />
|
|
<x-theme-toggle mode="picker" />
|
|
|
|
<x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security'], ['title' => 'Advanced notification settings', 'url' => '#notifications'], ['title' => 'Appearance', 'url' => '#appearance']]" no-wire-navigate />
|
|
|
|
<div style="height: 200vh"></div>
|
|
</div>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
function barsProbe()
|
|
{
|
|
Livewire::component('bars-probe', BarsProbe::class);
|
|
|
|
Route::middleware('web')->get('/bars-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:bars-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/bars-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('moves between tabs with the arrow keys, skipping disabled ones, and tells Livewire', function () {
|
|
$page = barsProbe()
|
|
->click('#share-people')
|
|
->assertSeeIn('#tab', 'people')
|
|
->assertSee('Anna and Ben.')
|
|
->assertAttribute('#share-people', 'tabindex', '0')
|
|
->assertAttribute('#share-files', 'tabindex', '-1');
|
|
|
|
$page->keys('#share-people', 'ArrowRight')
|
|
->assertSeeIn('#tab', 'activity')
|
|
->assertScript("document.activeElement.id === 'share-activity'")
|
|
->assertScript("getComputedStyle(document.querySelector('#share-activity [data-md-tab-indicator]')).opacity === '1'");
|
|
|
|
$page->keys('#share-activity', 'Home')
|
|
->assertSeeIn('#tab', 'files')
|
|
->assertScript("document.activeElement.id === 'share-files'");
|
|
|
|
$page->keys('#share-files', 'ArrowLeft')
|
|
->assertSeeIn('#tab', 'activity');
|
|
});
|
|
|
|
it('sends a request per click with wire:model.live, but nothing until then with plain wire:model', function () {
|
|
// updatedDeferredTab() on the probe only runs while the server processes a request that
|
|
// carries $deferredTab with it — never from the click alone — so its counter (not a browser
|
|
// network hook, which a plain property commit does not reliably fire) tells whether a click
|
|
// reached the server at all.
|
|
$page = barsProbe();
|
|
|
|
// Plain wire:model is entangled locally: the click switches the panel and its aria-selected at
|
|
// once, but the property itself only reaches the server on the next request from anything else.
|
|
$page->click('#deferred-people')
|
|
->assertScript("document.querySelector('#deferred-people').getAttribute('aria-selected') === 'true'")
|
|
->assertSee('Deferred people.')
|
|
->assertSeeIn('#deferred-tab', 'files')
|
|
->assertSeeIn('#deferred-updates', '0');
|
|
|
|
// wire:model.live sends its own request, which carries the deferred property above along with
|
|
// it — the one request updates both.
|
|
$page->click('#share-people')
|
|
->assertSeeIn('#tab', 'people')
|
|
->assertSeeIn('#deferred-tab', 'people')
|
|
->assertSeeIn('#deferred-updates', '1')
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('collapses a medium app bar into its row as the page scrolls, and fades its small title in', function () {
|
|
$headline = "getComputedStyle(document.querySelector('#bar [data-md-app-bar-row] [data-md-app-bar-headline]')).opacity";
|
|
|
|
$page = barsProbe()
|
|
->assertScript("! document.querySelector('#bar').hasAttribute('data-md-collapsed')")
|
|
->assertScript("{$headline} === '0'");
|
|
|
|
$page->script('window.scrollTo(0, 600)');
|
|
|
|
$page->assertScript("document.querySelector('#bar').hasAttribute('data-md-collapsed') && document.querySelector('#bar').hasAttribute('data-md-scrolled')")
|
|
->assertScript("Math.round(document.querySelector('#bar [data-md-app-bar-row]').getBoundingClientRect().top) === 0")
|
|
->assertScript("document.querySelector('#bar').getBoundingClientRect().bottom <= 65")
|
|
->assertScript("{$headline} === '1'");
|
|
|
|
$page->script('window.scrollTo(0, 0)');
|
|
|
|
$page->assertScript("! document.querySelector('#bar').hasAttribute('data-md-collapsed')");
|
|
});
|
|
|
|
it('moves focus along a toolbar with the arrow keys', function () {
|
|
barsProbe()
|
|
->keys('#bold', 'ArrowRight')
|
|
->assertScript("document.activeElement.id === 'italic'")
|
|
->keys('#italic', 'End')
|
|
->assertScript("document.activeElement.id === 'underline'")
|
|
->keys('#underline', 'ArrowRight')
|
|
->assertScript("document.activeElement.id === 'bold'");
|
|
});
|
|
|
|
it('switches the theme from a toggle, a cycle and a picker', function () {
|
|
$page = barsProbe()
|
|
->click('label:has(input[name="material-theme"][value="light"])')
|
|
->assertScript("document.documentElement.dataset.theme === 'light'")
|
|
->assertAttribute('#toggle', 'aria-pressed', 'false');
|
|
|
|
$page->click('#toggle')
|
|
->assertScript("document.documentElement.dataset.theme === 'dark'")
|
|
->assertAttribute('#toggle', 'aria-pressed', 'true')
|
|
->assertScript('document.querySelector(\'input[name="material-theme"][value="dark"]\').checked');
|
|
|
|
$page->click('#cycle')
|
|
->assertScript("document.documentElement.dataset.themeChoice === 'system'")
|
|
->click('#cycle')
|
|
->assertScript("document.documentElement.dataset.themeChoice === 'light'");
|
|
});
|
|
|
|
it('turns section tabs into a picker on a phone', function () {
|
|
barsProbe()
|
|
->resize(400, 800)
|
|
->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display === 'none'")
|
|
->click('[data-md-section-nav-picker] button')
|
|
->assertScript("document.querySelector('[data-md-section-nav-picker] [popover]').matches(':popover-open')")
|
|
// A menu of places: the current section is the page, not a checked choice.
|
|
->assertAttribute('[data-md-section-nav-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
|
|
->assertScript("! document.querySelector('[data-md-section-nav-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
|
|
});
|
|
|
|
it('shares the row width equally between the section nav\'s items, whatever their label', function () {
|
|
$widths = "[...document.querySelectorAll('[data-md-section-nav] [data-md-tabs-bar] > li')].map((li) => Math.round(li.getBoundingClientRect().width))";
|
|
|
|
barsProbe()
|
|
->assertScript("{$widths}.length === 4")
|
|
->assertScript("new Set({$widths}).size === 1")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
/**
|
|
* Plan step 46, M3 § Tabs: "Labels: single row by default; may wrap to a max second line if needed
|
|
* with truncation". Four sections are fixed tabs; at a 600px window a long title no longer fits its
|
|
* share, so it takes a second line (SealShare's "Two-Factor Auth" showed an ellipsis on one) inside
|
|
* its tab, the row's tabs keep one height, and the chosen tab's indicator stays on the divider.
|
|
*/
|
|
it('wraps a long section title to a second line in a fixed row, keeping the tabs one height and the indicator on the divider', function () {
|
|
$tabs = "[...document.querySelectorAll('[data-md-section-nav] [data-md-tab]')]";
|
|
$long = "document.querySelector('[data-md-section-nav] [data-md-tab][href=\"#notifications\"]')";
|
|
|
|
barsProbe()
|
|
->resize(600, 800)
|
|
->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display !== 'none'")
|
|
->assertScript("{$tabs}.length === 4 && ! document.querySelector('[data-md-section-nav] [data-md-tabs-bar]').hasAttribute('data-md-scrollable')")
|
|
// Two lines of the label's own line height, not one truncated row.
|
|
->assertScript("(() => { const text = {$long}.querySelector('[data-md-tab-text]'); return Math.round(text.getBoundingClientRect().height / parseFloat(getComputedStyle(text).lineHeight)) === 2; })()")
|
|
// Inside its tab, both ways.
|
|
->assertScript("(() => { const tab = {$long}.getBoundingClientRect(); const text = {$long}.querySelector('[data-md-tab-text]').getBoundingClientRect(); return text.left >= tab.left - 0.5 && text.right <= tab.right + 0.5 && text.top >= tab.top - 0.5 && text.bottom <= tab.bottom + 0.5; })()")
|
|
// One height for the row, at least M3's 48px.
|
|
->assertScript("new Set({$tabs}.map((tab) => Math.round(tab.getBoundingClientRect().height))).size === 1 && {$tabs}[0].getBoundingClientRect().height >= 48")
|
|
// The chosen tab's indicator: shown, under its content, on the divider, within its tab.
|
|
->assertScript(<<<'JS'
|
|
(() => {
|
|
const tab = document.querySelector('[data-md-section-nav] [data-md-tab][aria-current="page"]');
|
|
const bar = tab.closest('[data-md-tabs-bar]');
|
|
const indicator = tab.querySelector('[data-md-tab-indicator]');
|
|
const box = tab.getBoundingClientRect();
|
|
const content = tab.querySelector('[data-md-tab-content]').getBoundingClientRect();
|
|
const line = indicator.getBoundingClientRect();
|
|
const divider = bar.getBoundingClientRect().bottom - parseFloat(getComputedStyle(bar).borderBottomWidth);
|
|
|
|
return getComputedStyle(indicator).opacity === '1'
|
|
&& line.top >= content.bottom - 0.5
|
|
&& Math.abs(line.bottom - divider) <= 1
|
|
&& line.left >= box.left - 0.5 && line.right <= box.right + 0.5;
|
|
})()
|
|
JS)
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
class AppBarOverflowProbe extends Component
|
|
{
|
|
public int $stars = 0;
|
|
|
|
public function star(): void
|
|
{
|
|
$this->stars++;
|
|
}
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div>
|
|
<p>stars: <span id="stars">{{ $stars }}</span></p>
|
|
|
|
<x-app-bar title="Shares" id="bar" :actions="[
|
|
['label' => 'Search', 'icon' => 'search'],
|
|
['label' => 'Share', 'icon' => 'share'],
|
|
['label' => 'Star', 'icon' => 'star', 'wire:click' => 'star'],
|
|
['label' => 'Archive', 'icon' => 'archive'],
|
|
['label' => 'Delete', 'icon' => 'delete'],
|
|
]" />
|
|
|
|
<div style="height: 200vh"></div>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
function appBarOverflowProbe()
|
|
{
|
|
Livewire::component('app-bar-overflow-probe', AppBarOverflowProbe::class);
|
|
|
|
Route::middleware('web')->get('/app-bar-overflow-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:app-bar-overflow-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/app-bar-overflow-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('shows the app bar overflow at exactly 599 and 600px', function () {
|
|
$visible = "[...document.querySelectorAll('#bar [data-md-app-bar-action]')].filter((el) => getComputedStyle(el).display !== 'none').length";
|
|
|
|
appBarOverflowProbe()->resize(599, 800)
|
|
// Two icon buttons below 600px — the kept action and the overflow button.
|
|
->assertScript("{$visible} === 1")
|
|
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"]')).display !== 'none'")
|
|
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"medium\"]')).display === 'none'")
|
|
->resize(600, 800)
|
|
// Four from 600px — three kept actions and the overflow button.
|
|
->assertScript("{$visible} === 3")
|
|
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"]')).display === 'none'")
|
|
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"medium\"]')).display !== 'none'")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('moves the keyboard through an app bar\'s overflow menu, and closes it once the width no longer shows it', function () {
|
|
$page = appBarOverflowProbe()->resize(599, 800);
|
|
|
|
$page->click('#bar [data-md-app-bar-overflow="compact"] [data-md-menu-trigger] button')
|
|
->assertScript("document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
|
|
->keys(':focus', 'ArrowDown')
|
|
->assertScript("document.activeElement.textContent.includes('Star')")
|
|
->keys(':focus', 'ArrowDown')
|
|
->assertScript("document.activeElement.textContent.includes('Archive')")
|
|
->keys(':focus', 'Escape')
|
|
->assertScript("! document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')");
|
|
|
|
// Past the reopen guard of the Escape above (menu.js), so the click below is on its own.
|
|
$page->wait(0.3);
|
|
|
|
// Reopen it, then resize across 600px: the compact menu's trigger is no longer shown, so the
|
|
// menu it opened closes rather than staying open anchored to nothing.
|
|
$page->click('#bar [data-md-app-bar-overflow="compact"] [data-md-menu-trigger] button')
|
|
->assertScript("document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
|
|
->resize(900, 800)
|
|
->assertScript("! document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('runs a wire:click action from either the icon button or its overflow menu item', function () {
|
|
$page = appBarOverflowProbe()->resize(900, 800);
|
|
|
|
$page->click('#bar [data-md-app-bar-action] [aria-label="Star"]')
|
|
->assertSeeIn('#stars', '1');
|
|
|
|
$page->resize(599, 800)
|
|
->click('#bar [data-md-app-bar-overflow="compact"] [data-md-menu-trigger] button')
|
|
->click('[role="menuitem"]:has-text("Star")')
|
|
->assertSeeIn('#stars', '2');
|
|
});
|
|
|
|
function toolbarScaffoldProbe()
|
|
{
|
|
Route::middleware('web')->get('/toolbar-scaffold-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-scaffold :destinations="[
|
|
['title' => 'Inbox', 'icon' => 'inbox', 'url' => '/toolbar-scaffold-probe', 'active' => true],
|
|
['title' => 'Sent', 'icon' => 'send', 'url' => '/toolbar-scaffold-probe'],
|
|
]">
|
|
<x-toolbar variant="docked" rounded place="bottom" label="Formatting" id="toolbar">
|
|
<x-button id="bold-btn" icon="format_bold" tooltip="Bold" />
|
|
<x-divider vertical />
|
|
<x-button id="italic-btn" icon="format_italic" tooltip="Italic" />
|
|
<x-button id="underline-btn" icon="format_underlined" tooltip="Underline" disabled />
|
|
</x-toolbar>
|
|
|
|
<div style="height: 200vh"></div>
|
|
</x-scaffold>
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/toolbar-scaffold-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('keeps a docked toolbar clear of the navigation bar below medium', function () {
|
|
toolbarScaffoldProbe()->resize(599, 800)
|
|
->assertScript("getComputedStyle(document.querySelector('[data-md-scaffold-bar]')).display !== 'none'")
|
|
// A docked toolbar at place="bottom" sits above --material-bottom-bar, never on top of it.
|
|
->assertScript("document.querySelector('#toolbar').getBoundingClientRect().bottom <= document.querySelector('[data-md-scaffold-bar]').getBoundingClientRect().top")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('lifts a snackbar above a docked toolbar that sits on the navigation bar', function () {
|
|
$page = toolbarScaffoldProbe()->resize(599, 800);
|
|
|
|
$page->script("materialToast('Link copied', { timeout: 10000 })");
|
|
$page->wait(1);
|
|
|
|
// M3 nudges a snackbar "upward to avoid overlapping FABs/docked toolbars": the toolbar publishes
|
|
// --material-bottom-toolbar on the scaffold's root, where it sees the bar under it.
|
|
$page->assertScript("document.querySelector('[data-md-toast-snackbar]').getBoundingClientRect().bottom <= document.querySelector('#toolbar').getBoundingClientRect().top")
|
|
->assertScript("document.querySelector('#toolbar').getBoundingClientRect().bottom <= document.querySelector('[data-md-scaffold-bar]').getBoundingClientRect().top")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('lifts a snackbar above a floating toolbar placed at the bottom, without a scaffold', function () {
|
|
Route::middleware('web')->get('/floating-toolbar-probe', fn () => Blade::render(<<<'BLADE'
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<x-theme-script />
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
</head>
|
|
<body>
|
|
<x-toolbar place="bottom" label="Main" id="floating">
|
|
<x-button icon="upload" aria-label="Upload" />
|
|
</x-toolbar>
|
|
<x-toast />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
$page = visit('/floating-toolbar-probe')->resize(393, 800)->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
|
|
$page->script("materialToast('Link copied', { timeout: 10000 })");
|
|
$page->wait(1);
|
|
|
|
// 16px apart: the snackbar's own margin above what the toolbar covers.
|
|
$page->assertScript("Math.round(document.querySelector('#floating').getBoundingClientRect().top - document.querySelector('[data-md-toast-snackbar]').getBoundingClientRect().bottom) === 16")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('rounds a docked toolbar and its divider from 840px, clear of the window\'s edges', function () {
|
|
$page = toolbarScaffoldProbe()->resize(800, 800);
|
|
|
|
$page->assertScript("getComputedStyle(document.querySelector('#toolbar')).borderRadius === '0px'")
|
|
->assertScript("Math.round(document.querySelector('#toolbar').getBoundingClientRect().left) === 0")
|
|
->assertScript("Math.round(document.querySelector('#toolbar').getBoundingClientRect().right) === Math.round(window.innerWidth)");
|
|
|
|
$page->resize(1024, 800)
|
|
->assertScript("getComputedStyle(document.querySelector('#toolbar')).borderRadius !== '0px'")
|
|
->assertScript("document.querySelector('#toolbar').getBoundingClientRect().left >= 16")
|
|
->assertScript("window.innerWidth - document.querySelector('#toolbar').getBoundingClientRect().right >= 16")
|
|
->assertScript("window.innerHeight - document.querySelector('#toolbar').getBoundingClientRect().bottom >= 16")
|
|
->assertScript("getComputedStyle(document.querySelector('#toolbar [role=\"separator\"]')).height === '40px'")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('draws a disabled icon button inside a toolbar disabled, not in the toolbar\'s primary recolour', function () {
|
|
// toolbar.css recolours a standard (non-vibrant) toolbar's icon buttons to primary, but its
|
|
// selector excludes :disabled and [aria-disabled] so button.css's own disabled colour still
|
|
// wins there (resources/css/components/toolbar.css). A scratch element resolves each formula
|
|
// to a real rgb string, so the comparison does not have to guess the browser's serialization.
|
|
$primary = "(() => { const d = document.createElement('span'); d.style.color = 'var(--md-sys-color-primary)'; document.body.appendChild(d); const v = getComputedStyle(d).color; d.remove(); return v; })()";
|
|
$disabledColor = "(() => { const d = document.createElement('span'); d.style.color = 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent)'; document.body.appendChild(d); const v = getComputedStyle(d).color; d.remove(); return v; })()";
|
|
|
|
toolbarScaffoldProbe()->resize(1024, 800)
|
|
->assertScript("getComputedStyle(document.querySelector('#bold-btn')).color === {$primary}")
|
|
->assertScript("getComputedStyle(document.querySelector('#underline-btn')).color !== {$primary}")
|
|
->assertScript("getComputedStyle(document.querySelector('#underline-btn')).color === {$disabledColor}")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
function tabsFirstPaintProbe(): void
|
|
{
|
|
Route::middleware('web')->get('/tabs-first-paint-probe', fn () => Blade::render(<<<'BLADE'
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<x-theme-script />
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
</head>
|
|
<body>
|
|
<x-tabs selected="people" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'activity', 'label' => 'Activity']]">
|
|
<x-tab name="files">Files panel</x-tab>
|
|
<x-tab name="people">People panel</x-tab>
|
|
<x-tab name="activity">Activity panel</x-tab>
|
|
</x-tabs>
|
|
|
|
<script>
|
|
// Runs while the document is still being parsed, before Alpine (further down
|
|
// the page) exists — what the first paint shows.
|
|
window.firstPaint = [...document.querySelectorAll('[role="tabpanel"]')].map((panel) => getComputedStyle(panel).display)
|
|
</script>
|
|
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
}
|
|
|
|
it('never flashes a tab panel before Alpine boots', function () {
|
|
tabsFirstPaintProbe();
|
|
|
|
// Only the chosen ("people") panel is on screen at the moment the inline script right after
|
|
// the panels runs — the server's own `style="display: none"`, not Alpine's x-show, is what
|
|
// kept the other two off screen up to here (N-05).
|
|
$page = visit('/tabs-first-paint-probe')
|
|
->assertScript("window.eval('window.firstPaint.join(\",\")') === 'none,block,none'");
|
|
|
|
$page->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'")
|
|
->assertNoJavaScriptErrors();
|
|
});
|