OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 canvas { | |
4 width: 10px; | |
5 height: 10px; | |
6 image-rendering: pixelated; | |
7 } | |
8 </style> | |
9 <body> | |
10 <!-- Draw the expected 20x20 checkerboards using canvases. --> | |
11 <canvas width="20" height="20"></canvas> | |
12 <canvas width="20" height="20"></canvas> | |
13 <canvas width="20" height="20"></canvas> | |
14 </body> | |
15 <script> | |
16 function drawImageToCanvas() { | |
17 [0, 1, 2].forEach(function (canvasIndex) { | |
18 var context = document.getElementsByTagName("canvas")[canvasIndex].g
etContext("2d"); | |
19 context.width = 20; | |
20 context.height = 20; | |
21 var imageHandle = context.createImageData(20, 20); | |
22 var index = 0; | |
23 | |
24 function white() { | |
25 imageHandle.data[index++] = 255; | |
26 imageHandle.data[index++] = 255; | |
27 imageHandle.data[index++] = 255; | |
28 imageHandle.data[index++] = 255; | |
29 } | |
30 | |
31 function black() { | |
32 imageHandle.data[index++] = 0; | |
33 imageHandle.data[index++] = 0; | |
34 imageHandle.data[index++] = 0; | |
35 imageHandle.data[index++] = 255; | |
36 } | |
37 | |
38 // Each black or white block should be 2x2. | |
39 for (var j = 0; j < 5; j++) { | |
40 for (var k = 0; k < 10; k++) { | |
41 white(); | |
42 white(); | |
43 black(); | |
44 black(); | |
45 } | |
46 for (var k = 0; k < 10; k++) { | |
47 black(); | |
48 black(); | |
49 white(); | |
50 white(); | |
51 } | |
52 } | |
53 | |
54 context.putImageData(imageHandle, 0, 0); | |
55 }); | |
56 } | |
57 | |
58 function runTest() { | |
59 if (!window.testRunner) | |
60 return; | |
61 | |
62 // Ignore the render tree. | |
63 testRunner.dumpAsTextWithPixelResults(); | |
64 | |
65 testRunner.waitUntilDone(); | |
66 testRunner.setBackingScaleFactor(2, function () { | |
67 drawImageToCanvas(); | |
68 testRunner.notifyDone(); | |
69 }); | |
70 } | |
71 | |
72 window.onload = runTest; | |
73 </script> | |
OLD | NEW |