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
148 lines
3.5 KiB
HTML
148 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<canvas id="canvas" width="400" height="350"></canvas>
|
|
<style>
|
|
#canvas {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
</style>
|
|
<script>
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
// Line styles
|
|
ctx.lineWidth = 10;
|
|
|
|
// Butt cap (default)
|
|
ctx.lineCap = "butt";
|
|
ctx.beginPath();
|
|
ctx.moveTo(20, 30);
|
|
ctx.lineTo(100, 30);
|
|
ctx.stroke();
|
|
|
|
// Butt cap, zero length path
|
|
ctx.beginPath();
|
|
ctx.moveTo(120, 30);
|
|
ctx.lineTo(120, 30);
|
|
ctx.stroke();
|
|
|
|
// Round cap
|
|
ctx.lineCap = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(20, 75);
|
|
ctx.lineTo(100, 75);
|
|
ctx.stroke();
|
|
|
|
// Round cap, zero length path
|
|
ctx.beginPath();
|
|
ctx.moveTo(120, 75);
|
|
ctx.lineTo(120, 75);
|
|
ctx.stroke();
|
|
|
|
// Square cap
|
|
ctx.lineCap = "square";
|
|
ctx.beginPath();
|
|
ctx.moveTo(20, 120);
|
|
ctx.lineTo(100, 120);
|
|
ctx.stroke();
|
|
|
|
// Square cap, zero length path
|
|
ctx.beginPath();
|
|
ctx.moveTo(120, 120);
|
|
ctx.lineTo(120, 120);
|
|
ctx.stroke();
|
|
|
|
// Open path
|
|
ctx.lineCap = "butt";
|
|
ctx.beginPath();
|
|
ctx.moveTo(150, 50);
|
|
ctx.lineTo(250, 50);
|
|
ctx.lineTo(200, 100);
|
|
ctx.lineTo(150, 50);
|
|
ctx.stroke();
|
|
|
|
// Closed path with round lineJoin
|
|
ctx.lineCap = "butt";
|
|
ctx.lineJoin = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(300, 50);
|
|
ctx.lineTo(350, 100);
|
|
ctx.lineTo(250, 100);
|
|
ctx.lineTo(300, 50);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
|
|
// Miter limit test.
|
|
ctx.lineWidth = 5;
|
|
ctx.lineJoin = "miter";
|
|
ctx.beginPath();
|
|
ctx.moveTo(380, 100);
|
|
ctx.lineTo(385, 20);
|
|
ctx.lineTo(390, 100);
|
|
ctx.stroke();
|
|
|
|
ctx.miterLimit = 20;
|
|
ctx.beginPath();
|
|
ctx.moveTo(380, 230);
|
|
ctx.lineTo(385, 150);
|
|
ctx.lineTo(390, 230);
|
|
ctx.stroke();
|
|
|
|
// Different angles, butt caps
|
|
ctx.lineCap = "butt";
|
|
ctx.lineWidth = 5;
|
|
|
|
let centerX = 100;
|
|
const centerY = 230;
|
|
const innerRadius = 50;
|
|
const outerRadius = 80;
|
|
|
|
for (let angle = 0; angle < 360; angle += 15) {
|
|
const radians = (angle * Math.PI) / 180;
|
|
const startX = centerX + innerRadius * Math.cos(radians);
|
|
const startY = centerY + innerRadius * Math.sin(radians);
|
|
const endX = centerX + outerRadius * Math.cos(radians);
|
|
const endY = centerY + outerRadius * Math.sin(radians);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX, startY);
|
|
ctx.lineTo(endX, endY);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Circles with different dashes
|
|
let dashes = [[15, 3, 3, 3, 3, 3, 3, 3], [1], [12, 3, 3]];
|
|
for (let r = innerRadius - 10, i = 0; r >= 10; r -= 10, i++) {
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
|
|
ctx.closePath();
|
|
ctx.setLineDash(dashes[i % dashes.length]);
|
|
ctx.lineDashOffset = (r - 30) / 2;
|
|
ctx.stroke();
|
|
}
|
|
ctx.setLineDash([]);
|
|
ctx.lineDashOffset = 0;
|
|
|
|
// Different angles, round caps
|
|
ctx.lineCap = "round";
|
|
ctx.lineWidth = 5;
|
|
|
|
centerX = 280;
|
|
|
|
for (let angle = 0; angle < 360; angle += 15) {
|
|
const radians = (angle * Math.PI) / 180;
|
|
const startX = centerX + innerRadius * Math.cos(radians);
|
|
const startY = centerY + innerRadius * Math.sin(radians);
|
|
const endX = centerX + outerRadius * Math.cos(radians);
|
|
const endY = centerY + outerRadius * Math.sin(radians);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX, startY);
|
|
ctx.lineTo(endX, endY);
|
|
ctx.stroke();
|
|
}
|
|
</script>
|