[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 / KeyframeEffect / constructor.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>KeyframeEffect and KeyframeEffectReadOnly constructor</title>
4 <link rel="help"
5       href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect">
6 <link rel="help"
7       href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly">
8 <script src="/resources/testharness.js"></script>
9 <script src="/resources/testharnessreport.js"></script>
10 <script src="../../testcommon.js"></script>
11 <script src="../../resources/easing-tests.js"></script>
12 <script src="../../resources/keyframe-utils.js"></script>
13 <script src="../../resources/keyframe-tests.js"></script>
14 <body>
15 <div id="log"></div>
16 <div id="target"></div>
17 <script>
18 'use strict';
19
20 const target = document.getElementById('target');
21
22 test(t => {
23   for (const frames of gEmptyKeyframeListTests) {
24     assert_equals(new KeyframeEffectReadOnly(target, frames)
25                         .getKeyframes().length,
26                   0, `number of frames for ${JSON.stringify(frames)}`);
27   }
28 }, 'A KeyframeEffectReadOnly can be constructed with no frames');
29
30 test(t => {
31   for (const subtest of gEasingParsingTests) {
32     const easing = subtest[0];
33     const expected = subtest[1];
34     const effect = new KeyframeEffectReadOnly(target, {
35       left: ['10px', '20px']
36     }, { easing: easing });
37     assert_equals(effect.timing.easing, expected,
38                   `resulting easing for '${easing}'`);
39   }
40 }, 'easing values are parsed correctly when passed to the ' +
41    'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
42
43 test(t => {
44   for (const invalidEasing of gInvalidEasings) {
45     assert_throws(new TypeError, () => {
46       new KeyframeEffectReadOnly(target, null, { easing: invalidEasing });
47     }, `TypeError is thrown for easing '${invalidEasing}'`);
48   }
49 }, 'Invalid easing values are correctly rejected when passed to the ' +
50    'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
51
52 test(t => {
53   const getKeyframe =
54     composite => ({ left: [ '10px', '20px' ], composite: composite });
55   for (const composite of gGoodKeyframeCompositeValueTests) {
56     const effect = new KeyframeEffectReadOnly(target, getKeyframe(composite));
57     assert_equals(effect.getKeyframes()[0].composite, composite,
58                   `resulting composite for '${composite}'`);
59   }
60   for (const composite of gBadKeyframeCompositeValueTests) {
61     assert_throws(new TypeError, () => {
62       new KeyframeEffectReadOnly(target, getKeyframe(composite));
63     });
64   }
65 }, 'composite values are parsed correctly when passed to the ' +
66    'KeyframeEffectReadOnly constructor in property-indexed keyframes');
67
68 test(t => {
69   const getKeyframes = composite =>
70     [
71       { offset: 0, left: '10px', composite: composite },
72       { offset: 1, left: '20px' }
73     ];
74   for (const composite of gGoodKeyframeCompositeValueTests) {
75     const effect = new KeyframeEffectReadOnly(target, getKeyframes(composite));
76     assert_equals(effect.getKeyframes()[0].composite, composite,
77                   `resulting composite for '${composite}'`);
78   }
79   for (const composite of gBadKeyframeCompositeValueTests) {
80     assert_throws(new TypeError, () => {
81       new KeyframeEffectReadOnly(target, getKeyframes(composite));
82     });
83   }
84 }, 'composite values are parsed correctly when passed to the ' +
85    'KeyframeEffectReadOnly constructor in regular keyframes');
86
87 test(t => {
88   for (const composite of gGoodOptionsCompositeValueTests) {
89     const effect = new KeyframeEffectReadOnly(target, {
90       left: ['10px', '20px']
91     }, { composite: composite });
92     assert_equals(effect.getKeyframes()[0].composite, null,
93                   `resulting composite for '${composite}'`);
94   }
95   for (const composite of gBadOptionsCompositeValueTests) {
96     assert_throws(new TypeError, () => {
97       new KeyframeEffectReadOnly(target, {
98         left: ['10px', '20px']
99       }, { composite: composite });
100     });
101   }
102 }, 'composite value is null if the composite operation specified on the ' +
103    'keyframe effect is being used');
104
105 for (const subtest of gKeyframesTests) {
106   test(t => {
107     const effect = new KeyframeEffectReadOnly(target, subtest.input);
108     assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
109   }, `A KeyframeEffectReadOnly can be constructed with ${subtest.desc}`);
110
111   test(t => {
112     const effect = new KeyframeEffectReadOnly(target, subtest.input);
113     const secondEffect =
114       new KeyframeEffectReadOnly(target, effect.getKeyframes());
115     assert_frame_lists_equal(secondEffect.getKeyframes(),
116                              effect.getKeyframes());
117   }, `A KeyframeEffectReadOnly constructed with ${subtest.desc} roundtrips`);
118 }
119
120 for (const subtest of gInvalidKeyframesTests) {
121   test(t => {
122     assert_throws(new TypeError, () => {
123       new KeyframeEffectReadOnly(target, subtest.input);
124     });
125   }, `KeyframeEffectReadOnly constructor throws with ${subtest.desc}`);
126 }
127
128 test(t => {
129   const effect = new KeyframeEffectReadOnly(target,
130                                             { left: ['10px', '20px'] });
131
132   const timing = effect.timing;
133   assert_equals(timing.delay, 0, 'default delay');
134   assert_equals(timing.endDelay, 0, 'default endDelay');
135   assert_equals(timing.fill, 'auto', 'default fill');
136   assert_equals(timing.iterations, 1.0, 'default iterations');
137   assert_equals(timing.iterationStart, 0.0, 'default iterationStart');
138   assert_equals(timing.duration, 'auto', 'default duration');
139   assert_equals(timing.direction, 'normal', 'default direction');
140   assert_equals(timing.easing, 'linear', 'default easing');
141
142   assert_equals(effect.composite, 'replace', 'default composite');
143   assert_equals(effect.iterationComposite, 'replace',
144                 'default iterationComposite');
145 }, 'A KeyframeEffectReadOnly constructed without any ' +
146    'KeyframeEffectOptions object');
147
148 for (const subtest of gKeyframeEffectOptionTests) {
149   test(t => {
150     const effect = new KeyframeEffectReadOnly(target,
151                                               { left: ['10px', '20px'] },
152                                               subtest.input);
153
154     // Helper function to provide default expected values when the test does
155     // not supply them.
156     const expected = (field, defaultValue) => {
157       return field in subtest.expected ? subtest.expected[field] : defaultValue;
158     };
159
160     const timing = effect.timing;
161     assert_equals(timing.delay, expected('delay', 0),
162                   'timing delay');
163     assert_equals(timing.fill, expected('fill', 'auto'),
164                   'timing fill');
165     assert_equals(timing.iterations, expected('iterations', 1),
166                   'timing iterations');
167     assert_equals(timing.duration, expected('duration', 'auto'),
168                   'timing duration');
169     assert_equals(timing.direction, expected('direction', 'normal'),
170                   'timing direction');
171
172   }, `A KeyframeEffectReadOnly constructed by ${subtest.desc}`);
173 }
174
175 for (const subtest of gInvalidKeyframeEffectOptionTests) {
176   test(t => {
177     assert_throws(new TypeError, () => {
178       new KeyframeEffectReadOnly(target,
179                                  { left: ['10px', '20px'] },
180                                  subtest.input);
181     });
182   }, `Invalid KeyframeEffectReadOnly option by ${subtest.desc}`);
183 }
184
185 test(t => {
186   const effect = new KeyframeEffectReadOnly(null,
187                                             { left: ['10px', '20px'] },
188                                             { duration: 100 * MS_PER_SEC,
189                                               fill: 'forwards' });
190   assert_equals(effect.target, null,
191                 'Effect created with null target has correct target');
192 }, 'A KeyframeEffectReadOnly constructed with null target');
193
194 test(t => {
195   const test_error = { name: 'test' };
196
197   assert_throws(test_error, () => {
198     new KeyframeEffect(target, { get left() { throw test_error }})
199   });
200 }, 'KeyframeEffect constructor propagates exceptions generated by accessing'
201    + ' the options object');
202 </script>
203 </body>