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
|
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
@keyframes abc {
to { transform: translate(10px) }
}
</style>
<body>
<script>
'use strict';
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'abc 100s paused';
var animation = div.getAnimations()[0];
var originalReadyPromise = animation.ready;
return animation.ready.then(function() {
div.style.animationPlayState = 'running';
assert_not_equals(animation.ready, originalReadyPromise,
'After updating animation-play-state a new ready promise'
+ ' object is created');
});
}, 'A new ready promise is created when setting animation-play-state: running');
promise_test(function(t) {
var div = addDiv(t);
// Set up pending animation
div.style.animation = 'abc 100s';
var animation = div.getAnimations()[0];
assert_equals(animation.playState, 'pending',
'Animation is initially pending');
// Set up listeners on ready promise
var retPromise = animation.ready.then(function() {
assert_unreached('ready promise is fulfilled');
}).catch(function(err) {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
// Now cancel the animation and flush styles
div.style.animation = '';
window.getComputedStyle(div).animation;
return retPromise;
}, 'ready promise is rejected when an animation is cancelled by resetting'
+ ' the animation property');
promise_test(function(t) {
var div = addDiv(t);
// As before, but this time instead of removing all animations, simply update
// the list of animations. At least for Firefox, updating is a different
// code path.
// Set up pending animation
div.style.animation = 'abc 100s';
var animation = div.getAnimations()[0];
assert_equals(animation.playState, 'pending',
'Animation is initially pending');
// Set up listeners on ready promise
var retPromise = animation.ready.then(function() {
assert_unreached('ready promise was fulfilled');
}).catch(function(err) {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
// Now update the animation and flush styles
div.style.animation = 'def 100s';
window.getComputedStyle(div).animation;
return retPromise;
}, 'ready promise is rejected when an animation is cancelled by updating'
+ ' the animation property');
promise_test(function(t) {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
var originalReadyPromise = animation.ready;
return animation.ready.then(function() {
div.style.animationPlayState = 'paused';
assert_not_equals(animation.ready, originalReadyPromise,
'A new Promise object is generated when setting'
+ ' animation-play-state: paused');
});
}, 'A new ready promise is created when setting animation-play-state: paused');
promise_test(function(t) {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
return animation.ready.then(function() {
div.style.animationPlayState = 'paused';
var firstReadyPromise = animation.ready;
animation.pause();
assert_equals(animation.ready, firstReadyPromise,
'Ready promise objects are identical after redundant pause');
});
}, 'Pausing twice re-uses the same Promise');
promise_test(function(t) {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
return animation.ready.then(function() {
div.style.animationPlayState = 'paused';
// Flush style and verify we're pending at the same time
assert_equals(animation.playState, 'pending', 'Animation is pending');
var pauseReadyPromise = animation.ready;
// Now play again immediately
div.style.animationPlayState = 'running';
assert_equals(animation.playState, 'pending', 'Animation is still pending');
assert_equals(animation.ready, pauseReadyPromise,
'The pause Promise is re-used when playing while waiting'
+ ' to pause');
return animation.ready;
}).then(function() {
assert_equals(animation.playState, 'running',
'Animation is running after aborting a pause');
});
}, 'If a pause operation is interrupted, the ready promise is reused');
promise_test(function(t) {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
return animation.ready.then(function() {
div.style.animationPlayState = 'paused';
return animation.ready;
}).then(function(resolvedAnimation) {
assert_equals(resolvedAnimation, animation,
'Promise received when ready Promise for a pause operation'
+ ' is completed is the animation on which the pause was'
+ ' performed');
});
}, 'When a pause is complete the Promise callback gets the correct animation');
done();
</script>
</body>
|
