intrinsic-iteration-duration.tentative.html (2838B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Scroll based animation: AnimationEffect.getComputedTiming</title> 4 <link rel="help" href="https://www.w3.org/TR/web-animations-2/#dom-animationeffect-getcomputedtiming"> 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="testcommon.js"></script> 9 <style> 10 .scroller { 11 overflow: auto; 12 height: 100px; 13 width: 100px; 14 will-change: transform; 15 } 16 .contents { 17 height: 1000px; 18 width: 100%; 19 } 20 </style> 21 <body> 22 <div id="log"></div> 23 <script type="text/javascript"> 24 25 //------------------------------------ 26 // Time-based duration 27 //------------------------------------ 28 29 test(t => { 30 const anim = createScrollLinkedAnimationWithTiming(t, {duration: 1000 }); 31 assert_equals(anim.effect.getTiming().duration, 1000); 32 assert_percents_equal(anim.effect.getComputedTiming().duration, 100); 33 }, 'Computed duration in percent even when specified in ms'); 34 35 test(t => { 36 const anim = createScrollLinkedAnimationWithTiming(t, { duration: 1000 }); 37 anim.rangeStart = { offset: CSS.percent(20) }; 38 anim.rangeEnd = { offset: CSS.percent(80) }; 39 assert_equals(anim.effect.getTiming().duration, 1000); 40 assert_percents_equal(anim.effect.getComputedTiming().duration, 60); 41 }, 'Time-based duration normalized to fill animation range.'); 42 43 test(t => { 44 const anim = 45 createScrollLinkedAnimationWithTiming( 46 t, {duration: 700, delay: 100, endDelay: 200 }); 47 assert_equals(anim.effect.getTiming().duration, 700); 48 assert_percents_equal(anim.effect.getComputedTiming().duration, 70); 49 }, 'Time-based duration normalized to preserve proportional delays.'); 50 51 //------------------------------------------------- 52 // Duration 'auto' = Intrinsic iteration duration 53 //------------------------------------------------- 54 55 test(t => { 56 const anim = createScrollLinkedAnimationWithTiming(t, {}); 57 assert_equals(anim.effect.getTiming().duration, 'auto'); 58 assert_percents_equal(anim.effect.getComputedTiming().duration, 100); 59 }, 'Intrinsic iteration duration fills timeline.'); 60 61 test(t => { 62 const anim = createScrollLinkedAnimationWithTiming(t, {}); 63 anim.rangeStart = { offset: CSS.percent(30) }; 64 anim.rangeEnd = { offset: CSS.percent(90) }; 65 assert_equals(anim.effect.getTiming().duration, 'auto'); 66 assert_percents_equal(anim.effect.getComputedTiming().duration, 60); 67 }, 'Intrinsic iteration duration accounts for animation range.'); 68 69 test(t => { 70 const anim = 71 createScrollLinkedAnimationWithTiming( 72 t, { iterations: 4 }); 73 assert_equals(anim.effect.getTiming().duration, 'auto'); 74 assert_percents_equal(anim.effect.getComputedTiming().duration, 25); 75 }, 'Intrinsic iteration duration accounts for number of iterations'); 76 77 </script> 78 </body>