<!DOCTYPE html>
<html>
<style>
#layer {
    position: relative;
    left: 10px;
    width: 100px;
    height: 50px;
    transform: translateZ(0);
}
#console {
    display: none;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>

var left = 10;

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

function repaintTest() {
    runAfterLayoutAndPaint(runTest);
};

function runTest() {
    if (window.internals)
        internals.startTrackingRepaints(document);
    left += 0.1;
    document.getElementById('layer').style.left = left + 'px';
    if (window.internals) {
        document.getElementById('console').textContent += left + ':\n'
            + internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
        internals.stopTrackingRepaints(document);
    }

    if (left < 12) {
        repaintTest();
    } else {
        // Display the test results only after test is done so that it does not affect repaint rect results.
        document.getElementById('console').style.display = "block";
        if (window.testRunner)
            testRunner.notifyDone();
    }
}
</script>
<body onload="repaintTest()">
<div id="layer"></div>
<pre id="console"></pre>