<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/2dcontext/resources/canvas-tests.js"></script>
<link rel="help" href="https://html.spec.whatwg.org/#dom-offscreencanvas-converttoblob">
<script id="myWorker" type="text/worker">
self.onmessage = function(e) {
};
</script>
<script>
function makeWorker(script)
{
    var blob = new Blob([script]);
    return new Worker(URL.createObjectURL(blob));
}

function drawCanvas(ctx)
{
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 5, 5);
    ctx.fillStyle = "green";
    ctx.fillRect(5, 0, 5, 5);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 5, 5, 5);
    ctx.fillStyle = "black";
    ctx.fillRect(5, 5, 5, 5);
}

function compareImages(image1, image2)
{
    var canvas1 = document.createElement('canvas');
    var canvas2 = document.createElement('canvas');
    canvas1.width = canvas1.height = 10;
    canvas2.width = canvas2.height = 10;
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas1.getContext('2d');
    ctx1.drawImage(image1, 0, 0);
    ctx2.drawImage(image2, 0, 0);
    var data1 = ctx1.getImageData(0, 0, 10, 10).data;
    var data2 = ctx2.getImageData(0, 0, 10, 10).data;
    assert_equals(data1.length, data2.length);
    var imageMatched = true;
    for (var i = 0; i < data1.length; i++) {
        if (data1[i] != data2[i]) {
            imageMatched = false;
            break;
        }
    }
    assert_true(imageMatched);
}

function testConvertToBlob(t, typeVal, qualityVal) {
    var offscreenCanvas = new OffscreenCanvas(10, 10);
    var oCtx = offscreenCanvas.getContext('2d');
    drawCanvas(oCtx);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    drawCanvas(ctx);
    var imageLoadedCounter = 0;

    var image1 = new Image();
    var image2 = new Image();
    var promise;
    if (typeVal == "empty" && qualityVal == "empty")
        promise = offscreenCanvas.convertToBlob();
    else if (typeVal == "empty" && qualityVal != "empty")
        promise = offscreenCanvas.convertToBlob({quality: qualityVal});
    else if (typeVal != "empty" && qualityVal == "empty")
        promise = offscreenCanvas.convertToBlob({type: typeVal});
    else
        promise = offscreenCanvas.convertToBlob({type: typeVal, quality: qualityVal});
    promise.then(function(blob2) {
        image2.src = URL.createObjectURL(blob2);
        if (typeVal == "empty" && qualityVal == "empty") {
            canvas.toBlob(function(blob1) {
                image1.src = URL.createObjectURL(blob1);
            });
        } else if (typeVal == "empty" && qualityVal != "empty") {
            canvas.toBlob(function(blob1) {
                image1.src = URL.createObjectURL(blob1);
            }, "image/png", qualityVal);
        } else if (typeVal != "empty" && qualityVal == "empty") {
            canvas.toBlob(function(blob1) {
                image1.src = URL.createObjectURL(blob1);
            }, typeVal, 1.0);
        } else {
            canvas.toBlob(function(blob1) {
                image1.src = URL.createObjectURL(blob1);
            }, typeVal, qualityVal);
        }
        image1.onload = image2.onload = t.step_func(function() {
            imageLoadedCounter++;
            if (imageLoadedCounter == 2) {
                compareImages(image1, image2);
                t.done();
            }
        });
    });
}

async_test(function(t) {
    testConvertToBlob(t, "empty", "empty");
    testConvertToBlob(t, "empty", 1.0);
    testConvertToBlob(t, "empty", 0.2);
}, "Test that convertToBlob with default type produces correct result");

async_test(function(t) {
    testConvertToBlob(t, "image/png", "empty");
    testConvertToBlob(t, "image/png", 1.0);
    testConvertToBlob(t, "image/png", 0.2);
}, "Test that convertToBlob with png produces correct result");

async_test(function(t) {
    testConvertToBlob(t, "image/jpeg", "empty");
    testConvertToBlob(t, "image/jpeg", 1.0);
    testConvertToBlob(t, "image/jpeg", 0.2);
}, "Test that convertToBlob with jpge produces correct result");

async_test(function(t) {
    testConvertToBlob(t, "image/webp", "empty");
    testConvertToBlob(t, "image/webp", 1.0);
    testConvertToBlob(t, "image/webp", 0.2);
}, "Test that convertToBlob with webp produces correct result");

async_test(function(t) {
    var worker = makeWorker(document.getElementById("myWorker").textContent);
    var offscreenCanvas = new OffscreenCanvas(10, 10);
    worker.postMessage({offscreenCanvas}, [offscreenCanvas]);
    offscreenCanvas.convertToBlob().then(t.step_func_done(function() {
        assert_false("convertToBlob didn't throw, but should be");
    }), t.step_func_done(function(e) {
        assert_true(e instanceof DOMException);
        assert_equals(e.name, "InvalidStateError");
    }));
}, "Test that call convertToBlob on a detached OffscreenCanvas throws exception");

async_test(function(t) {
    var offscreenCanvas = new OffscreenCanvas(0, 0);
    offscreenCanvas.convertToBlob().then(t.step_func_done(function() {
        assert_false("convertToBlob didn't throw, but should be");
    }), t.step_func_done(function(e) {
        assert_true(e instanceof DOMException);
        assert_equals(e.name, "IndexSizeError");
    }));
}, "Test that call convertToBlob on a OffscreenCanvas with size 0 throws exception");

</script>