Skip to content

Commit ddeb11c

Browse files
marco-cmarco-c
committed
Bug 1923396 [wpt PR 48522] - Make WPT tests validating layers with options tentative, a=testonly
Automatic update from web-platform-tests Make WPT tests validating layers with options tentative The beginLayer's BeginLayerOption parameter was removed from the canvas layer PR at whatwg/html#9537. We might pursue this as a followup. In the meantime, the tests validating BeginLayerOptions should be marked as tentative. To prevent losing test coverage, this CL adds test variants using context filters in addition to layer filters. Bug: 40249439 Change-Id: Ic06dfa911969075bee42a20f0518beab2bc98fa7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5904350 Reviewed-by: Andres Ricardo Perez <andresrperezchromium.org> Commit-Queue: Jean-Philippe Gravel <jpgravelchromium.org> Cr-Commit-Position: refs/heads/main{#1365604} -- wpt-commits: bf7c101faf285e73a2e35a8a4ae26e3d805b9548 wpt-pr: 48522 UltraBlame original commit: 5d5bbdf6ce6d994eb36ab954ece44a5c3aa0d3e4
1 parent 883cd9f commit ddeb11c

File tree

212 files changed

+2806
-425
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

212 files changed

+2806
-425
lines changed

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.tentative-expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.anisotropic-blur.isotropic</title>
5-
<h1>2d.layer.anisotropic-blur.isotropic</h1>
4+
<title>Canvas test: 2d.layer.anisotropic-blur.isotropic.tentative</title>
5+
<h1>2d.layer.anisotropic-blur.isotropic.tentative</h1>
66
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
77

88
<svg xmlns="http://www.w3.org/2000/svg"

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.tentative.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<link rel="match" href="2d.layer.anisotropic-blur.isotropic-expected.html">
5-
<title>Canvas test: 2d.layer.anisotropic-blur.isotropic</title>
6-
<h1>2d.layer.anisotropic-blur.isotropic</h1>
4+
<link rel="match" href="2d.layer.anisotropic-blur.isotropic.tentative-expected.html">
5+
<title>Canvas test: 2d.layer.anisotropic-blur.isotropic.tentative</title>
6+
<h1>2d.layer.anisotropic-blur.isotropic.tentative</h1>
77
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
88
<canvas id="canvas" width="200" height="200">
99
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-x-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.tentative-expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-x</title>
5-
<h1>2d.layer.anisotropic-blur.mostly-x</h1>
4+
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-x.tentative</title>
5+
<h1>2d.layer.anisotropic-blur.mostly-x.tentative</h1>
66
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
77

88
<svg xmlns="http://www.w3.org/2000/svg"

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<link rel="match" href="2d.layer.anisotropic-blur.mostly-x-expected.html">
5-
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-x</title>
6-
<h1>2d.layer.anisotropic-blur.mostly-x</h1>
4+
<link rel="match" href="2d.layer.anisotropic-blur.mostly-x.tentative-expected.html">
5+
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-x.tentative</title>
6+
<h1>2d.layer.anisotropic-blur.mostly-x.tentative</h1>
77
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
88
<canvas id="canvas" width="200" height="200">
99
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-y-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.tentative-expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-y</title>
5-
<h1>2d.layer.anisotropic-blur.mostly-y</h1>
4+
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-y.tentative</title>
5+
<h1>2d.layer.anisotropic-blur.mostly-y.tentative</h1>
66
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
77

88
<svg xmlns="http://www.w3.org/2000/svg"

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<link rel="match" href="2d.layer.anisotropic-blur.mostly-y-expected.html">
5-
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-y</title>
6-
<h1>2d.layer.anisotropic-blur.mostly-y</h1>
4+
<link rel="match" href="2d.layer.anisotropic-blur.mostly-y.tentative-expected.html">
5+
<title>Canvas test: 2d.layer.anisotropic-blur.mostly-y.tentative</title>
6+
<h1>2d.layer.anisotropic-blur.mostly-y.tentative</h1>
77
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
88
<canvas id="canvas" width="200" height="200">
99
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.x-only-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.tentative-expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.anisotropic-blur.x-only</title>
5-
<h1>2d.layer.anisotropic-blur.x-only</h1>
4+
<title>Canvas test: 2d.layer.anisotropic-blur.x-only.tentative</title>
5+
<h1>2d.layer.anisotropic-blur.x-only.tentative</h1>
66
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
77

88
<svg xmlns="http://www.w3.org/2000/svg"

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.tentative.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<link rel="match" href="2d.layer.anisotropic-blur.x-only-expected.html">
5-
<title>Canvas test: 2d.layer.anisotropic-blur.x-only</title>
6-
<h1>2d.layer.anisotropic-blur.x-only</h1>
4+
<link rel="match" href="2d.layer.anisotropic-blur.x-only.tentative-expected.html">
5+
<title>Canvas test: 2d.layer.anisotropic-blur.x-only.tentative</title>
6+
<h1>2d.layer.anisotropic-blur.x-only.tentative</h1>
77
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
88
<canvas id="canvas" width="200" height="200">
99
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.tentative-expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.anisotropic-blur.y-only</title>
5-
<h1>2d.layer.anisotropic-blur.y-only</h1>
4+
<title>Canvas test: 2d.layer.anisotropic-blur.y-only.tentative</title>
5+
<h1>2d.layer.anisotropic-blur.y-only.tentative</h1>
66
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
77

88
<svg xmlns="http://www.w3.org/2000/svg"

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.tentative.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<link rel="match" href="2d.layer.anisotropic-blur.y-only-expected.html">
5-
<title>Canvas test: 2d.layer.anisotropic-blur.y-only</title>
6-
<h1>2d.layer.anisotropic-blur.y-only</h1>
4+
<link rel="match" href="2d.layer.anisotropic-blur.y-only.tentative-expected.html">
5+
<title>Canvas test: 2d.layer.anisotropic-blur.y-only.tentative</title>
6+
<h1>2d.layer.anisotropic-blur.y-only.tentative</h1>
77
<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
88
<canvas id="canvas" width="200" height="200">
99
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.tentative.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.beginLayer-options</title>
4+
<title>Canvas test: 2d.layer.beginLayer-options.tentative</title>
55
<script src="/resources/testharness.js"></script>
66
<script src="/resources/testharnessreport.js"></script>
77
<script src="/html/canvas/resources/canvas-tests.js"></script>
88
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
99
<body class="show_output">
1010

11-
<h1>2d.layer.beginLayer-options</h1>
11+
<h1>2d.layer.beginLayer-options.tentative</h1>
1212
<p class="desc">Checks beginLayer works for different option parameter values</p>
1313

1414

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.ctx-filter-expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.blur-from-outside-canvas.no-clipping</title>
5-
<h1>2d.layer.blur-from-outside-canvas.no-clipping</h1>
4+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.no-clipping.ctx-filter</title>
5+
<h1>2d.layer.blur-from-outside-canvas.no-clipping.ctx-filter</h1>
66
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
77
<canvas id="canvas" width="200" height="200">
88
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.ctx-filter.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<link rel="match" href="2d.layer.blur-from-outside-canvas.no-clipping.ctx-filter-expected.html">
5+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.no-clipping.ctx-filter</title>
6+
<h1>2d.layer.blur-from-outside-canvas.no-clipping.ctx-filter</h1>
7+
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
8+
<canvas id="canvas" width="200" height="200">
9+
<p class="fallback">FAIL (fallback content)</p>
10+
</canvas>
11+
<script>
12+
const canvas = document.getElementById("canvas");
13+
const ctx = canvas.getContext('2d');
14+
15+
// No clipping.
16+
17+
ctx.filter = 'blur(30px)';
18+
ctx.beginLayer();
19+
20+
ctx.fillStyle = 'turquoise';
21+
ctx.fillRect(201, 50, 100, 100);
22+
ctx.fillStyle = 'indigo';
23+
ctx.fillRect(50, 201, 100, 100);
24+
ctx.fillStyle = 'orange';
25+
ctx.fillRect(-1, 50, -100, 100);
26+
ctx.fillStyle = 'brown';
27+
ctx.fillRect(50, -1, 100, -100);
28+
29+
ctx.endLayer();
30+
</script>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.layer-filter.tentative-expected.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.no-clipping.layer-filter.tentative</title>
5+
<h1>2d.layer.blur-from-outside-canvas.no-clipping.layer-filter.tentative</h1>
6+
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
7+
<canvas id="canvas" width="200" height="200">
8+
<p class="fallback">FAIL (fallback content)</p>
9+
</canvas>
10+
<script>
11+
const canvas = document.getElementById("canvas");
12+
const ctx = canvas.getContext('2d');
13+
14+
const svg = `
15+
<svg xmlns="http://www.w3.org/2000/svg"
16+
width="200" height="200"
17+
color-interpolation-filters="sRGB">
18+
<filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
19+
<feGaussianBlur in="SourceGraphic" stdDeviation="30" />
20+
</filter>
21+
<g filter="url(#filter)">
22+
<rect x="201" y="50" width="100" height="100" fill="turquoise"/>
23+
<rect x="50" y="201" width="100" height="100" fill="indigo"/>
24+
<rect x="-101" y="50" width="100" height="100" fill="orange"/>
25+
<rect x="50" y="-101" width="100" height="100" fill="brown"/>
26+
</g>
27+
</svg>`;
28+
const img = new Image();
29+
img.width = 200;
30+
img.height = 200;
31+
img.onload = () => {
32+
// No clipping.
33+
34+
ctx.drawImage(img, 0, 0);
35+
};
36+
img.src = 'data:image/svg+xml;base64,' + btoa(svg);
37+
</script>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.layer-filter.tentative.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<link rel="match" href="2d.layer.blur-from-outside-canvas.no-clipping-expected.html">
5-
<title>Canvas test: 2d.layer.blur-from-outside-canvas.no-clipping</title>
6-
<h1>2d.layer.blur-from-outside-canvas.no-clipping</h1>
4+
<link rel="match" href="2d.layer.blur-from-outside-canvas.no-clipping.layer-filter.tentative-expected.html">
5+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.no-clipping.layer-filter.tentative</title>
6+
<h1>2d.layer.blur-from-outside-canvas.no-clipping.layer-filter.tentative</h1>
77
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
88
<canvas id="canvas" width="200" height="200">
99
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.ctx-filter-expected.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping</title>
5-
<h1>2d.layer.blur-from-outside-canvas.with-clipping</h1>
4+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping.ctx-filter</title>
5+
<h1>2d.layer.blur-from-outside-canvas.with-clipping.ctx-filter</h1>
66
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
77
<canvas id="canvas" width="200" height="200">
88
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.ctx-filter.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<link rel="match" href="2d.layer.blur-from-outside-canvas.with-clipping.ctx-filter-expected.html">
5+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping.ctx-filter</title>
6+
<h1>2d.layer.blur-from-outside-canvas.with-clipping.ctx-filter</h1>
7+
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
8+
<canvas id="canvas" width="200" height="200">
9+
<p class="fallback">FAIL (fallback content)</p>
10+
</canvas>
11+
<script>
12+
const canvas = document.getElementById("canvas");
13+
const ctx = canvas.getContext('2d');
14+
15+
const clipRegion = new Path2D();
16+
clipRegion.rect(20, 20, 160, 160);
17+
ctx.clip(clipRegion);
18+
19+
ctx.filter = 'blur(30px)';
20+
ctx.beginLayer();
21+
22+
ctx.fillStyle = 'turquoise';
23+
ctx.fillRect(201, 50, 100, 100);
24+
ctx.fillStyle = 'indigo';
25+
ctx.fillRect(50, 201, 100, 100);
26+
ctx.fillStyle = 'orange';
27+
ctx.fillRect(-1, 50, -100, 100);
28+
ctx.fillStyle = 'brown';
29+
ctx.fillRect(50, -1, 100, -100);
30+
31+
ctx.endLayer();
32+
</script>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.layer-filter.tentative-expected.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping.layer-filter.tentative</title>
5+
<h1>2d.layer.blur-from-outside-canvas.with-clipping.layer-filter.tentative</h1>
6+
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
7+
<canvas id="canvas" width="200" height="200">
8+
<p class="fallback">FAIL (fallback content)</p>
9+
</canvas>
10+
<script>
11+
const canvas = document.getElementById("canvas");
12+
const ctx = canvas.getContext('2d');
13+
14+
const svg = `
15+
<svg xmlns="http://www.w3.org/2000/svg"
16+
width="200" height="200"
17+
color-interpolation-filters="sRGB">
18+
<filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
19+
<feGaussianBlur in="SourceGraphic" stdDeviation="30" />
20+
</filter>
21+
<g filter="url(#filter)">
22+
<rect x="201" y="50" width="100" height="100" fill="turquoise"/>
23+
<rect x="50" y="201" width="100" height="100" fill="indigo"/>
24+
<rect x="-101" y="50" width="100" height="100" fill="orange"/>
25+
<rect x="50" y="-101" width="100" height="100" fill="brown"/>
26+
</g>
27+
</svg>`;
28+
const img = new Image();
29+
img.width = 200;
30+
img.height = 200;
31+
img.onload = () => {
32+
const clipRegion = new Path2D();
33+
clipRegion.rect(20, 20, 160, 160);
34+
ctx.clip(clipRegion);
35+
36+
ctx.drawImage(img, 0, 0);
37+
};
38+
img.src = 'data:image/svg+xml;base64,' + btoa(svg);
39+
</script>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.layer-filter.tentative.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<link rel="match" href="2d.layer.blur-from-outside-canvas.with-clipping-expected.html">
5-
<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping</title>
6-
<h1>2d.layer.blur-from-outside-canvas.with-clipping</h1>
4+
<link rel="match" href="2d.layer.blur-from-outside-canvas.with-clipping.layer-filter.tentative-expected.html">
5+
<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping.layer-filter.tentative</title>
6+
<h1>2d.layer.blur-from-outside-canvas.with-clipping.layer-filter.tentative</h1>
77
<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
88
<canvas id="canvas" width="200" height="200">
99
<p class="fallback">FAIL (fallback content)</p>

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside-expected.html renamed to ‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside.ctx-filter-expected.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
33
<meta charset="UTF-8">
4-
<title>Canvas test: 2d.layer.clip-inside-and-outside</title>
5-
<h1>2d.layer.clip-inside-and-outside</h1>
4+
<title>Canvas test: 2d.layer.clip-inside-and-outside.ctx-filter</title>
5+
<h1>2d.layer.clip-inside-and-outside.ctx-filter</h1>
66
<p class="desc">Check clipping set inside and outside the layer</p>
77
<canvas id="canvas" width="100" height="100">
88
<p class="fallback">FAIL (fallback content)</p>
@@ -24,7 +24,8 @@ <h1>2d.layer.clip-inside-and-outside</h1>
2424
const canvas3 = new OffscreenCanvas(200, 200);
2525
const ctx3 = canvas3.getContext('2d');
2626

27-
ctx3.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
27+
ctx3.filter = 'blur(12px)';
28+
ctx3.beginLayer();
2829
ctx3.drawImage(canvas2, 0, 0);
2930
ctx3.endLayer();
3031

‎testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside.ctx-filter.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<link rel="match" href="2d.layer.clip-inside-and-outside.ctx-filter-expected.html">
5+
<title>Canvas test: 2d.layer.clip-inside-and-outside.ctx-filter</title>
6+
<h1>2d.layer.clip-inside-and-outside.ctx-filter</h1>
7+
<p class="desc">Check clipping set inside and outside the layer</p>
8+
<canvas id="canvas" width="100" height="100">
9+
<p class="fallback">FAIL (fallback content)</p>
10+
</canvas>
11+
<script>
12+
const canvas = document.getElementById("canvas");
13+
const ctx = canvas.getContext('2d');
14+
15+
ctx.beginPath();
16+
ctx.rect(15, 15, 70, 70);
17+
ctx.clip();
18+
19+
ctx.filter = 'blur(12px)';
20+
ctx.beginLayer();
21+
22+
ctx.beginPath();
23+
ctx.rect(15, 15, 70, 70);
24+
ctx.clip();
25+
26+
ctx.fillStyle = 'blue';
27+
ctx.fillRect(10, 10, 80, 80);
28+
ctx.endLayer();
29+
</script>

0 commit comments

Comments
 (0)