<!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)
window.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 = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.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>