| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <script> |
| jsTestIsAsync = true; |
| var worker = new Worker('../../fast/canvas/resources/canvas-createImageBitmap-blob-in-workers.js'); |
| |
| description('Test race condition for createImageBitmap from blob in workers and main.'); |
| |
| var imgWidth = 300; |
| var imgHeight = 150; |
| var numOfBitmaps = 5; |
| var bitmapArray = []; |
| |
| var canvas1 = document.createElement("canvas"); |
| var ctx1 = canvas1.getContext("2d"); |
| ctx1.fillStyle = "#FF0000"; |
| ctx1.fillRect(0, 0, imgWidth, imgHeight); |
| |
| function compareImageData(data1, data2) |
| { |
| if (data1.length != data2.length) { |
| testFailed("The two image have different dimensions"); |
| finishJSTest(); |
| } |
| for (var i = 0; i < data1.length; i++) { |
| if (data1[i] != data2[i]) { |
| testFailed("The two image have different pixel data"); |
| finishJSTest(); |
| } |
| } |
| } |
| |
| var getMessageFromWorker = new Promise((resolve, reject) => { |
| function onMessage(e) { |
| resolve(e.data.data); |
| worker.removeEventListener("message", onMessage); |
| } |
| worker.addEventListener("message", onMessage); |
| }); |
| |
| // check that the created ImageBitmaps from worker and main have the same pixel |
| // data as the source, which is the canvas1.toBlob |
| var newImg = new Image(); |
| canvas1.toBlob(function(blob) { |
| worker.postMessage(blob); |
| for (var i = 0; i < numOfBitmaps; i++) { |
| createImageBitmap(blob).then(imageBitmap => { |
| bitmapArray.push(imageBitmap); |
| if (bitmapArray.length == numOfBitmaps) { |
| var url = URL.createObjectURL(blob); |
| newImg.src = url; |
| } |
| }); |
| } |
| }); |
| |
| var imageLoaded = new Promise((resolve, reject) => { |
| newImg.onload = function() { |
| var canvas2 = document.createElement("canvas"); |
| var ctx2 = canvas2.getContext("2d"); |
| ctx2.drawImage(newImg, 0, 0, imgWidth, imgHeight); |
| resolve(ctx2.getImageData(0, 0, imgWidth, imgHeight).data); |
| }; |
| }); |
| |
| Promise.all([imageLoaded, getMessageFromWorker]).then(([imageDataFromImg, imageBitmapFromWorker]) => { |
| var canvas3 = document.createElement("canvas"); |
| var ctx3 = canvas3.getContext("2d"); |
| for (var i = 0; i < numOfBitmaps; i++) { |
| ctx3.clearRect(0, 0, imgWidth, imgHeight); |
| ctx3.drawImage(bitmapArray[i], 0, 0, imgWidth, imgHeight); |
| var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data; |
| compareImageData(imageData, imageDataFromImg); |
| } |
| |
| ctx3.clearRect(0, 0, imgWidth, imgHeight); |
| ctx3.drawImage(imageBitmapFromWorker, 0, 0, imgWidth, imgHeight); |
| var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data; |
| compareImageData(imageData, imageDataFromImg); |
| testPassed("ImageBitmaps created from blob in worker and in main have the same pixel data"); |
| finishJSTest(); |
| }); |
| |
| </script> |
| </body> |
| </html> |
