diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
| commit | 8dd16259287f58f9273002717ec4d27e97127719 (patch) | |
| tree | 3863e62a53829a84037444beab3abd4ed9dfc7d0 /testing/web-platform/tests/html/canvas/element/layers | |
| parent | Releasing progress-linux version 126.0.1-1~progress7.99u1. (diff) | |
| download | firefox-8dd16259287f58f9273002717ec4d27e97127719.tar.xz firefox-8dd16259287f58f9273002717ec4d27e97127719.zip | |
Merging upstream version 127.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/layers')
132 files changed, 7438 insertions, 2201 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html index 658d7e0991..573d300055 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html @@ -16,8 +16,9 @@ <ul id="d"></ul> <script> -var t = async_test("Checks beginLayer works for different option parameter values"); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); ctx.beginLayer(); ctx.endLayer(); ctx.beginLayer(null); ctx.endLayer(); @@ -45,6 +46,6 @@ _addTest(function(canvas, ctx) { ctx.beginLayer({filter: true}); ctx.endLayer(); ctx.beginLayer({filter: false}); ctx.endLayer(); -}); +}, "Checks beginLayer works for different option parameter values"); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html index 7a69c59527..d669b3c522 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.ctm.getTransform.html @@ -16,8 +16,9 @@ <ul id="d"></ul> <script> -var t = async_test("Tests getTransform inside layers."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); ctx.translate(10, 20); ctx.beginLayer(); @@ -26,6 +27,6 @@ _addTest(function(canvas, ctx) { assert_array_equals([m.a, m.b, m.c, m.d, m.e, m.f], [2, 0, 0, 3, 10, 20]); ctx.endLayer(); -}); +}, "Tests getTransform inside layers."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html index 7ab2080fca..facffd74e9 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html @@ -16,8 +16,9 @@ <ul id="d"></ul> <script> -var t = async_test("Checks that the context state is left unchanged if beginLayer throws."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); // Get `beginLayer` to throw while parsing the filter. assert_throws_js(TypeError, @@ -26,6 +27,6 @@ _addTest(function(canvas, ctx) { // `beginLayer` shouldn't have opened the layer, so `endLayer` should throw. assert_throws_dom("InvalidStateError", () => ctx.endLayer()); -}); +}, "Checks that the context state is left unchanged if beginLayer throws."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html deleted file mode 100644 index 0666e3098a..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html deleted file mode 100644 index 8a45027588..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.alpha.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html deleted file mode 100644 index 8e15a2b936..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html +++ /dev/null @@ -1,35 +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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html deleted file mode 100644 index f7b633b35f..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html deleted file mode 100644 index c8c6d433bc..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html +++ /dev/null @@ -1,39 +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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html deleted file mode 100644 index 951049e638..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.alpha.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html deleted file mode 100644 index 1ac6a2cbfe..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html +++ /dev/null @@ -1,35 +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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html deleted file mode 100644 index 0ae93871f5..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html deleted file mode 100644 index 92b8a0d7a7..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html +++ /dev/null @@ -1,39 +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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html deleted file mode 100644 index 829796acbf..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html +++ /dev/null @@ -1,34 +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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html deleted file mode 100644 index 6f764c5001..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.alpha.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html deleted file mode 100644 index a325302b3b..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html deleted file mode 100644 index 33fdf46a28..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html deleted file mode 100644 index 7d4d9ae4b5..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html +++ /dev/null @@ -1,34 +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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html new file mode 100644 index 0000000000..91decadfe2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html new file mode 100644 index 0000000000..d6b28315f2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html deleted file mode 100644 index 6f969074f9..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html deleted file mode 100644 index 51926d76d8..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html new file mode 100644 index 0000000000..e0b8e45b51 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html new file mode 100644 index 0000000000..f3891369c9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html deleted file mode 100644 index ed7669c4cf..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html deleted file mode 100644 index 898d149924..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html +++ /dev/null @@ -1,34 +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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html new file mode 100644 index 0000000000..195905e16b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html new file mode 100644 index 0000000000..905fd7637b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html deleted file mode 100644 index b687c27f47..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html deleted file mode 100644 index c563a57b76..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html new file mode 100644 index 0000000000..df008cf12e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html new file mode 100644 index 0000000000..99e1d95443 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html new file mode 100644 index 0000000000..1720f20589 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html new file mode 100644 index 0000000000..87cd91bb12 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html new file mode 100644 index 0000000000..e8d01065c1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html new file mode 100644 index 0000000000..5c7fa379f1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.copy.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html deleted file mode 100644 index f304700feb..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html deleted file mode 100644 index 7c91ce4229..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.alpha.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html deleted file mode 100644 index 98ea67e9e9..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html +++ /dev/null @@ -1,39 +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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html deleted file mode 100644 index ccadfb624b..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html deleted file mode 100644 index 8e0d98648e..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.alpha.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html deleted file mode 100644 index 29041d4933..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html +++ /dev/null @@ -1,39 +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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html deleted file mode 100644 index b2907f02aa..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html deleted file mode 100644 index 85718cffba..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.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.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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html deleted file mode 100644 index 169baee29b..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.alpha.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html deleted file mode 100644 index aaeb167ccf..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html deleted file mode 100644 index f81dcf72dc..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html deleted file mode 100644 index 31628812c2..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html new file mode 100644 index 0000000000..188d5ea98b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html new file mode 100644 index 0000000000..849a0c997e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html deleted file mode 100644 index 91f3725f8e..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html deleted file mode 100644 index e54cf06d0d..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html new file mode 100644 index 0000000000..34ded8fef5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html new file mode 100644 index 0000000000..78407dd459 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html deleted file mode 100644 index 97e85a1593..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html deleted file mode 100644 index d7e365422f..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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.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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html new file mode 100644 index 0000000000..e3c36d3c0e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html new file mode 100644 index 0000000000..466513864e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html deleted file mode 100644 index 4716bb2760..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html deleted file mode 100644 index e5c7698634..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html new file mode 100644 index 0000000000..bc7cfd314e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html new file mode 100644 index 0000000000..f304e9c8e8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html new file mode 100644 index 0000000000..ac5c7303a8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html new file mode 100644 index 0000000000..3158a2fff3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html new file mode 100644 index 0000000000..839ab13add --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html new file mode 100644 index 0000000000..7c090165f5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.copy.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html new file mode 100644 index 0000000000..d2b2d806c4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html new file mode 100644 index 0000000000..afc4ebbd40 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html new file mode 100644 index 0000000000..93caac12fc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html new file mode 100644 index 0000000000..6849a2f40d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.filter.no-global-states.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html deleted file mode 100644 index 68f4d5004a..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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. - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html deleted file mode 100644 index 13ba2dd4cd..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.filter.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html deleted file mode 100644 index 9efcd9d4f7..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html new file mode 100644 index 0000000000..f0fd2d19e3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html @@ -0,0 +1,77 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html new file mode 100644 index 0000000000..7ab850023e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html @@ -0,0 +1,81 @@ +<!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 = 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. + + 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(); + </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. + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html new file mode 100644 index 0000000000..9da1936c5d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html @@ -0,0 +1,83 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/element/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/element/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/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html new file mode 100644 index 0000000000..00ace7c54d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html @@ -0,0 +1,87 @@ +<!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 = 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; + + 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(); + </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; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html deleted file mode 100644 index b91a2ae8b5..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.no-global-states.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html deleted file mode 100644 index d561be2341..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html +++ /dev/null @@ -1,34 +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 = 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. - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html deleted file mode 100644 index 835e9d420a..0000000000 --- a/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.global-states.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html deleted file mode 100644 index 209316164c..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.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.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 = 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; - - 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(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html new file mode 100644 index 0000000000..02a8915c0b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/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/element/layers/2d.layer.globalCompositeOperation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html new file mode 100644 index 0000000000..32809d852c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html @@ -0,0 +1,861 @@ +<!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 = 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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </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)'; + + 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(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html index 74e05e1e48..1544bbcb82 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html @@ -16,8 +16,9 @@ <ul id="d"></ul> <script> -var t = async_test("Raises exception on beginLayer() + reset() + endLayer()."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.beginLayer(); @@ -25,6 +26,6 @@ _addTest(function(canvas, ctx) { ctx.endLayer(); }); -}); +}, "Raises exception on beginLayer() + reset() + endLayer()."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html index 1979cb6c73..3d33fbf7fb 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html @@ -16,14 +16,15 @@ <ul id="d"></ul> <script> -var t = async_test("Raises exception on beginLayer() + restore()."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.beginLayer(); ctx.restore(); }); -}); +}, "Raises exception on beginLayer() + restore()."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html index c635ac75b9..e48f806f32 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html @@ -16,8 +16,9 @@ <ul id="d"></ul> <script> -var t = async_test("Raises exception on beginLayer() + save() + endLayer()."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.beginLayer(); @@ -25,6 +26,6 @@ _addTest(function(canvas, ctx) { ctx.endLayer(); }); -}); +}, "Raises exception on beginLayer() + save() + endLayer()."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html index c39a352d65..2950de37bc 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html @@ -16,13 +16,14 @@ <ul id="d"></ul> <script> -var t = async_test("Raises exception on lone endLayer calls."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.endLayer(); }); -}); +}, "Raises exception on lone endLayer calls."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html index e2d4d56589..ff21610074 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html @@ -16,8 +16,9 @@ <ul id="d"></ul> <script> -var t = async_test("Raises exception on save() + beginLayer() + restore()."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.save(); @@ -25,6 +26,6 @@ _addTest(function(canvas, ctx) { ctx.restore(); }); -}); +}, "Raises exception on save() + beginLayer() + restore()."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html index f4308e1191..5c6da4b5bc 100644 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html @@ -16,14 +16,15 @@ <ul id="d"></ul> <script> -var t = async_test("Raises exception on save() + endLayer()."); -_addTest(function(canvas, ctx) { +test(t => { + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); assert_throws_dom("INVALID_STATE_ERR", function() { ctx.save(); ctx.endLayer(); }); -}); +}, "Raises exception on save() + endLayer()."); </script> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html deleted file mode 100644 index f1204aa61b..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.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.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> -<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> -<body class="show_output"> - -<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> - - -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas> - -<ul id="d"></ul> -<script> -promise_test(async t => { - - var canvas = document.getElementById('c'); - 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/element/layers/2d.layer.malformed-operations-with-promises.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.html new file mode 100644 index 0000000000..8e81bffdfb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas 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> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> + +<script> + +promise_test(async t => { + const canvas = document.createElement('canvas'); + 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."); + +promise_test(async t => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + await new Promise(resolve => canvas.toBlob(resolve)); + // Make sure the exception isn't caused by calling the function twice. + await new Promise(resolve => canvas.toBlob(resolve)); + // Calling again inside a layer should throw. + ctx.beginLayer(); + await promise_rejects_dom(t, 'InvalidStateError', + new Promise(resolve => canvas.toBlob(resolve))); +}, "Throws if toBlob is called while layers are open."); + +</script> +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html deleted file mode 100644 index 6c69bb3784..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.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.malformed-operations-with-promises.toBlob</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> -<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> -<body class="show_output"> - -<h1>2d.layer.malformed-operations-with-promises.toBlob</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas> - -<ul id="d"></ul> -<script> -promise_test(async t => { - - var canvas = document.getElementById('c'); - var ctx = canvas.getContext('2d'); - - // Shouldn't throw on its own. - await new Promise(resolve => canvas.toBlob(resolve)); - // Make sure the exception isn't caused by calling the function twice. - await new Promise(resolve => canvas.toBlob(resolve)); - // Calling again inside a layer should throw. - ctx.beginLayer(); - await promise_rejects_dom(t, 'InvalidStateError', new Promise(resolve => canvas.toBlob(resolve))); - -}, "Check that exceptions are thrown for operations that are malformed while layers are open."); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html deleted file mode 100644 index f927b96524..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas 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> -<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> -<body class="show_output"> - -<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> - - -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas> - -<ul id="d"></ul> -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -_addTest(function(canvas, ctx) { - - // 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')); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html deleted file mode 100644 index 8bcc89d38e..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.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.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> -<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> -<body class="show_output"> - -<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> - - -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas> - -<ul id="d"></ul> -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -_addTest(function(canvas, ctx) { - - 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)); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html deleted file mode 100644 index 5dc3fcc017..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas 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> -<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> -<body class="show_output"> - -<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> - - -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas> - -<ul id="d"></ul> -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -_addTest(function(canvas, ctx) { - - // 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)); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.html new file mode 100644 index 0000000000..cf6e7a80db --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas 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> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> + +<script> + +test(t => { + const canvas = document.createElement('canvas'); + 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 = document.createElement('canvas'); + 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 = document.createElement('canvas'); + 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 = document.createElement('canvas'); + 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 = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + // Shouldn't throw on its own. + canvas.toDataURL(); + // Make sure the exception isn't caused by calling the function twice. + canvas.toDataURL(); + // Calling again inside a layer should throw. + ctx.beginLayer(); + assert_throws_dom("InvalidStateError", + () => canvas.toDataURL()); +}, "Throws if toDataURL is called while layers are open."); + +</script> +</div> diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html deleted file mode 100644 index fd4fc262c2..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.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.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> -<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> -<body class="show_output"> - -<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> - - -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas> - -<ul id="d"></ul> -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -_addTest(function(canvas, ctx) { - - 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)); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html deleted file mode 100644 index c9bb4f3875..0000000000 --- a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.layer.malformed-operations.toDataURL</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/html/canvas/resources/canvas-tests.js"></script> -<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> -<body class="show_output"> - -<h1>2d.layer.malformed-operations.toDataURL</h1> -<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p> - - -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas> - -<ul id="d"></ul> -<script> -var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open."); -_addTest(function(canvas, ctx) { - - // Shouldn't throw on its own. - canvas.toDataURL(); - // Make sure the exception isn't caused by calling the function twice. - canvas.toDataURL(); - // Calling again inside a layer should throw. - ctx.beginLayer(); - assert_throws_dom("InvalidStateError", - () => canvas.toDataURL()); - -}); -</script> - |