| <!DOCTYPE html> |
| <div style="height:200px;width:600px;overflow:scroll"> |
| <div style="position:relative; top: 100px"> |
| <div style="height:400px;margin-bottom:-400px;position:relative"> |
| <div style="width:50px;height:50px;position:absolute;margin:0;left: 400px"> |
| <div id="chip" style="height: 20px; width: 20px; background: lightgray"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <pre id="output" style="display:none"></pre> |
| <script> |
| // Test that updating the position of a LayoutObject that is squashed relative to its squashing container, |
| // but does not have a Layer, issues the correct repaint rects. |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| var updateFunction = function() { |
| if (window.internals) |
| internals.startTrackingRepaints(document); |
| |
| document.getElementById('chip').style.backgroundColor = "blue"; |
| |
| if (window.internals) { |
| // Repaint should be at x=400px, since that is the position relative to the squashing layer. |
| var data = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS); |
| internals.stopTrackingRepaints(document); |
| |
| var output = document.getElementById('output'); |
| output.textContent = data; |
| output.style.display = "block"; |
| } |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }; |
| |
| // Wait two frames before updating the chip's style, so that the document is painted and squashed first. |
| window.requestAnimationFrame(function() { |
| window.requestAnimationFrame(updateFunction); |
| }); |
| </script> |
