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