canvas-drawImage-out-of-bounds-src.html

<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);

img.onload = function() {
    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>
chromium/third_party/blink/web_tests/fast/canvas/canvas-drawImage-out-of-bounds-src.html
