get($path, fn () => Blade::render(<<

@vite(config('livewire-material.showcase.vite')) @livewireStyles {$body} @livewireScripts BLADE)); return layoutReady(visit($path)->resize($width, $height)); } function layoutReady(mixed $page): mixed { return $page->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); } /** A computed style of the element matching the selector. */ function layoutStyle(string $selector, string $property): string { return "getComputedStyle(document.querySelector('{$selector}')).{$property}"; } /** A side of the element's box, rounded to the pixel. */ function layoutRect(string $selector, string $side): string { return "Math.round(document.querySelector('{$selector}').getBoundingClientRect().{$side})"; } /** How many column tracks a grid has. */ function layoutColumns(string $selector): string { return layoutStyle($selector, 'gridTemplateColumns').".split(' ').length"; } it('spaces a stack with its token, never with its parent\'s, and hides it from a breakpoint over its own display', function () { $body = '

One

Two

Three

' .'

Compact only

'; layoutPage($body, 599) ->assertScript(layoutStyle('#outer', 'flexDirection')." === 'column'") ->assertScript(layoutStyle('#outer', 'rowGap')." === '24px'") ->assertScript(layoutStyle('#inner', 'rowGap')." === '0px'") ->assertScript(layoutStyle('#hidden-from', 'display')." === 'flex'"); layoutPage($body, 600) ->assertScript(layoutStyle('#hidden-from', 'display')." === 'none'"); });