| <!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> |
