Add a WPT test validating a canvas filter with a globalAlpha

The specification currently says that the globalAlpha should be applied on the result of the context's filter. This however leads to an unexpected behavior because if the filter is a drop-shadow, we can't see the shadow through the foreground even though the foreground is made transparent by the globalAlpha. This is not what Chrome and Firefox do. These browsers instead apply the globalAlpha on the source of the filter, therefore making the foreground transparent. The specification issue is addressed in: whatwg/html#10674 Change-Id: I3832c3cf6390933770a08669f62e9b1b29caccf8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5904448 Reviewed-by: Aaron Krajeski <[email protected]> Commit-Queue: Jean-Philippe Gravel <[email protected]> Cr-Commit-Position: refs/heads/main@{#1365599}
web-platform-tests · Oct 8, 2024 · ac35e3f · ac35e3f
1 parent ec97938
commit ac35e3f
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 0 deletions.
diff --git a/html/canvas/element/filters/2d.filter.drop-shadow-globalAlpha-expected.html b/html/canvas/element/filters/2d.filter.drop-shadow-globalAlpha-expected.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
+<h1>2d.filter.drop-shadow-globalAlpha</h1>
+<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
+  ctx.fillRect(20, 15, 60, 30);
+  ctx.fillStyle = 'rgba(128, 0, 128, 0.5)'
+  ctx.fillRect(10, 10, 60, 30);
+</script>
diff --git a/html/canvas/element/filters/2d.filter.drop-shadow-globalAlpha.html b/html/canvas/element/filters/2d.filter.drop-shadow-globalAlpha.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<link rel="match" href="2d.filter.drop-shadow-globalAlpha-expected.html">
+<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
+<h1>2d.filter.drop-shadow-globalAlpha</h1>
+<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
+  ctx.globalAlpha = 0.5
+  ctx.fillStyle = 'rgb(128, 0, 128)';
+  ctx.fillRect(10, 10, 60, 30);
+</script>
diff --git a/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha-expected.html b/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha-expected.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
+<h1>2d.filter.drop-shadow-globalAlpha</h1>
+<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
+  ctx.fillRect(20, 15, 60, 30);
+  ctx.fillStyle = 'rgba(128, 0, 128, 0.5)'
+  ctx.fillRect(10, 10, 60, 30);
+</script>
diff --git a/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha.html b/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<link rel="match" href="2d.filter.drop-shadow-globalAlpha-expected.html">
+<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
+<h1>2d.filter.drop-shadow-globalAlpha</h1>
+<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
+  ctx.globalAlpha = 0.5
+  ctx.fillStyle = 'rgb(128, 0, 128)';
+  ctx.fillRect(10, 10, 60, 30);
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha.w.html b/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha.w.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<html class="reftest-wait">
+<link rel="match" href="2d.filter.drop-shadow-globalAlpha-expected.html">
+<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
+<h1>2d.filter.drop-shadow-globalAlpha</h1>
+<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
+    ctx.globalAlpha = 0.5
+    ctx.fillStyle = 'rgb(128, 0, 128)';
+    ctx.fillRect(10, 10, 60, 30);
+
+    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/tools/yaml-new/filters.yaml b/html/canvas/tools/yaml-new/filters.yaml
@@ -32,6 +32,19 @@
     ctx.filter = 'blur(  5px)';
     assert_equals(ctx.filter, 'blur(  5px)');
 
+- name: 2d.filter.drop-shadow-globalAlpha
+  desc: Tests the context drop-shadow filter with a globalAlpha
+  code: |
+    ctx.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
+    ctx.globalAlpha = 0.5
+    ctx.fillStyle = 'rgb(128, 0, 128)';
+    ctx.fillRect(10, 10, 60, 30);
+  reference: |
+    ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
+    ctx.fillRect(20, 15, 60, 30);
+    ctx.fillStyle = 'rgba(128, 0, 128, 0.5)'
+    ctx.fillRect(10, 10, 60, 30);
+
 - name: 2d.filter.canvasFilterObject.tentative
   desc: Test CanvasFilter() object
   canvas_types: ['HtmlCanvas']