<!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;
}
#willChangeBackdropFilter {
will-change: backdrop-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 = 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="shouldComposite"></div>
<div id="willChangeBackdropFilter" class="shouldComposite"></div>
<div id="willChangeCombinationThatComposites" class="shouldComposite"></div>
<div id="willChangeZIndex" class="shouldNotComposite"></div>
<pre id="layertree"></pre>
</body>
</html>