third_party/WebKit/LayoutTests/fast/canvas/image-object-in-canvas.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>
   6 function debug(str) {
   7     var c = document.getElementById('console')
   8     c.appendChild(document.createTextNode(str + '\n'));
   9 }
  10
  11 var numErrs = 0;
  12
  13 function getContext(id) {
  14     return document.getElementById(id).getContext('2d');
  15 }
  16
  17 function imageLoaded() {
  18     var c1 = getContext('canvas1')
  19     c1.drawImage(i, 0, 0, i.width * 2, i.height * 2)
  20
  21     var c2 = getContext('canvas2');
  22     c2.drawImage(i, 0, 0, i.width, i.height, 0, 0, i.width, i.height)
  23
  24     var c3 = getContext('canvas3');
  25     var pattern = c3.createPattern(i, 'repeat');
  26     c3.fillStyle = pattern;
  27     c3.arc(75, 75, 60, 0, 2*Math.PI, 0);
  28     c3.fill();
  29
  30     var c4 = getContext('canvas4');
  31     var pattern = c4.createPattern(i, 'no-repeat');
  32     c4.fillStyle = pattern;
  33     c4.translate(i.width / 2, i.height / 2);
  34     c4.rotate(40.0 / 180 * Math.PI);
  35     c4.translate(- i.width / 2, - i.height / 2);
  36     c4.fillRect(0, 0, i.width, i.height);
  37
  38     if (window.testRunner) {
  39         testRunner.notifyDone();
  40     }
  41 }
  42
  43 function runTests() {
  44     if (window.testRunner) {
  45             testRunner.dumpAsTextWithPixelResults();
  46         testRunner.waitUntilDone();
  47     }
  48
  49     i = new Image();
  50     i.onload = imageLoaded;
  51     i.src = 'resources/apple.gif';
  52 }
  53
  54 </script>
  55 </head>
  56 <body onload="runTests();" style="overflow:hidden;">
  57 <p>This tests that the Image JavaScript object works as expected when used in a canvas. If the test is successful, the Apple logo should appear scaled, normal and finally tiled in a circle.</p>
  58 <div><canvas id="canvas1" width="150" height="150"></canvas>Using drawImage.</div>
  59 <div><canvas id="canvas2" width="150" height="150"></canvas>Using drawImage with source rectangle.</div>
  60 <div><canvas id="canvas3" width="150" height="150"></canvas>Using ImagePattern.</div>
  61 <div><canvas id="canvas4" width="150" height="150"></canvas>Using ImagePattern and rotation.</div>
  62
  63 <pre id="console">
  64 </pre>
  65 </body>
  66 </html>