| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <title>Things</title> | |
| 3 <link rel="https://w3c.github.io/web-animations/#the-computedtimingproperties-di
ctionary"> | |
| 4 <script src="../resources/testharness.js"></script> | |
| 5 <script src="../resources/testharnessreport.js"></script> | |
| 6 <script src="../external/wpt/web-animations/testcommon.js"></script> | |
| 7 | |
| 8 <body> | |
| 9 <div id='e'></div> | |
| 10 </body> | |
| 11 | |
| 12 <script> | |
| 13 var element = document.getElementById('e'); | |
| 14 var keyframes = [{opacity: '1', offset: 0}, {opacity: '0', offset: 1}]; | |
| 15 | |
| 16 test(function() { | |
| 17 var keyframeEffect = new KeyframeEffect(element, keyframes); | |
| 18 assert_equals(keyframeEffect.getComputedTiming().localTime, null); | |
| 19 assert_equals(keyframeEffect.getComputedTiming().currentIteration, null); | |
| 20 }, 'localTime and currentIteration are null when the KeyframeEffect is not assoc
iated with an Animation'); | |
| 21 | |
| 22 test(function() { | |
| 23 var animation = element.animate(keyframes, {fill: 'both', duration: 2000, it
erations: 3}); | |
| 24 var keyframeEffect = animation.effect; | |
| 25 animation.currentTime = -1000; | |
| 26 assert_times_equal(keyframeEffect.getComputedTiming().localTime, -1000, 'loc
alTime'); | |
| 27 assert_equals(keyframeEffect.getComputedTiming().currentIteration, 0); | |
| 28 animation.currentTime = 1000; | |
| 29 assert_times_equal(keyframeEffect.getComputedTiming().localTime, 1000); | |
| 30 assert_equals(keyframeEffect.getComputedTiming().currentIteration, 0); | |
| 31 animation.currentTime = 5000; | |
| 32 assert_times_equal(keyframeEffect.getComputedTiming().localTime, 5000); | |
| 33 assert_equals(keyframeEffect.getComputedTiming().currentIteration, 2); | |
| 34 animation.currentTime = 7000; | |
| 35 assert_times_equal(keyframeEffect.getComputedTiming().localTime, 7000); | |
| 36 assert_equals(keyframeEffect.getComputedTiming().currentIteration, 2); | |
| 37 }, 'ComputedTimingProperties.localTime and ComputedTimingProperties.currentItera
tion return reasonable values when an keyframeEffect is in effect'); | |
| 38 | |
| 39 test(function() { | |
| 40 var animation = element.animate(keyframes); | |
| 41 var keyframeEffect = animation.effect; | |
| 42 animation.currentTime = -1; | |
| 43 assert_equals(keyframeEffect.getComputedTiming().currentIteration, null); | |
| 44 animation.currentTime = 1; | |
| 45 assert_equals(keyframeEffect.getComputedTiming().currentIteration, null); | |
| 46 }, 'ComputedTimingProperties.currentIteration is null when keyframeEffect is not
in effect'); | |
| 47 | |
| 48 test(function() { | |
| 49 var keyframeEffect = new KeyframeEffect(element, keyframes, 2); | |
| 50 assert_times_equal(keyframeEffect.getComputedTiming().endTime, 2); | |
| 51 assert_times_equal(keyframeEffect.getComputedTiming().duration, 2); | |
| 52 assert_times_equal(keyframeEffect.getComputedTiming().activeDuration, 2); | |
| 53 }, 'ComputedTimingProperties startTime, endTime, duration, activeDuration are se
nsible for a simple keyframeEffect'); | |
| 54 | |
| 55 test(function() { | |
| 56 var keyframeEffect = new KeyframeEffect(element, keyframes, {duration: 3, iter
ations: 4, delay: 5}); | |
| 57 assert_times_equal(keyframeEffect.getComputedTiming().endTime, 17); | |
| 58 assert_times_equal(keyframeEffect.getComputedTiming().duration, 3); | |
| 59 assert_times_equal(keyframeEffect.getComputedTiming().activeDuration, 12); | |
| 60 }, 'ComputedTimingProperties startTime, endTime, duration, activeDuration are se
nsible for keyframeEffects with delays and iterations'); | |
| 61 | |
| 62 test(function() { | |
| 63 var keyframeEffect = new KeyframeEffect(element, keyframes, {delay: 1}); | |
| 64 assert_times_equal(keyframeEffect.getComputedTiming().duration, 0); | |
| 65 }, 'ComputedTimingProperties duration is calculated when no duration is specifie
d'); | |
| 66 | |
| 67 test(function() { | |
| 68 var timing = new KeyframeEffect(element, keyframes).timing; | |
| 69 for (var attr of ['delay', 'endDelay', 'iterationStart']) { | |
| 70 assert_throws(new TypeError, function() { timing[attr] = NaN; }, attr); | |
| 71 assert_throws(new TypeError, function() { timing[attr] = Infinity; }, attr); | |
| 72 } | |
| 73 }, 'Restricted double attributes on the AnimationEffectTiming interface throws f
or non-finite values.'); | |
| 74 | |
| 75 </script> | |
| OLD | NEW |