| <!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; |
| |
| // Ignore the render tree. |
| testRunner.dumpAsTextWithPixelResults(); |
| |
| testRunner.waitUntilDone(); |
| testRunner.setBackingScaleFactor(2, function () { |
| drawImageToCanvas(); |
| testRunner.notifyDone(); |
| }); |
| } |
| |
| window.onload = runTest; |
| </script> |
