third_party/WebKit/LayoutTests/fast/canvas/pixelated.html

   1 <!DOCTYPE html>
   2 <style>
   3     img {
   4         display: none;
   5     }
   6     canvas {
   7         width: 100px;
   8         height: 100px;
   9         image-rendering: pixelated;
  10     }
  11     .canvas2 {
  12         image-rendering: auto;
  13     }
  14 </style>
  15 <body>
  16     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=">
  17     <!-- Test that gpu accelerated canvases work with pixelated. -->
  18     <!-- The result is 3 canvases, each with a 2x2 block of colors. Only the middle canvas should be blurred. -->
  19     <canvas class="canvas0" width="4" height="4"></canvas>
  20     <canvas class="canvas1" width="4" height="4"></canvas>
  21     <canvas class="canvas2" width="4" height="4"></canvas>
  22 </body>
  23 <script>
  24     // Ignore the render tree.
  25     if (window.testRunner)
  26         window.testRunner.dumpAsTextWithPixelResults();
  27
  28     function drawToCanvas(canvas) {
  29         var ctx = canvas.getContext("2d")
  30         ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1);
  31     }
  32
  33     function draw() {
  34         drawToCanvas(document.getElementsByTagName("canvas")[0]);
  35         var canvas1 = document.getElementsByTagName("canvas")[1];
  36         var canvas2 = document.getElementsByTagName("canvas")[2];
  37         drawToCanvas(canvas1);
  38         drawToCanvas(canvas2);
  39         // The first canvas stays pixelated. Flip the pixelated-ness of the
  40         // other two.
  41         canvas1.style.imageRendering = "auto";
  42         canvas2.style.imageRendering = "pixelated";
  43     }
  44     window.onload = draw;
  45 </script>