blade(<<<'BLADE' BLADE); expect($docked) ->toMatch('/role="toolbar"[^>]*data-variant="docked"\s+data-rounded/') // The divider between two groups is the toolbar's child, where toolbar.css stands it up. ->toMatch('/role="toolbar".*aria-label="Undo".*]*>\s*<\/div>.*aria-label="Bold"/s') ->and((string) $this->blade('')) ->toContain('data-variant="floating"') ->not->toContain('data-rounded') ->and((string) $this->blade('')) ->not->toContain('data-rounded'); }); it('rounds a docked toolbar from expanded only, and lifts a placed one off the window\'s edges', function () { $css = file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css'); preg_match('/@media \(width >= 52\.5rem\) \{(.*)\}\s*$/s', $css, $expanded); expect($expanded[1] ?? '') // "On web and large screens, the docked toolbar can be rounded" (toolbars/guidelines). ->toMatch('/\[data-toolbar\]\[data-variant="docked"\]\[data-rounded\] \{[^}]*border-radius: var\(--md-sys-shape-corner-full\);/') ->toMatch('/\[data-toolbar\]\[data-variant="docked"\]\[data-rounded\] \{[^}]*padding-bottom: 0;/') // 16dp from each side, M3's minimum outside padding; 16px above a bottom bar. ->toMatch('/\[data-rounded\]\[data-toolbar-place="bottom"\] \{[^}]*right: calc\(1rem \+ var\(--material-safe-right, env\(safe-area-inset-right\)\)\);/') ->toMatch('/\[data-rounded\]\[data-toolbar-place="bottom"\] \{[^}]*left: calc\(1rem \+ var\(--material-safe-left, env\(safe-area-inset-left\)\)\);/') ->toMatch('/\[data-rounded\]\[data-toolbar-place="bottom"\] \{[^}]*bottom: calc\(max\(var\(--material-bottom-bar, 0px\), var\(--material-safe-bottom, env\(safe-area-inset-bottom\)\)\) \+ 1rem\);/') // Nothing outside the query rounds a docked toolbar: below expanded it stays square. ->and(str_replace($expanded[0] ?? '', '', $css)) ->not->toContain('[data-rounded]'); }); it('stands a divider in a toolbar as tall as the buttons it separates', function () { expect(file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css')) ->toMatch('/\[data-toolbar\]:not\(\[data-vertical\]\) > \[role="separator"\]\[aria-orientation="vertical"\] \{\s+align-self: center;\s+height: 2\.5rem;/') ->toMatch('/\[data-toolbar\]\[data-vertical\] > \[role="separator"\]\[aria-orientation="horizontal"\] \{\s+align-self: center;\s+width: 2\.5rem;/'); });