diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element')
180 files changed, 7895 insertions, 2742 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html deleted file mode 100644 index 59d66c383c..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-1</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.fillStyle.parse.hsl-clamp-1</h1> -<p class="desc"></p> - -<p class="notes"> -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-1.png" class="output expected" id="expected" alt=""> -<ul id="d"></ul> -<script> -var t = async_test(""); -_addTest(function(canvas, ctx) { - - ctx.fillStyle = '#f00'; - ctx.fillStyle = 'hsl(120, 200%, 50%)'; - ctx.fillRect(0, 0, 100, 50); - _assertPixel(canvas, 50,25, 0,255,0,255); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html deleted file mode 100644 index 56f3a0a8b5..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-3</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.fillStyle.parse.hsl-clamp-3</h1> -<p class="desc"></p> - -<p class="notes"> -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-3.png" class="output expected" id="expected" alt=""> -<ul id="d"></ul> -<script> -var t = async_test(""); -_addTest(function(canvas, ctx) { - - ctx.fillStyle = '#f00'; - ctx.fillStyle = 'hsl(120, 100%, 200%)'; - ctx.fillRect(0, 0, 100, 50); - _assertPixel(canvas, 50,25, 255,255,255,255); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png Binary files differdeleted file mode 100644 index bf48767a88..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png +++ /dev/null diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html deleted file mode 100644 index af9d11e678..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-4</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.fillStyle.parse.hsl-clamp-4</h1> -<p class="desc"></p> - -<p class="notes"> -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-4.png" class="output expected" id="expected" alt=""> -<ul id="d"></ul> -<script> -var t = async_test(""); -_addTest(function(canvas, ctx) { - - ctx.fillStyle = '#f00'; - ctx.fillStyle = 'hsl(120, 100%, -200%)'; - ctx.fillRect(0, 0, 100, 50); - _assertPixel(canvas, 50,25, 0,0,0,255); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png Binary files differdeleted file mode 100644 index d638d03386..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png +++ /dev/null diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html index 1a1939e47a..65440c6228 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html @@ -1,19 +1,19 @@ <!DOCTYPE html> <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-2</title> +<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-negative-saturation</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/html/canvas/resources/canvas-tests.js"></script> <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> <body class="show_output"> -<h1>2d.fillStyle.parse.hsl-clamp-2</h1> +<h1>2d.fillStyle.parse.hsl-clamp-negative-saturation</h1> <p class="desc"></p> <p class="notes"> <p class="output">Actual output:</p> <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-2.png" class="output expected" id="expected" alt=""> +<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-negative-saturation.png" class="output expected" id="expected" alt=""> <ul id="d"></ul> <script> var t = async_test(""); diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.png Binary files differindex 88fd827985..88fd827985 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.png diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html deleted file mode 100644 index 2acac26e1a..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-1</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.fillStyle.parse.hsla-clamp-1</h1> -<p class="desc"></p> - -<p class="notes"> -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-1.png" class="output expected" id="expected" alt=""> -<ul id="d"></ul> -<script> -var t = async_test(""); -_addTest(function(canvas, ctx) { - - ctx.fillStyle = '#f00'; - ctx.fillStyle = 'hsla(120, 200%, 50%, 1)'; - ctx.fillRect(0, 0, 100, 50); - _assertPixel(canvas, 50,25, 0,255,0,255); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png Binary files differdeleted file mode 100644 index 2733836c99..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png +++ /dev/null diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html deleted file mode 100644 index 4bc134aec5..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-3</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.fillStyle.parse.hsla-clamp-3</h1> -<p class="desc"></p> - -<p class="notes"> -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-3.png" class="output expected" id="expected" alt=""> -<ul id="d"></ul> -<script> -var t = async_test(""); -_addTest(function(canvas, ctx) { - - ctx.fillStyle = '#f00'; - ctx.fillStyle = 'hsla(120, 100%, 200%, 1)'; - ctx.fillRect(0, 0, 100, 50); - _assertPixel(canvas, 50,25, 255,255,255,255); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png Binary files differdeleted file mode 100644 index bf48767a88..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png +++ /dev/null diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html deleted file mode 100644 index f8b2382755..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-4</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.fillStyle.parse.hsla-clamp-4</h1> -<p class="desc"></p> - -<p class="notes"> -<p class="output">Actual output:</p> -<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-4.png" class="output expected" id="expected" alt=""> -<ul id="d"></ul> -<script> -var t = async_test(""); -_addTest(function(canvas, ctx) { - - ctx.fillStyle = '#f00'; - ctx.fillStyle = 'hsla(120, 100%, -200%, 1)'; - ctx.fillRect(0, 0, 100, 50); - _assertPixel(canvas, 50,25, 0,0,0,255); - -}); -</script> - diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png Binary files differdeleted file mode 100644 index d638d03386..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png +++ /dev/null diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png Binary files differdeleted file mode 100644 index 2733836c99..0000000000 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png +++ /dev/null diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html index 9c5e2258b9..e5dc98d4e3 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html @@ -1,19 +1,19 @@ <!DOCTYPE html> <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-5</title> +<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-alpha-1</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/html/canvas/resources/canvas-tests.js"></script> <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> <body class="show_output"> -<h1>2d.fillStyle.parse.hsla-clamp-5</h1> +<h1>2d.fillStyle.parse.hsla-clamp-alpha-1</h1> <p class="desc"></p> <p class="notes"> <p class="output">Actual output:</p> <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-5.png" class="output expected" id="expected" alt=""> +<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-alpha-1.png" class="output expected" id="expected" alt=""> <ul id="d"></ul> <script> var t = async_test(""); diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.png Binary files differindex 2733836c99..2733836c99 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.png diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html index 153515eedd..26139a562e 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html @@ -1,19 +1,19 @@ <!DOCTYPE html> <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-6</title> +<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-alpha-2</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/html/canvas/resources/canvas-tests.js"></script> <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> <body class="show_output"> -<h1>2d.fillStyle.parse.hsla-clamp-6</h1> +<h1>2d.fillStyle.parse.hsla-clamp-alpha-2</h1> <p class="desc"></p> <p class="notes"> <p class="output">Actual output:</p> <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-6.png" class="output expected" id="expected" alt=""> +<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-alpha-2.png" class="output expected" id="expected" alt=""> <ul id="d"></ul> <script> var t = async_test(""); diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.png Binary files differindex eeedd0ff05..eeedd0ff05 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.png diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html index 0f32fb5474..2d9b9d3bdf 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html @@ -1,19 +1,19 @@ <!DOCTYPE html> <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-2</title> +<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-negative-saturation</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/html/canvas/resources/canvas-tests.js"></script> <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> <body class="show_output"> -<h1>2d.fillStyle.parse.hsla-clamp-2</h1> +<h1>2d.fillStyle.parse.hsla-clamp-negative-saturation</h1> <p class="desc"></p> <p class="notes"> <p class="output">Actual output:</p> <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> -<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-2.png" class="output expected" id="expected" alt=""> +<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-negative-saturation.png" class="output expected" id="expected" alt=""> <ul id="d"></ul> <script> var t = async_test(""); diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.png Binary files differindex 88fd827985..88fd827985 100644 --- a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png +++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.png diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html deleted file mode 100644 index dac31c97f1..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html deleted file mode 100644 index f4c8c1033a..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 4], - }); - ctx.fillRect(25, 25, 50, 50); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html deleted file mode 100644 index 88d0cb2de2..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 1" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html deleted file mode 100644 index b3efcb8c3e..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 1], - }); - ctx.fillRect(25, 25, 50, 50); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html deleted file mode 100644 index 744983d4ae..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="1 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html deleted file mode 100644 index d5cc6e0058..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [1, 4], - }); - ctx.fillRect(25, 25, 50, 50); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html new file mode 100644 index 0000000000..c1ca0ab46f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title> +<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 0" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur0)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-x</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 1" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur1)" /> + </svg> + </div> +</span> + +<span> + <div>isotropic</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur2)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-y</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="1 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur3)" /> + </svg> + </div> +</span> + +<span> + <div>y-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="0 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur4)" /> + </svg> + </div> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html new file mode 100644 index 0000000000..498418c292 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html"> +<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title> +<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <canvas id="canvas0" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 0], + }); + ctx.fillRect(25, 25, 50, 50); + </script> +</span> + +<span> + <div>mostly-x</div> + <canvas id="canvas1" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 1], + }); + ctx.fillRect(25, 25, 50, 50); + </script> +</span> + +<span> + <div>isotropic</div> + <canvas id="canvas2" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas2"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [4, 4], + }); + ctx.fillRect(25, 25, 50, 50); + </script> +</span> + +<span> + <div>mostly-y</div> + <canvas id="canvas3" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas3"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [1, 4], + }); + ctx.fillRect(25, 25, 50, 50); + </script> +</span> + +<span> + <div>y-only</div> + <canvas id="canvas4" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas4"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.filter = new CanvasFilter({ + name: 'gaussianBlur', + stdDeviation: [0, 4], + }); + ctx.fillRect(25, 25, 50, 50); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html deleted file mode 100644 index e611113e42..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 0" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html deleted file mode 100644 index 4e8576fe74..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [4, 0], - }); - ctx.fillRect(25, 25, 50, 50); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html deleted file mode 100644 index c6d915cb07..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="0 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html deleted file mode 100644 index ec0a2353cf..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html"> -<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title> -<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.filter = new CanvasFilter({ - name: 'gaussianBlur', - stdDeviation: [0, 4], - }); - ctx.fillRect(25, 25, 50, 50); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur-expected.html new file mode 100644 index 0000000000..f24e9d0dba --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur-expected.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.filter.layers.gaussianBlur</title> +<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 0" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur0)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-x</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 1" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur1)" /> + </svg> + </div> +</span> + +<span> + <div>isotropic</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="4 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur2)" /> + </svg> + </div> +</span> + +<span> + <div>mostly-y</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="1 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur3)" /> + </svg> + </div> +</span> + +<span> + <div>y-only</div> + <div style="width: 100px; height: 100px; outline: 1px solid"> + <svg xmlns="http://www.w3.org/2000/svg" + width="100" height="100" + color-interpolation-filters="sRGB"> + <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="0 4" /> + </filter> + <rect x="25" y="25" width="50" height="50" + fill="teal" filter="url(#blur4)" /> + </svg> + </div> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.html new file mode 100644 index 0000000000..19db679076 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.filter.layers.gaussianBlur-expected.html"> +<title>Canvas test: 2d.filter.layers.gaussianBlur</title> +<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1> +<p class="desc">Test CanvasFilter() with gaussianBlur.</p> + +<div style="display: grid; grid-gap: 4px; + grid-template-columns: repeat(5, max-content); + font-size: 13px; text-align: center;"> +<span> + <div>x-only</div> + <canvas id="canvas0" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas0"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 0], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + </script> +</span> + +<span> + <div>mostly-x</div> + <canvas id="canvas1" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas1"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 1], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + </script> +</span> + +<span> + <div>isotropic</div> + <canvas id="canvas2" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas2"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [4, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + </script> +</span> + +<span> + <div>mostly-y</div> + <canvas id="canvas3" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas3"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [1, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + </script> +</span> + +<span> + <div>y-only</div> + <canvas id="canvas4" width="100" height="100" style="outline: 1px solid"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas4"); + const ctx = canvas.getContext('2d'); + + ctx.fillStyle = 'teal'; + ctx.beginLayer({filter: { + name: 'gaussianBlur', + stdDeviation: [0, 4], + }}); + ctx.fillRect(25, 25, 50, 50); + ctx.endLayer(); + </script> +</span> + +</div> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html deleted file mode 100644 index 4f93754862..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title> -<h1>2d.filter.layers.gaussianBlur.isotropic</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic.html deleted file mode 100644 index a2cc098896..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.isotropic.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.isotropic-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title> -<h1>2d.filter.layers.gaussianBlur.isotropic</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html deleted file mode 100644 index 255270c192..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title> -<h1>2d.filter.layers.gaussianBlur.mostly-x</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 1" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x.html deleted file mode 100644 index 0090e0e71e..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-x.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-x-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title> -<h1>2d.filter.layers.gaussianBlur.mostly-x</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 1], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html deleted file mode 100644 index 76a46b1533..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title> -<h1>2d.filter.layers.gaussianBlur.mostly-y</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="1 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y.html deleted file mode 100644 index 5c481cbe25..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.mostly-y.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-y-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title> -<h1>2d.filter.layers.gaussianBlur.mostly-y</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [1, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only-expected.html deleted file mode 100644 index 26741f9847..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title> -<h1>2d.filter.layers.gaussianBlur.x-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="4 0" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only.html deleted file mode 100644 index f7940eb921..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.x-only.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.x-only-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title> -<h1>2d.filter.layers.gaussianBlur.x-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [4, 0], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); -</script> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only-expected.html deleted file mode 100644 index d00eec6b57..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only-expected.html +++ /dev/null @@ -1,15 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title> -<h1>2d.filter.layers.gaussianBlur.y-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> - -<svg xmlns="http://www.w3.org/2000/svg" - width="100" height="100" - color-interpolation-filters="sRGB"> - <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> - <feGaussianBlur stdDeviation="0 4" /> - </filter> - <rect x="25" y="25" width="50" height="50" - fill="teal" filter="url(#blur)" /> -</svg> diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only.html deleted file mode 100644 index 59421a1ff3..0000000000 --- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.y-only.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> -<link rel="match" href="2d.filter.layers.gaussianBlur.y-only-expected.html"> -<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title> -<h1>2d.filter.layers.gaussianBlur.y-only</h1> -<p class="desc">Test CanvasFilter() with gaussianBlur.</p> -<canvas id="canvas" width="100" height="100"> - <p class="fallback">FAIL (fallback content)</p> -</canvas> -<script> - const canvas = document.getElementById("canvas"); - const ctx = canvas.getContext('2d'); - - ctx.fillStyle = 'teal'; - ctx.beginLayer({filter: { - name: 'gaussianBlur', - stdDeviation: [0, 4], - }}); - ctx.fillRect(25, 25, 50, 50); - ctx.endLayer(); -</script> 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> - diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html new file mode 100644 index 0000000000..d183f6940d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh-expected.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="test-wait"> +<title>HTML Canvas reference: SVG filter using CSS font-relative line-height units</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +:root { + font: 20px Ahem; +} + +div { + display: inline-block; + width: 100px; + height: 100px; + background: green; +} + +.r { + background: red; +} +</style> +<div><div class="r" style="width: 48px;"></div></div><br> +<div><div class="r" style="width: 24px;"></div></div> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html new file mode 100644 index 0000000000..b61193fb9f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-lh-rlh.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="test-wait"> +<title>HTML Canvas test: SVG filter using CSS font-relative line-height units</title> +<link rel="match" href="svg-filter-lh-rlh-expected.html"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +:root { + font: 20px Ahem; +} +</style> +<svg width="0" height="0"> + <!-- https://html.spec.whatwg.org/multipage/canvas.html#working-with-externally-defined-svg-filters --> + <use href="./svg-filter.svg#filter-lh" /> + <use href="./svg-filter.svg#filter-rlh" /> +</svg +><canvas id="canvas-lh" width="100" height="100"></canvas><br +><canvas id="canvas-rlh" width="100" height="100"></canvas> +<script> +function use_filter(canvas, filter_id) { + const ctx = canvas.getContext("2d"); + ctx.font = "40px Ahem"; + ctx.filter = `url(./svg-filter.svg#${filter_id})`; + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +} +window.addEventListener("load", async () => { + use_filter(document.getElementById("canvas-lh"), "filter-lh"); + use_filter(document.getElementById("canvas-rlh"), "filter-rlh"); + document.documentElement.classList.remove('test-wait'); +}); +</script> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg new file mode 100644 index 0000000000..a783a3eb15 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter.svg @@ -0,0 +1,10 @@ +<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + <filter id="filter-lh"> + <feFlood result="floodFill" x="1lh" y="0" width="100" height="100" flood-color="green" /> + <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" /> + </filter> + <filter id="filter-rlh"> + <feFlood result="floodFill" x="1rlh" y="0" width="100" height="100" flood-color="green" /> + <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" /> + </filter> +</svg> diff --git a/testing/web-platform/tests/html/canvas/element/text/WEB_FEATURES.yml b/testing/web-platform/tests/html/canvas/element/text/WEB_FEATURES.yml new file mode 100644 index 0000000000..1d9e4bab82 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: canvas-text-baselines + files: + - 2d.text.measure.baselines.* |
