view-timeline-snapport.html (1710B)
1 <!DOCTYPE html> 2 <title>ViewTimeline vs. scroll-padding-*</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timelines"> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-progress-visibility-range"> 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="/scroll-animations/scroll-timelines/testcommon.js"></script> 9 <script src="/scroll-animations/view-timelines/testcommon.js"></script> 10 <style> 11 #container { 12 border: 10px solid lightgray; 13 overflow-y: scroll; 14 height: 200px; 15 width: 200px; 16 scroll-padding: 40px; 17 } 18 .spacer { 19 height: 800px; 20 } 21 #target { 22 background-color: green; 23 height: 200px; 24 width: 100px; 25 } 26 </style> 27 <body> 28 <div id="container"> 29 <div id="leading-space" class="spacer"></div> 30 <div id="target"></div> 31 <div id="trailing-space" class="spacer"></div> 32 </div> 33 </body> 34 <script> 35 promise_test(async t => { 36 container.scrollTop = 0; 37 await waitForNextFrame(); 38 39 const anim = CreateViewTimelineOpacityAnimation(t, target); 40 await anim.ready; 41 42 // 0% 43 await runAndWaitForFrameUpdate(() => { 44 container.scrollTop = 600; 45 }); 46 assert_percents_equal(anim.currentTime, 0); 47 48 // 50% 49 await runAndWaitForFrameUpdate(() => { 50 container.scrollTop = 800; 51 }); 52 assert_percents_equal(anim.currentTime, 50); 53 54 // 100% 55 await runAndWaitForFrameUpdate(() => { 56 container.scrollTop = 1000; 57 }); 58 assert_percents_equal(anim.currentTime, 100); 59 }, 'Default ViewTimeline is not affected by scroll-padding'); 60 </script> 61 </html>