<!DOCTYPE html>
<style>
    canvas {
        width: 100px;
        height: 100px;
        image-rendering: pixelated;
    }
</style>
<body>
    <!-- Draw to a canvas already in the DOM. -->
    <!-- The resulting image should be 100x100, consisting of 4 50x50 blocks of solid color, with no blurring of edges -->
    <canvas width="2" height="2"></canvas>
</body>
<script>
    // Ignore the render tree.
    if (window.testRunner)
      window.testRunner.dumpAsTextWithPixelResults();

    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var imageHandle = context.createImageData(canvas.width, canvas.height);

    var index = 0;

    imageHandle.data[index++] = 255;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;

    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;

    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;
    imageHandle.data[index++] = 255;

    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 0;
    imageHandle.data[index++] = 255;

    context.putImageData(imageHandle, 0, 0);
</script>