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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=975261
-->
<head>
<meta charset="utf-8">
<title>Test OMTA animations start correctly (Bug 975261)</title>
<script type="application/javascript"
src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="/tests/SimpleTest/paint_listener.js"></script>
<script type="application/javascript" src="animation_utils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style type="text/css">
@keyframes anim-opacity {
0% { opacity: 0.5 }
100% { opacity: 0.5 }
}
@keyframes anim-opacity-2 {
0% { opacity: 0.0 }
100% { opacity: 1.0 }
}
@keyframes anim-transform {
0% { transform: translate(50px); }
100% { transform: translate(50px); }
}
@keyframes anim-transform-2 {
0% { transform: translate(0px); }
100% { transform: translate(100px); }
}
.target {
/* These two lines are needed so that an opacity/transform layer
* already exists when the animation is applied. */
opacity: 0.99;
transform: translate(99px);
/* Element needs geometry in order to be animated on the
* compositor. */
width: 100px;
height: 100px;
background-color: white;
}
</style>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=975261">Mozilla Bug
975261</a>
<div id="display"></div>
<pre id="test">
<script type="application/javascript">
"use strict";
var gUtils = SpecialPowers.DOMWindowUtils;
SimpleTest.waitForExplicitFinish();
runOMTATest(testDelay, SimpleTest.finish);
function newTarget() {
var target = document.createElement("div");
target.classList.add("target");
document.getElementById("display").appendChild(target);
return target;
}
function testDelay() {
gUtils.advanceTimeAndRefresh(0);
var target = newTarget();
target.setAttribute("style", "animation: 10s 10s anim-opacity linear");
gUtils.advanceTimeAndRefresh(0);
waitForAllPaints(function() {
gUtils.advanceTimeAndRefresh(10100);
waitForAllPaints(function() {
var opacity = gUtils.getOMTAStyle(target, "opacity");
is(opacity, "0.5",
"opacity is set on compositor thread after delayed start");
target.removeAttribute("style");
gUtils.restoreNormalRefresh();
testTransform();
});
});
}
function testTransform() {
gUtils.advanceTimeAndRefresh(0);
var target = newTarget();
target.setAttribute("style", "animation: 10s 10s anim-transform linear");
gUtils.advanceTimeAndRefresh(0);
waitForAllPaints(function() {
gUtils.advanceTimeAndRefresh(10100);
waitForAllPaints(function() {
var transform = gUtils.getOMTAStyle(target, "transform");
ok(matricesRoughlyEqual(convertTo3dMatrix(transform),
convertTo3dMatrix("matrix(1, 0, 0, 1, 50, 0)")),
"transform is set on compositor thread after delayed start");
target.remove();
gUtils.restoreNormalRefresh();
testBackwardsFill();
});
});
}
function testBackwardsFill() {
gUtils.advanceTimeAndRefresh(0);
var target = newTarget();
target.setAttribute("style",
"transform: translate(30px); " +
"animation: 10s 10s anim-transform-2 linear backwards");
gUtils.advanceTimeAndRefresh(0);
waitForAllPaints(function() {
gUtils.advanceTimeAndRefresh(10000);
waitForAllPaints(function() {
gUtils.advanceTimeAndRefresh(100);
waitForAllPaints(function() {
var transform = gUtils.getOMTAStyle(target, "transform");
ok(matricesRoughlyEqual(convertTo3dMatrix(transform),
convertTo3dMatrix("matrix(1, 0, 0, 1, 1, 0)")),
"transform is set on compositor thread after delayed start " +
"with backwards fill");
target.remove();
gUtils.restoreNormalRefresh();
testTransitionTakingOver();
});
});
});
}
function testTransitionTakingOver() {
gUtils.advanceTimeAndRefresh(0);
var parent = newTarget();
var child = newTarget();
parent.appendChild(child);
parent.style.opacity = "0.0";
parent.style.animation = "10s anim-opacity-2 linear";
child.style.opacity = "inherit";
child.style.transition = "10s opacity linear";
var childCS = getComputedStyle(child, "");
gUtils.advanceTimeAndRefresh(0);
waitForAllPaints(function() {
gUtils.advanceTimeAndRefresh(4000);
waitForAllPaints(function() {
child.style.opacity = "1.0";
var opacity = gUtils.getOMTAStyle(child, "opacity");
// FIXME Bug 1039799 (or lower priority followup): Animations
// inherited from an animating parent element don't get shipped to
// the compositor thread.
todo_is(opacity, "0.4",
"transition that interrupted animation is correct");
// Trigger to start the transition, without this the transition will
// be pending in advanceTimeAndRefresh(0) so the transition will not
// be sent to the compositor until we call advanceTimeAndRefresh with
// a positive time value.
getComputedStyle(child).opacity;
gUtils.advanceTimeAndRefresh(0);
waitForAllPaints(function() {
var opacity = gUtils.getOMTAStyle(child, "opacity");
is(opacity, "0.4",
"transition that interrupted animation is correct");
gUtils.advanceTimeAndRefresh(5000);
waitForAllPaints(function() {
opacity = gUtils.getOMTAStyle(child, "opacity");
is(opacity, "0.7",
"transition that interrupted animation is correct");
is(childCS.opacity, "0.7",
"transition that interrupted animation is correct");
parent.remove();
gUtils.restoreNormalRefresh();
SimpleTest.finish();
});
});
});
});
}
</script>
</pre>
</body>
</html>
|
