Andreas Reinhold / reiniandClaude Opus 5
acd6ba21ae
Plan step 35: <x-feed min-item gap>, following the reference's feed rules - one column below medium, then as many equal columns of at least the minimum item width as the feed has room for, 24px apart from medium, items in their source order. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
43 lines
2.3 KiB
PHP
43 lines
2.3 KiB
PHP
<?php
|
|
|
|
it('lays out a feed with a 240px minimum item and M3\'s spacer', function () {
|
|
$html = (string) $this->blade('<x-feed><article>One</article><article>Two</article></x-feed>');
|
|
|
|
expect(layoutRoot($html))->toMatchArray(['<' => 'div', 'data-md-feed' => 'data-md-feed', 'style' => '--md-min-item: 240px;'])
|
|
->not->toHaveKey('data-md-gap')
|
|
->and($html)->toContain('<article>One</article><article>Two</article>');
|
|
});
|
|
|
|
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('<x-feed :min-item="$m" />', ['m' => $given]))['style'])->toBe("--md-min-item: {$length};");
|
|
}
|
|
|
|
expect(layoutRoot((string) $this->blade('<x-feed min-item="a third" />'))['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('<x-feed gap="space400" />'))['data-md-gap'])->toBe('space400')
|
|
->and(layoutRoot((string) $this->blade('<x-feed gap="wide" />'))['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('<x-feed as="ul" hide-below="medium" class="photos" style="padding-block: 1rem" />')))
|
|
->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/layout.css'))->toContain("@import './layout/feed.css';");
|
|
});
|