| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <script> |
| function debug(str) { |
| var c = document.getElementById('console') |
| c.appendChild(document.createTextNode(str + '\n')); |
| } |
| |
| var numErrs = 0; |
| |
| function getContext(id) { |
| return document.getElementById(id).getContext('2d'); |
| } |
| |
| function imageLoaded() { |
| var c1 = getContext('canvas1') |
| c1.drawImage(i, 0, 0, i.width * 2, i.height * 2) |
| |
| var c2 = getContext('canvas2'); |
| c2.drawImage(i, 0, 0, i.width, i.height, 0, 0, i.width, i.height) |
| |
| var c3 = getContext('canvas3'); |
| var pattern = c3.createPattern(i, 'repeat'); |
| c3.fillStyle = pattern; |
| c3.arc(75, 75, 60, 0, 2*Math.PI, 0); |
| c3.fill(); |
| |
| var c4 = getContext('canvas4'); |
| var pattern = c4.createPattern(i, 'no-repeat'); |
| c4.fillStyle = pattern; |
| c4.translate(i.width / 2, i.height / 2); |
| c4.rotate(40.0 / 180 * Math.PI); |
| c4.translate(- i.width / 2, - i.height / 2); |
| c4.fillRect(0, 0, i.width, i.height); |
| |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| |
| function runTests() { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| i = new Image(); |
| i.onload = imageLoaded; |
| i.src = 'resources/apple.gif'; |
| } |
| |
| </script> |
| </head> |
| <body onload="runTests();" style="overflow:hidden;"> |
| <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> |
| <div><canvas id="canvas1" width="150" height="150"></canvas>Using drawImage.</div> |
| <div><canvas id="canvas2" width="150" height="150"></canvas>Using drawImage with source rectangle.</div> |
| <div><canvas id="canvas3" width="150" height="150"></canvas>Using ImagePattern.</div> |
| <div><canvas id="canvas4" width="150" height="150"></canvas>Using ImagePattern and rotation.</div> |
| |
| <pre id="console"> |
| </pre> |
| </body> |
| </html> |
