<html>
<head>
<script src="resources/text-based-repaint.js"></script>
</head>
<body style="background: url(../../images/resources/grid-large.png) no-repeat; background-size: 55px 55px;">
    <div id="mask" style="position: absolute; top: -100px; left: -100px;
                          background-color: blue; width: 18.33px; height: 18.33px;"></div>
    <script>
        var pos = [
            // First row.
            [0, 0],
            [0, 18.33],
            [0, 36.67],

            // Second row.
            [18.33, -9.17],
            [18.33, 9.17],
            [18.33, 27.5],
            [18.33, 45.83],

            // Third row.
            [36.67, 0],
            [36.67, 18.33],
            [36.67, 36.67],

            // Disappear.
            [-100, -100],
        ];

        var currentPos = 0;

        function repaintTest()
        {
            if (currentPos >= pos.length)
                return;

            var mask = document.getElementById("mask");
            mask.style.top = pos[currentPos][0];
            mask.style.left = pos[currentPos][1];
            ++currentPos;

            if (window.internals)
                internals.forceCompositingUpdate(document);

            if (window.testRunner)
                repaintTest();
            else
                setTimeout("repaintTest();", 1000);
        }

        onload = runRepaintAndPixelTest;
    </script>
</body>
</html>