offscreencanvas.convert.to.blob.w.html (11357B)
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 function drawCanvas(ctx) 8 { 9 ctx.fillStyle = "red"; 10 ctx.fillRect(0, 0, 5, 5); 11 ctx.fillStyle = "green"; 12 ctx.fillRect(5, 0, 5, 5); 13 ctx.fillStyle = "blue"; 14 ctx.fillRect(0, 5, 5, 5); 15 ctx.fillStyle = "black"; 16 ctx.fillRect(5, 5, 5, 5); 17 } 18 19 function testConvertToBlob(typeVal, qualityVal) { 20 var offscreenCanvas = new OffscreenCanvas(10, 10); 21 var oCtx = offscreenCanvas.getContext('2d'); 22 drawCanvas(oCtx); 23 24 var promise; 25 if (typeVal == "empty" && qualityVal == "empty") 26 promise = offscreenCanvas.convertToBlob(); 27 else if (typeVal == "empty" && qualityVal != "empty") 28 promise = offscreenCanvas.convertToBlob({quality: qualityVal}); 29 else if (typeVal != "empty" && qualityVal == "empty") 30 promise = offscreenCanvas.convertToBlob({type: typeVal}); 31 else 32 promise = offscreenCanvas.convertToBlob({type: typeVal, quality: qualityVal}); 33 promise.then(function(blob) { 34 self.postMessage(blob); 35 }); 36 } 37 38 function testConvertToBlobException1() 39 { 40 var offscreenCanvas = new OffscreenCanvas(10, 10); 41 self.postMessage({offscreenCanvas}, [offscreenCanvas]); 42 offscreenCanvas.convertToBlob().then(function() { 43 self.postMessage(false); 44 }, function(e) { 45 self.postMessage(e instanceof DOMException && e.name == "InvalidStateError"); 46 }); 47 } 48 49 function testConvertToBlobException2() 50 { 51 var offscreenCanvas = new OffscreenCanvas(0, 0); 52 offscreenCanvas.convertToBlob().then(function() { 53 self.postMessage(false); 54 }, function(e) { 55 self.postMessage(e instanceof DOMException && e.name == "IndexSizeError"); 56 }); 57 } 58 59 function testConvertToBlobException3(bitmap) 60 { 61 var offscreenCanvas = new OffscreenCanvas(10, 10); 62 var ctx = offscreenCanvas.getContext("2d"); 63 ctx.drawImage(bitmap, 0, 0); 64 offscreenCanvas.convertToBlob().then(function() { 65 self.postMessage(false); 66 }, function(e) { 67 self.postMessage(e instanceof DOMException && e.name == "SecurityError"); 68 }); 69 } 70 71 self.onmessage = function(e) { 72 if (e.data instanceof ImageBitmap) { 73 testConvertToBlobException3(e.data); 74 return; 75 } 76 77 switch(e.data) { 78 case 'test1': 79 testConvertToBlob("empty", "empty"); 80 break; 81 case 'test2': 82 testConvertToBlob("empty", 1.0); 83 break; 84 case 'test3': 85 testConvertToBlob("empty", 0.2); 86 break; 87 case 'test4': 88 testConvertToBlob("image/png", "empty"); 89 break; 90 case 'test5': 91 testConvertToBlob("image/png", 1.0); 92 break; 93 case 'test6': 94 testConvertToBlob("image/png", 0.2); 95 break; 96 case 'test7': 97 testConvertToBlob("image/jpeg", "empty"); 98 break; 99 case 'test8': 100 testConvertToBlob("image/jpeg", 1.0); 101 break; 102 case 'test9': 103 testConvertToBlob("image/jpeg", 0.2); 104 break; 105 case 'test10': 106 testConvertToBlob("image/webp", "empty"); 107 break; 108 case 'test11': 109 testConvertToBlob("image/webp", 1.0); 110 break; 111 case 'test12': 112 testConvertToBlob("image/webp", 0.2); 113 break; 114 case 'test13': 115 testConvertToBlobException1(); 116 break; 117 case 'test14': 118 testConvertToBlobException2(); 119 break; 120 } 121 }; 122 123 </script> 124 125 <script> 126 function makeWorker(test) { 127 var blob = new Blob([document.getElementById("myWorker").textContent]); 128 var worker = new Worker(URL.createObjectURL(blob)); 129 worker.onerror = test.unreached_func("error"); 130 return worker; 131 } 132 133 function drawCanvas(ctx) 134 { 135 ctx.fillStyle = "red"; 136 ctx.fillRect(0, 0, 5, 5); 137 ctx.fillStyle = "green"; 138 ctx.fillRect(5, 0, 5, 5); 139 ctx.fillStyle = "blue"; 140 ctx.fillRect(0, 5, 5, 5); 141 ctx.fillStyle = "black"; 142 ctx.fillRect(5, 5, 5, 5); 143 } 144 145 function compareImages(image1, image2) 146 { 147 var canvas1 = document.createElement('canvas'); 148 var canvas2 = document.createElement('canvas'); 149 canvas1.width = canvas1.height = 10; 150 canvas2.width = canvas2.height = 10; 151 var ctx1 = canvas1.getContext('2d'); 152 var ctx2 = canvas1.getContext('2d'); 153 ctx1.drawImage(image1, 0, 0); 154 ctx2.drawImage(image2, 0, 0); 155 var data1 = ctx1.getImageData(0, 0, 10, 10).data; 156 var data2 = ctx2.getImageData(0, 0, 10, 10).data; 157 assert_equals(data1.length, data2.length); 158 var imageMatched = true; 159 for (var i = 0; i < data1.length; i++) { 160 if (data1[i] != data2[i]) { 161 imageMatched = false; 162 break; 163 } 164 } 165 assert_true(imageMatched); 166 } 167 168 function compareWithToBlob(t, typeVal, qualityVal, blob2) 169 { 170 var image1 = new Image(); 171 var image2 = new Image(); 172 var canvas = document.createElement('canvas'); 173 var ctx = canvas.getContext('2d'); 174 drawCanvas(ctx); 175 var imageLoadedCounter = 0; 176 177 if (typeVal == "empty" && qualityVal == "empty") { 178 canvas.toBlob(function(blob1) { 179 image1.src = URL.createObjectURL(blob1); 180 }); 181 } else if (typeVal == "empty" && qualityVal != "empty") { 182 canvas.toBlob(function(blob1) { 183 image1.src = URL.createObjectURL(blob1); 184 }, "image/png", qualityVal); 185 } else if (typeVal != "empty" && qualityVal == "empty") { 186 canvas.toBlob(function(blob1) { 187 image1.src = URL.createObjectURL(blob1); 188 }, typeVal, 1.0); 189 } else { 190 canvas.toBlob(function(blob1) { 191 image1.src = URL.createObjectURL(blob1); 192 }, typeVal, qualityVal); 193 } 194 image2.src = URL.createObjectURL(blob2); 195 image1.onload = image2.onload = t.step_func(function() { 196 imageLoadedCounter++; 197 if (imageLoadedCounter == 2) { 198 compareImages(image1, image2); 199 t.done(); 200 } 201 }); 202 } 203 204 async_test(function(t) { 205 var worker = makeWorker(t); 206 worker.addEventListener('message', t.step_func(function(msg) { 207 compareWithToBlob(t, "empty", "empty", msg.data); 208 })); 209 worker.postMessage('test1'); 210 }, "Test that convertToBlob with default arguments produces correct result in a worker"); 211 212 async_test(function(t) { 213 var worker = makeWorker(t); 214 worker.addEventListener('message', t.step_func(function(msg) { 215 compareWithToBlob(t, "empty", 1.0, msg.data); 216 })); 217 worker.postMessage('test2'); 218 }, "Test that convertToBlob with default type/1.0 quality produces correct result in a worker"); 219 220 async_test(function(t) { 221 var worker = makeWorker(t); 222 worker.addEventListener('message', t.step_func(function(msg) { 223 compareWithToBlob(t, "empty", 0.2, msg.data); 224 })); 225 worker.postMessage('test3'); 226 }, "Test that convertToBlob with default type/0.2 quality produces correct result in a worker"); 227 228 async_test(function(t) { 229 var worker = makeWorker(t); 230 worker.addEventListener('message', t.step_func(function(msg) { 231 compareWithToBlob(t, "image/png", "empty", msg.data); 232 })); 233 worker.postMessage('test4'); 234 }, "Test that convertToBlob with png/default quality produces correct result in a worker"); 235 236 async_test(function(t) { 237 var worker = makeWorker(t); 238 worker.addEventListener('message', t.step_func(function(msg) { 239 compareWithToBlob(t, "image/png", 1.0, msg.data); 240 })); 241 worker.postMessage('test5'); 242 }, "Test that convertToBlob with png/1.0 quality produces correct result in a worker"); 243 244 async_test(function(t) { 245 var worker = makeWorker(t); 246 worker.addEventListener('message', t.step_func(function(msg) { 247 compareWithToBlob(t, "image/png", 0.2, msg.data); 248 })); 249 worker.postMessage('test6'); 250 }, "Test that convertToBlob with png/0.2 quality produces correct result in a worker"); 251 252 async_test(function(t) { 253 var worker = makeWorker(t); 254 worker.addEventListener('message', t.step_func(function(msg) { 255 compareWithToBlob(t, "image/jpeg", "empty", msg.data); 256 })); 257 worker.postMessage('test7'); 258 }, "Test that convertToBlob with jpeg/default quality produces correct result in a worker"); 259 260 async_test(function(t) { 261 var worker = makeWorker(t); 262 worker.addEventListener('message', t.step_func(function(msg) { 263 compareWithToBlob(t, "image/jpeg", 1.0, msg.data); 264 })); 265 worker.postMessage('test8'); 266 }, "Test that convertToBlob with jpeg/1.0 quality produces correct result in a worker"); 267 268 async_test(function(t) { 269 var worker = makeWorker(t); 270 worker.addEventListener('message', t.step_func(function(msg) { 271 compareWithToBlob(t, "image/jpeg", 0.2, msg.data); 272 })); 273 worker.postMessage('test9'); 274 }, "Test that convertToBlob with jpeg/0.2 quality produces correct result in a worker"); 275 276 async_test(function(t) { 277 var worker = makeWorker(t); 278 worker.addEventListener('message', t.step_func(function(msg) { 279 compareWithToBlob(t, "image/webp", "empty", msg.data); 280 })); 281 worker.postMessage('test10'); 282 }, "Test that convertToBlob with webp/default quality produces correct result in a worker"); 283 284 async_test(function(t) { 285 var worker = makeWorker(t); 286 worker.addEventListener('message', t.step_func(function(msg) { 287 compareWithToBlob(t, "image/webp", 1.0, msg.data); 288 })); 289 worker.postMessage('test11'); 290 }, "Test that convertToBlob with webp/1.0 quality produces correct result in a worker"); 291 292 async_test(function(t) { 293 var worker = makeWorker(t); 294 worker.addEventListener('message', t.step_func(function(msg) { 295 compareWithToBlob(t, "image/webp", 0.2, msg.data); 296 })); 297 worker.postMessage('test12'); 298 }, "Test that convertToBlob with webp/0.2 quality produces correct result in a worker"); 299 300 async_test(function(t) { 301 var worker = makeWorker(t); 302 worker.addEventListener('message', t.step_func_done(function(msg) { 303 if (msg.data instanceof Object) 304 return; 305 assert_true(msg.data); 306 t.done(); 307 })); 308 worker.postMessage('test13'); 309 }, "Test that call convertToBlob on a detached OffscreenCanvas throws exception in a worker"); 310 311 async_test(function(t) { 312 var worker = makeWorker(t); 313 worker.addEventListener('message', t.step_func_done(function(msg) { 314 assert_true(msg.data); 315 t.done(); 316 })); 317 worker.postMessage('test14'); 318 }, "Test that call convertToBlob on a OffscreenCanvas with size 0 throws exception in a worker"); 319 320 async_test(function(t) { 321 var img = new Image(); 322 img.src = "/images/green.png"; 323 img.crossOrigin = "anonymous"; 324 img.onload = t.step_func_done(() => { 325 createImageBitmap(img).then(t.step_func_done(bitmap => { 326 var worker = makeWorker(t); 327 worker.addEventListener('message', t.step_func_done(function(msg) { 328 assert_true(msg.data); 329 t.done(); 330 })); 331 worker.postMessage(bitmap); 332 })); 333 }); 334 }, "Test that call convertToBlob on a OffscreenCanvas with tainted origin throws exception in a worker"); 335 336 </script>