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('keeps one column on a compact window and fills columns from medium', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/feed.css');
expect($css)->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');
});