progress-based-animation-timeline.html (1488B)
1 <!DOCTYPE html> 2 <title>CSS Animation using progress based timeline</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 main > div { 10 overflow: hidden; 11 width: 100px; 12 height: 100px; 13 } 14 main > div > div { 15 height: 200px; 16 } 17 18 @keyframes top { 19 from { top: 100px; } 20 to { top: 200px; } 21 } 22 23 #scroller1 { 24 scroll-timeline: --top_timeline; 25 } 26 27 #element { 28 animation-name: top; 29 animation-duration: 10s; 30 animation-timing-function: linear; 31 animation-timeline: --top_timeline; 32 position: absolute; 33 } 34 /* Ensure stable expectations if feature is not supported */ 35 @supports not (animation-timeline:--foo) { 36 #element { animation-play-state: paused; } 37 } 38 </style> 39 <main> 40 <div id=scroller1> 41 <div></div> 42 <div id=element></div> 43 </div> 44 </main> 45 <script> 46 window.onload = async () => { 47 promise_test(async (t) => { 48 await waitForNextFrame(); 49 const anim = document.getAnimations()[0]; 50 await anim.ready; 51 await runAndWaitForFrameUpdate(() => { 52 scroller1.scrollTop = 20; 53 }); 54 assert_equals(getComputedStyle(element).top, '120px'); 55 }, 'progress based animation timeline works'); 56 }; 57 </script>