1 files changed, 50 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html
new file mode 100644
index 0000000000..a2d513eb62
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-opacity-blend-modes-expected.html"/>
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-390000">
+<body>
+</body>
+<script>
+  /*
+  Compare how the opacity is handled in different blend modes when setting its
+  value with filters or with properties.
+  */
+
+  function drawSquares(canvasId, x, y, compositeOperation) {
+    var canvas = document.getElementById(canvasId);
+    var ctx = canvas.getContext('2d');
+    canvas.style.position = 'absolute';
+    canvas.style.left = `${x}px`;
+    canvas.style.top = `${y}px`;
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.filter = 'opacity(100%)';
+    ctx.fillStyle = 'green';
+    ctx.fillRect(0, 0, 200, 60);
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.filter = 'opacity(70%)';
+    ctx.fillStyle = 'red';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.globalCompositeOperation = compositeOperation;
+    ctx.filter = 'opacity(50%)';
+    ctx.fillStyle = 'yellow';
+    ctx.fillRect(25, 25, 50, 50);
+  }
+
+  // Fomatted in the same matrix as the drawn elements.
+  var compositeOperations =
+    ['source-over', 'source-in', 'source-out', 'source-atop','destination-over',
+    'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy',
+    'xor', 'multiply', 'screen', 'overlay', 'darken',
+    'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+    'difference', 'exclusion', 'hue', 'saturation', 'color',
+    'luminosity'];
+
+  for (var i = 0; i < compositeOperations.length; i++){
+    var canvas = document.createElement('canvas');
+    canvas.id = `canvas-${i}`;
+    document.body.appendChild(canvas);
+    drawSquares(canvas.id, (i%5)*300, Math.floor(i/5)*300,
+      compositeOperations[i]);
+  }
+</script>