diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/offscreen/manual/filter')
3 files changed, 129 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.html b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.html new file mode 100644 index 0000000000..25691983f1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.html @@ -0,0 +1,27 @@ +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="offscreencanvas.filter.js"></script> +<script> +var patternCanvas = createPatternCanvas(); + +var getOffscreenContextForFilter = 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 offCtx; +}; + +var testFilter = function(filter) { + var offCtx = getOffscreenContextForFilter(filter, patternCanvas); + var ctx = getRegularContextForFilter(filter, patternCanvas); + var offImageData = offCtx.getImageData(0, 0, 80, 80).data; + var imageData = ctx.getImageData(0, 0, 80, 80).data; + matchImageDataResults(offImageData, imageData, filter); +}; + +generate_tests(testFilter, [filters]); + +</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js new file mode 100644 index 0000000000..cb2e245803 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.js @@ -0,0 +1,48 @@ +var getRegularContextForFilter = function(filter, pattern) { + var c = document.createElement("canvas"); + c.width = c.height = 80; + var ctx = c.getContext('2d'); + ctx.filter = filter; + ctx.drawImage(pattern, 5, 5); + ctx.drawImage(pattern, 25, 25); + ctx.drawImage(pattern, 45, 45); + return ctx; +}; + +var matchImageDataResults = function(offscreenImage, regularImage, filter) { + assert_array_equals(offscreenImage, regularImage, + "The image data generated by filter " + + filter + + " should be the same for both OffscreenCanvas and regular canvas"); +}; + +var createPatternCanvas = function() { + var patternCanvas = document.createElement('canvas'); + patternCanvas.width = 20; + patternCanvas.height = 20; + var patternCtx = patternCanvas.getContext('2d'); + patternCtx.fillStyle = '#A00'; + patternCtx.fillRect(0, 0, 10, 10); + patternCtx.fillStyle = '#0A0'; + patternCtx.fillRect(10, 0, 10, 10); + patternCtx.fillStyle = '#00A'; + patternCtx.fillRect(0, 10, 10, 10); + patternCtx.fillStyle = "#AA0"; + patternCtx.fillRect(10, 10, 10, 10); + return patternCanvas; +}; + +var filters = [ "none" , + "blur(10px)" , + "brightness(40%)" , + "contrast(20%)" , + "drop-shadow(0 0 5px green)" , + "grayscale(100%)" , + "invert(100%)" , + "opacity(50%)" , + "saturate(20%)" , + "sepia(100%)" , + "sepia(1) hue-rotate(200deg)", + "url(#url)" ]; + + diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html new file mode 100644 index 0000000000..d6ed915b53 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/manual/filter/offscreencanvas.filter.w.html @@ -0,0 +1,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> |