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
148
149
150
151
152
153
154
|
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
@keyframes anim1 {
to { left: 100px }
}
@keyframes anim2 { }
</style>
<body>
<script>
'use strict';
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var originalAnimation = div.getAnimations()[0];
var originalStartTime;
var originalCurrentTime;
// Wait a moment so we can confirm the startTime doesn't change (and doesn't
// simply reflect the current time).
return originalAnimation.ready.then(function() {
originalStartTime = originalAnimation.startTime;
originalCurrentTime = originalAnimation.currentTime;
// Wait a moment so we can confirm the startTime doesn't change (and
// doesn't simply reflect the current time).
return waitForFrame();
}).then(function() {
div.style.animationDuration = '200s';
var animation = div.getAnimations()[0];
assert_equals(animation, originalAnimation,
'The same Animation is returned after updating'
+ ' animation duration');
assert_equals(animation.startTime, originalStartTime,
'Animations returned by getAnimations preserve'
+ ' their startTime even when they are updated');
// Sanity check
assert_not_equals(animation.currentTime, originalCurrentTime,
'Animation.currentTime has updated in next'
+ ' requestAnimationFrame callback');
});
}, 'Animations preserve their startTime when changed');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
// Store original state
var animations = div.getAnimations();
var animation1 = animations[0];
var animation2 = animations[1];
// Update first in list
div.style.animationDuration = '200s, 100s';
animations = div.getAnimations();
assert_equals(animations[0], animation1,
'First Animation is in same position after update');
assert_equals(animations[1], animation2,
'Second Animation is in same position after update');
}, 'Updated Animations maintain their order in the list');
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 200s, anim1 100s';
// Store original state
var animations = div.getAnimations();
var animation1 = animations[0];
var animation2 = animations[1];
// Wait before continuing so we can compare start times (otherwise the
// new Animation objects and existing Animation objects will all have the same
// start time).
return waitForAllAnimations(animations).then(waitForFrame).then(function() {
// Swap duration of first and second in list and prepend animation at the
// same time
div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
animations = div.getAnimations();
assert_true(animations[0] !== animation1 && animations[0] !== animation2,
'New Animation is prepended to start of list');
assert_equals(animations[1], animation1,
'First Animation is in second position after update');
assert_equals(animations[2], animation2,
'Second Animation is in third position after update');
assert_equals(animations[1].startTime, animations[2].startTime,
'Old Animations have the same start time');
// TODO: Check that animations[0].startTime === null
return animations[0].ready;
}).then(function() {
assert_true(animations[0].startTime > animations[1].startTime,
'New Animation has later start time');
});
}, 'Only the startTimes of existing animations are preserved');
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
var secondAnimation = div.getAnimations()[1];
// Wait before continuing so we can compare start times
return secondAnimation.ready.then(waitForFrame).then(function() {
// Trim list of animations
div.style.animationName = 'anim1';
var animations = div.getAnimations();
assert_equals(animations.length, 1, 'List of Animations was trimmed');
assert_equals(animations[0], secondAnimation,
'Remaining Animation is the second one in the list');
assert_equals(typeof(animations[0].startTime), 'number',
'Remaining Animation has resolved startTime');
assert_true(animations[0].startTime < animations[0].timeline.currentTime,
'Remaining Animation preserves startTime');
});
}, 'Animations are removed from the start of the list while preserving'
+ ' the state of existing Animations');
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var firstAddedAnimation = div.getAnimations()[0],
secondAddedAnimation,
animations;
// Wait and add second Animation
return firstAddedAnimation.ready.then(waitForFrame).then(function() {
div.style.animation = 'anim1 100s, anim1 100s';
secondAddedAnimation = div.getAnimations()[0];
// Wait again and add another Animation
return secondAddedAnimation.ready.then(waitForFrame);
}).then(function() {
div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
animations = div.getAnimations();
assert_not_equals(firstAddedAnimation, secondAddedAnimation,
'New Animations are added to start of the list');
assert_equals(animations[0], secondAddedAnimation,
'Second Animation remains in same position after'
+ ' interleaving');
assert_equals(animations[2], firstAddedAnimation,
'First Animation remains in same position after'
+ ' interleaving');
return animations[1].ready;
}).then(function() {
assert_true(animations[1].startTime > animations[0].startTime,
'Interleaved animation starts later than existing animations');
assert_true(animations[0].startTime > animations[2].startTime,
'Original animations retain their start time');
});
}, 'Animation state is preserved when interleaving animations in list');
done();
</script>
</body>
|
