third_party/WebKit/LayoutTests/fast/canvas/pixelated-resize.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 resizing a pixelated canvas works. -->
  15     <!-- The canvas should be upscaled without blurring. -->
  16     <canvas width="4" height="4"></canvas>
  17 </body>
  18 <script>
  19     // Ignore the render tree.
  20     if (window.testRunner)
  21       window.testRunner.dumpAsTextWithPixelResults();
  22
  23     function drawToCanvas(canvas) {
  24         var ctx = canvas.getContext("2d")
  25         ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1);
  26     }
  27
  28     function draw() {
  29         var canvas = document.getElementsByTagName("canvas")[0];
  30         drawToCanvas(canvas);
  31         // Resize so that the image buffer is reset.
  32         canvas.width = 5;
  33         canvas.style.width = "201px";
  34         drawToCanvas(canvas);
  35     }
  36     window.onload = draw;
  37 </script>