scroll-timeline-responsiveness-from-endpoint.html (2030B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Root-scrolling timeline with animation moving from end point</title> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> 5 <link rel="help" href="https://drafts.csswg.org/web-animations/#update-an-animations-finished-state"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/css/css-animations/support/testcommon.js"></script> 9 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 10 <script src="support/testcommon.js"></script> 11 12 <style> 13 @keyframes anim { 14 from { width: 100px; } 15 to { width: 200px; } 16 } 17 18 .fill-vh { 19 width: 100px; 20 height: 100vh; 21 } 22 </style> 23 <body> 24 <div id="log"></div> 25 <script> 26 'use strict'; 27 28 setup(assert_implements_animation_timeline); 29 30 promise_test(async t => { 31 const div = addDiv(t, { style: 'width: 50px; height: 100px;' }); 32 const filling = addDiv(t, { class: 'fill-vh' }); 33 const scroller = document.scrollingElement; 34 scroller.scrollTop = 0; 35 await waitForNextFrame(); 36 37 div.style.animation = 'anim 100s linear'; 38 div.style.animationTimeline = 'scroll(root)'; 39 await waitForCSSScrollTimelineStyle(); 40 41 const anim = div.getAnimations()[0]; 42 await anim.ready; 43 assert_percents_equal(anim.timeline.currentTime, 0, 44 'Timeline time when animation is ready'); 45 assert_equals(getComputedStyle(div).width, '100px', 46 'Width at animation start'); 47 48 await waitForNextFrame(); 49 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 50 scroller.scrollTop = maxScroll; 51 await waitForNextFrame(); 52 assert_equals(getComputedStyle(div).width, '200px', 53 'Width at scroll limit'); 54 55 document.scrollingElement.scrollTop = 0; 56 await waitForNextFrame(); 57 assert_equals(getComputedStyle(div).width, '100px', 58 'Width after reset to scroll top'); 59 }, 'Test that the scroll animation is still responsive after moving from 100%'); 60 61 </script> 62 </body>