scroll-timeline-sampling.html (1496B)
1 <!DOCTYPE html> 2 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#avoiding-cycles"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/web-animations/testcommon.js"></script> 6 <style> 7 #scroller { 8 overflow: hidden; 9 width: 100px; 10 height: 100px; 11 scroll-timeline: --timeline; 12 } 13 #contents { 14 height: 200px; 15 } 16 @keyframes expand { 17 from { width: 100px; } 18 to { width: 200px; } 19 } 20 #element { 21 width: 0px; 22 } 23 #element.animate { 24 animation: expand 10s linear; 25 animation-timeline: --timeline; 26 } 27 /* Ensure stable expectations if feature is not supported */ 28 @supports not (animation-timeline:--foo) { 29 #element { animation-play-state: paused; } 30 } 31 </style> 32 <div id=scroller> 33 <div id=contents></div> 34 <div id=element></div> 35 </div> 36 <script> 37 promise_test(async (t) => { 38 assert_equals(getComputedStyle(element).width, '0px'); 39 await runAndWaitForFrameUpdate(() => { 40 element.classList.add('animate'); 41 }); 42 assert_equals(getComputedStyle(element).width, '100px'); 43 44 scroller.scrollTop = 50; 45 // Scrolling position should not yet be reflected in the animation, 46 // since the new scroll position has not yet been sampled. 47 assert_equals(getComputedStyle(element).width, '100px'); 48 49 await waitForNextFrame(); 50 assert_equals(getComputedStyle(element).width, '150px'); 51 }, 'Scroll position is sampled once per frame'); 52 </script>