| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>ScrollTimeline progress with single-axis scroll containers</title> |
| <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines-anonymous"> |
| <link rel="author" title="Free Debreuil" href="mailto:freedebreuil@google.com"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="./testcommon.js"></script> |
| <style> |
| .inline-scroller { |
| overflow-block: clip; |
| overflow-inline: scroll; |
| } |
| .vertical-writing-mode { writing-mode: vertical-rl; } |
| .horizontal-writing-mode { writing-mode: horizontal-tb; } |
| #outer { |
| width: 100px; |
| height: 100px; |
| } |
| #inner { |
| width: 300px; |
| height: 100px; |
| } |
| #subject { |
| width: 50px; |
| height: 50px; |
| animation: noop 1s; |
| animation-timeline: scroll(nearest block); |
| } |
| @keyframes noop {} |
| </style> |
| |
| <div id="outer" class="horizontal-writing-mode inline-scroller"> |
| <div id="inner" class="vertical-writing-mode inline-scroller"> |
| <div id="subject" class="horizontal-writing-mode"></div> |
| </div> |
| </div> |
| |
| <script> |
| promise_test(async t => { |
| t.add_cleanup(() => { outer.scrollLeft = 0; }); |
| const timeline = subject.getAnimations()[0].timeline; |
| assert_equals(timeline.source, outer); |
| |
| outer.scrollLeft = (outer.scrollWidth - outer.clientWidth) / 2; |
| await waitForNextFrame(); |
| |
| assert_percents_equal(timeline.currentTime, 50); |
| }, 'Timeline progress follows the matched source\'s scroll offset'); |
| |
| promise_test(async t => { |
| t.add_cleanup(() => { |
| outer.style.direction = ''; |
| outer.scrollLeft = 0; |
| }); |
| outer.style.direction = 'rtl'; |
| const timeline = subject.getAnimations()[0].timeline; |
| assert_equals(timeline.source, outer); |
| |
| outer.scrollLeft = -(outer.scrollWidth - outer.clientWidth) / 2; |
| await waitForNextFrame(); |
| |
| assert_percents_equal(timeline.currentTime, 50); |
| }, 'Timeline progress is measured from the matched source\'s scroll origin'); |
| </script> |
