third_party/WebKit/LayoutTests/fast/canvas/image-pattern-rotate.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2         "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5 <script src="../../resources/js-test.js"></script>
   6 <style>
   7 canvas {
   8     border: 1px solid #000;
   9     margin: 2px;
  10 }
  11 </style>
  12 <script>
  13 var img;
  14 var imgdata;
  15
  16 function imageLoaded() {
  17     var NUM_IMAGE = 16;
  18     for (var i = 0; i < NUM_IMAGE; i++) {
  19         var canvases = document.getElementById('canvases')
  20         var canvas = document.createElement('canvas');
  21         canvas.width = 9;
  22         canvas.height = 9;
  23         var ctx = canvas.getContext('2d');
  24
  25         var pattern = ctx.createPattern(img, 'no-repeat');
  26         ctx.fillStyle = pattern;
  27         ctx.translate(img.width / 2, img.height / 2);
  28         var angle = 2 * Math.PI * i / NUM_IMAGE;
  29         ctx.rotate(angle);
  30         ctx.translate(- img.width / 2, - img.height / 2);
  31         ctx.fillRect(0, 0, img.width, img.height);
  32
  33         var div = document.createElement('div');
  34         div.appendChild(canvas);
  35         canvases.appendChild(div);
  36
  37         var imageData = ctx.getImageData(4, 4, 1, 1);
  38         imgdata = imageData.data;
  39         shouldBe("imgdata[0]", "0");
  40         shouldBe("imgdata[1]", "255");
  41         shouldBe("imgdata[2]", "0");
  42     }
  43
  44     if (window.testRunner) {
  45         testRunner.notifyDone();
  46     }
  47 }
  48
  49 function runTests() {
  50     if (window.testRunner) {
  51                 testRunner.dumpAsText();
  52         testRunner.waitUntilDone();
  53     }
  54
  55     var patternCanvas = document.createElement('canvas');
  56     patternCanvas.width = 9;
  57     patternCanvas.height = 9;
  58     var patternCtx = patternCanvas.getContext('2d');
  59     patternCtx.fillStyle = '#0F0';
  60     patternCtx.fillRect(3, 3, 3, 3);
  61     img = new Image();
  62     img.onload = imageLoaded;
  63     img.src = patternCanvas.toDataURL();
  64
  65 }
  66 </script>
  67 </head>
  68 <body onload="runTests();">
  69 Visual result below is for debugging purposes only (test uses text baseline only). You should see sixteen canvases with a green dot (rotated square) in the center.
  70 <div id="canvases"></div>
  71 </pre>
  72 </body>
  73 </html>