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
|
<!DOCTYPE HTML>
<html>
<head>
<title>Tests for MozAfterPaint</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/paint_listener.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: radial-gradient(ellipse at center, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
</style>
</head>
<body>
</body>
<script>
var utils = window.windowUtils;
function waitForPaints() {
return new Promise(function(resolve, reject) {
waitForAllPaintsFlushed(resolve);
});
}
add_task(async () => {
var element = document.createElement("div");
document.body.appendChild(element);
await waitForPaints();
utils.checkAndClearPaintedState(element);
element.style.opacity = "0.5";
await waitForPaints();
var painted = utils.checkAndClearPaintedState(element);
// *** We check that this repaints because the test is relying
// on this property. If this is broken then this test wont
// be reliable check for will-change.
is(painted, true, "element should have been painted");
element.remove();
});
add_task(async () => {
var element = document.createElement("div");
document.body.appendChild(element);
element.style.willChange = "opacity";
await waitForPaints();
utils.checkAndClearPaintedState(element);
element.style.opacity = "0.5";
await waitForPaints();
var painted = utils.checkAndClearPaintedState(element);
// BasicLayers' heuristics are so that even with will-change:opacity,
// we can still have repaints.
if (utils.layerManagerType != "Basic") {
is(painted, false, "will-change:opacity element should not have been painted");
}
element.remove();
});
add_task(async () => {
var element = document.createElement("div");
document.body.appendChild(element);
element.style.willChange = "transform";
await waitForPaints();
utils.checkAndClearPaintedState(element);
element.style.transform = "translateY(-5px)";
await waitForPaints();
var painted = utils.checkAndClearPaintedState(element);
// BasicLayers' heuristics are so that even with will-change:transform,
// we can still have repaints.
if (utils.layerManagerType != "Basic") {
is(painted, false, "will-change:transform element should not have been painted");
}
element.remove();
});
add_task(async () => {
var element = document.createElement("div");
document.body.appendChild(element);
element.style.willChange = "translate";
await waitForPaints();
utils.checkAndClearPaintedState(element);
element.style.translate = "5px";
await waitForPaints();
var painted = utils.checkAndClearPaintedState(element);
// BasicLayers' heuristics are so that even with will-change:translate,
// we can still have repaints.
if (utils.layerManagerType != "Basic") {
is(painted, false, "will-change:translate element should not have been painted");
}
element.remove();
});
add_task(async () => {
var element = document.createElement("div");
document.body.appendChild(element);
element.style.willChange = "offset-path";
await waitForPaints();
utils.checkAndClearPaintedState(element);
element.style.offsetPath = "path('M55 50 h1')";
await waitForPaints();
var painted = utils.checkAndClearPaintedState(element);
// BasicLayers' heuristics are so that even with will-change:offset-path,
// we can still have repaints.
if (utils.layerManagerType != "Basic") {
is(painted, false, "will-change:offset-path element should not have been painted");
}
element.remove();
});
</script>
</html>
|
