third_party/WebKit/LayoutTests/fast/canvas/pixelated-off-screen.html

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