Build fix after r251567.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-transitions / Element-getAnimations.tentative.html
1 <!doctype html>
2 <meta charset=utf-8>
3 <title>Element.getAnimations() for CSS transitions</title>
4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
5 <!--  TODO: Add a more specific link for this once it is specified.  -->
6 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
7 <script src="/resources/testharness.js"></script>
8 <script src="/resources/testharnessreport.js"></script>
9 <script src="support/helper.js"></script>
10 <div id="log"></div>
11 <script>
12 'use strict';
13
14 promise_test(async t => {
15   const div = addDiv(t);
16
17   div.style.left = '0px';
18   div.style.top = '0px';
19   getComputedStyle(div).transitionProperty;
20
21   div.style.transition = 'all 100s';
22   div.style.left = '100px';
23   div.style.top = '100px';
24
25   assert_equals(div.getAnimations().length, 2);
26 }, 'getAnimations returns one Animation per transitioning property');
27
28 test(t => {
29   const div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
30
31   getComputedStyle(div).left;
32   div.style.left = '100px';
33
34   assert_class_string(div.getAnimations()[0], 'CSSTransition',
35                       'Interface of returned animation is CSSTransition');
36 }, 'getAnimations returns CSSTransition objects for CSS Transitions');
37
38 promise_test(async t => {
39   const div = addDiv(t);
40
41   div.style.left = '0px';
42   getComputedStyle(div).left;
43   div.style.transition = 'all 0.01s';
44   div.style.left = '100px';
45   const animation = div.getAnimations()[0];
46
47   await animation.finished;
48
49   assert_equals(div.getAnimations().length, 0);
50 }, 'getAnimations does not return finished CSS Transitions');
51
52 test(t => {
53   const div = addDiv(t);
54
55   // animation-duration is not animatable
56   div.style.animationDuration = '10s';
57   getComputedStyle(div).animationDuration;
58
59   div.style.transition = 'all 100s';
60   div.style.animationDuration = '100s';
61
62   assert_equals(div.getAnimations().length, 0);
63 }, 'getAnimations does not return a transition for a non-animatable property');
64
65 test(t => {
66   const div = addDiv(t);
67
68   div.style.setProperty('-vendor-unsupported', '0px', '');
69   getComputedStyle(div).transitionProperty;
70   div.style.transition = 'all 100s';
71   div.style.setProperty('-vendor-unsupported', '100px', '');
72
73   assert_equals(div.getAnimations().length, 0);
74 }, 'getAnimations does not return a transition for an unsupposed property');
75
76 test(t => {
77   const div = addDiv(t, { style: 'transform: translate(0px); ' +
78                                  'opacity: 0; ' +
79                                  'border-width: 0px; ' + // Shorthand
80                                  'border-style: solid' });
81   getComputedStyle(div).transform;
82
83   div.style.transition = 'all 100s';
84   div.style.transform = 'translate(100px)';
85   div.style.opacity = '1';
86   div.style.borderWidth = '1px';
87
88   const animations = div.getAnimations();
89   assert_equals(animations.length, 6,
90                 'Generated expected number of transitions');
91   assert_equals(animations[0].transitionProperty, 'border-bottom-width');
92   assert_equals(animations[1].transitionProperty, 'border-left-width');
93   assert_equals(animations[2].transitionProperty, 'border-right-width');
94   assert_equals(animations[3].transitionProperty, 'border-top-width');
95   assert_equals(animations[4].transitionProperty, 'opacity');
96   assert_equals(animations[5].transitionProperty, 'transform');
97 }, 'getAnimations sorts simultaneous transitions by name');
98
99 test(t => {
100   const div = addDiv(t, { style: 'transform: translate(0px); ' +
101                                  'opacity: 0' });
102   getComputedStyle(div).transform;
103
104   div.style.transition = 'all 100s';
105   div.style.transform = 'translate(100px)';
106   assert_equals(div.getAnimations().length, 1,
107                 'Initially there is only one (transform) transition');
108   div.style.opacity = '1';
109   assert_equals(div.getAnimations().length, 2,
110                 'Then a second (opacity) transition is added');
111
112   const animations = div.getAnimations();
113   assert_equals(animations[0].transitionProperty, 'transform');
114   assert_equals(animations[1].transitionProperty, 'opacity');
115 }, 'getAnimations sorts transitions by when they were generated');
116
117 </script>