| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <body> | 3 <body> |
| 4 <canvas id='output' width='100' height='100' style='background:red'></canvas> | 4 <canvas id='output1' width='100' height='100' style='background:red'></canvas> |
| 5 | 5 <canvas id='output2' width='100' height='100' style='background:red'></canvas> |
| 6 <canvas id='output3' width='100' height='100' style='background:red'></canvas> |
| 6 <script id='myWorker' type='text/worker'> | 7 <script id='myWorker' type='text/worker'> |
| 7 self.onmessage = function(e) { | 8 self.onmessage = function(e) { |
| 8 var aCanvas = new OffscreenCanvas(100, 100); | 9 var aCanvas = new OffscreenCanvas(100, 100); |
| 9 var ctx = aCanvas.getContext('2d'); | 10 var ctx = aCanvas.getContext('2d'); |
| 10 ctx.fillStyle = 'green'; | 11 ctx.fillStyle = 'green'; |
| 11 ctx.fillRect(0, 0, 100, 100); | 12 ctx.fillRect(0, 0, 100, 100); |
| 12 var image = aCanvas.transferToImageBitmap(); | 13 var image1 = aCanvas.transferToImageBitmap(); |
| 13 self.postMessage(image, [image]); | 14 |
| 15 ctx.fillStyle = '#D359FE'; |
| 16 ctx.fillRect(0, 0, 100, 100); |
| 17 var image2 = aCanvas.transferToImageBitmap(); |
| 18 |
| 19 ctx.fillStyle = 'rgb(150,250,100)'; |
| 20 ctx.fillRect(0, 0, 100, 100); |
| 21 var image3 = aCanvas.transferToImageBitmap(); |
| 22 |
| 23 self.postMessage( |
| 24 { i1: image1, |
| 25 i2: image2, |
| 26 i3: image3 }, |
| 27 [ image1, image2, image3 ]); |
| 14 }; | 28 }; |
| 15 </script> | 29 </script> |
| 16 | 30 |
| 17 <script> | 31 <script> |
| 18 if (window.testRunner) { | 32 if (window.testRunner) { |
| 19 testRunner.waitUntilDone(); | 33 testRunner.waitUntilDone(); |
| 20 } | 34 } |
| 21 var blob = new Blob([document.getElementById('myWorker').textContent]); | 35 var blob = new Blob([document.getElementById('myWorker').textContent]); |
| 22 var worker = new Worker(URL.createObjectURL(blob)); | 36 var worker = new Worker(URL.createObjectURL(blob)); |
| 23 worker.addEventListener('message', msg => { | 37 worker.addEventListener('message', msg => { |
| 24 var outputCtx = document.getElementById('output').getContext('bitmaprenderer')
; | 38 var outputCtx1 = document.getElementById('output1').getContext('bitmaprenderer
'); |
| 25 outputCtx.transferImageBitmap(msg.data); | 39 outputCtx1.transferImageBitmap(msg.data.i1); |
| 40 var outputCtx2 = document.getElementById('output2').getContext('bitmaprenderer
'); |
| 41 outputCtx2.transferImageBitmap(msg.data.i2); |
| 42 var outputCtx3 = document.getElementById('output3').getContext('bitmaprenderer
'); |
| 43 outputCtx3.transferImageBitmap(msg.data.i3); |
| 44 |
| 26 if (window.testRunner) { | 45 if (window.testRunner) { |
| 27 testRunner.notifyDone(); | 46 testRunner.notifyDone(); |
| 28 } | 47 } |
| 29 }); | 48 }); |
| 30 worker.postMessage(""); | 49 worker.postMessage(""); |
| 31 </script> | 50 </script> |
| 32 </body> | 51 </body> |
| 33 </html> | 52 </html> |
| OLD | NEW |