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