mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 18:17:22 +02:00
d2528dd5ce
Instead of rendering a reference HTML page that wraps an <img> tag pointing to a PNG, Screenshot tests now load the expected PNG directly from disk and compare it against the rendered screenshot. This eliminates the indirection of loading and rendering a second page just to display a static image. This also means --rebaseline now works for Screenshot tests, generating the expected PNG automatically instead of requiring manual screenshot capture and placement. Changes: - Add TestMode::Screenshot with its own collector and runner - Move PNGs from Screenshot/images/ to Screenshot/expected/ with normalized names matching input filenames - Remove all 92 reference HTML wrapper files and the images/ directory - Remove <link rel="match"> from all 94 Screenshot input HTML files - Update add_libweb_test.py Screenshot boilerplate accordingly - Add Screenshot mode to results viewer image comparison tabs
48 lines
1.2 KiB
HTML
48 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-563">
|
|
<html>
|
|
<head>
|
|
<style>
|
|
canvas {
|
|
border: 1px solid black;
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = 600;
|
|
canvas.height = 280;
|
|
document.body.appendChild(canvas);
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.font = "48px serif";
|
|
|
|
ctx.save();
|
|
ctx.translate(20, 250);
|
|
ctx.rotate(-Math.PI*0.2);
|
|
ctx.fillText("Rotated Text!", 10, 40);
|
|
ctx.restore();
|
|
|
|
ctx.strokeText("Stroke Text!", 10, 50);
|
|
|
|
const gradient = ctx.createLinearGradient(280, 20, 580, 120);
|
|
gradient.addColorStop(0,"red");
|
|
gradient.addColorStop(0.15,"yellow");
|
|
gradient.addColorStop(0.3,"green");
|
|
gradient.addColorStop(0.45,"aqua");
|
|
gradient.addColorStop(0.6,"blue");
|
|
gradient.addColorStop(0.7,"fuchsia");
|
|
gradient.addColorStop(1,"red");
|
|
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillText("Gradient Text!", 260, 150);
|
|
|
|
ctx.fillStyle = "red";
|
|
ctx.fillText("Squished Text", 50, 120, 100);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|