<!DOCTYPE html>
<html>
<title>createImageBitmap: clipping to the bitmap</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<script>
promise_test(function(t) {
    return new Promise(function(resolve, reject) {
        const image = new Image();
        image.onload = function() { resolve(image); };
        image.onerror = function() { reject(); };
        image.src = "/images/green-16x16.png";
    }).then(function(image) {
        return createImageBitmap(image, 8, 8, 16, 16);
    }).then(function(imageBitmap) {
        const color = 204;

        const canvas = document.createElement("canvas");
        canvas.width = 16;
        canvas.height = 16;

        // debug
        document.body.appendChild(canvas);
        canvas.setAttribute("style", "width: 100px; height: 100px;");

        const ctx = canvas.getContext("2d");
        ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
        ctx.fillRect(0, 0, 20, 20);
        ctx.drawImage(imageBitmap, 0, 0);

        const expected = [
            [ 4,  4, 0,255,0,255],
            [12,  4, color,color,color,255],
            [ 4, 12, color,color,color,255],
            [12, 12, color,color,color,255],
        ];
        for (let [x, y, r, g, b, a] of expected) {
            _assertPixel(canvas, x,y, r,g,b,a, `${x},${y}`, `${r},${g},${b},${a}`);
        }

    });
});
</script>