mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 10:07:15 +02:00
With the newly supported fuzzy matching in our test-web runner, we can now define the expected maximum color channel and pixel count errors per failing test and set a baseline they should not exceed. The figures I added to these tests all come from my macOS M4 machine. Most discrepancies seem to come from color calculations being slightly off.
49 lines
1.4 KiB
HTML
49 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/canvas-implict-moves-and-lines-ref.html" />
|
|
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-106">
|
|
<canvas id="canvas" width="300" height="300"></canvas>
|
|
<style>
|
|
#canvas {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
</style>
|
|
<script>
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
{
|
|
ctx.beginPath();
|
|
ctx.moveTo(NaN, 0); // Do nothing.
|
|
ctx.lineTo(25, 25); // Equivalent to moveTo(25, 25)
|
|
ctx.lineTo(100, 25); // Line (25, 25) -> (100, 25)
|
|
ctx.stroke();
|
|
}
|
|
{
|
|
let cp1 = { x: 25, y: 75 };
|
|
let cp2 = { x: 114.6, y: 113.4 };
|
|
let end = { x: 119.72, y: 87.8 };
|
|
ctx.beginPath();
|
|
ctx.bezierCurveTo(cp1.x, cp1.y, NaN, cp2.y, end.x, end.y); // Do nothing.
|
|
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); // Curve from cp1.
|
|
ctx.stroke();
|
|
}
|
|
{
|
|
let cp = { x: 230, y: 230 };
|
|
let end = { x: 50, y: 200 };
|
|
ctx.beginPath();
|
|
ctx.quadraticCurveTo(cp.x, cp.y, 1000, NaN); // Do nothing.
|
|
ctx.quadraticCurveTo(cp.x, cp.y, end.x, end.y); // Appears as line from cp to end.
|
|
ctx.stroke();
|
|
}
|
|
{
|
|
ctx.beginPath();
|
|
ctx.moveTo(200, 95);
|
|
ctx.ellipse(200, 100, 50, 75, Math.PI / 0, 0, 2 * Math.PI); // Do nothing.
|
|
ctx.ellipse(200, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI); // Ellipse with line from centre.
|
|
ctx.stroke();
|
|
}
|
|
</script>
|