Leave carousel items unmasked under reduced motion
Plan step 12, containment.md C-05. Only the parallax half of M3's rule was honoured: the mask was still written every frame, so items kept growing and shrinking between the keylines. Under reduced motion the inset, the shift and the label fade are now all zero, so every item stays at the strategy's large size and the keylines only decide where the row snaps. `--material-carousel-pin` went with it: with no mask there is nothing to pin the content to. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
335ea4f4f1
commit
f895b553b6
@@ -146,15 +146,14 @@ it('brings a partly hidden item into focus when it is pressed', function () {
|
||||
$page->assertScript(onCarousel(0, 'return inset(4) < 0.5 && scroller.scrollLeft > 0'));
|
||||
});
|
||||
|
||||
it('scrolls instantly and keeps content pinned to its mask under reduced motion', function () {
|
||||
it('scrolls instantly and leaves every item unmasked under reduced motion', function () {
|
||||
carouselShowcase(['reducedMotion' => 'reduce'])
|
||||
->assertScript(onCarousel(0, <<<'JS'
|
||||
root.querySelector('[aria-label="Next"]').click()
|
||||
const arrived = at(1)
|
||||
await pause(50)
|
||||
const last = items.length - 1
|
||||
return arrived && inset(last) > 0.5
|
||||
&& surface(last).style.getPropertyValue('--material-carousel-pin') === surface(last).style.getPropertyValue('--material-carousel-inset')
|
||||
return arrived && items.every((_, i) => inset(i) === 0)
|
||||
&& items.every((item) => Math.abs(item.getBoundingClientRect().width - size) < 1.5)
|
||||
JS));
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user