| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../../../../resources/js-test.js"></script> | 4 <script src="../../../../resources/js-test.js"></script> |
| 5 </head> | 5 </head> |
| 6 <body> | 6 <body> |
| 7 <script> | 7 <script> |
| 8 jsTestIsAsync = true; | 8 jsTestIsAsync = true; |
| 9 var worker = startWorker('../../../../fast/canvas/resources/canvas-createImageBi
tmap-blob-in-workers.js'); | 9 var worker = new Worker('../../../../fast/canvas/resources/canvas-createImageBit
map-blob-in-workers.js'); |
| 10 | 10 |
| 11 description('Test createImageBitmap with blob in workers.'); | 11 description('Test race condition for createImageBitmap from blob in workers and
main.'); |
| 12 | 12 |
| 13 var imgWidth = 20; | 13 var imgWidth = 20; |
| 14 var imgHeight = 20; | 14 var imgHeight = 20; |
| 15 var imageData2; | |
| 16 var numOfBitmaps = 5; | 15 var numOfBitmaps = 5; |
| 17 var bitmapArray = []; | 16 var bitmapArray = []; |
| 18 | 17 |
| 19 var canvas1 = document.createElement("canvas"); | 18 var canvas1 = document.createElement("canvas"); |
| 20 var ctx1 = canvas1.getContext("2d"); | 19 var ctx1 = canvas1.getContext("2d"); |
| 21 ctx1.fillStyle = "#FF0000"; | 20 ctx1.fillStyle = "#FF0000"; |
| 22 ctx1.fillRect(0, 0, imgWidth, imgHeight); | 21 ctx1.fillRect(0, 0, imgWidth, imgHeight); |
| 23 | 22 |
| 24 function compareImageData(data1, data2) | 23 function compareImageData(data1, data2) |
| 25 { | 24 { |
| 26 if (data1.length != data2.length) { | 25 if (data1.length != data2.length) { |
| 27 testFailed("The two image have different dimensions"); | 26 testFailed("The two image have different dimensions"); |
| 28 finishJSTest(); | 27 finishJSTest(); |
| 29 } | 28 } |
| 30 for (var i = 0; i < data1.length; i++) { | 29 for (var i = 0; i < data1.length; i++) { |
| 31 if (data1[i] != data2[i]) { | 30 if (data1[i] != data2[i]) { |
| 32 testFailed("The two image have different pixel data"); | 31 testFailed("The two image have different pixel data"); |
| 33 finishJSTest(); | 32 finishJSTest(); |
| 34 } | 33 } |
| 35 } | 34 } |
| 36 } | 35 } |
| 37 | 36 |
| 37 var getMessageFromWorker = new Promise((resolve, reject) => { |
| 38 function onMessage(e) { |
| 39 resolve(e.data.data); |
| 40 worker.removeEventListener("message", onMessage); |
| 41 } |
| 42 worker.addEventListener("message", onMessage); |
| 43 }); |
| 44 |
| 45 // check that the created ImageBitmaps from worker and main have the same pixel |
| 46 // data as the source, which is the canvas1.toBlob |
| 38 var newImg = new Image(); | 47 var newImg = new Image(); |
| 39 newImg.onload = function() { | 48 canvas1.toBlob(function(blob) { |
| 40 var canvas2 = document.createElement("canvas"); | 49 worker.postMessage(blob); |
| 41 var ctx2 = canvas2.getContext("2d"); | 50 for (var i = 0; i < numOfBitmaps; i++) { |
| 42 ctx2.drawImage(newImg, 0, 0, imgWidth, imgHeight); | 51 createImageBitmap(blob).then(imageBitmap => { |
| 43 imageData2 = ctx2.getImageData(0, 0, imgWidth, imgHeight).data; | 52 bitmapArray.push(imageBitmap); |
| 53 if (bitmapArray.length == numOfBitmaps) { |
| 54 var url = URL.createObjectURL(blob); |
| 55 newImg.src = url; |
| 56 } |
| 57 }); |
| 58 } |
| 59 }); |
| 44 | 60 |
| 61 var imageLoaded = new Promise((resolve, reject) => { |
| 62 newImg.onload = function() { |
| 63 var canvas2 = document.createElement("canvas"); |
| 64 var ctx2 = canvas2.getContext("2d"); |
| 65 ctx2.drawImage(newImg, 0, 0, imgWidth, imgHeight); |
| 66 resolve(ctx2.getImageData(0, 0, imgWidth, imgHeight).data); |
| 67 }; |
| 68 }); |
| 69 |
| 70 Promise.all([imageLoaded, getMessageFromWorker]).then(([imageDataFromImg, imageB
itmapFromWorker]) => { |
| 45 var canvas3 = document.createElement("canvas"); | 71 var canvas3 = document.createElement("canvas"); |
| 46 var ctx3 = canvas3.getContext("2d"); | 72 var ctx3 = canvas3.getContext("2d"); |
| 47 for (var i = 0; i < numOfBitmaps; i++) { | 73 for (var i = 0; i < numOfBitmaps; i++) { |
| 48 ctx3.clearRect(0, 0, imgWidth, imgHeight); | 74 ctx3.clearRect(0, 0, imgWidth, imgHeight); |
| 49 ctx3.drawImage(bitmapArray[i], 0, 0, imgWidth, imgHeight); | 75 ctx3.drawImage(bitmapArray[i], 0, 0, imgWidth, imgHeight); |
| 50 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data; | 76 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data; |
| 51 compareImageData(imageData, imageData2); | 77 compareImageData(imageData, imageDataFromImg); |
| 52 } | 78 } |
| 53 | 79 |
| 54 worker.onmessage = function(e) { | 80 ctx3.clearRect(0, 0, imgWidth, imgHeight); |
| 55 var newImageBitmap = e.data.data; | 81 ctx3.drawImage(imageBitmapFromWorker, 0, 0, imgWidth, imgHeight); |
| 56 ctx3.clearRect(0, 0, imgWidth, imgHeight); | 82 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data; |
| 57 ctx3.drawImage(newImageBitmap, 0, 0, imgWidth, imgHeight); | 83 compareImageData(imageData, imageDataFromImg); |
| 58 var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data; | 84 testPassed("ImageBitmaps created from blob in worker and in main have the sa
me pixel data"); |
| 59 compareImageData(imageData, imageData2); | 85 finishJSTest(); |
| 60 testPassed("ImageBitmaps created from blob in worker and in main have th
e same pixel data"); | |
| 61 finishJSTest(); | |
| 62 } | |
| 63 } | |
| 64 | |
| 65 canvas1.toBlob(function(blob) { | |
| 66 worker.postMessage(blob); | |
| 67 var setImgSrc = false; | |
| 68 for (var i = 0; i < numOfBitmaps; i++) { | |
| 69 createImageBitmap(blob).then(imageBitmap => { | |
| 70 bitmapArray.push(imageBitmap); | |
| 71 if (i >= numOfBitmaps - 1 && setImgSrc == false) { | |
| 72 var url = URL.createObjectURL(blob); | |
| 73 newImg.src = url; | |
| 74 setImgSrc = true; | |
| 75 } | |
| 76 }); | |
| 77 } | |
| 78 }); | 86 }); |
| 79 | 87 |
| 80 </script> | 88 </script> |
| 81 </body> | 89 </body> |
| 82 </html> | 90 </html> |
| OLD | NEW |