<!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>