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

   1 <!DOCTYPE html>
   2 <style>
   3     canvas {
   4         width: 10px;
   5         height: 10px;
   6         image-rendering: pixelated;
   7     }
   8 </style>
   9 <body>
  10     <!-- Draw the expected 20x20 checkerboards using canvases. -->
  11     <canvas width="20" height="20"></canvas>
  12     <canvas width="20" height="20"></canvas>
  13     <canvas width="20" height="20"></canvas>
  14 </body>
  15 <script>
  16     function drawImageToCanvas() {
  17         [0, 1, 2].forEach(function (canvasIndex) {
  18             var context = document.getElementsByTagName("canvas")[canvasIndex].getContext("2d");
  19             context.width = 20;
  20             context.height = 20;
  21             var imageHandle = context.createImageData(20, 20);
  22             var index = 0;
  23
  24             function white() {
  25                 imageHandle.data[index++] = 255;
  26                 imageHandle.data[index++] = 255;
  27                 imageHandle.data[index++] = 255;
  28                 imageHandle.data[index++] = 255;
  29             }
  30
  31             function black() {
  32                 imageHandle.data[index++] = 0;
  33                 imageHandle.data[index++] = 0;
  34                 imageHandle.data[index++] = 0;
  35                 imageHandle.data[index++] = 255;
  36             }
  37
  38             // Each black or white block should be 2x2.
  39             for (var j = 0; j < 5; j++) {
  40                 for (var k = 0; k < 10; k++) {
  41                     white();
  42                     white();
  43                     black();
  44                     black();
  45                 }
  46                 for (var k = 0; k < 10; k++) {
  47                     black();
  48                     black();
  49                     white();
  50                     white();
  51                 }
  52             }
  53
  54             context.putImageData(imageHandle, 0, 0);
  55         });
  56     }
  57
  58     function runTest() {
  59         if (!window.testRunner)
  60             return;
  61
  62         // Ignore the render tree.
  63         testRunner.dumpAsTextWithPixelResults();
  64
  65         testRunner.waitUntilDone();
  66         testRunner.setBackingScaleFactor(2, function () {
  67             drawImageToCanvas();
  68             testRunner.notifyDone();
  69         });
  70     }
  71
  72     window.onload = runTest;
  73 </script>