| <!DOCTYPE html> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/common/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> |
| |