Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/offscreen/manual/convert-to-blob/offscreencanvas.convert.to.blob.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<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");
async_test(function(t) {
var img = new Image();
img.src = "/images/green.png";
img.crossOrigin = "anonymous";
img.onload = t.step_func_done(() => {
var offscreenCanvas = new OffscreenCanvas(10, 10);
var ctx = offscreenCanvas.getContext("2d");
ctx.drawImage(img, 0, 0);
offscreenCanvas.convertToBlob().then(t.step_func_done(function() {
assert_false("convertToBlob didn't throw, but should");
}), t.step_func_done(function(e) {
assert_true(e instanceof DOMException);
assert_equals(e.name, "SecurityError");
}));
});
}, "Test that call convertToBlob on a OffscreenCanvas with tainted origin throws exception");
</script>