Build fix after r251567.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / CSSTransition-ready.tentative.html
1 <!doctype html>
2 <meta charset=utf-8>
3 <title>CSSTransition.ready</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 promise_test(async t => {
14   const div = addDiv(t);
15
16   // Set up pending transition
17   div.style.transform = 'translate(0px)';
18   getComputedStyle(div).transform;
19   div.style.transition = 'transform 100s';
20   div.style.transform = 'translate(10px)';
21   getComputedStyle(div).transform;
22
23   const animation = div.getAnimations()[0];
24   assert_true(animation.pending, 'Animation is initially pending');
25   const readyPromise = animation.ready;
26
27   // Now remove transform from transition-property and flush styles
28   div.style.transitionProperty = 'none';
29   getComputedStyle(div).transitionProperty;
30
31   try {
32     await readyPromise;
33     assert_unreached('ready promise was fulfilled');
34   } catch (err) {
35     assert_equals(err.name, 'AbortError',
36                   'ready promise is rejected with AbortError');
37     assert_equals(animation.playState, 'idle',
38                   'Animation is idle after transition was canceled');
39   }
40 }, 'ready promise is rejected when a transition is canceled by updating'
41    + ' transition-property');
42
43 promise_test(async t => {
44   const div = addDiv(t);
45
46   // Set up pending transition
47   div.style.marginLeft = '0px';
48   getComputedStyle(div).marginLeft;
49   div.style.transition = 'margin-left 100s';
50   div.style.marginLeft = '100px';
51   getComputedStyle(div).marginLeft;
52
53   const animation = div.getAnimations()[0];
54   assert_true(animation.pending, 'Animation is initially pending');
55   const readyPromise = animation.ready;
56
57   // Update the transition to animate to something not-interpolable
58   div.style.marginLeft = 'auto';
59   getComputedStyle(div).marginLeft;
60
61   try {
62     await readyPromise;
63     assert_unreached('ready promise was fulfilled');
64   } catch (err) {
65     assert_equals(err.name, 'AbortError',
66                   'ready promise is rejected with AbortError');
67     assert_equals(animation.playState, 'idle',
68                   'Animation is idle after transition was canceled');
69   }
70 }, 'ready promise is rejected when a transition is canceled by changing'
71    + ' the transition property to something not interpolable');
72
73 </script>