New WPT test validating clipping inside and outside of layers

Clipping applies to layer output, but effectively gets reset inside the layer. The effect of the clipping is easy to see when using a blur filter on the layer. If the clip is applied inside the layer, the blur follows the clip contour. If the layer output is then clipped, the blur result gets clipped. Bug: 1396372 Change-Id: I03da4dc97c17396ccd4fd6f15876a6a0bd6c06eb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5006001 Commit-Queue: Jean-Philippe Gravel <[email protected]> Reviewed-by: Fernando Serboncini <[email protected]> Cr-Commit-Position: refs/heads/main@{#1221180}
web-platform-tests · Nov 7, 2023 · 3712b4c · 3712b4c
1 parent 05616db
commit 3712b4c
Show file tree

Hide file tree

Showing 16 changed files with 543 additions and 0 deletions.
diff --git a/html/canvas/element/layers/2d.layer.clip-inside-and-outside-expected.html b/html/canvas/element/layers/2d.layer.clip-inside-and-outside-expected.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-inside-and-outside</title>
+<h1>2d.layer.clip-inside-and-outside</h1>
+<p class="desc">Check clipping set inside and outside the layer</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');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginPath();
+  ctx2.rect(15, 15, 70, 70);
+  ctx2.clip();
+
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+
+  const canvas3 = new OffscreenCanvas(200, 200);
+  const ctx3 = canvas3.getContext('2d');
+
+  ctx3.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx3.drawImage(canvas2, 0, 0);
+  ctx3.endLayer();
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+  ctx.drawImage(canvas3, 0, 0);
+</script>
diff --git a/html/canvas/element/layers/2d.layer.clip-inside-and-outside.html b/html/canvas/element/layers/2d.layer.clip-inside-and-outside.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-inside-and-outside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside-and-outside</title>
+<h1>2d.layer.clip-inside-and-outside</h1>
+<p class="desc">Check clipping set inside and outside the layer</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.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+</script>
diff --git a/html/canvas/element/layers/2d.layer.clip-inside-expected.html b/html/canvas/element/layers/2d.layer.clip-inside-expected.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-inside</title>
+<h1>2d.layer.clip-inside</h1>
+<p class="desc">Check clipping set inside the layer</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');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginPath();
+  ctx2.rect(15, 15, 70, 70);
+  ctx2.clip();
+
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx.drawImage(canvas2, 0, 0);
+  ctx.endLayer();
+</script>
diff --git a/html/canvas/element/layers/2d.layer.clip-inside.html b/html/canvas/element/layers/2d.layer.clip-inside.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-inside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside</title>
+<h1>2d.layer.clip-inside</h1>
+<p class="desc">Check clipping set inside the layer</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.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+</script>
diff --git a/html/canvas/element/layers/2d.layer.clip-outside-expected.html b/html/canvas/element/layers/2d.layer.clip-outside-expected.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-outside</title>
+<h1>2d.layer.clip-outside</h1>
+<p class="desc">Check clipping set outside the layer</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');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+  ctx2.endLayer();
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/html/canvas/element/layers/2d.layer.clip-outside.html b/html/canvas/element/layers/2d.layer.clip-outside.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-outside-expected.html">
+<title>Canvas test: 2d.layer.clip-outside</title>
+<h1>2d.layer.clip-outside</h1>
+<p class="desc">Check clipping set outside the layer</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.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.clip-inside-and-outside-expected.html b/html/canvas/offscreen/layers/2d.layer.clip-inside-and-outside-expected.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-inside-and-outside</title>
+<h1>2d.layer.clip-inside-and-outside</h1>
+<p class="desc">Check clipping set inside and outside the layer</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');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginPath();
+  ctx2.rect(15, 15, 70, 70);
+  ctx2.clip();
+
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+
+  const canvas3 = new OffscreenCanvas(200, 200);
+  const ctx3 = canvas3.getContext('2d');
+
+  ctx3.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx3.drawImage(canvas2, 0, 0);
+  ctx3.endLayer();
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+  ctx.drawImage(canvas3, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.clip-inside-and-outside.html b/html/canvas/offscreen/layers/2d.layer.clip-inside-and-outside.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-inside-and-outside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside-and-outside</title>
+<h1>2d.layer.clip-inside-and-outside</h1>
+<p class="desc">Check clipping set inside and outside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 100);
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.clip-inside-and-outside.w.html b/html/canvas/offscreen/layers/2d.layer.clip-inside-and-outside.w.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.clip-inside-and-outside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside-and-outside</title>
+<h1>2d.layer.clip-inside-and-outside</h1>
+<p class="desc">Check clipping set inside and outside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.rect(15, 15, 70, 70);
+    ctx.clip();
+
+    ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+    ctx.beginPath();
+    ctx.rect(15, 15, 70, 70);
+    ctx.clip();
+
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(10, 10, 80, 80);
+    ctx.endLayer();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/html/canvas/offscreen/layers/2d.layer.clip-inside-expected.html b/html/canvas/offscreen/layers/2d.layer.clip-inside-expected.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-inside</title>
+<h1>2d.layer.clip-inside</h1>
+<p class="desc">Check clipping set inside the layer</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');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginPath();
+  ctx2.rect(15, 15, 70, 70);
+  ctx2.clip();
+
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx.drawImage(canvas2, 0, 0);
+  ctx.endLayer();
+</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.clip-inside.html b/html/canvas/offscreen/layers/2d.layer.clip-inside.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-inside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside</title>
+<h1>2d.layer.clip-inside</h1>
+<p class="desc">Check clipping set inside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 100);
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/layers/2d.layer.clip-inside.w.html b/html/canvas/offscreen/layers/2d.layer.clip-inside.w.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.clip-inside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside</title>
+<h1>2d.layer.clip-inside</h1>
+<p class="desc">Check clipping set inside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+    ctx.beginPath();
+    ctx.rect(15, 15, 70, 70);
+    ctx.clip();
+
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(10, 10, 80, 80);
+    ctx.endLayer();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/html/canvas/offscreen/layers/2d.layer.clip-outside-expected.html b/html/canvas/offscreen/layers/2d.layer.clip-outside-expected.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-outside</title>
+<h1>2d.layer.clip-outside</h1>
+<p class="desc">Check clipping set outside the layer</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');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+  ctx2.endLayer();
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>