[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / imported / mozilla / css-transitions / test_element-get-animations.html
1 <!doctype html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <meta charset=utf-8>
3 <script src="../../../resources/testharness.js"></script>
4 <script src="../../../resources/testharnessreport.js"></script>
5 <script src="../resources/testcommon.js"></script>
6 <body>
7 <div id="log"></div>
8 <script>
9 'use strict';
10
11 async_test(function(t) {
12   var div = addDiv(t);
13
14   // FIXME: This test does too many things. It should be split up.
15
16   // Add a couple of transitions
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   var animations = div.getAnimations();
26   assert_equals(animations.length, 2,
27     'getAnimations() returns one Animation per transitioning property');
28   waitForAllAnimations(animations).then(t.step_func(function() {
29     var startTime = animations[0].startTime;
30     assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
31                 'CSS transitions have sensible start times');
32     assert_equals(animations[0].startTime, animations[1].startTime,
33       'CSS transitions started together have the same start time');
34     // Wait a moment then add a third transition
35     return waitForFrame();
36   })).then(t.step_func(function() {
37     div.style.backgroundColor = 'green';
38     animations = div.getAnimations();
39     assert_equals(animations.length, 3,
40       'getAnimations returns Animations for all running CSS Transitions');
41     return waitForAllAnimations(animations);
42   })).then(t.step_func(function() {
43     assert_less_than(animations[1].startTime, animations[2].startTime,
44       'Animation for additional CSS transition starts after the original'
45       + ' transitions and appears later in the list');
46     t.done();
47   }));
48 }, 'getAnimations for CSS Transitions');
49
50 test(function(t) {
51   var div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
52
53   flushComputedStyle(div);
54   div.style.left = '100px';
55
56   assert_class_string(div.getAnimations()[0], 'CSSTransition',
57                       'Interface of returned animation is CSSTransition');
58 }, 'getAnimations returns CSSTransition objects for CSS Transitions');
59
60 async_test(function(t) {
61   var div = addDiv(t);
62
63   // Set up event listener
64   div.addEventListener('transitionend', t.step_func(function() {
65     assert_equals(div.getAnimations().length, 0,
66       'getAnimations does not return finished CSS Transitions');
67     t.done();
68   }));
69
70   // Add a very short transition
71   div.style.left = '0px';
72   getComputedStyle(div).left;
73
74   div.style.transition = 'all 0.01s';
75   div.style.left = '100px';
76   getComputedStyle(div).left;
77 }, 'getAnimations for CSS Transitions that have finished');
78
79 test(function(t) {
80   var div = addDiv(t);
81
82   // Try to transition non-animatable property animation-duration
83   div.style.animationDuration = '10s';
84   getComputedStyle(div).animationDuration;
85
86   div.style.transition = 'all 100s';
87   div.style.animationDuration = '100s';
88
89   assert_equals(div.getAnimations().length, 0,
90     'getAnimations returns an empty sequence for a transition'
91     + ' of a non-animatable property');
92 }, 'getAnimations for transition on non-animatable property');
93
94 test(function(t) {
95   var div = addDiv(t);
96
97   div.style.setProperty('-vendor-unsupported', '0px', '');
98   getComputedStyle(div).transitionProperty;
99   div.style.transition = 'all 100s';
100   div.style.setProperty('-vendor-unsupported', '100px', '');
101
102   assert_equals(div.getAnimations().length, 0,
103     'getAnimations returns an empty sequence for a transition'
104     + ' of an unsupported property');
105 }, 'getAnimations for transition on unsupported property');
106
107 test(function(t) {
108   var div = addDiv(t, { style: 'transform: translate(0px); ' +
109                                'opacity: 0; ' +
110                                'border-width: 0px; ' + // Shorthand
111                                'border-style: solid' });
112   getComputedStyle(div).transform;
113
114   div.style.transition = 'all 100s';
115   div.style.transform = 'translate(100px)';
116   div.style.opacity = '1';
117   div.style.borderWidth = '1px';
118
119   var animations = div.getAnimations();
120   assert_equals(animations.length, 6,
121                 'Generated expected number of transitions');
122   assert_equals(animations[0].transitionProperty, 'border-bottom-width');
123   assert_equals(animations[1].transitionProperty, 'border-left-width');
124   assert_equals(animations[2].transitionProperty, 'border-right-width');
125   assert_equals(animations[3].transitionProperty, 'border-top-width');
126   assert_equals(animations[4].transitionProperty, 'opacity');
127   assert_equals(animations[5].transitionProperty, 'transform');
128 }, 'getAnimations sorts simultaneous transitions by name');
129
130 test(function(t) {
131   var div = addDiv(t, { style: 'transform: translate(0px); ' +
132                                'opacity: 0' });
133   getComputedStyle(div).transform;
134
135   div.style.transition = 'all 100s';
136   div.style.transform = 'translate(100px)';
137   assert_equals(div.getAnimations().length, 1,
138                 'Initially there is only one (transform) transition');
139   div.style.opacity = '1';
140   assert_equals(div.getAnimations().length, 2,
141                 'Then a second (opacity) transition is added');
142
143   var animations = div.getAnimations();
144   assert_equals(animations[0].transitionProperty, 'transform');
145   assert_equals(animations[1].transitionProperty, 'opacity');
146 }, 'getAnimations sorts transitions by when they were generated');
147
148 </script>
149 </body>