offscreencanvas.convert.to.blob.html (6104B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/html/canvas/resources/canvas-tests.js"></script> 5 <link rel="help" href="https://html.spec.whatwg.org/#dom-offscreencanvas-converttoblob"> 6 <script id="myWorker" type="text/worker"> 7 self.onmessage = function(e) { 8 }; 9 </script> 10 <script> 11 function makeWorker(script) 12 { 13 var blob = new Blob([script]); 14 return new Worker(URL.createObjectURL(blob)); 15 } 16 17 function drawCanvas(ctx) 18 { 19 ctx.fillStyle = "red"; 20 ctx.fillRect(0, 0, 5, 5); 21 ctx.fillStyle = "green"; 22 ctx.fillRect(5, 0, 5, 5); 23 ctx.fillStyle = "blue"; 24 ctx.fillRect(0, 5, 5, 5); 25 ctx.fillStyle = "black"; 26 ctx.fillRect(5, 5, 5, 5); 27 } 28 29 function compareImages(image1, image2) 30 { 31 var canvas1 = document.createElement('canvas'); 32 var canvas2 = document.createElement('canvas'); 33 canvas1.width = canvas1.height = 10; 34 canvas2.width = canvas2.height = 10; 35 var ctx1 = canvas1.getContext('2d'); 36 var ctx2 = canvas1.getContext('2d'); 37 ctx1.drawImage(image1, 0, 0); 38 ctx2.drawImage(image2, 0, 0); 39 var data1 = ctx1.getImageData(0, 0, 10, 10).data; 40 var data2 = ctx2.getImageData(0, 0, 10, 10).data; 41 assert_equals(data1.length, data2.length); 42 var imageMatched = true; 43 for (var i = 0; i < data1.length; i++) { 44 if (data1[i] != data2[i]) { 45 imageMatched = false; 46 break; 47 } 48 } 49 assert_true(imageMatched); 50 } 51 52 function testConvertToBlob(t, typeVal, qualityVal) { 53 var offscreenCanvas = new OffscreenCanvas(10, 10); 54 var oCtx = offscreenCanvas.getContext('2d'); 55 drawCanvas(oCtx); 56 var canvas = document.createElement('canvas'); 57 var ctx = canvas.getContext('2d'); 58 drawCanvas(ctx); 59 var imageLoadedCounter = 0; 60 61 var image1 = new Image(); 62 var image2 = new Image(); 63 var promise; 64 if (typeVal == "empty" && qualityVal == "empty") 65 promise = offscreenCanvas.convertToBlob(); 66 else if (typeVal == "empty" && qualityVal != "empty") 67 promise = offscreenCanvas.convertToBlob({quality: qualityVal}); 68 else if (typeVal != "empty" && qualityVal == "empty") 69 promise = offscreenCanvas.convertToBlob({type: typeVal}); 70 else 71 promise = offscreenCanvas.convertToBlob({type: typeVal, quality: qualityVal}); 72 promise.then(function(blob2) { 73 image2.src = URL.createObjectURL(blob2); 74 if (typeVal == "empty" && qualityVal == "empty") { 75 canvas.toBlob(function(blob1) { 76 image1.src = URL.createObjectURL(blob1); 77 }); 78 } else if (typeVal == "empty" && qualityVal != "empty") { 79 canvas.toBlob(function(blob1) { 80 image1.src = URL.createObjectURL(blob1); 81 }, "image/png", qualityVal); 82 } else if (typeVal != "empty" && qualityVal == "empty") { 83 canvas.toBlob(function(blob1) { 84 image1.src = URL.createObjectURL(blob1); 85 }, typeVal, 1.0); 86 } else { 87 canvas.toBlob(function(blob1) { 88 image1.src = URL.createObjectURL(blob1); 89 }, typeVal, qualityVal); 90 } 91 image1.onload = image2.onload = t.step_func(function() { 92 imageLoadedCounter++; 93 if (imageLoadedCounter == 2) { 94 compareImages(image1, image2); 95 t.done(); 96 } 97 }); 98 }); 99 } 100 101 async_test(function(t) { 102 testConvertToBlob(t, "empty", "empty"); 103 testConvertToBlob(t, "empty", 1.0); 104 testConvertToBlob(t, "empty", 0.2); 105 }, "Test that convertToBlob with default type produces correct result"); 106 107 async_test(function(t) { 108 testConvertToBlob(t, "image/png", "empty"); 109 testConvertToBlob(t, "image/png", 1.0); 110 testConvertToBlob(t, "image/png", 0.2); 111 }, "Test that convertToBlob with png produces correct result"); 112 113 async_test(function(t) { 114 testConvertToBlob(t, "image/jpeg", "empty"); 115 testConvertToBlob(t, "image/jpeg", 1.0); 116 testConvertToBlob(t, "image/jpeg", 0.2); 117 }, "Test that convertToBlob with jpge produces correct result"); 118 119 async_test(function(t) { 120 testConvertToBlob(t, "image/webp", "empty"); 121 testConvertToBlob(t, "image/webp", 1.0); 122 testConvertToBlob(t, "image/webp", 0.2); 123 }, "Test that convertToBlob with webp produces correct result"); 124 125 async_test(function(t) { 126 var worker = makeWorker(document.getElementById("myWorker").textContent); 127 var offscreenCanvas = new OffscreenCanvas(10, 10); 128 worker.postMessage({offscreenCanvas}, [offscreenCanvas]); 129 offscreenCanvas.convertToBlob().then(t.step_func_done(function() { 130 assert_false("convertToBlob didn't throw, but should be"); 131 }), t.step_func_done(function(e) { 132 assert_true(e instanceof DOMException); 133 assert_equals(e.name, "InvalidStateError"); 134 })); 135 }, "Test that call convertToBlob on a detached OffscreenCanvas throws exception"); 136 137 async_test(function(t) { 138 var offscreenCanvas = new OffscreenCanvas(0, 0); 139 offscreenCanvas.convertToBlob().then(t.step_func_done(function() { 140 assert_false("convertToBlob didn't throw, but should be"); 141 }), t.step_func_done(function(e) { 142 assert_true(e instanceof DOMException); 143 assert_equals(e.name, "IndexSizeError"); 144 })); 145 }, "Test that call convertToBlob on a OffscreenCanvas with size 0 throws exception"); 146 147 async_test(function(t) { 148 var img = new Image(); 149 img.src = "/images/green.png"; 150 img.crossOrigin = "anonymous"; 151 img.onload = t.step_func_done(() => { 152 var offscreenCanvas = new OffscreenCanvas(10, 10); 153 var ctx = offscreenCanvas.getContext("2d"); 154 ctx.drawImage(img, 0, 0); 155 offscreenCanvas.convertToBlob().then(t.step_func_done(function() { 156 assert_false("convertToBlob didn't throw, but should"); 157 }), t.step_func_done(function(e) { 158 assert_true(e instanceof DOMException); 159 assert_equals(e.name, "SecurityError"); 160 })); 161 }); 162 }, "Test that call convertToBlob on a OffscreenCanvas with tainted origin throws exception"); 163 164 </script>