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

    var canvas = document.createElement('canvas');
    canvas.width = 2;
    canvas.height = 2;

    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);
    document.getElementsByTagName("body")[0].appendChild(canvas);
</script>