WebKit export: CanvasRenderingContext2D globalAlpha property is ignor…

…ed for some values of globalCompositeOperation (#47906) https://bugs.webkit.org/show_bug.cgi?id=278454
web-platform-tests · Sep 14, 2024 · be5d397 · be5d397
1 parent d1c6640
commit be5d397
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 0 deletions.
diff --git a/html/canvas/element/compositing/2d.composite.full.mode.alpha-ref.html b/html/canvas/element/compositing/2d.composite.full.mode.alpha-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <body>
+        <div id="source"></div>
+        <div id="destination"></div>
+        <script>
+            function createCanvas(parent, width, height) {
+                const canvas = document.createElement("canvas");
+                canvas.width = width;
+                canvas.height = height;
+                parent.append(canvas);
+                return canvas;
+            }
+
+            function fillRects(canvas, color, alpha, diagonal) {
+                const ctx = canvas.getContext("2d");
+                ctx.fillStyle = color;
+                ctx.globalAlpha = alpha;
+                if (diagonal == "left") {
+                    ctx.fillRect(60, 60, 50, 50);
+                    ctx.fillRect(110, 110, 50, 50);
+                } else {
+                    ctx.fillRect(60, 110, 50, 50);
+                    ctx.fillRect(110, 60, 50, 50);
+                }
+            }
+
+            fillRects(createCanvas(source, 200, 200), "#ff0000", 0.5, "left");
+            fillRects(createCanvas(source, 200, 200), "#ff0000", 0.5, "right");
+            fillRects(createCanvas(destination, 200, 200), "#777777", 0.5, "left");
+
+            let canvas = createCanvas(destination, 200, 200);
+            fillRects(canvas, "#777777", 0.5, "left");
+            fillRects(canvas, "#ff0000", 0.5, "right");
+        </script>
+    </body>
+</html>
diff --git a/html/canvas/element/compositing/2d.composite.full.mode.alpha.html b/html/canvas/element/compositing/2d.composite.full.mode.alpha.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="match" href="2d.composite.full.mode.alpha-ref.html">
+        <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10000" />
+    </head>
+    <body>
+        <div id="source"></div>
+        <div id="destination"></div>
+        <script>
+            function createCanvas(parent, width, height) {
+                const canvas = document.createElement("canvas");
+                canvas.width = width;
+                canvas.height = height;
+                parent.append(canvas);
+                return canvas;
+            }
+
+            function fillRects(canvas, alpha, compositeOperation) {
+                const ctx = canvas.getContext("2d");
+                ctx.fillStyle = "#777777";
+                ctx.fillRect(10, 10, 100, 100);
+                ctx.fillRect(110, 110, 100, 100);
+
+                ctx.globalCompositeOperation = compositeOperation;
+                ctx.globalAlpha = alpha;
+                ctx.fillStyle = "#ff0000";
+                ctx.fillRect(60, 60, 100, 100);
+            }
+
+            fillRects(createCanvas(source, 200, 200), 0.5, 'source-in');
+            fillRects(createCanvas(source, 200, 200), 0.5, 'source-out');
+            fillRects(createCanvas(destination, 200, 200), 0.5, `destination-in`);
+            fillRects(createCanvas(destination, 200, 200), 0.5, 'destination-atop');
+        </script>
+    </body>
+</html>