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
|
<!doctype html>
<head>
<meta charset=utf-8>
<title>Test for styles after finished on the compositor</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<style>
.compositor {
/* Element needs geometry to be eligible for layerization */
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="log"></div>
<script>
"use strict";
promise_test(async t => {
const div = addDiv(t, { 'class': 'compositor' });
const anim = div.animate([ { offset: 0, opacity: 1 },
{ offset: 1, opacity: 0 } ],
{ delay: 10,
duration: 100 });
await anim.finished;
await waitForNextFrame();
const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');
assert_equals(opacity, '', 'No opacity animation runs on the compositor');
}, 'Opacity animation with positive delay is removed from compositor when ' +
'finished');
promise_test(async t => {
const div = addDiv(t, { 'class': 'compositor' });
const anim = div.animate([ { offset: 0, opacity: 1 },
{ offset: 0.9, opacity: 1 },
{ offset: 1, opacity: 0 } ],
{ duration: 100 });
await anim.finished;
await waitForNextFrame();
const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');
assert_equals(opacity, '', 'No opacity animation runs on the compositor');
}, 'Opacity animation initially opacity: 1 is removed from compositor when ' +
'finished');
promise_test(async t => {
const div = addDiv(t, { 'class': 'compositor' });
const anim = div.animate([ { offset: 0, opacity: 0 },
{ offset: 0.5, opacity: 1 },
{ offset: 0.51, opacity: 1 },
{ offset: 1, opacity: 0 } ],
{ delay: 10, duration: 100 });
await waitForAnimationFrames(2);
// Setting the current time at the offset generating opacity: 1.
anim.currentTime = 60;
await anim.finished;
await waitForNextFrame();
const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');
assert_equals(opacity, '', 'No opacity animation runs on the compositor');
}, 'Opacity animation is removed from compositor even when it only visits ' +
'exactly the point where the opacity: 1 value was set');
promise_test(async t => {
const div = addDiv(t, { 'class': 'compositor' });
const anim = div.animate([ { offset: 0, transform: 'none' },
{ offset: 1, transform: 'translateX(100px)' } ],
{ delay: 10,
duration: 100 });
await anim.finished;
await waitForNextFrame();
const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
assert_equals(transform, '', 'No transform animation runs on the compositor');
}, 'Transform animation with positive delay is removed from compositor when ' +
'finished');
promise_test(async t => {
const div = addDiv(t, { 'class': 'compositor' });
const anim = div.animate([ { offset: 0, transform: 'none' },
{ offset: 0.9, transform: 'none' },
{ offset: 1, transform: 'translateX(100px)' } ],
{ duration: 100 });
await anim.finished;
await waitForNextFrame();
const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
assert_equals(transform, '', 'No transform animation runs on the compositor');
}, 'Transform animation initially transform: none is removed from compositor ' +
'when finished');
promise_test(async t => {
const div = addDiv(t, { 'class': 'compositor' });
const anim = div.animate([ { offset: 0, transform: 'translateX(100px)' },
{ offset: 0.5, transform: 'none' },
{ offset: 0.9, transform: 'none' },
{ offset: 1, transform: 'translateX(100px)' } ],
{ delay: 10, duration: 100 });
await waitForAnimationFrames(2);
// Setting the current time at the offset generating transform: none.
anim.currentTime = 60;
await anim.finished;
await waitForNextFrame();
const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
assert_equals(transform, '', 'No transform animation runs on the compositor');
}, 'Transform animation is removed from compositor even when it only visits ' +
'exactly the point where the transform: none value was set');
</script>
</body>
|
