mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
59a867d3e3
With the newly supported fuzzy matching in our test-web runner, we can now define the expected maximum color channel and pixel count errors per failing test and set a baseline they should not exceed. The figures I added to these tests all come from my macOS M4 machine. Most discrepancies seem to come from color calculations being slightly off.
257 lines
7.3 KiB
HTML
257 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/svg-stroke-styles-ref.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>
|