<!DOCTYPE html>
<style>
    canvas {
        width: 10px;
        height: 10px;
        image-rendering: pixelated;
    }
</style>
<body>
    <!-- Draw the expected 20x20 checkerboards using canvases. -->
    <canvas width="20" height="20"></canvas>
    <canvas width="20" height="20"></canvas>
    <canvas width="20" height="20"></canvas>
</body>
<script>
    function drawImageToCanvas() {
        [0, 1, 2].forEach(function (canvasIndex) {
            var context = document.getElementsByTagName("canvas")[canvasIndex].getContext("2d");
            context.width = 20;
            context.height = 20;
            var imageHandle = context.createImageData(20, 20);
            var index = 0;

            function white() {
                imageHandle.data[index++] = 255;
                imageHandle.data[index++] = 255;
                imageHandle.data[index++] = 255;
                imageHandle.data[index++] = 255;
            }

            function black() {
                imageHandle.data[index++] = 0;
                imageHandle.data[index++] = 0;
                imageHandle.data[index++] = 0;
                imageHandle.data[index++] = 255;
            }

            // Each black or white block should be 2x2.
            for (var j = 0; j < 5; j++) {
                for (var k = 0; k < 10; k++) {
                    white();
                    white();
                    black();
                    black();
                }
                for (var k = 0; k < 10; k++) {
                    black();
                    black();
                    white();
                    white();
                }
            }

            context.putImageData(imageHandle, 0, 0);
        });
    }

    function runTest() {
        if (!window.testRunner)
            return;

        testRunner.waitUntilDone();
        testRunner.setBackingScaleFactor(2, function () {
            drawImageToCanvas();
            testRunner.notifyDone();
        });
    }

    window.onload = runTest;
</script>