third_party/WebKit/LayoutTests/css3/images/pixelated-hidpi.html

   1 <!DOCTYPE html>
   2 <style>
   3     canvas {
   4         width: 10px;
   5         height: 10px;
   6         image-rendering: pixelated;
   7     }
   8     img {
   9         width: 10px;
  10         height: 10px;
  11         image-rendering: pixelated;
  12     }
  13     svg {
  14         width: 10px;
  15         height: 10px;
  16     }
  17     image {
  18         image-rendering: pixelated;
  19     }
  20 </style>
  21 <body>
  22     <!-- The output should be checkerboards all 20x20 with sharp 2x2 blocks and no blurring. -->
  23     <!-- FIXME: this test is a little too small to visually inspect for blurring. Should we make the test larger and more accessible? -->
  24     <canvas width="10" height="10"></canvas>
  25     <img src="resources/pixelated-hdpi.png">
  26     <svg><image width="10" height="10" xlink:href="resources/pixelated-hdpi.png"/></svg>
  27 </body>
  28 <script>
  29     function drawImageToCanvas() {
  30         var image = document.getElementsByTagName("img")[0];
  31         var canvas = document.getElementsByTagName("canvas")[0].getContext("2d");
  32         canvas.drawImage(image, 0, 0);
  33     }
  34
  35     function runTest() {
  36         if (!window.testRunner)
  37             return;
  38
  39         // Ignore the render tree.
  40         testRunner.dumpAsTextWithPixelResults();
  41
  42         testRunner.waitUntilDone();
  43         testRunner.setBackingScaleFactor(2, function () {
  44             drawImageToCanvas();
  45             testRunner.notifyDone();
  46         });
  47     }
  48
  49     window.onload = runTest;
  50 </script>