third_party/WebKit/LayoutTests/css3/images/pixelated-canvas.html

   1 <!DOCTYPE html>
   2 <style>
   3     canvas {
   4         width: 100px;
   5         height: 100px;
   6         image-rendering: pixelated;
   7     }
   8 </style>
   9 <body>
  10     <!-- The resulting image should be 100x100, consisting of 4 50x50 blocks of solid color, with no blurring of edges -->
  11     <canvas width="2" height="2"></canvas>
  12 </body>
  13 <script>
  14     // Ignore the render tree.
  15     if (window.testRunner)
  16       window.testRunner.dumpAsTextWithPixelResults();
  17
  18     var canvas;
  19     var imageHandle;
  20     canvas = document.getElementsByTagName("canvas")[0].getContext("2d");
  21     canvas.width = 2;
  22     canvas.height = 2;
  23     imageHandle = canvas.createImageData(2, 2);
  24
  25     var index = 0;
  26     var length = imageHandle.data.length;
  27
  28     imageHandle.data[index++] = 255;
  29     imageHandle.data[index++] = 0;
  30     imageHandle.data[index++] = 0;
  31     imageHandle.data[index++] = 255;
  32
  33     imageHandle.data[index++] = 0;
  34     imageHandle.data[index++] = 255;
  35     imageHandle.data[index++] = 0;
  36     imageHandle.data[index++] = 255;
  37
  38     imageHandle.data[index++] = 0;
  39     imageHandle.data[index++] = 0;
  40     imageHandle.data[index++] = 255;
  41     imageHandle.data[index++] = 255;
  42
  43     imageHandle.data[index++] = 0;
  44     imageHandle.data[index++] = 0;
  45     imageHandle.data[index++] = 0;
  46     imageHandle.data[index++] = 255;
  47
  48     canvas.putImageData(imageHandle, 0, 0);
  49 </script>