mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 04:07:45 +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:
MacDue
Andreas Kling
parent
71ed1e3e50
commit
f0dde6236d
2 changed files with 230 additions and 0 deletions
105
Tests/LibWeb/Layout/expected/svg-preserve-aspect-ratio.txt
Normal file
105
Tests/LibWeb/Layout/expected/svg-preserve-aspect-ratio.txt
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x273.46875 children: not-inline
|
||||
BlockContainer <body> at (8,8) content-size 784x257.46875 children: inline
|
||||
line 0 width: 772, height: 130.46875, bottom: 130.46875, baseline: 127
|
||||
frag 0 from SVGSVGBox start: 0, length: 0, rect: [9,84 100x50]
|
||||
frag 1 from TextNode start: 0, length: 1, rect: [110,121 8x17.46875]
|
||||
" "
|
||||
frag 2 from SVGSVGBox start: 0, length: 0, rect: [119,84 100x50]
|
||||
frag 3 from TextNode start: 0, length: 1, rect: [220,121 8x17.46875]
|
||||
" "
|
||||
frag 4 from SVGSVGBox start: 0, length: 0, rect: [229,84 100x50]
|
||||
frag 5 from TextNode start: 0, length: 1, rect: [330,121 8x17.46875]
|
||||
" "
|
||||
frag 6 from SVGSVGBox start: 0, length: 0, rect: [339,84 100x50]
|
||||
frag 7 from TextNode start: 0, length: 1, rect: [440,121 8x17.46875]
|
||||
" "
|
||||
frag 8 from SVGSVGBox start: 0, length: 0, rect: [449,84 100x50]
|
||||
frag 9 from TextNode start: 0, length: 1, rect: [550,121 8x17.46875]
|
||||
" "
|
||||
frag 10 from SVGSVGBox start: 0, length: 0, rect: [559,84 100x50]
|
||||
frag 11 from TextNode start: 0, length: 1, rect: [660,121 8x17.46875]
|
||||
" "
|
||||
frag 12 from SVGSVGBox start: 0, length: 0, rect: [669,9 50x125]
|
||||
frag 13 from TextNode start: 0, length: 1, rect: [720,121 8x17.46875]
|
||||
" "
|
||||
frag 14 from SVGSVGBox start: 0, length: 0, rect: [729,9 50x125]
|
||||
line 1 width: 402, height: 130.46875, bottom: 257.46875, baseline: 127
|
||||
frag 0 from SVGSVGBox start: 0, length: 0, rect: [9,136 50x125]
|
||||
frag 1 from TextNode start: 0, length: 1, rect: [60,248 8x17.46875]
|
||||
" "
|
||||
frag 2 from SVGSVGBox start: 0, length: 0, rect: [69,136 50x125]
|
||||
frag 3 from TextNode start: 0, length: 1, rect: [120,248 8x17.46875]
|
||||
" "
|
||||
frag 4 from SVGSVGBox start: 0, length: 0, rect: [129,136 50x125]
|
||||
frag 5 from TextNode start: 0, length: 1, rect: [180,248 8x17.46875]
|
||||
" "
|
||||
frag 6 from SVGSVGBox start: 0, length: 0, rect: [189,136 50x125]
|
||||
frag 7 from TextNode start: 0, length: 1, rect: [240,248 8x17.46875]
|
||||
" "
|
||||
frag 8 from SVGSVGBox start: 0, length: 0, rect: [249,201 160x60]
|
||||
SVGSVGBox <svg> at (9,84) content-size 100x50 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (34,84) content-size 50x50 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (119,84) content-size 100x50 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (119,84) content-size 50x50 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (229,84) content-size 100x50 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (279,84) content-size 50x50 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (339,84) content-size 100x50 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (339,84) content-size 100x100 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (449,84) content-size 100x50 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (449,59) content-size 100x100 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (559,84) content-size 100x50 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (559,34) content-size 100x100 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (669,9) content-size 50x125 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (669,9) content-size 50x50 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (729,9) content-size 50x125 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (729,46.5) content-size 50x50 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (9,136) content-size 50x125 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (9,211) content-size 50x50 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (69,136) content-size 50x125 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (69,136) content-size 125x125 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (129,136) content-size 50x125 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (91.5,136) content-size 125x125 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (189,136) content-size 50x125 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (114,136) content-size 125x125 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (249,201) content-size 160x60 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (299,201) content-size 60x60 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
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