ladybird/Tests/LibWeb/Screenshot/input/canvas-arcs-and-ellipses.html
Jelle Raaijmakers 59a867d3e3
Some checks are pending
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
Tests: Enable all screenshot tests on all platforms
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.
2025-07-17 12:59:11 +01:00

39 lines
1.1 KiB
HTML

<!DOCTYPE html>
<link rel="match" href="../expected/canvas-arcs-and-ellipses-ref.html" />
<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-567">
<style>
canvas {
border: 1px solid black;
image-rendering: pixelated;
}
</style>
<canvas id="canvas" width="550" height="325"></canvas>
<script>
const canvas = document.getElementById("canvas")
const context = canvas.getContext("2d");
context.beginPath();
context.arc(59, 55, 38, 5.3849570248895775, 2.9421639085067177);
context.stroke();
context.fill();
context.beginPath();
context.ellipse(20,20,15,8,1.2273132071162383,4.1926143018618225,2.8853539230051624);
context.stroke();
context.fill();
for (let i = 0; i < 2; i++) {
for (let j = -5; j <= 5; j++) {
context.beginPath();
let x = 25 + (j + 5) * 50;
let y = 150 + i * 50;
let radius = 20;
let startAngle = 0;
let endAngle = (Math.PI * j) / 2;
let counterclockwise = i == 1;
context.arc(x, y, radius, startAngle, endAngle, counterclockwise);
context.stroke();
}
}
</script>