[Web Animations] Update WPT tests and move them to imported/w3c/web-platform-tests
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / web-animations / interfaces / AnimationEffectTiming / duration.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>AnimationEffectTiming.duration</title>
4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-duration">
5 <script src="/resources/testharness.js"></script>
6 <script src="/resources/testharnessreport.js"></script>
7 <script src="../../testcommon.js"></script>
8 <body>
9 <div id="log"></div>
10 <script>
11 'use strict';
12
13 test(t => {
14   const anim = createDiv(t).animate(null);
15   assert_equals(anim.effect.timing.duration, 'auto');
16 }, 'Has the default value \'auto\'');
17
18 test(t => {
19   const div = createDiv(t);
20   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
21   anim.effect.timing.duration = 123.45;
22   assert_time_equals_literal(anim.effect.timing.duration, 123.45,
23                              'set duration 123.45');
24   assert_time_equals_literal(anim.effect.getComputedTiming().duration, 123.45,
25                              'getComputedTiming() after set duration 123.45');
26 }, 'Can be set to a double value');
27
28 test(t => {
29   const div = createDiv(t);
30   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
31   anim.effect.timing.duration = 'auto';
32   assert_equals(anim.effect.timing.duration, 'auto', 'set duration \'auto\'');
33   assert_equals(anim.effect.getComputedTiming().duration, 0,
34                 'getComputedTiming() after set duration \'auto\'');
35 }, 'Can be set to the string \'auto\'');
36
37 test(t => {
38   const div = createDiv(t);
39   const anim = div.animate({ opacity: [ 0, 1 ] }, { duration: 'auto' });
40   assert_equals(anim.effect.timing.duration, 'auto', 'set duration \'auto\'');
41   assert_equals(anim.effect.getComputedTiming().duration, 0,
42                 'getComputedTiming() after set duration \'auto\'');
43 }, 'Can be set to \'auto\' using a dictionary object');
44
45 test(t => {
46   const div = createDiv(t);
47   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
48   anim.effect.timing.duration = Infinity;
49   assert_equals(anim.effect.timing.duration, Infinity, 'set duration Infinity');
50   assert_equals(anim.effect.getComputedTiming().duration, Infinity,
51                 'getComputedTiming() after set duration Infinity');
52 }, 'Can be set to Infinity');
53
54 test(t => {
55   const div = createDiv(t);
56   assert_throws({ name: 'TypeError' }, () => {
57     div.animate({ opacity: [ 0, 1 ] }, -1);
58   });
59 }, 'animate() throws when passed a negative number');
60
61 test(t => {
62   const div = createDiv(t);
63   assert_throws({ name: 'TypeError' }, () => {
64     div.animate({ opacity: [ 0, 1 ] }, -Infinity);
65   });
66 }, 'animate() throws when passed negative Infinity');
67
68 test(t => {
69   const div = createDiv(t);
70   assert_throws({ name: 'TypeError' }, () => {
71     div.animate({ opacity: [ 0, 1 ] }, NaN);
72   });
73 }, 'animate() throws when passed a NaN value');
74
75 test(t => {
76   const div = createDiv(t);
77   assert_throws({ name: 'TypeError' }, () => {
78     div.animate({ opacity: [ 0, 1 ] }, { duration: -1 });
79   });
80 }, 'animate() throws when passed a negative number using a dictionary object');
81
82 test(t => {
83   const div = createDiv(t);
84   assert_throws({ name: 'TypeError' }, () => {
85     div.animate({ opacity: [ 0, 1 ] }, { duration: -Infinity });
86   });
87 }, 'animate() throws when passed negative Infinity using a dictionary object');
88
89 test(t => {
90   const div = createDiv(t);
91   assert_throws({ name: 'TypeError' }, () => {
92     div.animate({ opacity: [ 0, 1 ] }, { duration: NaN });
93   });
94 }, 'animate() throws when passed a NaN value using a dictionary object');
95
96 test(t => {
97   const div = createDiv(t);
98   assert_throws({ name: 'TypeError' }, () => {
99     div.animate({ opacity: [ 0, 1 ] }, { duration: 'abc' });
100   });
101 }, 'animate() throws when passed a string other than \'auto\' using a'
102    + ' dictionary object');
103
104 test(t => {
105   const div = createDiv(t);
106   assert_throws({ name: 'TypeError' }, () => {
107     div.animate({ opacity: [ 0, 1 ] }, { duration: '100' });
108   });
109 }, 'animate() throws when passed a string containing a number using a'
110    + ' dictionary object');
111
112 test(t => {
113   const div = createDiv(t);
114   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
115   assert_throws({ name: 'TypeError' }, () => {
116     anim.effect.timing.duration = -1;
117   });
118 }, 'Throws when setting a negative number');
119
120 test(t => {
121   const div = createDiv(t);
122   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
123   assert_throws({ name: 'TypeError' }, () => {
124     anim.effect.timing.duration = -Infinity;
125   });
126 }, 'Throws when setting negative infinity');
127
128 test(t => {
129   const div = createDiv(t);
130   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
131   assert_throws({ name: 'TypeError' }, () => {
132     anim.effect.timing.duration = NaN;
133   });
134 }, 'Throws when setting a NaN value');
135
136 test(t => {
137   const div = createDiv(t);
138   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
139   assert_throws({ name: 'TypeError' }, () => {
140     anim.effect.timing.duration = 'abc';
141   });
142 }, 'Throws when setting a string other than \'auto\'');
143
144 test(t => {
145   const div = createDiv(t);
146   const anim = div.animate({ opacity: [ 0, 1 ] }, 2000);
147   assert_throws({ name: 'TypeError' }, () => {
148     anim.effect.timing.duration = '100';
149   });
150 }, 'Throws when setting a string containing a number');
151
152 promise_test(t => {
153   const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
154   return anim.ready.then(() => {
155     const originalStartTime   = anim.startTime;
156     const originalCurrentTime = anim.currentTime;
157     assert_equals(anim.effect.getComputedTiming().duration, 100 * MS_PER_SEC,
158                   'Initial duration should be as set on KeyframeEffect');
159
160     anim.effect.timing.duration = 200 * MS_PER_SEC;
161     assert_equals(anim.effect.getComputedTiming().duration, 200 * MS_PER_SEC,
162                   'Effect duration should have been updated');
163     assert_times_equal(anim.startTime, originalStartTime,
164                        'startTime should be unaffected by changing effect ' +
165                        'duration');
166     assert_times_equal(anim.currentTime, originalCurrentTime,
167                        'currentTime should be unaffected by changing effect ' +
168                        'duration');
169   });
170 }, 'Extending an effect\'s duration does not change the start or current time');
171
172 test(t => {
173   const div = createDiv(t);
174   const anim = div.animate(null, { duration: 100000, fill: 'both' });
175   anim.finish();
176   assert_equals(anim.effect.getComputedTiming().progress, 1,
177                 'progress when animation is finished');
178   anim.effect.timing.duration *= 2;
179   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.5,
180                              'progress after doubling the duration');
181   anim.effect.timing.duration = 0;
182   assert_equals(anim.effect.getComputedTiming().progress, 1,
183                 'progress after setting duration to zero');
184   anim.effect.timing.duration = 'auto';
185   assert_equals(anim.effect.getComputedTiming().progress, 1,
186                 'progress after setting duration to \'auto\'');
187 }, 'Can be updated while the animation is in progress');
188
189 </script>
190 </body>