67 lines
2.0 KiB
HTML
67 lines
2.0 KiB
HTML
<!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.drawImageFromRect(i, 0, 0, i.width, i.height, 0, 0, i.width, i.height, 'over')
|
|
|
|
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.dumpAsText(true);
|
|
testRunner.waitUntilDone();
|
|
}
|
|
|
|
i = new Image();
|
|
i.onload = imageLoaded;
|
|
i.src = 'resources/apple.gif';
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="runTests();">
|
|
<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 drawImageFromRect.</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>
|