third_party/WebKit/LayoutTests/css3/images/optimize-contrast-canvas.html

   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>