| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 canvas { | |
| 4 display: block; | |
| 5 position: fixed; | |
| 6 left: 0px; | |
| 7 top: 0px; | |
| 8 right: 0px; | |
| 9 bottom: 0px; | |
| 10 border: none; | |
| 11 width: 100px; | |
| 12 height: 100px; | |
| 13 margin: 0px; | |
| 14 padding: 0px; | |
| 15 image-rendering: -webkit-optimize-contrast; | |
| 16 } | |
| 17 </style> | |
| 18 <body> | |
| 19 <!-- The resulting image should be 100x100, consisting of 4 50x50 blocks of
solid color, with no blurring of edges --> | |
| 20 <canvas width="2" height="2"></canvas> | |
| 21 </body> | |
| 22 <script> | |
| 23 if (window.testRunner) | |
| 24 testRunner.dumpAsTextWithPixelResults(); | |
| 25 | |
| 26 var canvas; | |
| 27 var imageHandle; | |
| 28 canvas = document.getElementsByTagName("canvas")[0].getContext("2d"); | |
| 29 canvas.width = 2; | |
| 30 canvas.height = 2; | |
| 31 imageHandle = canvas.createImageData(2, 2); | |
| 32 | |
| 33 var index = 0; | |
| 34 var length = imageHandle.data.length; | |
| 35 | |
| 36 imageHandle.data[index++] = 255; | |
| 37 imageHandle.data[index++] = 0; | |
| 38 imageHandle.data[index++] = 0; | |
| 39 imageHandle.data[index++] = 255; | |
| 40 | |
| 41 imageHandle.data[index++] = 0; | |
| 42 imageHandle.data[index++] = 255; | |
| 43 imageHandle.data[index++] = 0; | |
| 44 imageHandle.data[index++] = 255; | |
| 45 | |
| 46 imageHandle.data[index++] = 0; | |
| 47 imageHandle.data[index++] = 0; | |
| 48 imageHandle.data[index++] = 255; | |
| 49 imageHandle.data[index++] = 255; | |
| 50 | |
| 51 imageHandle.data[index++] = 0; | |
| 52 imageHandle.data[index++] = 0; | |
| 53 imageHandle.data[index++] = 0; | |
| 54 imageHandle.data[index++] = 255; | |
| 55 | |
| 56 canvas.putImageData(imageHandle, 0, 0); | |
| 57 </script> | |
| OLD | NEW |