scroll-timeline-snapshotting.html (1764B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>ScrollTimeline snapshotting</title> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#event-loop"> 5 <link rel="help" href="https://github.com/whatwg/html/pull/11613"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/web-animations/testcommon.js"></script> 12 <script src="./testcommon.js"></script> 13 <script src="/css/css-scroll-snap/support/common.js"></script> 14 15 <style> 16 body { 17 height: 800px; 18 width: 800px; 19 } 20 </style> 21 <div id="log"></div> 22 23 <script> 24 'use strict'; 25 26 promise_test(async t => { 27 const scroller = document.scrollingElement; 28 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 29 const timeline = new ScrollTimeline({source: scroller}); 30 scroller.scrollTo(0, 0); 31 assert_equals(scroller.scrollTop, 0, "verify test pre-condition"); 32 33 scroller.scrollBy({top: 100, behavior: 'smooth'}); 34 // Wait for the scroll to change. 35 await waitForScrollEvent(document); 36 // The next frame the scroll changes, the scroll-timelines should not be 37 // updated before the scroll events are dispatched. Store the scroll position 38 // from the previous frame to compare the timeline to. 39 let scroll_percentage = (scroller.scrollTop / maxScroll) * 100; 40 41 await waitForScrollEvent(document); 42 43 assert_percents_equal( 44 timeline.currentTime, 45 scroll_percentage, 46 'Scroll timeline current time corresponds to the scroll position.'); 47 }, 'ScrollTimeline current time is updated after programmatic animated ' + 48 'scroll.'); 49 50 </script>