inDarkMode() : $page->inLightMode(); return $page->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && document.querySelector('[data-error-page]') !== null"); } /** * Whether the element's computed background is the colour a role resolves to on this page. */ function paintedIn(string $selector, string $role): string { return << { const probe = document.createElement('div'); probe.style.backgroundColor = 'var(--md-sys-color-{$role})'; document.body.append(probe); const expected = getComputedStyle(probe).backgroundColor; probe.remove(); return expected !== 'rgba(0, 0, 0, 0)' && getComputedStyle(document.querySelector('{$selector}')).backgroundColor === expected; })() JS; } it('draws the 404 page in the scheme, in light and dark', function () { missingPage('light') ->assertSee('Page not found') ->assertVisible('[data-error-headline]') ->assertScript("document.documentElement.getAttribute('data-theme') === 'light'") ->assertScript(paintedIn('body', 'surface')) ->assertScript("getComputedStyle(document.querySelector('[data-error-shape] svg')).color !== getComputedStyle(document.body).color") ->assertNoJavaScriptErrors(); missingPage('dark') ->assertScript("document.documentElement.getAttribute('data-theme') === 'dark'") ->assertScript(paintedIn('body', 'surface')) ->assertScript("getComputedStyle(document.body).backgroundColor !== 'rgb(253, 247, 254)'"); }); it('fits a 400px screen without scrolling sideways', function () { missingPage() ->resize(400, 800) ->assertVisible('[data-error-headline]') ->assertScript('document.documentElement.scrollWidth <= window.innerWidth') ->assertScript("document.querySelector('[data-error-actions] a').getBoundingClientRect().right <= 400"); });