third_party/WebKit/LayoutTests/fast/canvas/pixelated-canvas.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 </style>
  12 <body>
  13     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=">
  14     <!-- Test that drawing a pixelated canvas with another pixelated canvas as source works. -->
  15     <!-- Both canvases should be upscaled without blurring. -->
  16     <canvas class="canvas0" width="4" height="4"></canvas>
  17     <canvas class="canvas1" width="4" height="4"></canvas>
  18 </body>
  19 <script>
  20     // Ignore the render tree.
  21     if (window.testRunner)
  22       window.testRunner.dumpAsTextWithPixelResults();
  23
  24     function drawToCanvas(canvas) {
  25         var ctx = canvas.getContext("2d")
  26         ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1);
  27     }
  28
  29     function draw() {
  30         var canvas0 = document.getElementsByTagName("canvas")[0];
  31         var canvas1 = document.getElementsByTagName("canvas")[1];
  32         drawToCanvas(canvas0);
  33         canvas1.getContext("2d").drawImage(canvas0, 0, 0);
  34     }
  35     window.onload = draw;
  36 </script>