third_party/WebKit/LayoutTests/fast/images/paint-subrect-grid.html

   1 <canvas id="canvas" width="30" height="30"></canvas>
   2 <script>
   3 if (window.testRunner)
   4     testRunner.dumpAsTextWithPixelResults();
   5
   6 var img = new Image();
   7 // This is a 11x11 black and white grid.
   8 img.src = 'resources/grid-small.png';
   9
  10 function drawSubRectScaled(ctx, img, x, y, w, h, scale)
  11 {
  12     ctx.drawImage(img, x, y, w, h, x * scale, y * scale, w * scale, h * scale);
  13 }
  14
  15 img.onload = function()
  16 {
  17     // Draw the image into canvas with 8 fragments like shown:
  18     //
  19     // | 3.66 x 3.66 |   | 3.66 x 3.66 |   | 3.66 x 3.66 |
  20     //
  21     // |     5.5 x 3.66      |     |      5.5 x 3.66     |
  22     //
  23     // | 3.66 x 3.66 |   | 3.66 x 3.66 |   | 3.66 x 3.66 |
  24
  25     var ctx = document.getElementById("canvas").getContext("2d");
  26
  27     var scale = 30.0 / 11.0;
  28
  29     // Draw the top row.
  30     drawSubRectScaled(ctx, img, 0, 0, 3.66, 3.66, scale);
  31     drawSubRectScaled(ctx, img, 3.66, 0, 3.66, 3.66, scale);
  32     drawSubRectScaled(ctx, img, 7.33, 0, 3.66, 3.66, scale);
  33
  34     // Draw the middle row.
  35     drawSubRectScaled(ctx, img, 0, 3.66, 5.5, 3.66, scale);
  36     drawSubRectScaled(ctx, img, 5.5, 3.66, 5.5, 3.66, scale);
  37
  38     // Draw the bottom row.
  39     drawSubRectScaled(ctx, img, 0, 7.33, 3.66, 3.66, scale);
  40     drawSubRectScaled(ctx, img, 3.66, 7.33, 3.66, 3.66, scale);
  41     drawSubRectScaled(ctx, img, 7.33, 7.33, 3.66, 3.66, scale);
  42 }
  43 </script>