0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Tests: Add screenshot test for canvas filters

Browse source
This commit is contained in:
Lucien Fiorini 2024-12-14 21:25:49 +01:00 • committed by Alexander Kalenik
parent a6ef6550f3
commit aea0172a44
Notes: github-actions[bot] 2024-12-18 17:55:33 +00:00
3 changed files with 82 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Tests/LibWeb/Screenshot/expected/canvas-filters-ref.html Normal file
View file

@ -0,0 +1,10 @@
<style>
* {
margin: 0;
overflow: hidden;
}
body {
background-color: white;
}
</style>
<img src="../images/canvas-filters.png">

BIN
Tests/LibWeb/Screenshot/images/canvas-filters.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 303 KiB

72
Tests/LibWeb/Screenshot/input/canvas-filters.html Normal file
View file

@ -0,0 +1,72 @@
<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>