animation-range-scroll-timeline.html (1730B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-range-animation-declaration"> 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 <title>The animation-range-* CSS properties for an animation associated with a scroll timeline</title> 10 </head> 11 <style> 12 13 @keyframes anim { 14 from { opacity: 0 } 15 } 16 17 #scroller { 18 overflow-y: scroll; 19 width: 100px; 20 height: 100px; 21 } 22 23 #target { 24 width: 100%; 25 height: 200%; 26 27 animation: anim auto linear; 28 animation-timeline: scroll(); 29 animation-range-start: 10px; 30 animation-range-end: 80px; 31 } 32 </style> 33 <body> 34 <div id="scroller"> 35 <div id="target"></div> 36 </div> 37 </body> 38 <script> 39 40 const animation = document.getAnimations()[0]; 41 42 test(t => { 43 assert_equals(animation.rangeStart.offset.value, 10); 44 assert_equals(animation.rangeStart.offset.unit, "px"); 45 }, "The animation-range-start CSS property maps to Animation's 'rangeStart' property"); 46 47 test(t => { 48 assert_equals(animation.rangeEnd.offset.value, 80); 49 assert_equals(animation.rangeEnd.offset.unit, "px"); 50 }, "The animation-range-end CSS property maps to Animation's 'rangeEnd' property"); 51 52 promise_test(async t => { 53 await animation.ready; 54 assert_percents_equal(animation.startTime, 10); 55 }, "The auto-aligned start time accounts for the animation-range-start property"); 56 57 promise_test(async t => { 58 await animation.ready; 59 assert_percents_equal(animation.effect.getComputedTiming().duration, 70); 60 }, "The effect duration accounts for the animation-range-* properties"); 61 62 </script>