blade('Content')); expect($root)->toMatchArray(['<' => 'div', 'data-md-surface' => 'data-md-surface', 'data-md-level' => 'surface-container']) ->not->toHaveKeys(['data-md-padding', 'data-md-corner', 'data-md-outlined', 'data-md-hide-below', 'data-md-hide-from', 'class', 'style']); }); it('fills the surface with each of M3\'s surface roles, and the default for any other', function () { foreach (['surface', 'surface-dim', 'surface-bright', 'surface-container-lowest', 'surface-container-low', 'surface-container', 'surface-container-high', 'surface-container-highest'] as $level) { expect(layoutRoot((string) $this->blade('', ['level' => $level]))['data-md-level'])->toBe($level); } expect(layoutRoot((string) $this->blade(''))['data-md-level'])->toBe('surface-container'); }); it('pads the surface with a spacing token only, and with none for anything else', function () { expect(layoutRoot((string) $this->blade(''))['data-md-padding'])->toBe('space300'); foreach (['24px', '3', 'space1000', 'roomy'] as $padding) { expect(layoutRoot((string) $this->blade('', ['padding' => $padding]))['data-md-padding'])->toBe('none'); } }); it('rounds the surface with a corner token, and leaves it square for anything else', function () { foreach (['none', 'xs', 'sm', 'md', 'lg', 'lg-increased', 'xl', 'xl-increased', 'xxl', 'full'] as $corner) { expect(layoutRoot((string) $this->blade('', ['corner' => $corner]))['data-md-corner'])->toBe($corner); } expect(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-corner'); }); it('draws an outline only when asked', function () { expect(layoutRoot((string) $this->blade('')))->toHaveKey('data-md-outlined') ->and(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-outlined'); }); it('draws the element it is asked for, and a div for one it does not take', function () { expect(layoutRoot((string) $this->blade('Content'))['<'])->toBe('section') ->and((string) $this->blade('Content'))->toContain('') ->and(layoutRoot((string) $this->blade('Content'))['<'])->toBe('div') ->and(layoutRoot((string) $this->blade(''))['<'])->toBe('div'); }); it('hides below and from a breakpoint, never below or from compact', function () { expect(layoutRoot((string) $this->blade(''))) ->toMatchArray(['data-md-hide-below' => 'expanded', 'data-md-hide-from' => 'extra-large']); foreach (['compact', 'tablet', 'Medium', '840'] as $breakpoint) { expect(layoutRoot((string) $this->blade('', ['b' => $breakpoint]))) ->not->toHaveKeys(['data-md-hide-below', 'data-md-hide-from']); } }); it('puts the caller\'s class and style on the surface untouched', function () { expect(layoutRoot((string) $this->blade(''))) ->toMatchArray(['class' => 'upload-zone', 'style' => 'min-height: 12rem;', 'data-test' => 'zone']); }); it('draws the surface from a stylesheet in the layout layer, imported by all.css', function () { $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/surface.css'); expect($css)->toContain('@layer material.layout') ->toContain("[data-md-surface][data-md-level='surface-container-high'] {") ->toContain('background-color: var(--md-sys-color-surface-container-high);') ->toContain('border: 1px solid var(--md-sys-color-outline-variant);') ->toContain("@import './spacing.css';") ->toContain("@import './visibility.css';") // A pane on a surface keeps its content off the surface's edge again. ->toContain("[data-md-surface] > * {\n --md-layout-margin: initial;") ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/surface.css';"); });