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 |