blob: a0f05b547061b74118c5b36b6240e5ca5554c3db [file] [log] [blame]
<!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>