<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
jsTestIsAsync = true;

description("Tests that createImageBitmap from a canvas.toBlob object should have the same pixel data as the blob.");

var imageData2;
var imageData3;

var canvas1 = document.createElement("canvas");
var ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "#FF0000";
ctx1.fillRect(0, 0, 300, 150);

var newImg = new Image();
newImg.onload = function() {
    var canvas3 = document.createElement("canvas");
    var ctx3 = canvas3.getContext("2d");
    ctx3.drawImage(newImg, 0, 0, 300, 150);

    imageData3 = ctx3.getImageData(0, 0, 300, 150).data;
    var imageMatched = true;
    for (var i = 1; i < imageData2.length; i++) {
        if (imageData2[i] != imageData3[i]) {
            imageMatched = false;
            break;
        }
    }
    if (imageMatched)
        testPassed("image data from the created ImageBitmap and the originated blob is the same");
    else
        testFailed("image data from the created ImageBitmap and the originated blob is NOT the same");
    finishJSTest();
}

canvas1.toBlob(function(blob) {
    createImageBitmap(blob).then(imageBitmap => {
        var canvas2 = document.createElement("canvas");
        var ctx2 = canvas2.getContext("2d");
        ctx2.drawImage(imageBitmap, 0, 0, 300, 150);
        imageData2 = ctx2.getImageData(0, 0, 300, 150).data;
        url = URL.createObjectURL(blob);
        newImg.src = url;
    });
});
</script>