| <!doctype html> |
| <meta charset=utf-8> |
| <title>Scroll based animation: AnimationEffect.getComputedTiming</title> |
| <link rel="help" href="https://www.w3.org/TR/web-animations-2/#dom-animationeffect-getcomputedtiming"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="testcommon.js"></script> |
| <style> |
| .scroller { |
| overflow: auto; |
| height: 100px; |
| width: 100px; |
| will-change: transform; |
| } |
| .contents { |
| height: 1000px; |
| width: 100%; |
| } |
| </style> |
| <body> |
| <div id="log"></div> |
| <script type="text/javascript"> |
| |
| //------------------------------------ |
| // Time-based duration |
| //------------------------------------ |
| |
| test(t => { |
| const anim = createScrollLinkedAnimationWithTiming(t, {duration: 1000 }); |
| assert_equals(anim.effect.getTiming().duration, 1000); |
| assert_percents_equal(anim.effect.getComputedTiming().duration, 100); |
| }, 'Computed duration in percent even when specified in ms'); |
| |
| test(t => { |
| const anim = createScrollLinkedAnimationWithTiming(t, { duration: 1000 }); |
| anim.rangeStart = { offset: CSS.percent(20) }; |
| anim.rangeEnd = { offset: CSS.percent(80) }; |
| assert_equals(anim.effect.getTiming().duration, 1000); |
| assert_percents_equal(anim.effect.getComputedTiming().duration, 60); |
| }, 'Time-based duration normalized to fill animation range.'); |
| |
| test(t => { |
| const anim = |
| createScrollLinkedAnimationWithTiming( |
| t, {duration: 700, delay: 100, endDelay: 200 }); |
| assert_equals(anim.effect.getTiming().duration, 700); |
| assert_percents_equal(anim.effect.getComputedTiming().duration, 70); |
| }, 'Time-based duration normalized to preserve proportional delays.'); |
| |
| //------------------------------------------------- |
| // Duration 'auto' = Intrinsic iteration duration |
| //------------------------------------------------- |
| |
| test(t => { |
| const anim = createScrollLinkedAnimationWithTiming(t, {}); |
| assert_equals(anim.effect.getTiming().duration, 'auto'); |
| assert_percents_equal(anim.effect.getComputedTiming().duration, 100); |
| }, 'Intrinsic iteration duration fills timeline.'); |
| |
| test(t => { |
| const anim = createScrollLinkedAnimationWithTiming(t, {}); |
| anim.rangeStart = { offset: CSS.percent(30) }; |
| anim.rangeEnd = { offset: CSS.percent(90) }; |
| assert_equals(anim.effect.getTiming().duration, 'auto'); |
| assert_percents_equal(anim.effect.getComputedTiming().duration, 60); |
| }, 'Intrinsic iteration duration accounts for animation range.'); |
| |
| test(t => { |
| const anim = |
| createScrollLinkedAnimationWithTiming( |
| t, { iterations: 4 }); |
| assert_equals(anim.effect.getTiming().duration, 'auto'); |
| assert_percents_equal(anim.effect.getComputedTiming().duration, 25); |
| }, 'Intrinsic iteration duration accounts for number of iterations'); |
| |
| </script> |
| </body> |
