blade(<<<'BLADE'
BLADE);
expect($docked)
->toMatch('/role="toolbar"[^>]*data-md-variant="docked"\s+data-md-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-md-variant="floating"')
->not->toContain('data-md-rounded')
->and((string) $this->blade(''))
->not->toContain('data-md-rounded');
});
it('rounds a docked toolbar from expanded only, and lifts a placed one off the window\'s edges', function () {
$css = ComponentStylesheet::read('toolbar');
expect($css->declarations('[data-md-toolbar][data-md-variant=\'docked\'][data-md-rounded]', ['@media (width >= 840px)']))
// "On web and large screens, the docked toolbar can be rounded" (toolbars/guidelines).
->toBe(['min-height' => '64px', 'padding-bottom' => '0', 'border-radius' => 'var(--md-sys-shape-corner-full)'])
// 16dp from each side, M3's minimum outside padding; 16px above a bottom bar.
->and($css->declarations('[data-md-toolbar][data-md-variant=\'docked\'][data-md-rounded][data-md-toolbar-place=\'bottom\']', ['@media (width >= 840px)']))
->toBe([
'right' => 'calc(var(--md-sys-measurement-space200) + var(--material-safe-right, env(safe-area-inset-right)))',
'bottom' => 'calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200))',
'left' => 'calc(var(--md-sys-measurement-space200) + var(--material-safe-left, env(safe-area-inset-left)))',
'width' => 'auto',
]);
preg_match('/@media \(width >= 840px\) \{(.*)\}\s*\}\s*$/s', $css->css, $expanded);
// Nothing outside the query rounds a docked toolbar: below expanded it stays square.
expect(str_replace($expanded[0] ?? '', '', $css->css))->not->toContain('[data-md-rounded]');
});
it('stands a divider in a toolbar as tall as the buttons it separates', function () {
$css = ComponentStylesheet::read('toolbar');
expect($css->declarations('[data-md-toolbar]:not([data-md-vertical]) > [role=\'separator\'][aria-orientation=\'vertical\']'))
->toBe(['align-self' => 'center', 'height' => '40px'])
->and($css->declarations('[data-md-toolbar][data-md-vertical] > [role=\'separator\'][aria-orientation=\'horizontal\']'))
->toBe(['align-self' => 'center', 'width' => '40px']);
});