| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>ScrollTimeline current time algorithm</title> |
| <link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="./resources/scrolltimeline-utils.js"></script> |
| |
| <body></body> |
| |
| <script> |
| 'use strict'; |
| |
| promise_test(async t => { |
| const scroller = setupScrollTimelineTest(); |
| const scrollerSize = scroller.scrollHeight - scroller.clientHeight; |
| |
| const scrollTimeline = new ScrollTimeline({ |
| scrollSource: scroller, |
| timeRange: scrollerSize, |
| orientation: 'block', |
| scrollOffsets: [CSS.px(10), CSS.px(20), CSS.px(40), CSS.px(70), CSS.px(90)], |
| }); |
| |
| var offset = 0; |
| var w = 1 / 4; // offset weight |
| var p = 0; // progress within the offset |
| |
| scroller.scrollTop = 10; |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| p = (12 - 10) / (20 - 10); |
| scroller.scrollTop = 12; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| offset = 1; |
| p = 0; |
| scroller.scrollTop = 20; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| p = (35 - 20) / (40 - 20); |
| scroller.scrollTop = 35; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| offset = 2; |
| p = 0; |
| scroller.scrollTop = 40; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| p = (60 - 40) / (70 - 40); |
| scroller.scrollTop = 60; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| offset = 3; |
| p = 0; |
| scroller.scrollTop = 70; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| p = (80 - 70) / (90 - 70); |
| scroller.scrollTop = 80; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, (offset + p) * w * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| scroller.scrollTop = 90; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| }, 'currentTime calculations when multiple scroll offsets are specified'); |
| |
| promise_test(async t => { |
| const scroller = setupScrollTimelineTest(); |
| const scrollerSize = scroller.scrollHeight - scroller.clientHeight; |
| |
| var scrollTimeline = new ScrollTimeline({ |
| scrollSource: scroller, |
| timeRange: scrollerSize, |
| orientation: 'block', |
| scrollOffsets: [CSS.px(300), CSS.px(200), CSS.px(10)], |
| }); |
| |
| scroller.scrollTop = 250; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, 0, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| scroller.scrollTop = 400; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| scrollTimeline = new ScrollTimeline({ |
| scrollSource: scroller, |
| timeRange: scrollerSize, |
| orientation: 'block', |
| scrollOffsets: [CSS.px(0), CSS.px(400), CSS.px(200)], |
| }); |
| |
| scroller.scrollTop = 100; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, 0.25 * 0.5 * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| |
| scrollTimeline = new ScrollTimeline({ |
| scrollSource: scroller, |
| timeRange: scrollerSize, |
| orientation: 'block', |
| scrollOffsets: [CSS.px(200), CSS.px(0), CSS.px(400)], |
| }); |
| |
| scroller.scrollTop = 200; |
| await waitForNextFrame(); |
| assert_times_equal( |
| scrollTimeline.currentTime, 0.5 * scrollerSize + 0.5 * 0.5 * scrollerSize, |
| "current time calculation when scroll = " + scroller.scrollTop); |
| }, 'currentTime calculations when overlapping scroll offsets are specified'); |
| </script> |
