mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 14:47:46 +00:00
Tests: Add layout test for SVG preserveAspectRatio
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:
parent
71ed1e3e50
commit
f0dde6236d
2 changed files with 230 additions and 0 deletions
125
Tests/LibWeb/Layout/input/svg-preserve-aspect-ratio.html
Normal file
125
Tests/LibWeb/Layout/input/svg-preserve-aspect-ratio.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue