48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.fixed {
|
|
position: fixed;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: silver;
|
|
transform: translateX(0); /* Defeat clip to viewport */
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
if (window.testRunner && window.internals) {
|
|
testRunner.dumpAsText();
|
|
internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);
|
|
|
|
addEventListener("load", function() {
|
|
let layers1 = internals.layerTreeAsText(document);
|
|
document.getElementById("fixed1").style.top = "50px";
|
|
document.getElementById("fixed2").style.height = "10px";
|
|
|
|
let layers2 = internals.layerTreeAsText(document);
|
|
document.getElementById("fixed1").style.top = "-100px";
|
|
document.getElementById("fixed2").style.height = "0px";
|
|
|
|
let layers3 = internals.layerTreeAsText(document);
|
|
document.getElementById("layerTree1").innerText = layers1;
|
|
document.getElementById("layerTree2").innerText = layers2;
|
|
document.getElementById("layerTree3").innerText = layers3;
|
|
}, false);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
Layer tree when the fixed elements are out-of-view (should be blank):
|
|
<pre id="layerTree1"></pre>
|
|
Layer tree when the fixed elements are in-view (both fixed elements should have layers):
|
|
<pre id="layerTree2"></pre>
|
|
Layer tree when the fixed elements are out-of-view again (should be blank):
|
|
<pre id="layerTree3"></pre>
|
|
<div id="fixed1" class="fixed" style="top: -100px; left: 100px;"></div>
|
|
<div id="fixed2" class="fixed" style="top: 100px; left: 100px; height: 0px"></div>
|
|
</body>
|
|
</html>
|