| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="offscreencanvas.filter.js"></script> |
| <script id='myWorker' type='text/worker'> |
| self.onmessage = function(e) { |
| var getOffscreenCanvasForFilter = function(filter, pattern) { |
| var oc = new OffscreenCanvas(80, 80); |
| var offCtx = oc.getContext('2d'); |
| offCtx.filter = filter; |
| offCtx.drawImage(pattern, 5, 5); |
| offCtx.drawImage(pattern, 25, 25); |
| offCtx.drawImage(pattern, 45, 45); |
| return oc; |
| }; |
| |
| var filters = e.data.filters; |
| var pattern = e.data.pattern; |
| var ret = []; |
| for (var i = 0; i < filters.length; i++) { |
| var oc = getOffscreenCanvasForFilter(filters[i], pattern); |
| var imageBitmap = oc.transferToImageBitmap(); |
| ret.push(imageBitmap); |
| } |
| self.postMessage(ret, ret); |
| }; |
| </script> |
| <script> |
| var patternCanvas = createPatternCanvas(); |
| |
| // Build a list of image data on regular canvas with different filters |
| var listCanvasImageData = []; |
| for (var j = 0; j < filters.length; j++) { |
| var ctx = getRegularContextForFilter(filters[j], patternCanvas); |
| listCanvasImageData.push(ctx.getImageData(0, 0, 80, 80).data); |
| } |
| |
| function consumeImageBitmap(patternImage) { |
| async_test(t => { |
| var blob = new Blob([document.getElementById('myWorker').textContent]); |
| var worker = new Worker(URL.createObjectURL(blob)); |
| worker.addEventListener('message', msg => { |
| for (var i = 0; i < msg.data.length; ++i) { |
| var outputCtx = document.createElement("canvas").getContext('2d'); |
| outputCtx.drawImage(msg.data[i], 0, 0, 80, 80); |
| matchImageDataResults(outputCtx.getImageData(0, 0, 80, 80).data, listCanvasImageData[i], filters[i]); |
| } |
| t.done(); |
| }); |
| worker.postMessage({filters: filters, pattern: patternImage}, [patternImage]); |
| }); |
| } |
| |
| createImageBitmap(patternCanvas).then(consumeImageBitmap); |
| </script> |