current-time-root-scroller.html (1760B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>ScrollTimeline current time algorithm - root scroller</title> 4 <link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="./testcommon.js"></script> 9 10 <style> 11 html { 12 /* Ensure the document is scrollable. */ 13 min-height: 100%; 14 min-width: 100%; 15 padding-bottom: 100px; 16 padding-right: 100px; 17 } 18 </style> 19 20 <script> 21 promise_test(async t => { 22 const scroller = document.scrollingElement; 23 // Allow layout to finish, otherwise the scroller isn't set up by the time 24 // we check the currentTime of the scroll timeline. 25 await waitForNextFrame(); 26 27 const blockScrollTimeline = new ScrollTimeline( 28 { source: scroller, axis: 'block' }); 29 const inlineScrollTimeline = new ScrollTimeline( 30 { source: scroller, axis: 'inline' }); 31 32 // Wait for new animation frame which allows the timeline to fully initialize 33 await waitForNextFrame(); 34 35 // Unscrolled, both timelines should read a currentTime of 0. 36 assert_percents_equal(blockScrollTimeline.currentTime, 0); 37 assert_percents_equal(inlineScrollTimeline.currentTime, 0); 38 39 // Now do some scrolling and make sure that the ScrollTimelines update. 40 scroller.scrollTop = 50; 41 scroller.scrollLeft = 75; 42 // Wait for new animation frame which allows the timeline to compute new 43 // current time. 44 await waitForNextFrame(); 45 46 assert_percents_equal(blockScrollTimeline.currentTime, 50); 47 assert_percents_equal(inlineScrollTimeline.currentTime, 75); 48 }, 'currentTime calculates the correct time for a document.scrollingElement source'); 49 </script>