Files
ladybird/Tests/LibWeb/Screenshot/input/css-transform-box.html
Aliaksandr Kalenik d2528dd5ce LibWeb: Compare Screenshot tests directly against expected PNGs
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
2026-02-24 09:55:14 +01:00

36 lines
1.2 KiB
HTML

<!doctype html>
<style>
svg {
width: 400px;
height: 400px;
border: 1px solid #d9d9d9;
}
.box {
stroke-width: 4;
transform-origin: 20% 20%;
transform: scale(1.5);
}
div.box {
width: 40px;
height: 40px;
border: solid black;
border-width: 10px 20px 30px 40px;
margin: 80px;
}
</style>
<div class="box" style="transform-box: content-box">Hi</div>
<div class="box" style="transform-box: border-box">Hi</div>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- NOTE: We don't currently calculate the fill or stroke boxes for SVG elements, so the test will need to be
rebaselined once we do! -->
<rect class="box" style="transform-box: fill-box" x="10" y="10" width="10" height="10" stroke="black" fill="yellow" />
<circle fill="red" r="1" cx="15" cy="15" />
<rect class="box" style="transform-box: stroke-box" x="10" y="40" width="10" height="10" stroke="black" fill="cyan" />
<circle fill="red" r="1" cx="15" cy="45" />
<rect class="box" style="transform-box: view-box" x="10" y="70" width="10" height="10" stroke="black" fill="green" />
<circle fill="red" r="1" cx="15" cy="75" />
</svg>