| <!DOCTYPE HTML> |
| <style> |
| .composited { |
| position: absolute; |
| will-change: transform; |
| width: 150px; |
| height: 150px; |
| background: #D9CCA7; |
| } |
| body { |
| background: #402B3C; |
| } |
| #layer-A { |
| overflow: hidden; |
| width: 50px; |
| height: 50px; |
| border: solid 5px #402B3C; |
| position: fixed; |
| background: #6AA6A6; |
| top: 20px; |
| left: 20px; |
| } |
| #layer-B { |
| width: 100px; |
| height: 100px; |
| background: #F26835; |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| } |
| #layer-C { |
| width: 200px; |
| height: 20px; |
| background: #F2B263; |
| position: absolute; |
| border: solid 3px #6AA6A6; |
| top: 40px; |
| left: 40px; |
| } |
| </style> |
| <div class="composited"></div> |
| <div id="layer-A"></div> |
| <div id="layer-B"></div> |
| <div id="layer-C"></div> |
| <pre><pre> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| } else { |
| alert('This test requires testRunner'); |
| } |
| |
| internals.forceCompositingUpdate(document); |
| document.getElementById("layer-A").style.position = "absolute"; |
| document.querySelector('pre').textContent = internals.layerTreeAsText(document); |
| </script> |
