blade('OneTwo')); expect($root)->toMatchArray(['<' => 'div', 'data-md-row' => 'data-md-row']) ->not->toHaveKeys(['data-md-gap', 'data-md-align', 'data-md-justify', 'data-md-wrap', 'data-md-stack-below']); }); it('aligns its children across it and places them along it', function () { foreach (['center', 'start', 'end', 'stretch', 'baseline'] as $align) { expect(layoutRoot((string) $this->blade('', ['align' => $align]))['data-md-align'])->toBe($align); } foreach (['start', 'center', 'end', 'between'] as $justify) { expect(layoutRoot((string) $this->blade('', ['justify' => $justify]))['data-md-justify'])->toBe($justify); } expect(layoutRoot((string) $this->blade('')))->not->toHaveKeys(['data-md-align', 'data-md-justify']); }); it('wraps only when asked', function () { expect(layoutRoot((string) $this->blade('')))->toHaveKey('data-md-wrap') ->and(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-wrap'); }); it('stacks below one of M3\'s breakpoints, and never below compact', function () { foreach (['medium', 'expanded', 'large', 'extra-large'] as $breakpoint) { expect(layoutRoot((string) $this->blade('', ['b' => $breakpoint]))['data-md-stack-below'])->toBe($breakpoint); } foreach (['compact', 'tablet', '600'] as $breakpoint) { expect(layoutRoot((string) $this->blade('', ['b' => $breakpoint])))->not->toHaveKey('data-md-stack-below'); } }); it('draws the row from a stylesheet, stacking at the breakpoint in px', function () { $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/row.css'); expect($css)->toContain("@media (width < 840px) {\n [data-md-row][data-md-stack-below='expanded'] {\n flex-direction: column;") ->toContain("[data-md-row][data-md-stack-below='expanded']:not([data-md-align]) {\n align-items: stretch;"); });