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
86 lines
2.4 KiB
HTML
86 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-907">
|
|
<style>
|
|
body {
|
|
font-size: 0;
|
|
}
|
|
|
|
.outer {
|
|
margin: 5px;
|
|
width: 130px;
|
|
height: 80px;
|
|
display: inline-block;
|
|
background-color: grey;
|
|
outline: 2px solid black;
|
|
}
|
|
|
|
.inner {
|
|
height: 100%;
|
|
background-color: black;
|
|
clip-path: polygon(evenodd, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px);
|
|
}
|
|
</style>
|
|
<div class="outer" style="transform: matrix(1, 2, 3, 4, 5, 6)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: perspective(17px)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotate(0.5turn)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotateX(10deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotateY(10deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotateZ(10deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translate(12px, 50%)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translate3d(12px, 50%, 3em)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateX(2em)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateY(3in)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateZ(2px)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scale(2, 0.5)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scale3d(2.5, 1.2, 0.3)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scaleX(2)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scaleY(0.5)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scaleZ(0.3)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: skew(30deg, 20deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: skewX(30deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: skewY(1.07rad)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateX(10px) rotate(10deg) translateY(5px)">
|
|
<div class="inner"></div>
|
|
</div>
|