Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Commit 0a727b8

Browse files
graveljpmoz-wptsync-bot
graveljp
authored and
moz-wptsync-bot
committed
Bug 1923204 [wpt PR 48506] - Add a WPT test validating a canvas filter with a globalAlpha, a=testonly
Automatic update from web-platform-tests 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} -- wpt-commits: ac35e3fe543ee6266f40ed5a482bad80f7002e51 wpt-pr: 48506
1 parent 148006a commit 0a727b8

File tree

6 files changed

+126
-0
lines changed

6 files changed

+126
-0
lines changed

‎testing/web-platform/tests/html/canvas/element/filters/2d.filter.drop-shadow-globalAlpha-expected.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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.filter.drop-shadow-globalAlpha</title>
5+
<h1>2d.filter.drop-shadow-globalAlpha</h1>
6+
<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
7+
<canvas id="canvas" width="100" height="50">
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+
ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
15+
ctx.fillRect(20, 15, 60, 30);
16+
ctx.fillStyle = 'rgba(128, 0, 128, 0.5)'
17+
ctx.fillRect(10, 10, 60, 30);
18+
</script>

‎testing/web-platform/tests/html/canvas/element/filters/2d.filter.drop-shadow-globalAlpha.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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.filter.drop-shadow-globalAlpha-expected.html">
5+
<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
6+
<h1>2d.filter.drop-shadow-globalAlpha</h1>
7+
<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
8+
<canvas id="canvas" width="100" height="50">
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.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
16+
ctx.globalAlpha = 0.5
17+
ctx.fillStyle = 'rgb(128, 0, 128)';
18+
ctx.fillRect(10, 10, 60, 30);
19+
</script>

‎testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha-expected.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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.filter.drop-shadow-globalAlpha</title>
5+
<h1>2d.filter.drop-shadow-globalAlpha</h1>
6+
<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
7+
<canvas id="canvas" width="100" height="50">
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+
ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
15+
ctx.fillRect(20, 15, 60, 30);
16+
ctx.fillStyle = 'rgba(128, 0, 128, 0.5)'
17+
ctx.fillRect(10, 10, 60, 30);
18+
</script>

‎testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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.filter.drop-shadow-globalAlpha-expected.html">
5+
<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
6+
<h1>2d.filter.drop-shadow-globalAlpha</h1>
7+
<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
8+
<canvas id="canvas" width="100" height="50">
9+
<p class="fallback">FAIL (fallback content)</p>
10+
</canvas>
11+
<script>
12+
const canvas = new OffscreenCanvas(100, 50);
13+
const ctx = canvas.getContext('2d');
14+
15+
ctx.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
16+
ctx.globalAlpha = 0.5
17+
ctx.fillStyle = 'rgb(128, 0, 128)';
18+
ctx.fillRect(10, 10, 60, 30);
19+
20+
const outputCanvas = document.getElementById("canvas");
21+
outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
22+
</script>

‎testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.drop-shadow-globalAlpha.w.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<html class="reftest-wait">
5+
<link rel="match" href="2d.filter.drop-shadow-globalAlpha-expected.html">
6+
<title>Canvas test: 2d.filter.drop-shadow-globalAlpha</title>
7+
<h1>2d.filter.drop-shadow-globalAlpha</h1>
8+
<p class="desc">Tests the context drop-shadow filter with a globalAlpha</p>
9+
<canvas id="canvas" width="100" height="50">
10+
<p class="fallback">FAIL (fallback content)</p>
11+
</canvas>
12+
<script id='myWorker' type='text/worker'>
13+
self.onmessage = function(e) {
14+
const canvas = new OffscreenCanvas(100, 50);
15+
const ctx = canvas.getContext('2d');
16+
17+
ctx.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
18+
ctx.globalAlpha = 0.5
19+
ctx.fillStyle = 'rgb(128, 0, 128)';
20+
ctx.fillRect(10, 10, 60, 30);
21+
22+
const bitmap = canvas.transferToImageBitmap();
23+
self.postMessage(bitmap, bitmap);
24+
};
25+
</script>
26+
<script>
27+
const blob = new Blob([document.getElementById('myWorker').textContent]);
28+
const worker = new Worker(URL.createObjectURL(blob));
29+
worker.addEventListener('message', msg => {
30+
const outputCtx = document.getElementById("canvas").getContext('2d');
31+
outputCtx.drawImage(msg.data, 0, 0);
32+
document.documentElement.classList.remove("reftest-wait");
33+
});
34+
worker.postMessage(null);
35+
</script>
36+
</html>

‎testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,19 @@
3232
ctx.filter = 'blur( 5px)';
3333
assert_equals(ctx.filter, 'blur( 5px)');
3434
35+
- name: 2d.filter.drop-shadow-globalAlpha
36+
desc: Tests the context drop-shadow filter with a globalAlpha
37+
code: |
38+
ctx.filter = 'drop-shadow(10px 5px 0px rgb(255, 165, 0))';
39+
ctx.globalAlpha = 0.5
40+
ctx.fillStyle = 'rgb(128, 0, 128)';
41+
ctx.fillRect(10, 10, 60, 30);
42+
reference: |
43+
ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
44+
ctx.fillRect(20, 15, 60, 30);
45+
ctx.fillStyle = 'rgba(128, 0, 128, 0.5)'
46+
ctx.fillRect(10, 10, 60, 30);
47+
3548
- name: 2d.filter.canvasFilterObject.tentative
3649
desc: Test CanvasFilter() object
3750
canvas_types: ['HtmlCanvas']

0 commit comments

Comments
 (0)