single-barcode-detection.https.html (21275B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="resources/single-detection-helpers.js"></script> 5 <body> 6 </body> 7 <script> 8 const imageTests = { 9 aztecCorrection: { 10 name: "aztec-correction.jpg", 11 format: "aztec", 12 payload: "Barcode Detection is Fun!", 13 barcode: {boundingBox: {left: 240, right: 559, top: 144, bottom: 454}, fuzziness: 15}, 14 topLeft: {position: {x: 240, y: 144}, fuzzinessX: 15, fuzzinessY: 15}, 15 topRight: {position: {x: 559, y: 144}, fuzzinessX: 15, fuzzinessY: 15}, 16 bottomRight: {position: {x: 559, y: 454}, fuzzinessX: 15, fuzzinessY: 15}, 17 bottomLeft: {position: {x: 240, y: 454}, fuzzinessX: 15, fuzzinessY: 15}}, 18 aztecFull: { 19 name: "aztec-full.jpg", 20 format: "aztec", 21 payload: "Barcode Detection is Fun!", 22 barcode: {boundingBox: {left: 281, right: 518, top: 184, bottom: 414}, fuzziness: 15}, 23 topLeft: {position: {x: 281, y: 184}, fuzzinessX: 15, fuzzinessY: 15}, 24 topRight: {position: {x: 518, y: 184}, fuzzinessX: 15, fuzzinessY: 15}, 25 bottomRight: {position: {x: 518, y: 414}, fuzzinessX: 15, fuzzinessY: 15}, 26 bottomLeft: {position: {x: 281, y: 414}, fuzzinessX: 15, fuzzinessY: 15}}, 27 aztecLayers: { 28 name: "aztec-layers.jpg", 29 format: "aztec", 30 payload: "Barcode Detection is Fun!", 31 barcode: {boundingBox: {left: 175, right: 625, top: 75, bottom: 525}, fuzziness: 15}, 32 topLeft: {position: {x: 175, y: 75}, fuzzinessX: 15, fuzzinessY: 15}, 33 topRight: {position: {x: 625, y: 75}, fuzzinessX: 15, fuzzinessY: 15}, 34 bottomRight: {position: {x: 625, y: 525}, fuzzinessX: 15, fuzzinessY: 15}, 35 bottomLeft: {position: {x: 175, y: 525}, fuzzinessX: 15, fuzzinessY: 15}}, 36 aztec: { 37 name: "aztec.jpg", 38 format: "aztec", 39 payload: "Barcode Detection is Fun!", 40 barcode: {boundingBox: {left: 302, right: 497, top: 202, bottom: 397}, fuzziness: 15}, 41 topLeft: {position: {x: 302, y: 202}, fuzzinessX: 15, fuzzinessY: 15}, 42 topRight: {position: {x: 497, y: 202}, fuzzinessX: 15, fuzzinessY: 15}, 43 bottomRight: {position: {x: 497, y: 397}, fuzzinessX: 15, fuzzinessY: 15}, 44 bottomLeft: {position: {x: 302, y: 397}, fuzzinessX: 15, fuzzinessY: 15}}, 45 code128Height: { 46 name: "code128-height.jpg", 47 format: "code_128", 48 payload: "Barcode Detection is Fun!", 49 barcode: {boundingBox: {left: 90, right: 711, top: 149, bottom: 449}, fuzziness: 15}, 50 topLeft: {position: {x: 90, y: 149}, fuzzinessX: 15, fuzzinessY: 15}, 51 topRight: {position: {x: 711, y: 149}, fuzzinessX: 15, fuzzinessY: 15}, 52 bottomRight: {position: {x: 711, y: 450}, fuzzinessX: 15, fuzzinessY: 15}, 53 bottomLeft: {position: {x: 90, y: 450}, fuzzinessX: 15, fuzzinessY: 15}}, 54 code128: { 55 name: "code128.jpg", 56 format: "code_128", 57 payload: "Barcode Detection is Fun!", 58 barcode: {boundingBox: {left: 90, right: 710, top: 267, bottom: 332}, fuzziness: 15}, 59 topLeft: {position: {x: 90, y: 267}, fuzzinessX: 15, fuzzinessY: 15}, 60 topRight: {position: {x: 710, y: 267}, fuzzinessX: 15, fuzzinessY: 15}, 61 bottomRight: {position: {x: 710, y: 332}, fuzzinessX: 15, fuzzinessY: 15}, 62 bottomLeft: {position: {x: 90, y: 332}, fuzzinessX: 15, fuzzinessY: 15}}, 63 pdf417Columns: { 64 name: "pdf417-columns.jpg", 65 format: "pdf417", 66 payload: "Barcode Detection is Fun!", 67 barcode: {boundingBox: {left: 39, right: 755, top: 243, bottom: 356}, fuzziness: 15}, 68 topLeft: {position: {x: 39, y: 243}, fuzzinessX: 15, fuzzinessY: 15}, 69 topRight: {position: {x: 755, y: 243}, fuzzinessX: 15, fuzzinessY: 15}, 70 bottomRight: {position: {x: 755, y: 356}, fuzzinessX: 15, fuzzinessY: 15}, 71 bottomLeft: {position: {x: 39, y: 356}, fuzzinessX: 15, fuzzinessY: 15}}, 72 pdf417Compact: { 73 name: "pdf417-compact.jpg", 74 format: "pdf417", 75 payload: "Barcode Detection is Fun!", 76 barcode: {boundingBox: {left: 186, right: 786, top: 242, bottom: 359}, fuzziness: 15}, 77 topLeft: {position: {x: 186, y: 242}, fuzzinessX: 15, fuzzinessY: 15}, 78 topRight: {position: {x: 786, y: 242}, fuzzinessX: 15, fuzzinessY: 15}, 79 bottomRight: {position: {x: 786, y: 359}, fuzzinessX: 15, fuzzinessY: 15}, 80 bottomLeft: {position: {x: 186, y: 359}, fuzzinessX: 15, fuzzinessY: 15}}, 81 pdf417Compaction: { 82 name: "pdf417-compaction.jpg", 83 format: "pdf417", 84 payload: "Barcode Detection is Fun!", 85 barcode: {boundingBox: {left: 84, right: 712, top: 217, bottom: 382}, fuzziness: 15}, 86 topLeft: {position: {x: 84, y: 217}, fuzzinessX: 15, fuzzinessY: 15}, 87 topRight: {position: {x: 712, y: 217}, fuzzinessX: 15, fuzzinessY: 15}, 88 bottomRight: {position: {x: 712, y: 382}, fuzzinessX: 15, fuzzinessY: 15}, 89 bottomLeft: {position: {x: 84, y: 382}, fuzzinessX: 15, fuzzinessY: 15}}, 90 pdf417Correction: { 91 name: "pdf417-correction.jpg", 92 format: "pdf417", 93 payload: "Barcode Detection is Fun!", 94 barcode: {boundingBox: {left: 39, right: 755, top: 209, bottom: 390}, fuzziness: 15}, 95 topLeft: {position: {x: 39, y: 209}, fuzzinessX: 15, fuzzinessY: 15}, 96 topRight: {position: {x: 755, y: 209}, fuzzinessX: 15, fuzzinessY: 15}, 97 bottomRight: {position: {x: 755, y: 390}, fuzzinessX: 15, fuzzinessY: 15}, 98 bottomLeft: {position: {x: 39, y: 390}, fuzzinessX: 15, fuzzinessY: 15}}, 99 pdf417Rows: { 100 name: "pdf417-rows.jpg", 101 format: "pdf417", 102 payload: "Barcode Detection is Fun!", 103 barcode: {boundingBox: {left: 84, right: 712, top: 227, bottom: 360}, fuzziness: 15}, 104 topLeft: {position: {x: 84, y: 227}, fuzzinessX: 15, fuzzinessY: 15}, 105 topRight: {position: {x: 712, y: 227}, fuzzinessX: 15, fuzzinessY: 15}, 106 bottomRight: {position: {x: 712, y: 360}, fuzzinessX: 15, fuzzinessY: 15}, 107 bottomLeft: {position: {x: 84, y: 360}, fuzzinessX: 15, fuzzinessY: 15}}, 108 pdf417Square: { 109 name: "pdf417-square.jpg", 110 format: "pdf417", 111 payload: "Barcode Detection is Fun!", 112 barcode: {boundingBox: {left: 170, right: 621, top: 119, bottom: 480}, fuzziness: 15}, 113 topLeft: {position: {x: 171, y: 119}, fuzzinessX: 15, fuzzinessY: 15}, 114 topRight: {position: {x: 621, y: 119}, fuzzinessX: 15, fuzzinessY: 15}, 115 bottomRight: {position: {x: 621, y: 480}, fuzzinessX: 15, fuzzinessY: 15}, 116 bottomLeft: {position: {x: 170, y: 480}, fuzzinessX: 15, fuzzinessY: 15}}, 117 pdf417Taller: { 118 name: "pdf417-taller.jpg", 119 format: "pdf417", 120 payload: "Barcode Detection is Fun!", 121 barcode: {boundingBox: {left: 84, right: 713, top: 209, bottom: 390}, fuzziness: 15}, 122 topLeft: {position: {x: 84, y: 209}, fuzzinessX: 15, fuzzinessY: 15}, 123 topRight: {position: {x: 713, y: 209}, fuzzinessX: 15, fuzzinessY: 15}, 124 bottomRight: {position: {x: 713, y: 390}, fuzzinessX: 15, fuzzinessY: 15}, 125 bottomLeft: {position: {x: 84, y: 390}, fuzzinessX: 15, fuzzinessY: 15}}, 126 pdf417Wider: { 127 name: "pdf417-wider.jpg", 128 format: "pdf417", 129 payload: "Barcode Detection is Fun!", 130 barcode: {boundingBox: {left: 84, right: 712, top: 227, bottom: 360}, fuzziness: 15}, 131 topLeft: {position: {x: 84, y: 227}, fuzzinessX: 15, fuzzinessY: 15}, 132 topRight: {position: {x: 712, y: 227}, fuzzinessX: 15, fuzzinessY: 15}, 133 bottomRight: {position: {x: 712, y: 360}, fuzzinessX: 15, fuzzinessY: 15}, 134 bottomLeft: {position: {x: 84, y: 360}, fuzzinessX: 15, fuzzinessY: 15}}, 135 pdf417: { 136 name: "pdf417.jpg", 137 format: "pdf417", 138 payload: "Barcode Detection is Fun!", 139 barcode: {boundingBox: {left: 126, right: 666, top: 209, bottom: 390}, fuzziness: 15}, 140 topLeft: {position: {x: 126, y: 209}, fuzzinessX: 15, fuzzinessY: 15}, 141 topRight: {position: {x: 666, y: 209}, fuzzinessX: 15, fuzzinessY: 15}, 142 bottomRight: {position: {x: 666, y: 390}, fuzzinessX: 15, fuzzinessY: 15}, 143 bottomLeft: {position: {x: 126, y: 390}, fuzzinessX: 15, fuzzinessY: 15}}, 144 qrBottomLeft: { 145 name: "qr-bottom-left.jpg", 146 format: "qr_code", 147 payload: "Barcode Detection is Fun!", 148 barcode: {boundingBox: {left: 75, right: 325, top: 325, bottom: 575}, fuzziness: 5}, 149 topLeft: {position: {x: 75, y: 325}, fuzzinessX: 15, fuzzinessY: 15}, 150 topRight: {position: {x: 325, y: 325}, fuzzinessX: 15, fuzzinessY: 15}, 151 bottomRight: {position: {x: 325, y: 575}, fuzzinessX: 15, fuzzinessY: 15}, 152 bottomLeft: {position: {x: 75, y: 575}, fuzzinessX: 15, fuzzinessY: 15}}, 153 qrBottomRight: { 154 name: "qr-bottom-right.jpg", 155 format: "qr_code", 156 payload: "Barcode Detection is Fun!", 157 barcode: {boundingBox: {left: 475, right: 725, top: 325, bottom: 575}, fuzziness: 5}, 158 topLeft: {position: {x: 475, y: 325}, fuzzinessX: 15, fuzzinessY: 15}, 159 topRight: {position: {x: 725, y: 325}, fuzzinessX: 15, fuzzinessY: 15}, 160 bottomRight: {position: {x: 725, y: 575}, fuzzinessX: 15, fuzzinessY: 15}, 161 bottomLeft: {position: {x: 475, y: 575}, fuzzinessX: 15, fuzzinessY: 15}}, 162 qrCenter: { 163 name: "qr-center.jpg", 164 format: "qr_code", 165 payload: "Barcode Detection is Fun!", 166 barcode: {boundingBox: {left: 277, right: 524, top: 172, bottom: 428}, fuzziness: 5}, 167 topLeft: {position: {x: 277, y: 172}, fuzzinessX: 15, fuzzinessY: 15}, 168 topRight: {position: {x: 521, y: 172}, fuzzinessX: 15, fuzzinessY: 15}, 169 bottomRight: {position: {x: 524, y: 425}, fuzzinessX: 15, fuzzinessY: 15}, 170 bottomLeft: {position: {x: 277, y: 428}, fuzzinessX: 15, fuzzinessY: 15}}, 171 qrH: { 172 name: "qr-h.jpg", 173 format: "qr_code", 174 payload: "Barcode Detection is Fun!", 175 barcode: {boundingBox: {left: 235, right: 565, top: 135, bottom: 465}, fuzziness: 5}, 176 topLeft: {position: {x: 235, y: 135}, fuzzinessX: 15, fuzzinessY: 15}, 177 topRight: {position: {x: 565, y: 135}, fuzzinessX: 15, fuzzinessY: 15}, 178 bottomRight: {position: {x: 565, y: 465}, fuzzinessX: 15, fuzzinessY: 15}, 179 bottomLeft: {position: {x: 235, y: 465}, fuzzinessX: 15, fuzzinessY: 15}}, 180 qrL: { 181 name: "qr-l.jpg", 182 format: "qr_code", 183 payload: "Barcode Detection is Fun!", 184 barcode: {boundingBox: {left: 275, right: 525, top: 175, bottom: 425}, fuzziness: 5}, 185 topLeft: {position: {x: 275, y: 175}, fuzzinessX: 15, fuzzinessY: 15}, 186 topRight: {position: {x: 525, y: 175}, fuzzinessX: 15, fuzzinessY: 15}, 187 bottomRight: {position: {x: 525, y: 425}, fuzzinessX: 15, fuzzinessY: 15}, 188 bottomLeft: {position: {x: 275, y: 425}, fuzzinessX: 15, fuzzinessY: 15}}, 189 qrM: { 190 name: "qr-m.jpg", 191 format: "qr_code", 192 payload: "Barcode Detection is Fun!", 193 barcode: {boundingBox: {left: 277, right: 524, top: 172, bottom: 428}, fuzziness: 5}, 194 topLeft: {position: {x: 277, y: 172}, fuzzinessX: 15, fuzzinessY: 15}, 195 topRight: {position: {x: 521, y: 172}, fuzzinessX: 15, fuzzinessY: 15}, 196 bottomRight: {position: {x: 524, y: 425}, fuzzinessX: 15, fuzzinessY: 15}, 197 bottomLeft: {position: {x: 277, y: 428}, fuzzinessX: 15, fuzzinessY: 15}}, 198 qrQ: { 199 name: "qr-q.jpg", 200 format: "qr_code", 201 payload: "Barcode Detection is Fun!", 202 barcode: {boundingBox: {left: 252, right: 548, top: 157, bottom: 444}, fuzziness: 5}, 203 topLeft: {position: {x: 252, y: 157}, fuzzinessX: 15, fuzzinessY: 15}, 204 topRight: {position: {x: 548, y: 157}, fuzzinessX: 15, fuzzinessY: 15}, 205 bottomRight: {position: {x: 545, y: 444}, fuzzinessX: 15, fuzzinessY: 15}, 206 bottomLeft: {position: {x: 252, y: 441}, fuzzinessX: 15, fuzzinessY: 15}}, 207 qrTopLeft: { 208 name: "qr-top-left.jpg", 209 format: "qr_code", 210 payload: "Barcode Detection is Fun!", 211 barcode: {boundingBox: {left: 75, right: 325, top: 25, bottom: 275}, fuzziness: 5}, 212 topLeft: {position: {x: 75, y: 25}, fuzzinessX: 15, fuzzinessY: 15}, 213 topRight: {position: {x: 325, y: 25}, fuzzinessX: 15, fuzzinessY: 15}, 214 bottomRight: {position: {x: 325, y: 275}, fuzzinessX: 15, fuzzinessY: 15}, 215 bottomLeft: {position: {x: 75, y: 275}, fuzzinessX: 15, fuzzinessY: 15}}, 216 qrTopRight: { 217 name: "qr-top-right.jpg", 218 format: "qr_code", 219 payload: "Barcode Detection is Fun!", 220 barcode: {boundingBox: {left: 475, right: 725, top: 25, bottom: 275}, fuzziness: 5}, 221 topLeft: {position: {x: 475, y: 25}, fuzzinessX: 15, fuzzinessY: 15}, 222 topRight: {position: {x: 725, y: 25}, fuzzinessX: 15, fuzzinessY: 15}, 223 bottomRight: {position: {x: 725, y: 275}, fuzzinessX: 15, fuzzinessY: 15}, 224 bottomLeft: {position: {x: 475, y: 275}, fuzzinessX: 15, fuzzinessY: 15}}}; 225 226 const videoTests = { 227 "barcodes.mov": [ 228 {time: 0.5, test: imageTests.aztecCorrection}, 229 {time: 1.5, test: imageTests.aztecFull}, 230 {time: 2.5, test: imageTests.aztecLayers}, 231 {time: 3.5, test: imageTests.aztec}, 232 {time: 4.5, test: imageTests.code128Height}, 233 {time: 5.5, test: imageTests.code128}, 234 {time: 6.5, test: imageTests.pdf417Columns}, 235 {time: 7.5, test: imageTests.pdf417Compact}, 236 {time: 8.5, test: imageTests.pdf417Compaction}, 237 {time: 9.5, test: imageTests.pdf417Correction}, 238 {time: 10.5, test: imageTests.pdf417Rows}, 239 {time: 11.5, test: imageTests.pdf417Square}, 240 {time: 12.5, test: imageTests.pdf417Taller}, 241 {time: 13.5, test: imageTests.pdf417Wider}, 242 {time: 14.5, test: imageTests.pdf417}, 243 {time: 15.5, test: imageTests.qrBottomLeft}, 244 {time: 16.5, test: imageTests.qrBottomRight}, 245 {time: 17.5, test: imageTests.qrCenter}, 246 {time: 18.5, test: imageTests.qrH}, 247 {time: 19.5, test: imageTests.qrL}, 248 {time: 20.5, test: imageTests.qrM}, 249 {time: 21.5, test: imageTests.qrQ}, 250 {time: 22.5, test: imageTests.qrTopLeft}, 251 {time: 23.5, test: imageTests.qrTopRight}]}; 252 253 // All the fields in FaceDetectorOptions are hints, so they can't be tested. 254 const barcodeDetector = new BarcodeDetector(); 255 256 async function testImage(imageBitmapSource, test, key) { 257 const supportedFormats = await BarcodeDetector.getSupportedFormats(); 258 if (!supportedFormats.includes(test.format)) 259 return; 260 const detectedBarcodes = await barcodeDetector.detect(imageBitmapSource); 261 assert_equals(detectedBarcodes.length, 1); 262 const detectedBarcode = detectedBarcodes[0]; 263 checkBoundingBox(detectedBarcode.boundingBox, test.barcode.boundingBox, test.barcode.fuzziness); 264 assert_equals(detectedBarcode.rawValue, test.payload); 265 assert_equals(detectedBarcode.format, test.format); 266 assert_equals(detectedBarcode.cornerPoints.length, 4); 267 const [topLeft, topRight, bottomRight, bottomLeft] = detectedBarcode.cornerPoints; 268 checkPointIsNear(topLeft, test.topLeft.position, test.topLeft.fuzzinessX, test.topLeft.fuzzinessY); 269 checkPointIsNear(topRight, test.topRight.position, test.topRight.fuzzinessX, test.topRight.fuzzinessY); 270 checkPointIsNear(bottomRight, test.bottomRight.position, test.bottomRight.fuzzinessX, test.bottomRight.fuzzinessY); 271 checkPointIsNear(bottomLeft, test.bottomLeft.position, test.bottomLeft.fuzzinessX, test.bottomLeft.fuzzinessY); 272 } 273 274 promise_test(async t => { 275 for (const [key, imageTest] of Object.entries(imageTests)) { 276 const imageElement = document.createElement("img"); 277 imageElement.src = `resources/${imageTest.name}`; 278 await imageLoadedPromise(imageElement); 279 assert_true(imageElement.complete, "Image element should have loaded successfully"); 280 await testImage(imageElement, imageTest, key); 281 } 282 }, "HTMLImageElement"); 283 284 // Intentionally don't test SVGImageElement. The spec https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource says it's supposed to be 285 // a CanvasImageSource, but neither WebKit nor Blink actually seem to implement that. 286 287 promise_test(async t => { 288 for (const [name, tests] of Object.entries(videoTests)) { 289 const videoElement = document.createElement("video"); 290 document.body.appendChild(videoElement); 291 videoElement.src = `resources/${name}`; 292 const loadedPromise = videoLoadedPromise(videoElement); 293 videoElement.load(); 294 await loadedPromise; 295 for (const test of tests) { 296 await seekTo(videoElement, test.time); 297 await testImage(videoElement, test.test, name); 298 } 299 document.body.removeChild(videoElement); 300 } 301 }, "HTMLVideoElement"); 302 303 promise_test(async t => { 304 for (const [key, imageTest] of Object.entries(imageTests)) { 305 const imageElement = document.createElement("img"); 306 imageElement.src = `resources/${imageTest.name}`; 307 await imageLoadedPromise(imageElement); 308 assert_true(imageElement.complete, "Image element should have loaded successfully"); 309 const canvasElement = document.createElement("canvas"); 310 canvasElement.width = imageElement.width; 311 canvasElement.height = imageElement.height; 312 const context = canvasElement.getContext("2d"); 313 context.drawImage(imageElement, 0, 0); 314 await testImage(canvasElement, imageTest, key); 315 } 316 }, "HTMLCanvasElement"); 317 318 promise_test(async t => { 319 for (const [key, imageTest] of Object.entries(imageTests)) { 320 const imageElement = document.createElement("img"); 321 imageElement.src = `resources/${imageTest.name}`; 322 await imageLoadedPromise(imageElement); 323 assert_true(imageElement.complete, "Image element should have loaded successfully"); 324 const imageBitmap = await createImageBitmap(imageElement); 325 await testImage(imageBitmap, imageTest, key); 326 } 327 }, "ImageBitmap"); 328 329 promise_test(async t => { 330 for (const [key, imageTest] of Object.entries(imageTests)) { 331 const imageElement = document.createElement("img"); 332 imageElement.src = `resources/${imageTest.name}`; 333 await imageLoadedPromise(imageElement); 334 assert_true(imageElement.complete, "Image element should have loaded successfully"); 335 const offscreenCanvas = new OffscreenCanvas(imageElement.width, imageElement.height); 336 const context = offscreenCanvas.getContext("2d"); 337 context.drawImage(imageElement, 0, 0); 338 await testImage(offscreenCanvas, imageTest, key); 339 } 340 }, "OffscreenCanvas"); 341 342 promise_test(async t => { 343 for (const [name, tests] of Object.entries(videoTests)) { 344 const videoElement = document.createElement("video"); 345 document.body.appendChild(videoElement); 346 videoElement.src = `resources/${name}`; 347 const loadedPromise = videoLoadedPromise(videoElement); 348 videoElement.load(); 349 await loadedPromise; 350 for (const test of tests) { 351 await seekTo(videoElement, test.time); 352 const videoFrame = new VideoFrame(videoElement); 353 await testImage(videoFrame, test.test, name); 354 videoFrame.close(); 355 } 356 document.body.removeChild(videoElement); 357 } 358 }, "VideoFrame"); 359 360 promise_test(async t => { 361 for (const [key, imageTest] of Object.entries(imageTests)) { 362 const imageElement = document.createElement("img"); 363 imageElement.src = `resources/${imageTest.name}`; 364 await imageLoadedPromise(imageElement); 365 assert_true(imageElement.complete, "Image element should have loaded successfully"); 366 const canvasElement = document.createElement("canvas"); 367 canvasElement.width = imageElement.width; 368 canvasElement.height = imageElement.height; 369 const context = canvasElement.getContext("2d"); 370 context.drawImage(imageElement, 0, 0); 371 const blob = await new Promise(function(resolve, reject) { 372 canvasElement.toBlob(function(blob) { 373 return resolve(blob); 374 }); 375 }); 376 await testImage(blob, imageTest, key); 377 } 378 }, "Blob"); 379 380 promise_test(async t => { 381 for (const [key, imageTest] of Object.entries(imageTests)) { 382 const imageElement = document.createElement("img"); 383 imageElement.src = `resources/${imageTest.name}`; 384 await imageLoadedPromise(imageElement); 385 assert_true(imageElement.complete, "Image element should have loaded successfully"); 386 const canvasElement = document.createElement("canvas"); 387 canvasElement.width = imageElement.width; 388 canvasElement.height = imageElement.height; 389 const context = canvasElement.getContext("2d"); 390 context.drawImage(imageElement, 0, 0); 391 const imageData = context.getImageData(0, 0, canvasElement.width, canvasElement.height); 392 await testImage(imageData, imageTest, key); 393 } 394 }, "ImageData"); 395 396 </script>