RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 21:47:45 +00:00
Code Issues Activity Actions

Tests: Add layout test for SVG preserveAspectRatio

Browse source 
This is a cut down version of the example, but it's nice to add a
test to ensure this keeps working.
This commit is contained in:
MacDue 2023-04-17 01:29:24 +01:00 • committed by Andreas Kling
parent 71ed1e3e50
commit f0dde6236d
2 changed files with 230 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

125
Tests/LibWeb/Layout/input/svg-preserve-aspect-ratio.html Normal file
View file

@ -0,0 +1,125 @@
<style>
* {
font-family: 'SerenitySans';
}
svg {
border: 1px solid black;
}
</style>
<svg
viewBox="0 0 100 100"
width="100"
height="50"
preserveAspectRatio="xMidYMid meet"
x="0"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="100"
height="50"
preserveAspectRatio="xMinYMid meet"
x="25"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="100"
height="50"
preserveAspectRatio="xMaxYMid meet"
x="50"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="100"
height="50"
preserveAspectRatio="xMidYMin slice"
x="0"
y="15">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="100"
height="50"
preserveAspectRatio="xMidYMid slice"
x="25"
y="15">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="100"
height="50"
preserveAspectRatio="xMidYMax slice"
x="50"
y="15">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="50"
height="125"
preserveAspectRatio="xMidYMin meet"
x="75"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="50"
height="125"
preserveAspectRatio="xMidYMid meet"
x="90"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="50"
height="125"
preserveAspectRatio="xMidYMax meet"
x="105"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="50"
height="125"
preserveAspectRatio="xMinYMid slice"
x="120"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="50"
height="125"
preserveAspectRatio="xMidYMid slice"
x="135"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="50"
height="125"
preserveAspectRatio="xMaxYMid slice"
x="150"
y="0">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
<svg
viewBox="0 0 100 100"
width="160"
height="60"
preserveAspectRatio="none"
x="0"
y="30">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>