scroll-timeline-paused-animations.html (3307B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Scroll timeline with paused animations</title> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> 5 <link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 9 <script src="/css/css-animations/support/testcommon.js"></script> 10 <script src="support/testcommon.js"></script> 11 <style> 12 @keyframes anim { 13 from { width: 100px; } 14 to { width: 200px; } 15 } 16 17 .fill-vh { 18 width: 100px; 19 height: 100vh; 20 } 21 </style> 22 <body> 23 <div id="log"></div> 24 <script> 25 'use strict'; 26 27 setup(assert_implements_animation_timeline); 28 29 async function resetScrollPosition() { 30 // Reset to 0 so we don't affect following tests. 31 document.scrollingElement.scrollTop = 0; 32 return waitForNextFrame(); 33 } 34 35 promise_test(async t => { 36 const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); 37 const filling = addDiv(t, { class: 'fill-vh' }); 38 const scroller = document.scrollingElement; 39 t.add_cleanup(resetScrollPosition); 40 41 div.style.animation = 'anim 100s linear paused'; 42 div.style.animationTimeline = 'scroll(root)'; 43 await waitForCSSScrollTimelineStyle(); 44 45 const anim = div.getAnimations()[0]; 46 await anim.ready; 47 assert_percents_equal(anim.currentTime, 0, 'timeline time reset'); 48 assert_equals(getComputedStyle(div).width, '100px'); 49 50 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 51 scroller.scrollTop = maxScroll; 52 await waitForNextFrame(); 53 assert_equals(getComputedStyle(div).width, '100px'); 54 55 }, 'Test that the scroll animation is paused'); 56 57 promise_test(async t => { 58 const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); 59 const filling = addDiv(t, { class: 'fill-vh' }); 60 const scroller = document.scrollingElement; 61 await waitForNextFrame(); 62 63 div.style.animation = 'anim 100s linear forwards'; 64 div.style.animationTimeline = 'scroll(root)'; 65 await waitForCSSScrollTimelineStyle(); 66 67 const anim = div.getAnimations()[0]; 68 await anim.ready; 69 assert_percents_equal(anim.currentTime, 0, 'timeline time reset'); 70 assert_equals(getComputedStyle(div).width, '100px'); 71 72 await waitForNextFrame(); 73 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 74 scroller.scrollTop = maxScroll; 75 await waitForCSSScrollTimelineStyle(); 76 assert_equals(getComputedStyle(div).width, '200px'); 77 78 div.style.animationPlayState = 'paused'; 79 assert_equals(anim.playState, 'paused'); 80 assert_equals(getComputedStyle(div).width, '200px', 81 'Current time preserved when pause-pending.'); 82 assert_true(anim.pending, 83 'Pending state after changing animationPlayState'); 84 await anim.ready; 85 assert_equals(getComputedStyle(div).width, '200px', 86 'Current time preserved when paused.'); 87 assert_percents_equal(anim.timeline.currentTime, 100); 88 document.scrollingElement.scrollTop = 0; 89 await waitForCSSScrollTimelineStyle(); 90 assert_percents_equal(anim.timeline.currentTime, 0); 91 assert_equals(getComputedStyle(div).width, '200px'); 92 }, 'Test that the scroll animation is paused by updating animation-play-state'); 93 94 </script> 95 </body>