| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| .fixed { |
| position: fixed; |
| width: 50px; |
| height: 50px; |
| background-color: silver; |
| } |
| |
| .positionedAndTransformed { |
| left: 20px; |
| top: -80px; |
| transform: translateY(100px); |
| } |
| </style> |
| |
| <script type="text/javascript"> |
| window.jsTestIsAsync = true; |
| |
| function doTest() { |
| if (!window.internals) |
| return; |
| |
| document.getElementById("layertree1").innerText = internals.layerTreeAsText(document); |
| window.scrollTo(0, 10); |
| |
| runAfterLayoutAndPaint(function() { |
| layerTree = internals.layerTreeAsText(document); |
| // Make sure the layer tree dump is stable. |
| shouldBe('layerTree', 'internals.layerTreeAsText(document)'); |
| document.getElementById("layertree2").innerText = layerTree; |
| finishJSTest(); |
| }); |
| } |
| |
| if (window.internals) |
| internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| |
| window.onload = doTest; |
| </script> |
| </head> |
| |
| <body> |
| <!-- |
| https://code.google.com/p/chromium/issues/detail?id=293926 |
| |
| This test reproduces a bug where fixed-position layers flickered. Fixed |
| position elements opt-out of compositing when they are out of view. |
| However, the position of the layer was being computed differently when |
| the layer was composited versus not composited. In this scenario, the |
| difference in positioning made the layer seem out-of-view when |
| composited, and in-view when not composited. Thus, every compositing |
| update, the layer would flip its compositing state. The flickering |
| occurred because of a shortcut that avoids painting because it thought |
| the layer is offscreen. |
| --> |
| |
| <div style="width: 2000px; height: 2000px"> |
| The layer trees before and after should be the same, except for the position of the 50x50 sized composited fixed position layer.<br> |
| BEFORE: |
| <pre id="layertree1"></pre> |
| AFTER: |
| <pre id="layertree2"></pre> |
| </div> |
| |
| <div class="positionedAndTransformed fixed"></div> |
| </body> |
| </html> |
| |
