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
87 lines
2.3 KiB
HTML
87 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-27725">
|
|
|
|
<style>
|
|
html {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
p, .container {
|
|
border: 0.8em darkviolet;
|
|
border-style: dotted double;
|
|
margin: 1em 0;
|
|
padding: 1.4em;
|
|
font: 900 1.2em sans-serif;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.linear-gradient {
|
|
background: linear-gradient(60deg, red, yellow, red, yellow, red);
|
|
}
|
|
|
|
.radial-gradient {
|
|
background: radial-gradient(circle, red, yellow, red, yellow, red);
|
|
}
|
|
|
|
.conic-gradient {
|
|
background: conic-gradient(red, yellow, red, yellow, red);
|
|
}
|
|
|
|
.image-background {
|
|
background: url('../data/car.png');
|
|
}
|
|
|
|
.border-box {
|
|
background-clip: border-box;
|
|
}
|
|
.padding-box {
|
|
background-clip: padding-box;
|
|
}
|
|
.content-box {
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.text {
|
|
background-clip: text;
|
|
color: rgb(0 0 0 / 20%);
|
|
}
|
|
.new-background {
|
|
background: rgb(255 255 0 / 30%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
|
<img src="../data/car.png" />
|
|
|
|
<p class="border-box linear-gradient">The background extends behind the border.</p>
|
|
<p class="padding-box radial-gradient">
|
|
The background extends to the inside edge of the border.
|
|
</p>
|
|
<p class="content-box conic-gradient">
|
|
The background extends only to the edge of the content box.
|
|
</p>
|
|
<div class="text container linear-gradient">
|
|
The background is clipped to the foreground text.
|
|
<span>Some other text in a sub-element</span>
|
|
</div>
|
|
<div class="text container radial-gradient">
|
|
The background is clipped to the foreground text.
|
|
<span>Some other text in a sub-element</span>
|
|
</div>
|
|
<div class="text container conic-gradient">
|
|
The background is clipped to the foreground text.
|
|
<span>Some other text in a sub-element</span>
|
|
</div>
|
|
<div class="text container image-background">
|
|
Testing text.
|
|
<div>
|
|
<div class="new-background" style="color: rgb(0 0 0 / 20%);">The is nested text that should still be clipped to the background</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|