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
|
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript"
src="/tests/SimpleTest/paint_listener.js"></script>
<script type="application/javascript" src="animation_utils.js"></script>
<style type="text/css">
.target {
/* The animation target needs geometry in order to qualify for OMTA */
width: 100px;
height: 100px;
background-color: white;
}
</style>
<script>
var ok = opener.ok.bind(opener);
var is = opener.is.bind(opener);
var todo = opener.todo.bind(opener);
function finish() {
var o = opener;
self.close();
o.SimpleTest.finish();
}
</script>
</head>
<body>
<div id="display"></div>
<script type="application/javascript">
"use strict";
runOMTATest(function() {
runAllAsyncAnimTests().then(function() {
finish();
});
}, finish, opener.SpecialPowers);
addAsyncAnimTest(function *() {
var [ div ] = new_div("");
var animation = div.animate(
[ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
{ duration: 1000, fill: 'none' });
yield waitForPaints();
advance_clock(100);
omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
"Animation is running on compositor");
animation.effect.timing.endDelay = 1000;
yield waitForPaints();
omta_is(div, "transform", { tx: 10 }, RunningOn.Compositor,
"Animation remains on compositor when endDelay is changed");
advance_clock(1000);
yield waitForPaints();
omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
"Animation is updated on main thread");
done_div();
});
addAsyncAnimTest(function *() {
var [ div ] = new_div("");
var animation = div.animate(
[ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
{ duration: 1000, endDelay: -500, fill: 'none' });
yield waitForPaints();
advance_clock(400);
yield waitForPaints();
omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
"Animation is updated on compositor " +
"duration 1000, endDelay -500, fill none, current time 400");
advance_clock(100);
yield waitForPaints();
omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
"Animation is updated on main thread " +
"duration 1000, endDelay -500, fill none, current time 500");
advance_clock(400);
yield waitForPaints();
omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
"Animation is updated on main thread " +
"duration 1000, endDelay -500, fill none, current time 900");
advance_clock(100);
yield waitForPaints();
omta_is(div, "transform", { tx: 0 }, RunningOn.MainThread,
"Animation is updated on main thread " +
"duration 1000, endDelay -500, fill none, current time 1000");
done_div();
});
addAsyncAnimTest(function *() {
var [ div ] = new_div("");
var animation = div.animate(
[ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
{ duration: 1000, endDelay: 1000, fill: 'forwards' });
yield waitForPaints();
advance_clock(1500);
yield waitForPaints();
omta_is(div, "transform", { tx: 100 }, RunningOn.MainThread,
"The end delay is performed on the main thread");
done_div();
});
addAsyncAnimTest(function *() {
var [ div ] = new_div("");
var animation = div.animate(
[ { transform: 'translate(0px)' }, { transform: 'translate(100px)' } ],
{ duration: 1000, endDelay: -500, fill: 'forwards' });
yield waitForPaints();
advance_clock(400);
yield waitForPaints();
omta_is(div, "transform", { tx: 40 }, RunningOn.Compositor,
"Animation is updated on compositor " +
"duration 1000, endDelay -500, fill forwards, current time 400");
advance_clock(100);
yield waitForPaints();
omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
"Animation is updated on main thread " +
"duration 1000, endDelay -500, fill forwards, current time 500");
advance_clock(400);
yield waitForPaints();
omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
"Animation is updated on main thread " +
"duration 1000, endDelay -500, fill forwards, current time 900");
advance_clock(100);
yield waitForPaints();
omta_is(div, "transform", { tx: 50 }, RunningOn.MainThread,
"Animation is updated on main thread " +
"duration 1000, endDelay -500, fill forwards, current time 1000");
done_div();
});
</script>
</body>
</html>
|
