1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<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>
|
