invalidations-with-large-negative-margin-inline-content.html

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

chromium/third_party/blink/web_tests/compositing/squashing/invalidations-with-large-negative-margin-inline-content.html