Apply ctx.filter to canvas 2d layers

WebKit and Blink agreed that the `filter` context state should apply to the output of layers. whatwg/html#9537 (comment) The context `filter` state is applied after the filter passed as argument to `beginLayer`. The context `filter` is now reset when entering layers. Bug: 40249439 Change-Id: I5daf82672c334cdc96a90af8e9fe5dd4466849cf Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5626086 Commit-Queue: Jean-Philippe Gravel <[email protected]> Reviewed-by: Andres Ricardo Perez <[email protected]> Cr-Commit-Position: refs/heads/main@{#1344173}
web-platform-tests · Aug 20, 2024 · 1e72620 · 1e72620
1 parent 175ca37
commit 1e72620
Show file tree

Hide file tree

Showing 41 changed files with 14,931 additions and 133 deletions.
diff --git a/html/canvas/element/layers/2d.layer.ctm.ctx-filter-expected.html b/html/canvas/element/layers/2d.layer.ctm.ctx-filter-expected.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.ctm.ctx-filter</title>
+<h1>2d.layer.ctm.ctx-filter</h1>
+<p class="desc">Checks that parent transforms don't affect context filters.</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 = 'red';
+  ctx.fillRect(30, 40, 20, 120);
+  ctx.fillStyle = 'grey';
+  ctx.fillRect(20, 30, 20, 120);
+
+  ctx.fillStyle = 'green';
+  ctx.fillRect(70, 40, 20, 120);
+  ctx.fillStyle = 'grey';
+  ctx.fillRect(60, 30, 20, 120);
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(105, 35, 20, 120);
+  ctx.fillStyle = 'grey';
+  ctx.fillRect(100, 30, 20, 120);
+</script>
diff --git a/html/canvas/element/layers/2d.layer.ctm.ctx-filter.html b/html/canvas/element/layers/2d.layer.ctm.ctx-filter.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.ctm.ctx-filter-expected.html">
+<title>Canvas test: 2d.layer.ctm.ctx-filter</title>
+<h1>2d.layer.ctm.ctx-filter</h1>
+<p class="desc">Checks that parent transforms don't affect context filters.</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 = 'grey';
+  ctx.translate(30, 90);
+  ctx.scale(2, 2);
+  ctx.rotate(Math.PI / 2);
+
+  // The transform doesn't apply to context filter on normal draw calls.
+  ctx.save();
+  ctx.filter = 'drop-shadow(10px 10px 0px red)';
+  ctx.fillRect(-30, -5, 60, 10);
+  ctx.restore();
+
+  // Likewise, the transform doesn't apply to context filter applied on layer.
+  ctx.save();
+  ctx.filter = 'drop-shadow(10px 10px 0px green)';
+  ctx.beginLayer();
+  ctx.fillRect(-30, -25, 60, 10);
+  ctx.endLayer();
+  ctx.restore();
+
+  // Filters inside layers aren't affected by transform either.
+  ctx.beginLayer();
+  ctx.filter = 'drop-shadow(5px 5px 0px blue)';
+  ctx.fillRect(-30, -45, 60, 10);
+  ctx.endLayer();
+</script>
diff --git a/html/canvas/element/layers/2d.layer.global-filter-expected.html b/html/canvas/element/layers/2d.layer.global-filter-expected.html
diff --git a/html/canvas/element/layers/2d.layer.global-filter.html b/html/canvas/element/layers/2d.layer.global-filter.html