blade('OneTwo');
expect(layoutRoot($html))->toMatchArray(['<' => 'div', 'data-md-feed' => 'data-md-feed', 'style' => '--md-min-item: 240px;'])
->not->toHaveKey('data-md-gap')
->and($html)->toContain('OneTwo');
});
it('takes a minimum item width as a length or a number of px', function () {
foreach (['280px' => '280px', '18rem' => '18rem', '320' => '320px'] as $given => $length) {
expect(layoutRoot((string) $this->blade('', ['m' => $given]))['style'])->toBe("--md-min-item: {$length};");
}
expect(layoutRoot((string) $this->blade(''))['style'])->toBe('--md-min-item: 240px;');
});
it('replaces the spacer with a spacing token, and with no gap for an unknown one', function () {
expect(layoutRoot((string) $this->blade(''))['data-md-gap'])->toBe('space400')
->and(layoutRoot((string) $this->blade(''))['data-md-gap'])->toBe('none');
});
it('takes the element, the visibility props, and the caller\'s class and style after its own', function () {
expect(layoutRoot((string) $this->blade('')))
->toMatchArray([
'<' => 'ul',
'data-md-hide-below' => 'medium',
'class' => 'photos',
'style' => '--md-min-item: 240px; padding-block: 1rem;',
]);
});
it('keeps one column on a compact window and fills columns from medium, in the layout layer', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/feed.css');
expect($css)->toContain('@layer material.layout')
->toContain("[data-md-feed] {\n display: grid;\n grid-template-columns: minmax(0, 1fr);")
->toContain("@media (width >= 600px) {\n grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr));")
->not->toContain('grid-auto-flow')
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/feed.css';");
});