blob: a44b82f19b635ec57a077456d8d09deaf6652d10 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<style>
.shouldComposite {
width: 30px;
height: 30px;
margin: 4px;
background-color: green;
}
.shouldNotComposite {
width: 30px;
height: 30px;
margin: 4px;
background-color: red;
}
.positioned {
position: relative;
}
#willChangeAuto {
will-change: auto;
}
#willChangeOpacity {
will-change: opacity;
}
#willChangeTransform {
will-change: -webkit-transform;
}
#willChangeLeft {
will-change: left;
}
#willChangeRight {
will-change: right;
}
#willChangeTop {
will-change: top;
}
#willChangeBottom {
will-change: bottom;
}
#willChangeFilter {
will-change: -webkit-filter;
}
#willChangeCombinationThatComposites {
will-change: transition, -webkit-animation, opacity, z-index;
}
#willChangeZIndex {
will-change: z-index;
}
</style>
<script>
window.addEventListener('load', function() {
if (window.testRunner) {
document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
testRunner.dumpAsText();
}
}, false);
</script>
</head>
<body>
<div id="willChangeAuto" class="shouldNotComposite"></div>
<div id="willChangeOpacity" class="shouldComposite"></div>
<div id="willChangeTransform" class="shouldComposite"></div>
<div id="willChangeLeft" class="shouldNotComposite"></div>
<div id="willChangeLeft" class="positioned shouldComposite"></div>
<div id="willChangeRight" class="shouldNotComposite"></div>
<div id="willChangeRight" class="positioned shouldComposite"></div>
<div id="willChangeTop" class="shouldNotComposite"></div>
<div id="willChangeTop" class="positioned shouldComposite"></div>
<div id="willChangeBottom" class="shouldNotComposite"></div>
<div id="willChangeBottom" class="positioned shouldComposite"></div>
<div id="willChangeFilter" class="shouldNotComposite"></div>
<div id="willChangeCombinationThatComposites" class="shouldComposite"></div>
<div id="willChangeZIndex" class="shouldNotComposite"></div>
<pre id="layertree"></pre>
</body>
</html>
|
