1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<!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.dumpAsTextWithPixelResults();
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>
|
