<html>
<body>
<canvas id="c1" width="250" height="250"></canvas>
<canvas id="c2" width="250" height="250"></canvas>
<br>
<canvas id="c3" width="250" height="250"></canvas>
<canvas id="c4" width="250" height="250"></canvas>
<script type="text/javascript">
var canvas1 = document.getElementById('c1');
var canvas2 = document.getElementById('c2');
var canvas3 = document.getElementById('c3');
var canvas4 = document.getElementById('c4');
var bgcanvas = document.createElement('canvas');
bgcanvas.width = 100;
bgcanvas.height = 100;
var bgctx = bgcanvas.getContext('2d');
bgctx.fillStyle = 'green';
bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height);
var greenSquareURL = bgcanvas.toDataURL();
var img = new Image();
img.src = greenSquareURL;
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var ctx4 = canvas4.getContext('2d');
video = document.createElement("video");
video.poster = greenSquareURL;
ctx1.drawImage(bgcanvas, -100, -100, 300, 300, -25, -25, 300, 300);
ctx1.drawImage(bgcanvas, -100, -100, 200, 200, -25, -25, 100, 100);
ctx1.drawImage(bgcanvas, 0, -100, 100, 200, 75, -25, 100, 100);
ctx1.drawImage(bgcanvas, 0, -100, 200, 200, 175, -25, 100, 100);
ctx1.drawImage(bgcanvas, -100, 0, 200, 100, -25, 75, 100, 100);
ctx1.drawImage(bgcanvas, 0, 0, 200, 100, 175, 75, 100, 100);
ctx1.drawImage(bgcanvas, -100, 0, 200, 200, -25, 175, 100, 100);
ctx1.drawImage(bgcanvas, 0, 0, 100, 200, 75, 175, 100, 100);
ctx1.drawImage(bgcanvas, 0, 0, 200, 200, 175, 175, 100, 100);
ctx2.drawImage(img, -100, -100, 300, 300, -25, -25, 300, 300);
ctx2.drawImage(img, -100, -100, 200, 200, -25, -25, 100, 100);
ctx2.drawImage(img, 0, -100, 100, 200, 75, -25, 100, 100);
ctx2.drawImage(img, 0, -100, 200, 200, 175, -25, 100, 100);
ctx2.drawImage(img, -100, 0, 200, 100, -25, 75, 100, 100);
ctx2.drawImage(img, 0, 0, 200, 100, 175, 75, 100, 100);
ctx2.drawImage(img, -100, 0, 200, 200, -25, 175, 100, 100);
ctx2.drawImage(img, 0, 0, 100, 200, 75, 175, 100, 100);
ctx2.drawImage(img, 0, 0, 200, 200, 175, 175, 100, 100);
if (window.testRunner) {
testRunner.waitUntilDone();
}
var video = document.createElement("video");
video.autoplay = false;
video.addEventListener("canplaythrough", videoLoaded, false);
video.src = "resources/green.ogv";
function videoLoaded() {
var w = video.videoWidth;
var h = video.videoHeight;
ctx3.drawImage(video, -w, -h, 3*w, 3*h, -25, -25, 300, 300);
ctx3.drawImage(video, -w, -h, 2*w, 2*h, -25, -25, 100, 100);
ctx3.drawImage(video, 0, -h, w, 2*h, 75, -25, 100, 100);
ctx3.drawImage(video, 0, -h, 2*w, 2*h, 175, -25, 100, 100);
ctx3.drawImage(video, -w, 0, 2*w, h, -25, 75, 100, 100);
ctx3.drawImage(video, 0, 0, 2*w, h, 175, 75, 100, 100);
ctx3.drawImage(video, -w, 0, 2*w, 2*h, -25, 175, 100, 100);
ctx3.drawImage(video, 0, 0, w, 2*h, 75, 175, 100, 100);
ctx3.drawImage(video, 0, 0, 2*w, 2*h, 175, 175, 100, 100);
if (window.createImageBitmap) {
window.createImageBitmap(img).then(imageReady, function() {
testFailed("Promise was rejected.");
finishJSTest();
});
} else {
if (window.testRunner) {
testRunner.notifyDone();
}
}
}
function imageReady(imageBitmap) {
ctx4.drawImage(imageBitmap, -100, -100, 300, 300, -25, -25, 300, 300);
ctx4.drawImage(imageBitmap, -100, -100, 200, 200, -25, -25, 100, 100);
ctx4.drawImage(imageBitmap, 0, -100, 100, 200, 75, -25, 100, 100);
ctx4.drawImage(imageBitmap, 0, -100, 200, 200, 175, -25, 100, 100);
ctx4.drawImage(imageBitmap, -100, 0, 200, 100, -25, 75, 100, 100);
ctx4.drawImage(imageBitmap, 0, 0, 200, 100, 175, 75, 100, 100);
ctx4.drawImage(imageBitmap, -100, 0, 200, 200, -25, 175, 100, 100);
ctx4.drawImage(imageBitmap, 0, 0, 100, 200, 75, 175, 100, 100);
ctx4.drawImage(imageBitmap, 0, 0, 200, 200, 175, 175, 100, 100);
if (window.testRunner) {
testRunner.notifyDone();
}
}
</script>
</body></html>