[Web Animations] Update WPT tests related to Web Animations and remove imported Mozil...
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / CSSTransition-effect.tentative.html
1 <!doctype html>
2 <meta charset=utf-8>
3 <title>CSSTransition.effect</title>
4 <!--  TODO: Add a more specific link for this once it is specified.  -->
5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
6 <script src="/resources/testharness.js"></script>
7 <script src="/resources/testharnessreport.js"></script>
8 <script src='support/helper.js'></script>
9 <div id="log"></div>
10 <script>
11 'use strict';
12
13 function singleFrame() {
14   return new Promise((resolve, reject) => {
15     requestAnimationFrame(resolve);
16   });
17 }
18
19 test(t => {
20   const div = addDiv(t);
21   div.style.left = '0px';
22
23   div.style.transition = 'left 100s';
24   getComputedStyle(div).left;
25   div.style.left = '100px';
26
27   const transition = div.getAnimations()[0];
28
29   transition.effect = null;
30
31   assert_equals(transition.transitionProperty, 'left');
32 }, 'After setting a transition\'s effect to null, it still reports the'
33    + ' original transition property');
34
35 promise_test(async t => {
36   const div = addDiv(t);
37   div.style.left = '0px';
38
39   div.style.transition = 'left 100s';
40   getComputedStyle(div).left;
41   div.style.left = '100px';
42
43   const transition = div.getAnimations()[0];
44   await transition.ready;
45
46   transition.effect = null;
47   assert_equals(transition.playState, 'finished');
48 }, 'After setting a transition\'s effect to null, it becomes finished');
49
50 promise_test(async t => {
51   const div = addDiv(t);
52   div.style.left = '0px';
53
54   div.style.transition = 'left 100s';
55   getComputedStyle(div).left;
56   div.style.left = '100px';
57
58   const transition = div.getAnimations()[0];
59   await transition.ready;
60
61   transition.effect = null;
62   assert_equals(getComputedStyle(div).left, '100px');
63 }, 'After setting a transition\'s effect to null, style is updated');
64
65 // This is a regression test for https://crbug.com/964113, where Chromium would
66 // crash if the running transition's effect was set to null and a new transition
67 // was started before the running one could finish.
68 promise_test(async t => {
69   const div = addDiv(t);
70   div.style.left = '0px';
71
72   div.style.transition = 'left 100s';
73   getComputedStyle(div).left;
74   div.style.left = '100px';
75
76   assert_equals(div.getAnimations().length, 1);
77
78   const transition = div.getAnimations()[0];
79   await transition.ready;
80
81   // Without yielding to the rendering loop, set the current transition's
82   // effect to null and start a new transition. This should work correctly.
83   transition.effect = null;
84
85   div.style.left = '150px';
86
87   // This will run style update.
88   assert_equals(div.getAnimations().length, 1);
89
90   const new_transition = div.getAnimations()[0];
91   await new_transition.ready;
92
93   assert_equals(getComputedStyle(div).left, '0px');
94 }, 'After setting a transition\'s effect to null, a new transition can be started');
95
96 // This is a regression test for https://crbug.com/992668, where Chromium would
97 // crash if the running transition's effect was set to null and the transition
98 // was interrupted before it could finish due to the null effect.
99 promise_test(async t => {
100   const div = addDiv(t);
101   div.style.left = '0px';
102
103   div.style.transition = 'left 100s';
104   getComputedStyle(div).left;
105   div.style.left = '100px';
106
107   assert_equals(div.getAnimations().length, 1);
108
109   const transition = div.getAnimations()[0];
110   await transition.ready;
111
112   // The transition needs to have a non-zero currentTime for the interruption
113   // reversal logic to apply.
114   while (getComputedStyle(div).left == '0px') {
115     await singleFrame();
116   }
117   assert_not_equals(transition.currentTime, 0);
118
119   // Without yielding to the rendering loop, set the current transition's
120   // effect to null and interrupt the transition. This should work correctly.
121   transition.effect = null;
122   div.style.left = '0px';
123
124   // Yield to the rendering loop. This should not crash.
125   await singleFrame();
126 }, 'After setting a transition\'s effect to null, it should be possible to '
127     + 'interrupt that transition');
128
129 promise_test(async t => {
130   const div = addDiv(t);
131   div.style.left = '0px';
132   div.style.width = '0px';
133
134   div.style.transition = 'left 100s';
135   getComputedStyle(div).left;
136   div.style.left = '100px';
137
138   const transition = div.getAnimations()[0];
139   await transition.ready;
140
141   transition.currentTime = 50 * MS_PER_SEC;
142   transition.effect = new KeyframeEffect(div,
143                                          { left: [ '0px' , '100px'] },
144                                          20 * MS_PER_SEC);
145
146   assert_equals(transition.playState, 'finished');
147 }, 'After setting a new keyframe effect with a shorter duration,'
148    + ' the transition becomes finished');
149
150 promise_test(async t => {
151   const div = addDiv(t);
152   div.style.left = '0px';
153   div.style.width = '0px';
154
155   div.style.transition = 'left 100s';
156   getComputedStyle(div).left;
157   div.style.left = '100px';
158
159   const transition = div.getAnimations()[0];
160   transition.effect = new KeyframeEffect(div,
161                                          { marginLeft: [ '0px' , '100px'] },
162                                          100 * MS_PER_SEC);
163   assert_equals(transition.transitionProperty, 'left');
164 }, 'After setting a new keyframe effect targeting different properties,'
165    + ' the transition continues to report the original transition property');
166
167 promise_test(async t => {
168   const div = addDiv(t);
169   div.style.left = '0px';
170   div.style.width = '0px';
171
172   div.style.transition = 'left 100s';
173   getComputedStyle(div).left;
174   div.style.left = '100px';
175
176   const transition = div.getAnimations()[0];
177   assert_true(transition.pending);
178
179   transition.effect = new KeyframeEffect(div,
180                                          { marginLeft: [ '0px' , '100px'] },
181                                          100 * MS_PER_SEC);
182   assert_equals(transition.transitionProperty, 'left');
183   assert_true(transition.pending);
184
185   // As a sanity check, check that the transition actually exits the
186   // pending state.
187   await transition.ready;
188   assert_false(transition.pending);
189 }, 'After setting a new keyframe effect on a play-pending transition,'
190    + ' the transition remains pending');
191
192 </script>