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
256 lines
7.3 KiB
HTML
256 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-450">
|
|
<style>
|
|
path {
|
|
stroke-width: 20;
|
|
}
|
|
path:nth-of-type(1) {
|
|
stroke-linecap: butt;
|
|
}
|
|
path:nth-of-type(2) {
|
|
stroke-linecap: round;
|
|
}
|
|
path:nth-of-type(3) {
|
|
stroke-linecap: square;
|
|
}
|
|
</style>
|
|
<svg width="600" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Horizontal lines. -->
|
|
<path d="M20,20 h40" stroke="red" />
|
|
<path d="M20,50 h40" stroke="yellow" />
|
|
<path d="M20,80 h40" stroke="blue" />
|
|
|
|
<!-- Vertical lines. -->
|
|
<path d="M20,250 v-40" stroke="red" stroke-linecap="butt" />
|
|
<path d="M50,250 v-40" stroke="yellow" stroke-linecap="round" />
|
|
<path d="M80,250 v-40" stroke="blue" stroke-linecap="square" />
|
|
|
|
<!-- Degenerate lines. -->
|
|
<path d="M95,20 h0" stroke="red" stroke-linecap="butt" />
|
|
<path d="M95,50 h0" stroke="yellow" stroke-linecap="round" />
|
|
<path d="M95,80 h0" stroke="blue" stroke-linecap="square" />
|
|
|
|
<!-- Degenerate line ends, but actual path. -->
|
|
<path d="M130,20 h0 l20,-10 h0" stroke="red" stroke-linecap="butt" />
|
|
<path d="M130,50 h0 l20,-10 h0" stroke="yellow" stroke-linecap="round" />
|
|
<path d="M130,80 h0 l20,-10 h0" stroke="blue" stroke-linecap="square" />
|
|
|
|
<!-- Weird line ends. -->
|
|
<path d="M190,21 l0,-1 l20,-10 l0,-1" stroke="red" stroke-linecap="butt" />
|
|
<path d="M190,51 l0,-1 l20,-10 l0,-1" stroke="yellow" stroke-linecap="round" />
|
|
<path d="M190,81 l0,-1 l20,-10 l0,-1" stroke="blue" stroke-linecap="square" />
|
|
|
|
<!-- Half-open lines. -->
|
|
<path d="M240,20 h20 h-20" stroke="red" stroke-linecap="butt" stroke-linejoin="round" />
|
|
<path d="M240,50 h20 h-20" stroke="yellow" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M240,80 h20 h-20" stroke="blue" stroke-linecap="square" stroke-linejoin="round" />
|
|
|
|
<!-- Closed lines. -->
|
|
<path d="M290,20 h20 z" stroke="red" stroke-linecap="butt" stroke-linejoin="miter" />
|
|
<path d="M290,50 h20 z" stroke="yellow" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M290,80 h20 z" stroke="blue" stroke-linecap="square" stroke-linejoin="bevel" />
|
|
|
|
<!-- Open triangle, facing down. -->
|
|
<path d="M200,130 h60 L230,170 L200,130" stroke="red" stroke-linecap="butt" fill="none" />
|
|
|
|
<!-- Open triangle, facing down, opposite winding order. Bevel linejoins. -->
|
|
<path
|
|
d="M240,210 L270,250 L300,210 h-60"
|
|
stroke="red"
|
|
stroke-linecap="butt"
|
|
fill="none"
|
|
stroke-linejoin="bevel"
|
|
/>
|
|
|
|
<!-- Closed triangle, facing up. -->
|
|
<path d="M280,170 h60 L310,130 L280,170 Z" stroke="red" stroke-linecap="butt" fill="none" />
|
|
|
|
<!-- Very short and wide line. -->
|
|
<path
|
|
d="M370,150 h2"
|
|
stroke="red"
|
|
stroke-linecap="butt"
|
|
style="stroke-width: 200"
|
|
fill="none"
|
|
/>
|
|
|
|
<!-- Very short and wide line with very thin caps -->
|
|
<path
|
|
d="M375,150 h0.01 h1.98 h0.01"
|
|
stroke="blue"
|
|
stroke-linecap="butt"
|
|
style="stroke-width: 200"
|
|
fill="none"
|
|
/>
|
|
|
|
<!-- Closed rect (using <rect>) -->
|
|
<rect
|
|
x="20"
|
|
y="120"
|
|
width="50"
|
|
height="50"
|
|
stroke="green"
|
|
fill="none"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
stroke-width="20"
|
|
/>
|
|
|
|
<!-- Open rect. -->
|
|
<path
|
|
d="M110,170 h50 v-50 h-50 v50"
|
|
stroke="green"
|
|
fill="none"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
/>
|
|
|
|
<!-- Small closed rects with line width becoming wider than rect size. -->
|
|
<rect
|
|
x="100"
|
|
y="200"
|
|
width="20"
|
|
height="20"
|
|
stroke="green"
|
|
stroke-linejoin="round"
|
|
stroke-width="8"
|
|
fill="none"
|
|
/>
|
|
<rect
|
|
x="130"
|
|
y="200"
|
|
width="15"
|
|
height="15"
|
|
stroke="green"
|
|
stroke-linejoin="round"
|
|
stroke-width="8"
|
|
fill="none"
|
|
/>
|
|
<rect
|
|
x="155"
|
|
y="200"
|
|
width="10"
|
|
height="10"
|
|
stroke="green"
|
|
stroke-linejoin="round"
|
|
stroke-width="8"
|
|
fill="none"
|
|
/>
|
|
<!-- FIXME: Figure out why this is missing the center pixel on mac/arm64
|
|
<rect x="175" y="200" width="5" height="5" stroke="green"
|
|
stroke-linejoin="round" stroke-width="8" fill="none" /> -->
|
|
|
|
<!-- Lines with sharp angles, miter linejoins, and differing miter limits. -->
|
|
<path
|
|
d="M300,290 l 5,-55 l5,55"
|
|
stroke="blue"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
fill="none"
|
|
style="stroke-width: 4"
|
|
/>
|
|
<path
|
|
d="M320,290 l 5,-55 l5,55"
|
|
stroke="blue"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
fill="none"
|
|
stroke-miterlimit="20"
|
|
style="stroke-width: 4; stroke-miterlimit: -5"
|
|
/>
|
|
|
|
<!-- PDF 1.7 spec, TABLE 4.6 Examples of line dash patterns. -->
|
|
<g fill="none" stroke-linecap="butt" stroke="red" transform="translate(100, 240) scale(3)">
|
|
<path
|
|
d="M0,0 h13"
|
|
style="stroke-width: 1; stroke-linecap: butt"
|
|
stroke-dashoffset="0"
|
|
stroke-dasharray="none"
|
|
/>
|
|
<path
|
|
d="M0,3 h13"
|
|
style="stroke-width: 1; stroke-linecap: butt"
|
|
stroke-dashoffset="0"
|
|
stroke-dasharray="3"
|
|
/>
|
|
<path
|
|
d="M0,6 h13"
|
|
style="stroke-width: 1; stroke-linecap: butt"
|
|
stroke-dashoffset="1"
|
|
stroke-dasharray="2"
|
|
/>
|
|
<path
|
|
d="M0,9 h13"
|
|
style="stroke-width: 1; stroke-linecap: butt"
|
|
stroke-dashoffset="0"
|
|
stroke-dasharray="2 1"
|
|
/>
|
|
<path
|
|
d="M0,12 h13"
|
|
style="stroke-width: 1; stroke-linecap: butt"
|
|
stroke-dashoffset="6"
|
|
stroke-dasharray="3 5"
|
|
/>
|
|
<path
|
|
d="M0,15 h13"
|
|
style="stroke-width: 1; stroke-linecap: butt"
|
|
stroke-dashoffset="11"
|
|
stroke-dasharray="2 3"
|
|
/>
|
|
</g>
|
|
|
|
<!-- Dashed rect with 0 dash length. -->
|
|
<rect
|
|
x="155"
|
|
y="225"
|
|
width="30"
|
|
height="30"
|
|
fill="none"
|
|
stroke="green"
|
|
style="stroke-linecap: round"
|
|
stroke-dashoffset="0"
|
|
stroke-dasharray="0 10"
|
|
stroke-width="4"
|
|
/>
|
|
|
|
<!-- Dashed rects with different cap styles. The last one also has a no-op negative scale factor. -->
|
|
<rect
|
|
x="195"
|
|
y="225"
|
|
width="30"
|
|
height="30"
|
|
fill="none"
|
|
stroke="green"
|
|
style="stroke-linecap: butt"
|
|
stroke-dashoffset="1"
|
|
stroke-dasharray="2 2"
|
|
stroke-width="1"
|
|
/>
|
|
<rect
|
|
x="155"
|
|
y="265"
|
|
width="30"
|
|
height="30"
|
|
fill="none"
|
|
stroke="green"
|
|
style="stroke-linecap: round"
|
|
stroke-dashoffset="1"
|
|
stroke-dasharray="2 2"
|
|
stroke-width="1"
|
|
/>
|
|
<g transform="scale(-1)">
|
|
<rect
|
|
x="-225"
|
|
y="-295"
|
|
width="30"
|
|
height="30"
|
|
fill="none"
|
|
stroke="green"
|
|
style="stroke-linecap: square"
|
|
stroke-dashoffset="1"
|
|
stroke-dasharray="2 2"
|
|
stroke-width="1"
|
|
/>
|
|
</g>
|
|
</svg>
|