eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-27 18:17:22 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
f05bc7c0cd31d8a119bef052d531ac7c68e2e039
ladybird/Tests/LibWeb/Screenshot/input/object-fit-position.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

298 lines
7.8 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-465">
<style>
.images img {
border: 1px solid black;
}
.img-wrapper {
margin-left: 20px;
}
.fit-cover .images img {
object-fit: cover;
}
.fit-contain .images img {
object-fit: contain;
}
.fit-fill .images img {
object-fit: fill;
}
.fit-none .images img {
object-fit: none;
}
.wider img {
width: 100px;
height: 50px;
}
.taller img {
width: 50px;
height: 100px;
}
img.pos-left {
object-position: left;
}
img.pos-right {
object-position: right;
}
img.pos-top {
object-position: top;
}
img.pos-bottom {
object-position: bottom;
}
img.pos-center {
object-position: bottom;
}
img.pos-absolute {
object-position: 20px 30%;
}
</style>
<h2>Object-Fit: Cover</h2>
<div class="fit-cover">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
</div>
<h2>Object-Fit: contain</h2>
<div class="fit-contain">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
</div>
<h2>Object-Fit: fill</h2>
<div class="fit-fill">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
</div>
<h2>Object-Fit: none</h2>
<div class="fit-none">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="../data/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="../data/car.png">
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink