Tests: Add screenshot test for canvas filters

LadybirdBrowser · Dec 14, 2024 · c524219 · c524219
1 parent cb79c4f
commit c524219
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
diff --git a/Tests/LibWeb/Screenshot/expected/canvas-filters-ref.html b/Tests/LibWeb/Screenshot/expected/canvas-filters-ref.html
@@ -0,0 +1,10 @@
+<style>
+    * {
+        margin: 0;
+        overflow: hidden;
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<img src="../images/canvas-filters.png">
diff --git a/Tests/LibWeb/Screenshot/images/canvas-filters.png b/Tests/LibWeb/Screenshot/images/canvas-filters.png
diff --git a/Tests/LibWeb/Screenshot/input/canvas-filters.html b/Tests/LibWeb/Screenshot/input/canvas-filters.html
@@ -0,0 +1,71 @@
+<link rel="match" href="../expected/canvas-filters-ref.html" />
+<style>
+    * {
+        margin: 0;
+        /* Hide the scrollbar. */
+        overflow: hidden;
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<body>
+    <div id="canvas-container">
+        <canvas id="canvas-none" width="400" height="300"></canvas>
+        <canvas id="canvas-blur" width="400" height="300"></canvas>
+        <canvas id="canvas-brightness" width="400" height="300"></canvas>
+        <canvas id="canvas-contrast" width="400" height="300"></canvas>
+        <canvas id="canvas-grayscale" width="400" height="300"></canvas>
+        <canvas id="canvas-hue-rotate" width="400" height="300"></canvas>
+        <canvas id="canvas-invert" width="400" height="300"></canvas>
+        <canvas id="canvas-opacity" width="400" height="300"></canvas>
+        <canvas id="canvas-saturate" width="400" height="300"></canvas>
+        <canvas id="canvas-sepia" width="400" height="300"></canvas>
+        <canvas id="canvas-drop-shadow" width="400" height="300"></canvas>
+    </div>
+</body>
+<script>
+    const filters = [
+        { id: 'canvas-none', filter: 'none' },
+        { id: 'canvas-blur', filter: 'blur(5px)' },
+        { id: 'canvas-brightness', filter: 'brightness(150%)' },
+        { id: 'canvas-contrast', filter: 'contrast(150%)' },
+        { id: 'canvas-grayscale', filter: 'grayscale(100%)' },
+        { id: 'canvas-hue-rotate', filter: 'hue-rotate(90deg)' },
+        { id: 'canvas-invert', filter: 'invert(100%)' },
+        { id: 'canvas-opacity', filter: 'opacity(50%)' },
+        { id: 'canvas-saturate', filter: 'saturate(200%)' },
+        { id: 'canvas-sepia', filter: 'sepia(100%)' },
+        { id: 'canvas-drop-shadow', filter: 'drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5))' },
+    ];
+
+    const img = new Image();
+    img.src = '../data/car.png'; // Placeholder image
+    img.onload = () => {
+        filters.forEach(({ id, filter }) => {
+            const canvas = document.getElementById(id);
+            const ctx = canvas.getContext('2d');
+            ctx.filter = filter;
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 20, 50, 150, 100);
+
+            ctx.fillStyle = 'blue';
+            ctx.beginPath();
+            ctx.arc(100, 150, 50, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.fillStyle = 'green';
+            ctx.beginPath();
+            ctx.rect(200, 100, 100, 100);
+            ctx.fill();
+
+            ctx.strokeStyle = 'red';
+            ctx.lineWidth = 5;
+            ctx.beginPath();
+            ctx.moveTo(50, 250);
+            ctx.lineTo(350, 250);
+            ctx.stroke();
+        });
+    };
+</script>