diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/offscreen')
252 files changed, 14131 insertions, 4669 deletions
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html new file mode 100644 index 0000000000..69277677b9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>OffscreenCanvas test: 2d.fillStyle.parse.hsl-clamp-negative-saturation</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> + +<h1>2d.fillStyle.parse.hsl-clamp-negative-saturation</h1> +<p class="desc"></p> + +<p class="notes"> +<script> +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsl(120, -200%, 49.9%)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 127,127,127,255); + t.done(); + +}); +</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.worker.js new file mode 100644 index 0000000000..7f1e91ddb7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.worker.js @@ -0,0 +1,25 @@ +// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. +// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsl-clamp-negative-saturation +// Description: +// Note:<p class="notes"> + +importScripts("/resources/testharness.js"); +importScripts("/html/canvas/resources/canvas-tests.js"); + +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsl(120, -200%, 49.9%)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 127,127,127,255); + t.done(); +}); +done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html new file mode 100644 index 0000000000..5d73d34c9c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>OffscreenCanvas test: 2d.fillStyle.parse.hsla-clamp-alpha-1</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> + +<h1>2d.fillStyle.parse.hsla-clamp-alpha-1</h1> +<p class="desc"></p> + +<p class="notes"> +<script> +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsla(120, 100%, 50%, 2)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 0,255,0,255); + t.done(); + +}); +</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.worker.js new file mode 100644 index 0000000000..7acb76d80b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.worker.js @@ -0,0 +1,25 @@ +// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. +// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsla-clamp-alpha-1 +// Description: +// Note:<p class="notes"> + +importScripts("/resources/testharness.js"); +importScripts("/html/canvas/resources/canvas-tests.js"); + +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsla(120, 100%, 50%, 2)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 0,255,0,255); + t.done(); +}); +done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html new file mode 100644 index 0000000000..eaf7a6af89 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>OffscreenCanvas test: 2d.fillStyle.parse.hsla-clamp-alpha-2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> + +<h1>2d.fillStyle.parse.hsla-clamp-alpha-2</h1> +<p class="desc"></p> + +<p class="notes"> +<script> +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsla(120, 100%, 0%, -2)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 0,0,0,0); + t.done(); + +}); +</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.worker.js new file mode 100644 index 0000000000..540b3ea15f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.worker.js @@ -0,0 +1,25 @@ +// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. +// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsla-clamp-alpha-2 +// Description: +// Note:<p class="notes"> + +importScripts("/resources/testharness.js"); +importScripts("/html/canvas/resources/canvas-tests.js"); + +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsla(120, 100%, 0%, -2)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 0,0,0,0); + t.done(); +}); +done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html new file mode 100644 index 0000000000..04749fb4a7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>OffscreenCanvas test: 2d.fillStyle.parse.hsla-clamp-negative-saturation</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> + +<h1>2d.fillStyle.parse.hsla-clamp-negative-saturation</h1> +<p class="desc"></p> + +<p class="notes"> +<script> +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 127,127,127,255); + t.done(); + +}); +</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.worker.js new file mode 100644 index 0000000000..f5fe6d4296 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.worker.js @@ -0,0 +1,25 @@ +// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. +// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsla-clamp-negative-saturation +// Description: +// Note:<p class="notes"> + +importScripts("/resources/testharness.js"); +importScripts("/html/canvas/resources/canvas-tests.js"); + +var t = async_test(""); +var t_pass = t.done.bind(t); +var t_fail = t.step_func(function(reason) { + throw reason; +}); +t.step(function() { + + var canvas = new OffscreenCanvas(100, 50); + var ctx = canvas.getContext('2d'); + + ctx.fillStyle = '#f00'; + ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)'; + ctx.fillRect(0, 0, 100, 50); + _assertPixel(canvas, 50,25, 127,127,127,255); + t.done(); +}); +done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html deleted file mode 100644 index dac31c97f1..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html deleted file mode 100644 index 801e6fdb8c..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 4], - }); - ctx.fillRect(25, 25, 50, 50); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.w.html deleted file mode 100644 index 6c7c7f7649..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.w.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 4], - }); - ctx.fillRect(25, 25, 50, 50); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html deleted file mode 100644 index 88d0cb2de2..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 1" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html deleted file mode 100644 index ba986d8e7b..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 1], - }); - ctx.fillRect(25, 25, 50, 50); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.w.html deleted file mode 100644 index 86fe086327..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.w.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 1], - }); - ctx.fillRect(25, 25, 50, 50); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html deleted file mode 100644 index 744983d4ae..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="1 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html deleted file mode 100644 index 0265cfa6c4..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [1, 4], - }); - ctx.fillRect(25, 25, 50, 50); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.w.html deleted file mode 100644 index c22b320857..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.w.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [1, 4], - }); - ctx.fillRect(25, 25, 50, 50); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html new file mode 100644 index 0000000000..c1ca0ab46f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title> +<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 0" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur0)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-x</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 1" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur1)" /> + </svg> + </div> +</span> + +<span> + <div>isotropic</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur2)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-y</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="1 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur3)" /> + </svg> + </div> +</span> + +<span> + <div>y-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="0 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur4)" /> + </svg> + </div> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html new file mode 100644 index 0000000000..8e7ea3f727 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html"> +<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title> +<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <canvas id="canvas0" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 0], + }); + ctx.fillRect(25, 25, 50, 50); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>mostly-x</div> + <canvas id="canvas1" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 1], + }); + ctx.fillRect(25, 25, 50, 50); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>isotropic</div> + <canvas id="canvas2" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 4], + }); + ctx.fillRect(25, 25, 50, 50); + + const outputCanvas = document.getElementById("canvas2"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>mostly-y</div> + <canvas id="canvas3" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [1, 4], + }); + ctx.fillRect(25, 25, 50, 50); + + const outputCanvas = document.getElementById("canvas3"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>y-only</div> + <canvas id="canvas4" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [0, 4], + }); + ctx.fillRect(25, 25, 50, 50); + + const outputCanvas = document.getElementById("canvas4"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html new file mode 100644 index 0000000000..71626ac46e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html @@ -0,0 +1,194 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html"> +<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title> +<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> +<script>pending_tests = 5;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <canvas id="canvas0" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 0], + }); + ctx.fillRect(25, 25, 50, 50); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>mostly-x</div> + <canvas id="canvas1" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 1], + }); + ctx.fillRect(25, 25, 50, 50); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>isotropic</div> + <canvas id="canvas2" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker2" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 4], + }); + ctx.fillRect(25, 25, 50, 50); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker2').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas2'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>mostly-y</div> + <canvas id="canvas3" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker3" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [1, 4], + }); + ctx.fillRect(25, 25, 50, 50); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker3').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas3'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>y-only</div> + <canvas id="canvas4" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker4" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [0, 4], + }); + ctx.fillRect(25, 25, 50, 50); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker4').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas4'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html deleted file mode 100644 index e611113e42..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 0" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html deleted file mode 100644 index 3ed8e9ddf9..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 0], - }); - ctx.fillRect(25, 25, 50, 50); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.w.html deleted file mode 100644 index 35cbc1b365..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.w.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 0], - }); - ctx.fillRect(25, 25, 50, 50); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html deleted file mode 100644 index c6d915cb07..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="0 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html deleted file mode 100644 index f563ad9d77..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [0, 4], - }); - ctx.fillRect(25, 25, 50, 50); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.w.html deleted file mode 100644 index 171a41caa8..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.w.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [0, 4], - }); - ctx.fillRect(25, 25, 50, 50); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur-expected.html new file mode 100644 index 0000000000..f24e9d0dba --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur-expected.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.filter.layers.gaussianBlur</title> +<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 0" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur0)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-x</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 1" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur1)" /> + </svg> + </div> +</span> + +<span> + <div>isotropic</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur2)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-y</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="1 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur3)" /> + </svg> + </div> +</span> + +<span> + <div>y-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="0 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur4)" /> + </svg> + </div> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.html new file mode 100644 index 0000000000..a51fe32008 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.filter.layers.gaussianBlur-expected.html"> +<title>Canvas test: 2d.filter.layers.gaussianBlur</title> +<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <canvas id="canvas0" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 0], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>mostly-x</div> + <canvas id="canvas1" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 1], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>isotropic</div> + <canvas id="canvas2" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas2"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>mostly-y</div> + <canvas id="canvas3" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [1, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas3"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>y-only</div> + <canvas id="canvas4" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [0, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas4"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html deleted file mode 100644 index 4f93754862..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title> -<h1>2d.filter.layers.gaussianBlur.isotropic</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.html deleted file mode 100644 index 50a98df1be..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.isotropic-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title> -<h1>2d.filter.layers.gaussianBlur.isotropic</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.w.html deleted file mode 100644 index a68b8e78a2..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.w.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.layers.gaussianBlur.isotropic-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title> -<h1>2d.filter.layers.gaussianBlur.isotropic</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html deleted file mode 100644 index 255270c192..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title> -<h1>2d.filter.layers.gaussianBlur.mostly-x</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 1" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.html deleted file mode 100644 index efc634796c..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-x-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title> -<h1>2d.filter.layers.gaussianBlur.mostly-x</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 1], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.w.html deleted file mode 100644 index 7d20d78503..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.w.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-x-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title> -<h1>2d.filter.layers.gaussianBlur.mostly-x</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 1], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html deleted file mode 100644 index 76a46b1533..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title> -<h1>2d.filter.layers.gaussianBlur.mostly-y</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="1 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.html deleted file mode 100644 index bdc6e66fe5..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-y-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title> -<h1>2d.filter.layers.gaussianBlur.mostly-y</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [1, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.w.html deleted file mode 100644 index dfd6438b19..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.w.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-y-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title> -<h1>2d.filter.layers.gaussianBlur.mostly-y</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [1, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.w.html new file mode 100644 index 0000000000..10ea8baa10 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.w.html @@ -0,0 +1,199 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.filter.layers.gaussianBlur-expected.html"> +<title>Canvas test: 2d.filter.layers.gaussianBlur</title> +<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> +<script>pending_tests = 5;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <canvas id="canvas0" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 0], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>mostly-x</div> + <canvas id="canvas1" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 1], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>isotropic</div> + <canvas id="canvas2" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker2" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker2').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas2'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>mostly-y</div> + <canvas id="canvas3" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker3" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [1, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker3').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas3'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>y-only</div> + <canvas id="canvas4" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker4" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(100, 100); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [0, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker4').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas4'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only-expected.html deleted file mode 100644 index 26741f9847..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title> -<h1>2d.filter.layers.gaussianBlur.x-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 0" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.html deleted file mode 100644 index 0d42acb8b5..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.x-only-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title> -<h1>2d.filter.layers.gaussianBlur.x-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 0], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.w.html deleted file mode 100644 index b235c7ad38..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.w.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.layers.gaussianBlur.x-only-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title> -<h1>2d.filter.layers.gaussianBlur.x-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 0], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only-expected.html deleted file mode 100644 index d00eec6b57..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title> -<h1>2d.filter.layers.gaussianBlur.y-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="0 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.html deleted file mode 100644 index c9bc85d699..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.y-only-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title> -<h1>2d.filter.layers.gaussianBlur.y-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [0, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.w.html deleted file mode 100644 index 5deb96c255..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.w.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.filter.layers.gaussianBlur.y-only-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title> -<h1>2d.filter.layers.gaussianBlur.y-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(100, 100); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [0, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html index 4fb042a1d8..354a03a134 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Checks beginLayer works for different option parameter values"); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -45,7 +39,6 @@ t.step(function() { ctx.beginLayer({filter: 1}); ctx.endLayer(); ctx.beginLayer({filter: true}); ctx.endLayer(); ctx.beginLayer({filter: false}); ctx.endLayer(); - t.done(); -}); +}, "Checks beginLayer works for different option parameter values"); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js index cafbc83f3e..492ac3fcea 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Checks beginLayer works for different option parameter values"); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -41,6 +35,5 @@ t.step(function() { ctx.beginLayer({filter: 1}); ctx.endLayer(); ctx.beginLayer({filter: true}); ctx.endLayer(); ctx.beginLayer({filter: false}); ctx.endLayer(); - t.done(); -}); +}, "Checks beginLayer works for different option parameter values"); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html index b2306d95ac..919de40d2e 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Tests getTransform inside layers."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -26,7 +20,6 @@ t.step(function() { const m = ctx.getTransform(); assert_array_equals([m.a, m.b, m.c, m.d, m.e, m.f], [2, 0, 0, 3, 10, 20]); ctx.endLayer(); - t.done(); -}); +}, "Tests getTransform inside layers."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js index 54b1fee5d0..2d6e6ef8a2 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Tests getTransform inside layers."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -22,6 +16,5 @@ t.step(function() { const m = ctx.getTransform(); assert_array_equals([m.a, m.b, m.c, m.d, m.e, m.f], [2, 0, 0, 3, 10, 20]); ctx.endLayer(); - t.done(); -}); +}, "Tests getTransform inside layers."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html index a047c539cf..29b316b256 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Checks that the context state is left unchanged if beginLayer throws."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -26,7 +20,6 @@ t.step(function() { values: 'foo'}})); // `beginLayer` shouldn't have opened the layer, so `endLayer` should throw. assert_throws_dom("InvalidStateError", () => ctx.endLayer()); - t.done(); -}); +}, "Checks that the context state is left unchanged if beginLayer throws."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js index bd1e376084..6e253b26d5 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Checks that the context state is left unchanged if beginLayer throws."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -22,6 +16,5 @@ t.step(function() { values: 'foo'}})); // `beginLayer` shouldn't have opened the layer, so `endLayer` should throw. assert_throws_dom("InvalidStateError", () => ctx.endLayer()); - t.done(); -}); +}, "Checks that the context state is left unchanged if beginLayer throws."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html deleted file mode 100644 index 0666e3098a..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.alpha</title> -<h1>2d.layer.global-states.alpha</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html deleted file mode 100644 index 8a45027588..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.alpha.blending</title> -<h1>2d.layer.global-states.alpha.blending</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html deleted file mode 100644 index 71414b4b37..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.alpha.blending-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.blending</title> -<h1>2d.layer.global-states.alpha.blending</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html deleted file mode 100644 index f7b633b35f..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title> -<h1>2d.layer.global-states.alpha.blending.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html deleted file mode 100644 index ed2d2d70af..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.alpha.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title> -<h1>2d.layer.global-states.alpha.blending.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html deleted file mode 100644 index 1ff3ad8385..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html +++ /dev/null @@ -1,56 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.alpha.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title> -<h1>2d.layer.global-states.alpha.blending.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html deleted file mode 100644 index 618480c813..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html +++ /dev/null @@ -1,52 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.alpha.blending-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.blending</title> -<h1>2d.layer.global-states.alpha.blending</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html deleted file mode 100644 index 951049e638..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.alpha.composite</title> -<h1>2d.layer.global-states.alpha.composite</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html deleted file mode 100644 index 94fed5752d..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.alpha.composite-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.composite</title> -<h1>2d.layer.global-states.alpha.composite</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html deleted file mode 100644 index 0ae93871f5..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title> -<h1>2d.layer.global-states.alpha.composite.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html deleted file mode 100644 index eb579cdcce..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.alpha.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title> -<h1>2d.layer.global-states.alpha.composite.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html deleted file mode 100644 index 60e36f4b97..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html +++ /dev/null @@ -1,56 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.alpha.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title> -<h1>2d.layer.global-states.alpha.composite.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html deleted file mode 100644 index d7d2b7a21e..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html +++ /dev/null @@ -1,52 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.alpha.composite-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.composite</title> -<h1>2d.layer.global-states.alpha.composite</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html deleted file mode 100644 index 63a264e681..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.alpha-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha</title> -<h1>2d.layer.global-states.alpha</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html deleted file mode 100644 index 6f764c5001..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.alpha.shadow</title> -<h1>2d.layer.global-states.alpha.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.5; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html deleted file mode 100644 index 65a66c977d..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.alpha.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.shadow</title> -<h1>2d.layer.global-states.alpha.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.5; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html deleted file mode 100644 index f404601e3d..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html +++ /dev/null @@ -1,55 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.alpha.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha.shadow</title> -<h1>2d.layer.global-states.alpha.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.5; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html deleted file mode 100644 index 694f31e208..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.alpha-expected.html"> -<title>Canvas test: 2d.layer.global-states.alpha</title> -<h1>2d.layer.global-states.alpha</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html deleted file mode 100644 index 33fdf46a28..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.blending</title> -<h1>2d.layer.global-states.blending</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.html deleted file mode 100644 index 6a36bb4ba1..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.blending-expected.html"> -<title>Canvas test: 2d.layer.global-states.blending</title> -<h1>2d.layer.global-states.blending</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..c56f13f2fd --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html new file mode 100644 index 0000000000..1f8736e0e4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.blending.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..2bd46eee66 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.blending.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..e5f8ba0db4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html new file mode 100644 index 0000000000..0470777988 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.blending.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html new file mode 100644 index 0000000000..4d33b3a638 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.blending.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html deleted file mode 100644 index 6f969074f9..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.blending.shadow</title> -<h1>2d.layer.global-states.blending.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html deleted file mode 100644 index 2e91f3d2d1..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.blending.shadow</title> -<h1>2d.layer.global-states.blending.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html new file mode 100644 index 0000000000..debbd430c4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html new file mode 100644 index 0000000000..c6f0239c39 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.blending.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html new file mode 100644 index 0000000000..0be246ebfb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.blending.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html new file mode 100644 index 0000000000..75a55e591b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html new file mode 100644 index 0000000000..aac9d86e66 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.blending.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html new file mode 100644 index 0000000000..86067b7299 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.blending.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html deleted file mode 100644 index d8e20d0479..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html +++ /dev/null @@ -1,55 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.blending.shadow</title> -<h1>2d.layer.global-states.blending.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html deleted file mode 100644 index 8964e97713..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.blending-expected.html"> -<title>Canvas test: 2d.layer.global-states.blending</title> -<h1>2d.layer.global-states.blending</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html deleted file mode 100644 index ed7669c4cf..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.composite</title> -<h1>2d.layer.global-states.composite</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.html deleted file mode 100644 index 84fb4b3d95..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.composite-expected.html"> -<title>Canvas test: 2d.layer.global-states.composite</title> -<h1>2d.layer.global-states.composite</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..cf87559582 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html new file mode 100644 index 0000000000..69dc916d7d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.composite.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..aa358b57bc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.composite.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..2f9bb208fb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html new file mode 100644 index 0000000000..d0d08f9835 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.composite.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html new file mode 100644 index 0000000000..5e2cd0783d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.composite.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html deleted file mode 100644 index b687c27f47..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.composite.shadow</title> -<h1>2d.layer.global-states.composite.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html deleted file mode 100644 index 1e3ab4d6a0..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.composite.shadow</title> -<h1>2d.layer.global-states.composite.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html new file mode 100644 index 0000000000..2b4436806a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html new file mode 100644 index 0000000000..8b79eba128 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.composite.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html new file mode 100644 index 0000000000..47f2df391f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.composite.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html new file mode 100644 index 0000000000..da144975a5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html new file mode 100644 index 0000000000..632d390986 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.composite.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html new file mode 100644 index 0000000000..dde0d8bec0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.composite.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html deleted file mode 100644 index 7dfb70148b..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html +++ /dev/null @@ -1,55 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.composite.shadow</title> -<h1>2d.layer.global-states.composite.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html deleted file mode 100644 index b695871fcd..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.composite-expected.html"> -<title>Canvas test: 2d.layer.global-states.composite</title> -<h1>2d.layer.global-states.composite</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..489d432282 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html new file mode 100644 index 0000000000..70b659f52b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.copy.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..1db7f17a94 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.copy.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..63913ffb05 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html new file mode 100644 index 0000000000..2151535015 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.copy.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html new file mode 100644 index 0000000000..9c0cac99b9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.copy.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html new file mode 100644 index 0000000000..021581f892 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html new file mode 100644 index 0000000000..42231fa61e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.copy.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html new file mode 100644 index 0000000000..20dc667ef8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.copy.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html new file mode 100644 index 0000000000..dd9a5c2a00 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html new file mode 100644 index 0000000000..77158a9f96 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.copy.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html new file mode 100644 index 0000000000..def6bc51e2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.copy.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html deleted file mode 100644 index f304700feb..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.alpha</title> -<h1>2d.layer.global-states.filter.alpha</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html deleted file mode 100644 index 7c91ce4229..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title> -<h1>2d.layer.global-states.filter.alpha.blending</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html deleted file mode 100644 index 0e48cb49f7..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.alpha.blending-expected.html"> -<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-2453"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title> -<h1>2d.layer.global-states.filter.alpha.blending</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html deleted file mode 100644 index 62942ffeae..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html +++ /dev/null @@ -1,55 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title> -<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html deleted file mode 100644 index 62d98d967c..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html +++ /dev/null @@ -1,45 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.alpha.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title> -<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html deleted file mode 100644 index e81efd6b8d..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html +++ /dev/null @@ -1,59 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.alpha.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title> -<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html deleted file mode 100644 index 3887ed4485..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html +++ /dev/null @@ -1,56 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.alpha.blending-expected.html"> -<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-2453"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title> -<h1>2d.layer.global-states.filter.alpha.blending</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html deleted file mode 100644 index 8e0d98648e..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title> -<h1>2d.layer.global-states.filter.alpha.composite</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html deleted file mode 100644 index 1a9bc8b733..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.alpha.composite-expected.html"> -<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-5204"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title> -<h1>2d.layer.global-states.filter.alpha.composite</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html deleted file mode 100644 index a649972546..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html +++ /dev/null @@ -1,55 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title> -<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html deleted file mode 100644 index d067ff2f5e..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html +++ /dev/null @@ -1,45 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.alpha.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title> -<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html deleted file mode 100644 index 39abc78b17..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html +++ /dev/null @@ -1,59 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.alpha.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title> -<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html deleted file mode 100644 index 5c90fe95aa..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html +++ /dev/null @@ -1,56 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.alpha.composite-expected.html"> -<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-5204"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title> -<h1>2d.layer.global-states.filter.alpha.composite</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html deleted file mode 100644 index f64e8925f0..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.alpha-expected.html"> -<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6766"> -<title>Canvas test: 2d.layer.global-states.filter.alpha</title> -<h1>2d.layer.global-states.filter.alpha</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html deleted file mode 100644 index 169baee29b..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title> -<h1>2d.layer.global-states.filter.alpha.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.5; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html deleted file mode 100644 index 5e8911ee17..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html +++ /dev/null @@ -1,45 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.alpha.shadow-expected.html"> -<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6311"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title> -<h1>2d.layer.global-states.filter.alpha.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.5; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html deleted file mode 100644 index b3be7e1ac8..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html +++ /dev/null @@ -1,59 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.alpha.shadow-expected.html"> -<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6311"> -<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title> -<h1>2d.layer.global-states.filter.alpha.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.5; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html deleted file mode 100644 index 21e55f856c..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html +++ /dev/null @@ -1,55 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.alpha-expected.html"> -<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6766"> -<title>Canvas test: 2d.layer.global-states.filter.alpha</title> -<h1>2d.layer.global-states.filter.alpha</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalAlpha = 0.6; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html deleted file mode 100644 index f81dcf72dc..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.blending</title> -<h1>2d.layer.global-states.filter.blending</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html deleted file mode 100644 index ce2b046798..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.blending-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.blending</title> -<h1>2d.layer.global-states.filter.blending</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..482ab25a85 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html new file mode 100644 index 0000000000..8acbfa668f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..93edfabdf3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..3af6b863ed --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html new file mode 100644 index 0000000000..0a4a8c65d2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html new file mode 100644 index 0000000000..7caaf1edee --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html deleted file mode 100644 index 91f3725f8e..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title> -<h1>2d.layer.global-states.filter.blending.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html deleted file mode 100644 index d0d429bee3..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title> -<h1>2d.layer.global-states.filter.blending.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html new file mode 100644 index 0000000000..d530ef9d19 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html new file mode 100644 index 0000000000..1ee3254324 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.blending.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html new file mode 100644 index 0000000000..3ec656c135 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.blending.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html new file mode 100644 index 0000000000..80705c36fd --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html new file mode 100644 index 0000000000..62af08d2ac --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.blending.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html new file mode 100644 index 0000000000..d5693cdcdc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.blending.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html deleted file mode 100644 index ce432ea74d..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html +++ /dev/null @@ -1,58 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.blending.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title> -<h1>2d.layer.global-states.filter.blending.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html deleted file mode 100644 index bb101cdc0b..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.blending-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.blending</title> -<h1>2d.layer.global-states.filter.blending</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'multiply'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html deleted file mode 100644 index 97e85a1593..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.composite</title> -<h1>2d.layer.global-states.filter.composite</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html deleted file mode 100644 index 32052a1150..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.composite-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.composite</title> -<h1>2d.layer.global-states.filter.composite</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..2f513bff0a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html new file mode 100644 index 0000000000..17394aa4c8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..386ad43b0f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..242973300f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html new file mode 100644 index 0000000000..576283ea73 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html new file mode 100644 index 0000000000..6dd39d77e9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html deleted file mode 100644 index 4716bb2760..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title> -<h1>2d.layer.global-states.filter.composite.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html deleted file mode 100644 index b5e8b9f843..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title> -<h1>2d.layer.global-states.filter.composite.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html new file mode 100644 index 0000000000..c8926e5e15 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html new file mode 100644 index 0000000000..b574a819d6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.composite.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html new file mode 100644 index 0000000000..96ee1b027b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.composite.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html new file mode 100644 index 0000000000..e70fe3e92d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html new file mode 100644 index 0000000000..b7b4312a35 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.composite.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html new file mode 100644 index 0000000000..1ae9f00a85 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.composite.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html deleted file mode 100644 index 894089d88e..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html +++ /dev/null @@ -1,58 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.composite.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title> -<h1>2d.layer.global-states.filter.composite.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html deleted file mode 100644 index 41ccdaf5c0..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.composite-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.composite</title> -<h1>2d.layer.global-states.filter.composite</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.globalCompositeOperation = 'source-in'; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..21aa241aca --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html new file mode 100644 index 0000000000..f08ba940af --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..75fc90bae6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..b2b46ee039 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html new file mode 100644 index 0000000000..3f12cf0c4e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html new file mode 100644 index 0000000000..0a3ecee669 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html new file mode 100644 index 0000000000..d11326d5d6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html new file mode 100644 index 0000000000..b4996deb6f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.copy.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html new file mode 100644 index 0000000000..9c13a367b3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.copy.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html new file mode 100644 index 0000000000..3ac098c344 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html new file mode 100644 index 0000000000..eab5f8312b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.copy.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html new file mode 100644 index 0000000000..aebd6cc00d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.copy.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..a445ae2c4a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html new file mode 100644 index 0000000000..f86b0fd37d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..ab0836af94 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..610c601b1c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html new file mode 100644 index 0000000000..5854af853c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html new file mode 100644 index 0000000000..c08f1f9f3c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html new file mode 100644 index 0000000000..6bd4501584 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html new file mode 100644 index 0000000000..f1dc725b83 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html new file mode 100644 index 0000000000..f191747805 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html new file mode 100644 index 0000000000..b60a5526d9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + const svg = ` + <svg xmlns="http://www.w3.org/2000/svg" + width="90" height="90" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" /> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"></feFuncA> + </feComponentTransfer> + </filter> + <g filter="url(#filter)"> + <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/> + <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/> + </g> + </svg>`; + + const img = new Image(); + img.width = 90; + img.height = 90; + img.onload = () => { + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.drawImage(img, 0, 0); + }; + img.src = 'data:image/svg+xml;base64,' + btoa(svg); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html new file mode 100644 index 0000000000..76258b326d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html new file mode 100644 index 0000000000..9a10fb569f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1> +<p class="desc">Checks that layers with filters correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer({filter: [ + {name: 'dropShadow', + dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'}, + {name: 'componentTransfer', + funcA: {type: "table", tableValues: [0, 0.8]}}]}); + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html deleted file mode 100644 index e56fe0b360..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title> -<h1>2d.layer.global-states.filter.no-global-states</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - // No global states. - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html deleted file mode 100644 index 3effa3ee9d..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.no-global-states-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title> -<h1>2d.layer.global-states.filter.no-global-states</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - // No global states. - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html deleted file mode 100644 index ec744d7ffe..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.no-global-states-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title> -<h1>2d.layer.global-states.filter.no-global-states</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - // No global states. - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html deleted file mode 100644 index 13ba2dd4cd..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html +++ /dev/null @@ -1,53 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.filter.shadow</title> -<h1>2d.layer.global-states.filter.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - const svg = ` - <svg xmlns="http://www.w3.org/2000/svg" - width="200" height="200" - color-interpolation-filters="sRGB"> - <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> - <feColorMatrix - type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0" /> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.7"></feFuncA> - </feComponentTransfer> - <feDropShadow dx="5" dy="5" flood-color="#81e" /> - </filter> - <g filter="url(#filter)"> - <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/> - <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/> - </g> - </svg>`; - - const img = new Image(); - img.width = 200; - img.height = 200; - img.onload = () => { - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.drawImage(img, 0, 0); - }; - img.src = 'data:image/svg+xml;base64,' + btoa(svg); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html deleted file mode 100644 index 7bb0ef5e13..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html +++ /dev/null @@ -1,43 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.filter.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.shadow</title> -<h1>2d.layer.global-states.filter.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html deleted file mode 100644 index bc9bd48aad..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html +++ /dev/null @@ -1,57 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.filter.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.filter.shadow</title> -<h1>2d.layer.global-states.filter.shadow</h1> -<p class="desc">Checks that layers with filters correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer({filter: [ - {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0, - 0.349, 0.686, 0.168, 0, 0, - 0.272, 0.534, 0.131, 0, 0, - 0, 0, 0, 1, 0]}, - {name: 'componentTransfer', - funcA: {type: "table", tableValues: [0, 0.7]}}, - {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]}); - - ctx.fillStyle = 'rgba(200, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 200, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html new file mode 100644 index 0000000000..d1a799707f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html new file mode 100644 index 0000000000..016f78a5d8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html new file mode 100644 index 0000000000..2a450624f1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html new file mode 100644 index 0000000000..cc91a67faf --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html new file mode 100644 index 0000000000..12a1e64b42 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html new file mode 100644 index 0000000000..a0f5f76099 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + // No shadow. + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html new file mode 100644 index 0000000000..02b239116c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html new file mode 100644 index 0000000000..99301fde09 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html new file mode 100644 index 0000000000..46375f290c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + // No transform. + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html new file mode 100644 index 0000000000..06f6a2dff3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.globalCompositeOperation = 'screen'; + ctx2.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx2.fillRect(10, 25, 40, 50); + ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx2.fillRect(30, 5, 50, 40); + + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html new file mode 100644 index 0000000000..280cc1cceb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html new file mode 100644 index 0000000000..3192f79afa --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.rotation-expected.html"> +<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title> +<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1> +<p class="desc">Checks that layers correctly use global render states.</p> +<script>pending_tests = 2;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(2, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>no-globalAlpha</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + // No globalAlpha. + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>globalAlpha</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 40); + ctx.rotate(Math.PI); + ctx.translate(-45, -45); + + ctx.fillStyle = 'rgba(128, 128, 128, 1)'; + ctx.fillRect(20, 15, 50, 50); + + ctx.globalAlpha = 0.75; + // No globalCompositeOperation. + ctx.shadowOffsetX = -7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + ctx.shadowBlur = 3; + + ctx.beginLayer(); + + // Enable compositing in the layer to validate that draw calls in the layer + // won't individually composite with the background. + ctx.globalCompositeOperation = 'screen'; + + ctx.fillStyle = 'rgba(255, 0, 0, 1)'; + ctx.fillRect(10, 25, 40, 50); + ctx.fillStyle = 'rgba(0, 255, 0, 1)'; + ctx.fillRect(30, 5, 50, 40); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html deleted file mode 100644 index b91a2ae8b5..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html +++ /dev/null @@ -1,31 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.no-global-states</title> -<h1>2d.layer.global-states.no-global-states</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - // No global states. - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html deleted file mode 100644 index c8a9815381..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.no-global-states-expected.html"> -<title>Canvas test: 2d.layer.global-states.no-global-states</title> -<h1>2d.layer.global-states.no-global-states</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - // No global states. - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html deleted file mode 100644 index db03a3fd0c..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.no-global-states-expected.html"> -<title>Canvas test: 2d.layer.global-states.no-global-states</title> -<h1>2d.layer.global-states.no-global-states</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - // No global states. - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html deleted file mode 100644 index 835e9d420a..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.global-states.shadow</title> -<h1>2d.layer.global-states.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - canvas2 = document.createElement("canvas"); - ctx2 = canvas2.getContext("2d"); - - ctx2.globalCompositeOperation = 'screen'; - ctx2.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx2.fillRect(50, 50, 75, 50); - ctx2.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx2.fillRect(70, 70, 75, 50); - - ctx.drawImage(canvas2, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html deleted file mode 100644 index ad60e87fb1..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.layer.global-states.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.shadow</title> -<h1>2d.layer.global-states.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const outputCanvas = document.getElementById("canvas"); - outputCanvas.getContext('2d').drawImage(canvas, 0, 0); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html deleted file mode 100644 index 1fc35fd33a..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<html class="reftest-wait"> -<link rel="match" href="2d.layer.global-states.shadow-expected.html"> -<title>Canvas test: 2d.layer.global-states.shadow</title> -<h1>2d.layer.global-states.shadow</h1> -<p class="desc">Checks that layers correctly use global render states.</p> -<canvas id="canvas" width="200" height="200"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script id='myWorker' type='text/worker'> - self.onmessage = function(e) { - const canvas = new OffscreenCanvas(200, 200); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'rgba(0, 0, 255, 1)'; - - var circle = new Path2D(); - circle.arc(90, 90, 45, 0, 2 * Math.PI); - ctx.fill(circle); - - ctx.shadowOffsetX = -10; - ctx.shadowOffsetY = 10; - ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; - ctx.shadowBlur = 3; - - ctx.beginLayer(); - - // Enable compositing in the layer to validate that draw calls in the layer - // won't individually composite with the background. - ctx.globalCompositeOperation = 'screen'; - - ctx.fillStyle = 'rgba(225, 0, 0, 1)'; - ctx.fillRect(50, 50, 75, 50); - ctx.fillStyle = 'rgba(0, 255, 0, 1)'; - ctx.fillRect(70, 70, 75, 50); - - ctx.endLayer(); - - const bitmap = canvas.transferToImageBitmap(); - self.postMessage(bitmap, bitmap); - }; -</script> -<script> - const blob = new Blob([document.getElementById('myWorker').textContent]); - const worker = new Worker(URL.createObjectURL(blob)); - worker.addEventListener('message', msg => { - const outputCtx = document.getElementById("canvas").getContext('2d'); - outputCtx.drawImage(msg.data, 0, 0); - document.documentElement.classList.remove("reftest-wait"); - }); - worker.postMessage(null); -</script> -</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html new file mode 100644 index 0000000000..02a8915c0b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html @@ -0,0 +1,910 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.layer.globalCompositeOperation</title> +<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1> +<p class="desc">Checks that layers work with all globalCompositeOperation values.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(7, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>source-over</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-over'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>source-in</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>source-atop</div> + <canvas id="canvas2" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas2"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-atop'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>destination-over</div> + <canvas id="canvas3" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas3"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-over'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>destination-in</div> + <canvas id="canvas4" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas4"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-in'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>destination-out</div> + <canvas id="canvas5" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas5"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-out'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>destination-atop</div> + <canvas id="canvas6" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas6"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-atop'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>lighter</div> + <canvas id="canvas7" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas7"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'lighter'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>copy</div> + <canvas id="canvas8" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas8"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>xor</div> + <canvas id="canvas9" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas9"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'xor'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>multiply</div> + <canvas id="canvas10" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas10"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>screen</div> + <canvas id="canvas11" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas11"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'screen'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>overlay</div> + <canvas id="canvas12" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas12"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'overlay'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>darken</div> + <canvas id="canvas13" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas13"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'darken'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>lighten</div> + <canvas id="canvas14" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas14"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'lighten'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>color-dodge</div> + <canvas id="canvas15" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas15"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color-dodge'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>color-burn</div> + <canvas id="canvas16" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas16"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color-burn'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>hard-light</div> + <canvas id="canvas17" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas17"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'hard-light'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>soft-light</div> + <canvas id="canvas18" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas18"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'soft-light'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>difference</div> + <canvas id="canvas19" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas19"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'difference'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>exclusion</div> + <canvas id="canvas20" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas20"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'exclusion'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>hue</div> + <canvas id="canvas21" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas21"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'hue'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>saturation</div> + <canvas id="canvas22" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas22"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'saturation'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>color</div> + <canvas id="canvas23" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas23"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +<span> + <div>luminosity</div> + <canvas id="canvas24" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas24"); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'luminosity'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + const canvas2 = document.createElement("canvas"); + const ctx2 = canvas2.getContext("2d"); + + ctx2.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx2.fillRect(10, 25, 25, 20); + ctx2.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx2.fillRect(25, 10, 20, 25); + + ctx.imageSmoothingEnabled = false; + ctx.drawImage(canvas2, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html new file mode 100644 index 0000000000..ab9bc4270b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html @@ -0,0 +1,961 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.layer.globalCompositeOperation-expected.html"> +<title>Canvas test: 2d.layer.globalCompositeOperation</title> +<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1> +<p class="desc">Checks that layers work with all globalCompositeOperation values.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(7, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>source-over</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-over'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas0"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>source-in</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas1"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>source-atop</div> + <canvas id="canvas2" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-atop'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas2"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>destination-over</div> + <canvas id="canvas3" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-over'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas3"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>destination-in</div> + <canvas id="canvas4" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-in'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas4"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>destination-out</div> + <canvas id="canvas5" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-out'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas5"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>destination-atop</div> + <canvas id="canvas6" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-atop'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas6"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>lighter</div> + <canvas id="canvas7" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'lighter'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas7"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>copy</div> + <canvas id="canvas8" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas8"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>xor</div> + <canvas id="canvas9" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'xor'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas9"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>multiply</div> + <canvas id="canvas10" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas10"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>screen</div> + <canvas id="canvas11" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'screen'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas11"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>overlay</div> + <canvas id="canvas12" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'overlay'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas12"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>darken</div> + <canvas id="canvas13" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'darken'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas13"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>lighten</div> + <canvas id="canvas14" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'lighten'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas14"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>color-dodge</div> + <canvas id="canvas15" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color-dodge'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas15"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>color-burn</div> + <canvas id="canvas16" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color-burn'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas16"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>hard-light</div> + <canvas id="canvas17" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'hard-light'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas17"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>soft-light</div> + <canvas id="canvas18" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'soft-light'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas18"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>difference</div> + <canvas id="canvas19" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'difference'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas19"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>exclusion</div> + <canvas id="canvas20" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'exclusion'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas20"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>hue</div> + <canvas id="canvas21" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'hue'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas21"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>saturation</div> + <canvas id="canvas22" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'saturation'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas22"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>color</div> + <canvas id="canvas23" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas23"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +<span> + <div>luminosity</div> + <canvas id="canvas24" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'luminosity'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const outputCanvas = document.getElementById("canvas24"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html new file mode 100644 index 0000000000..9a403140fc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html @@ -0,0 +1,1314 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<html class="reftest-wait"> +<link rel="match" href="2d.layer.globalCompositeOperation-expected.html"> +<title>Canvas test: 2d.layer.globalCompositeOperation</title> +<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1> +<p class="desc">Checks that layers work with all globalCompositeOperation values.</p> +<script>pending_tests = 25;</script> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(7, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>source-over</div> + <canvas id="canvas0" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker0" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-over'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker0').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas0'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>source-in</div> + <canvas id="canvas1" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker1" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-in'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker1').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas1'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>source-atop</div> + <canvas id="canvas2" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker2" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'source-atop'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker2').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas2'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>destination-over</div> + <canvas id="canvas3" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker3" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-over'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker3').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas3'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>destination-in</div> + <canvas id="canvas4" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker4" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-in'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker4').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas4'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>destination-out</div> + <canvas id="canvas5" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker5" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-out'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker5').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas5'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>destination-atop</div> + <canvas id="canvas6" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker6" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'destination-atop'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker6').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas6'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>lighter</div> + <canvas id="canvas7" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker7" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'lighter'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker7').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas7'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>copy</div> + <canvas id="canvas8" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker8" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'copy'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker8').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas8'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>xor</div> + <canvas id="canvas9" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker9" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'xor'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker9').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas9'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>multiply</div> + <canvas id="canvas10" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker10" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'multiply'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker10').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas10'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>screen</div> + <canvas id="canvas11" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker11" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'screen'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker11').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas11'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>overlay</div> + <canvas id="canvas12" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker12" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'overlay'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker12').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas12'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>darken</div> + <canvas id="canvas13" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker13" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'darken'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker13').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas13'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>lighten</div> + <canvas id="canvas14" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker14" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'lighten'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker14').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas14'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>color-dodge</div> + <canvas id="canvas15" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker15" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color-dodge'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker15').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas15'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>color-burn</div> + <canvas id="canvas16" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker16" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color-burn'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker16').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas16'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>hard-light</div> + <canvas id="canvas17" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker17" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'hard-light'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker17').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas17'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>soft-light</div> + <canvas id="canvas18" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker18" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'soft-light'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker18').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas18'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>difference</div> + <canvas id="canvas19" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker19" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'difference'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker19').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas19'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>exclusion</div> + <canvas id="canvas20" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker20" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'exclusion'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker20').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas20'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>hue</div> + <canvas id="canvas21" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker21" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'hue'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker21').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas21'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>saturation</div> + <canvas id="canvas22" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker22" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'saturation'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker22').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas22'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>color</div> + <canvas id="canvas23" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker23" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'color'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker23').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas23'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +<span> + <div>luminosity</div> + <canvas id="canvas24" width="90" height="90" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script id="myWorker24" type="text/worker"> + self.onmessage = function(e) { + const canvas = new OffscreenCanvas(90, 90); + const ctx = canvas.getContext('2d'); + + ctx.translate(50, 50); + ctx.scale(2, 2); + ctx.rotate(Math.PI); + ctx.translate(-25, -25); + + ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; + ctx.fillRect(15, 15, 25, 25); + + ctx.globalAlpha = 0.75; + ctx.globalCompositeOperation = 'luminosity'; + ctx.shadowOffsetX = 7; + ctx.shadowOffsetY = 7; + ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; + + ctx.beginLayer(); + + ctx.fillStyle = 'rgba(204, 0, 0, 1)'; + ctx.fillRect(10, 25, 25, 20); + ctx.fillStyle = 'rgba(0, 204, 0, 1)'; + ctx.fillRect(25, 10, 20, 25); + + ctx.endLayer(); + + const bitmap = canvas.transferToImageBitmap(); + self.postMessage(bitmap, bitmap); + }; + </script> + <script type="module"> + const blob = new Blob([document.getElementById('myWorker24').textContent]); + const worker = new Worker(URL.createObjectURL(blob)); + worker.addEventListener('message', msg => { + const outputCanvas = document.getElementById('canvas24'); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(msg.data, 0, 0); + if (--pending_tests == 0) { + document.documentElement.classList.remove('reftest-wait'); + } + }); + worker.postMessage(null); + </script> +</span> + +</div> +</html> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html index c0b11aa611..e588e48b5f 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Raises exception on beginLayer() + reset() + endLayer()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -25,7 +19,6 @@ t.step(function() { ctx.reset(); ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on beginLayer() + reset() + endLayer()."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js index 1c147d6f34..cab1b9d92d 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Raises exception on beginLayer() + reset() + endLayer()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -21,6 +15,5 @@ t.step(function() { ctx.reset(); ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on beginLayer() + reset() + endLayer()."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html index 022532b329..30a981f75a 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Raises exception on beginLayer() + restore()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -24,7 +18,6 @@ t.step(function() { ctx.beginLayer(); ctx.restore(); }); - t.done(); -}); +}, "Raises exception on beginLayer() + restore()."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js index 1aa86635e6..287f8eb004 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Raises exception on beginLayer() + restore()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -20,6 +14,5 @@ t.step(function() { ctx.beginLayer(); ctx.restore(); }); - t.done(); -}); +}, "Raises exception on beginLayer() + restore()."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html index 26dd0eee4b..04992b115e 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Raises exception on beginLayer() + save() + endLayer()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -25,7 +19,6 @@ t.step(function() { ctx.save(); ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on beginLayer() + save() + endLayer()."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js index 613921c67c..402bf5e0fd 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Raises exception on beginLayer() + save() + endLayer()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -21,6 +15,5 @@ t.step(function() { ctx.save(); ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on beginLayer() + save() + endLayer()."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html index 440249980a..5b7f8a851e 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html @@ -10,20 +10,13 @@ <script> -var t = async_test("Raises exception on lone endLayer calls."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on lone endLayer calls."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js index b2ba231b9c..2229aa9628 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js @@ -6,19 +6,12 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Raises exception on lone endLayer calls."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on lone endLayer calls."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html index c2b09961ac..2a6c9b1ccb 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Raises exception on save() + beginLayer() + restore()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -25,7 +19,6 @@ t.step(function() { ctx.beginLayer(); ctx.restore(); }); - t.done(); -}); +}, "Raises exception on save() + beginLayer() + restore()."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js index d155379fcb..711280a6de 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Raises exception on save() + beginLayer() + restore()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -21,6 +15,5 @@ t.step(function() { ctx.beginLayer(); ctx.restore(); }); - t.done(); -}); +}, "Raises exception on save() + beginLayer() + restore()."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html index 01b62d1e85..32ca134663 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html @@ -10,13 +10,7 @@ <script> -var t = async_test("Raises exception on save() + endLayer()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -24,7 +18,6 @@ t.step(function() { ctx.save(); ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on save() + endLayer()."); </script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js index 353c1b00cd..af3667e50a 100644 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js @@ -6,13 +6,7 @@ importScripts("/resources/testharness.js"); importScripts("/html/canvas/resources/canvas-tests.js"); -var t = async_test("Raises exception on save() + endLayer()."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - +test(t => { var canvas = new OffscreenCanvas(100, 50); var ctx = canvas.getContext('2d'); @@ -20,6 +14,5 @@ t.step(function() { ctx.save(); ctx.endLayer(); }); - t.done(); -}); +}, "Raises exception on save() + endLayer()."); done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.html deleted file mode 100644 index 0b3854c31d..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>OffscreenCanvas test: 2d.layer.malformed-operations-with-promises.convertToBlob</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> - -<h1>2d.layer.malformed-operations-with-promises.convertToBlob</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<script> -promise_test(async t => { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - await canvas.convertToBlob(); - // Make sure the exception isn't caused by calling the function twice. - await canvas.convertToBlob(); - // Calling again inside a layer should throw. - ctx.beginLayer(); - await promise_rejects_dom(t, 'InvalidStateError', canvas.convertToBlob()); - -}, "Check that exceptions are thrown for operations that are malformed while layers are open."); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.worker.js deleted file mode 100644 index 8361e19108..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.worker.js +++ /dev/null @@ -1,21 +0,0 @@ -// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -// OffscreenCanvas test in a worker:2d.layer.malformed-operations-with-promises.convertToBlob -// Description:Check that exceptions are thrown for operations that are malformed while layers are open. -// Note: - -importScripts("/resources/testharness.js"); -importScripts("/html/canvas/resources/canvas-tests.js"); - -promise_test(async t => { - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - await canvas.convertToBlob(); - // Make sure the exception isn't caused by calling the function twice. - await canvas.convertToBlob(); - // Calling again inside a layer should throw. - ctx.beginLayer(); - await promise_rejects_dom(t, 'InvalidStateError', canvas.convertToBlob()); -}, "Check that exceptions are thrown for operations that are malformed while layers are open."); -done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html deleted file mode 100644 index 085554d9f5..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>OffscreenCanvas test: 2d.layer.malformed-operations-with-promises.createImageBitmap</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> - -<h1>2d.layer.malformed-operations-with-promises.createImageBitmap</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<script> -promise_test(async t => { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - await createImageBitmap(canvas); - // Make sure the exception isn't caused by calling the function twice. - await createImageBitmap(canvas); - // Calling again inside a layer should throw. - ctx.beginLayer(); - await promise_rejects_dom(t, 'InvalidStateError', createImageBitmap(canvas)); - -}, "Check that exceptions are thrown for operations that are malformed while layers are open."); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.worker.js deleted file mode 100644 index d64f693864..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.worker.js +++ /dev/null @@ -1,21 +0,0 @@ -// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -// OffscreenCanvas test in a worker:2d.layer.malformed-operations-with-promises.createImageBitmap -// Description:Check that exceptions are thrown for operations that are malformed while layers are open. -// Note: - -importScripts("/resources/testharness.js"); -importScripts("/html/canvas/resources/canvas-tests.js"); - -promise_test(async t => { - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - await createImageBitmap(canvas); - // Make sure the exception isn't caused by calling the function twice. - await createImageBitmap(canvas); - // Calling again inside a layer should throw. - ctx.beginLayer(); - await promise_rejects_dom(t, 'InvalidStateError', createImageBitmap(canvas)); -}, "Check that exceptions are thrown for operations that are malformed while layers are open."); -done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.html new file mode 100644 index 0000000000..7b8f9b0943 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>OffscreenCanvas test: 2d.layer.malformed-operations-with-promises</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> + +<script> + +promise_test(async t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + await canvas.convertToBlob(); + // Make sure the exception isn't caused by calling the function twice. + await canvas.convertToBlob(); + // Calling again inside a layer should throw. + ctx.beginLayer(); + await promise_rejects_dom(t, 'InvalidStateError', + canvas.convertToBlob()); +}, "Throws if convertToBlob is called while layers are open."); + +promise_test(async t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + await createImageBitmap(canvas); + // Make sure the exception isn't caused by calling the function twice. + await createImageBitmap(canvas); + // Calling again inside a layer should throw. + ctx.beginLayer(); + await promise_rejects_dom(t, 'InvalidStateError', + createImageBitmap(canvas)); +}, "Throws if createImageBitmap is called while layers are open."); + +</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.worker.js new file mode 100644 index 0000000000..693901b648 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.worker.js @@ -0,0 +1,37 @@ +// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. +// OffscreenCanvas test in a worker:2d.layer.malformed-operations-with-promises +// Description: +// Note: + +importScripts("/resources/testharness.js"); +importScripts("/html/canvas/resources/canvas-tests.js"); + +promise_test(async t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + await canvas.convertToBlob(); + // Make sure the exception isn't caused by calling the function twice. + await canvas.convertToBlob(); + // Calling again inside a layer should throw. + ctx.beginLayer(); + await promise_rejects_dom(t, 'InvalidStateError', + canvas.convertToBlob()); +}, "Throws if convertToBlob is called while layers are open."); + +promise_test(async t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + await createImageBitmap(canvas); + // Make sure the exception isn't caused by calling the function twice. + await createImageBitmap(canvas); + // Calling again inside a layer should throw. + ctx.beginLayer(); + await promise_rejects_dom(t, 'InvalidStateError', + createImageBitmap(canvas)); +}, "Throws if createImageBitmap is called while layers are open."); + +done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.html deleted file mode 100644 index a206e64ceb..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>OffscreenCanvas test: 2d.layer.malformed-operations.createPattern</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> - -<h1>2d.layer.malformed-operations.createPattern</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - ctx.createPattern(canvas, 'repeat'); - // Make sure the exception isn't caused by calling the function twice. - ctx.createPattern(canvas, 'repeat'); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx.createPattern(canvas, 'repeat')); - t.done(); - -}); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.worker.js deleted file mode 100644 index bcb42cba87..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.worker.js +++ /dev/null @@ -1,29 +0,0 @@ -// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -// OffscreenCanvas test in a worker:2d.layer.malformed-operations.createPattern -// Description:Check that exceptions are thrown for operations that are malformed while layers are open. -// Note: - -importScripts("/resources/testharness.js"); -importScripts("/html/canvas/resources/canvas-tests.js"); - -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - ctx.createPattern(canvas, 'repeat'); - // Make sure the exception isn't caused by calling the function twice. - ctx.createPattern(canvas, 'repeat'); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx.createPattern(canvas, 'repeat')); - t.done(); -}); -done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.html deleted file mode 100644 index e6a9872100..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.html +++ /dev/null @@ -1,36 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>OffscreenCanvas test: 2d.layer.malformed-operations.drawImage</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> - -<h1>2d.layer.malformed-operations.drawImage</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - const canvas2 = new OffscreenCanvas(200, 200); - const ctx2 = canvas2.getContext('2d'); - // Shouldn't throw on its own. - ctx2.drawImage(canvas, 0, 0); - // Make sure the exception isn't caused by calling the function twice. - ctx2.drawImage(canvas, 0, 0); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx2.drawImage(canvas, 0, 0)); - t.done(); - -}); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.worker.js deleted file mode 100644 index b66cdee62e..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.worker.js +++ /dev/null @@ -1,31 +0,0 @@ -// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -// OffscreenCanvas test in a worker:2d.layer.malformed-operations.drawImage -// Description:Check that exceptions are thrown for operations that are malformed while layers are open. -// Note: - -importScripts("/resources/testharness.js"); -importScripts("/html/canvas/resources/canvas-tests.js"); - -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - const canvas2 = new OffscreenCanvas(200, 200); - const ctx2 = canvas2.getContext('2d'); - // Shouldn't throw on its own. - ctx2.drawImage(canvas, 0, 0); - // Make sure the exception isn't caused by calling the function twice. - ctx2.drawImage(canvas, 0, 0); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx2.drawImage(canvas, 0, 0)); - t.done(); -}); -done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.html deleted file mode 100644 index 87bc8c6ede..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>OffscreenCanvas test: 2d.layer.malformed-operations.getImageData</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> - -<h1>2d.layer.malformed-operations.getImageData</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - ctx.getImageData(0, 0, 200, 200); - // Make sure the exception isn't caused by calling the function twice. - ctx.getImageData(0, 0, 200, 200); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx.getImageData(0, 0, 200, 200)); - t.done(); - -}); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.worker.js deleted file mode 100644 index 6a1a16fccb..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.worker.js +++ /dev/null @@ -1,29 +0,0 @@ -// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -// OffscreenCanvas test in a worker:2d.layer.malformed-operations.getImageData -// Description:Check that exceptions are thrown for operations that are malformed while layers are open. -// Note: - -importScripts("/resources/testharness.js"); -importScripts("/html/canvas/resources/canvas-tests.js"); - -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - ctx.getImageData(0, 0, 200, 200); - // Make sure the exception isn't caused by calling the function twice. - ctx.getImageData(0, 0, 200, 200); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx.getImageData(0, 0, 200, 200)); - t.done(); -}); -done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.html new file mode 100644 index 0000000000..a810665faf --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>OffscreenCanvas test: 2d.layer.malformed-operations</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> + +<script> + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + ctx.createPattern(canvas, 'repeat'); + // Make sure the exception isn't caused by calling the function twice. + ctx.createPattern(canvas, 'repeat'); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx.createPattern(canvas, 'repeat')); +}, "Throws if createPattern is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + const canvas2 = new OffscreenCanvas(200, 200); + const ctx2 = canvas2.getContext('2d'); + // Shouldn't throw on its own. + ctx2.drawImage(canvas, 0, 0); + // Make sure the exception isn't caused by calling the function twice. + ctx2.drawImage(canvas, 0, 0); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx2.drawImage(canvas, 0, 0)); +}, "Throws if drawImage is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + ctx.getImageData(0, 0, 200, 200); + // Make sure the exception isn't caused by calling the function twice. + ctx.getImageData(0, 0, 200, 200); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx.getImageData(0, 0, 200, 200)); +}, "Throws if getImageData is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + const canvas2 = new OffscreenCanvas(200, 200); + const ctx2 = canvas2.getContext('2d') + const data = ctx2.getImageData(0, 0, 1, 1); + // Shouldn't throw on its own. + ctx.putImageData(data, 0, 0); + // Make sure the exception isn't caused by calling the function twice. + ctx.putImageData(data, 0, 0); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx.putImageData(data, 0, 0)); +}, "Throws if putImageData is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + canvas.transferToImageBitmap(); + // Make sure the exception isn't caused by calling the function twice. + canvas.transferToImageBitmap(); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => canvas.transferToImageBitmap()); +}, "Throws if transferToImageBitmap is called while layers are open."); + +</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.html deleted file mode 100644 index e8059076bb..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.html +++ /dev/null @@ -1,37 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>OffscreenCanvas test: 2d.layer.malformed-operations.putImageData</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> - -<h1>2d.layer.malformed-operations.putImageData</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - const canvas2 = new OffscreenCanvas(200, 200); - const ctx2 = canvas2.getContext('2d') - const data = ctx2.getImageData(0, 0, 1, 1); - // Shouldn't throw on its own. - ctx.putImageData(data, 0, 0); - // Make sure the exception isn't caused by calling the function twice. - ctx.putImageData(data, 0, 0); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx.putImageData(data, 0, 0)); - t.done(); - -}); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.worker.js deleted file mode 100644 index 8810c3a73c..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.worker.js +++ /dev/null @@ -1,32 +0,0 @@ -// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -// OffscreenCanvas test in a worker:2d.layer.malformed-operations.putImageData -// Description:Check that exceptions are thrown for operations that are malformed while layers are open. -// Note: - -importScripts("/resources/testharness.js"); -importScripts("/html/canvas/resources/canvas-tests.js"); - -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - const canvas2 = new OffscreenCanvas(200, 200); - const ctx2 = canvas2.getContext('2d') - const data = ctx2.getImageData(0, 0, 1, 1); - // Shouldn't throw on its own. - ctx.putImageData(data, 0, 0); - // Make sure the exception isn't caused by calling the function twice. - ctx.putImageData(data, 0, 0); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => ctx.putImageData(data, 0, 0)); - t.done(); -}); -done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.html deleted file mode 100644 index 79c216421f..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>OffscreenCanvas test: 2d.layer.malformed-operations.transferToImageBitmap</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> - -<h1>2d.layer.malformed-operations.transferToImageBitmap</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - canvas.transferToImageBitmap(); - // Make sure the exception isn't caused by calling the function twice. - canvas.transferToImageBitmap(); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => canvas.transferToImageBitmap()); - t.done(); - -}); -</script> diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.worker.js deleted file mode 100644 index be0b43665a..0000000000 --- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.worker.js +++ /dev/null @@ -1,29 +0,0 @@ -// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -// OffscreenCanvas test in a worker:2d.layer.malformed-operations.transferToImageBitmap -// Description:Check that exceptions are thrown for operations that are malformed while layers are open. -// Note: - -importScripts("/resources/testharness.js"); -importScripts("/html/canvas/resources/canvas-tests.js"); - -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -var t_pass = t.done.bind(t); -var t_fail = t.step_func(function(reason) { - throw reason; -}); -t.step(function() { - - var canvas = new OffscreenCanvas(200, 200); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - canvas.transferToImageBitmap(); - // Make sure the exception isn't caused by calling the function twice. - canvas.transferToImageBitmap(); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => canvas.transferToImageBitmap()); - t.done(); -}); -done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.worker.js new file mode 100644 index 0000000000..5851fcfbc6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.worker.js @@ -0,0 +1,84 @@ +// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. +// OffscreenCanvas test in a worker:2d.layer.malformed-operations +// Description: +// Note: + +importScripts("/resources/testharness.js"); +importScripts("/html/canvas/resources/canvas-tests.js"); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + ctx.createPattern(canvas, 'repeat'); + // Make sure the exception isn't caused by calling the function twice. + ctx.createPattern(canvas, 'repeat'); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx.createPattern(canvas, 'repeat')); +}, "Throws if createPattern is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + const canvas2 = new OffscreenCanvas(200, 200); + const ctx2 = canvas2.getContext('2d'); + // Shouldn't throw on its own. + ctx2.drawImage(canvas, 0, 0); + // Make sure the exception isn't caused by calling the function twice. + ctx2.drawImage(canvas, 0, 0); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx2.drawImage(canvas, 0, 0)); +}, "Throws if drawImage is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + ctx.getImageData(0, 0, 200, 200); + // Make sure the exception isn't caused by calling the function twice. + ctx.getImageData(0, 0, 200, 200); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx.getImageData(0, 0, 200, 200)); +}, "Throws if getImageData is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + const canvas2 = new OffscreenCanvas(200, 200); + const ctx2 = canvas2.getContext('2d') + const data = ctx2.getImageData(0, 0, 1, 1); + // Shouldn't throw on its own. + ctx.putImageData(data, 0, 0); + // Make sure the exception isn't caused by calling the function twice. + ctx.putImageData(data, 0, 0); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => ctx.putImageData(data, 0, 0)); +}, "Throws if putImageData is called while layers are open."); + +test(t => { + const canvas = new OffscreenCanvas(200, 200); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + canvas.transferToImageBitmap(); + // Make sure the exception isn't caused by calling the function twice. + canvas.transferToImageBitmap(); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => canvas.transferToImageBitmap()); +}, "Throws if transferToImageBitmap is called while layers are open."); + +done(); diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/WEB_FEATURES.yml b/testing/web-platform/tests/html/canvas/offscreen/text/WEB_FEATURES.yml new file mode 100644 index 0000000000..1d9e4bab82 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/offscreen/text/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: canvas-text-baselines + files: + - 2d.text.measure.baselines.* |