mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
Tests: Add layout test for SVG transforms and viewboxes
Now that these are kind of working, lets add a layout test to prevent future regressions :^) This test is the same as the previous example (it is copied, though that seems to have been done for other tests, e.g. Acid 1).
This commit is contained in:
MacDue
Andreas Kling
parent
8aecd8c7ac
commit
5abffc9c5a
Notes:
sideshowbarker
2024-07-17 02:28:18 +09:00
Author: https://github.com/MacDue Commit: https://github.com/SerenityOS/serenity/commit/5abffc9c5a Pull-request: https://github.com/SerenityOS/serenity/pull/18271
@ -0,0 +1,96 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x700 children: not-inline
|
||||
BlockContainer <body> at (50,50) content-size 700x600 children: inline
|
||||
line 0 width: 616, height: 203.46875, bottom: 203.46875, baseline: 200
|
||||
frag 0 from SVGSVGBox start: 0, length: 0, rect: [50,150 200x100]
|
||||
frag 1 from TextNode start: 0, length: 1, rect: [250,236 8x17.46875]
|
||||
" "
|
||||
frag 2 from SVGSVGBox start: 0, length: 0, rect: [258,50 200x200]
|
||||
frag 3 from TextNode start: 0, length: 1, rect: [458,236 8x17.46875]
|
||||
" "
|
||||
frag 4 from SVGSVGBox start: 0, length: 0, rect: [466,50 200x200]
|
||||
line 1 width: 616, height: 203.46875, bottom: 403.46875, baseline: 200
|
||||
frag 0 from SVGSVGBox start: 0, length: 0, rect: [50,250 200x200]
|
||||
frag 1 from TextNode start: 0, length: 1, rect: [250,436 8x17.46875]
|
||||
" "
|
||||
frag 2 from SVGSVGBox start: 0, length: 0, rect: [258,250 200x200]
|
||||
frag 3 from TextNode start: 0, length: 1, rect: [458,436 8x17.46875]
|
||||
" "
|
||||
frag 4 from SVGSVGBox start: 0, length: 0, rect: [466,250 200x200]
|
||||
line 2 width: 200, height: 200, bottom: 600, baseline: 200
|
||||
frag 0 from SVGSVGBox start: 0, length: 0, rect: [50,450 200x200]
|
||||
SVGSVGBox <svg> at (50,150) content-size 200x100 children: inline
|
||||
TextNode <#text>
|
||||
SVGGraphicsBox <g> children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <path> at (45.193222,199.330932) content-size 119.782173x48.453796 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGraphicsBox <g> children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <path> at (84.5,159.504882) content-size 81x80.995117 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (258,50) content-size 200x200 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (267.5,59.5) content-size 31x21 children: not-inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (287.5,129.5) content-size 111x91 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (466,50) content-size 200x200 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (505.5,89.5) content-size 121x121 children: not-inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (470.858978,89.5) content-size 190.282043x121 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (50,250) content-size 200x200 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (120.088233,320.088256) content-size 59.823524x59.823528 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (51.943771,309.873626) content-size 69.144462x69.144454 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (178.911773,320.981903) content-size 69.14447x69.144462 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (258,250) content-size 200x200 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (277.5,269.5) content-size 161x161 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (337.5,269.5) content-size 41x161 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (277.5,329.5) content-size 161x41 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <circle> at (337.5,329.5) content-size 41x41 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (466,250) content-size 200x200 children: inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (505.5,289.5) content-size 121x121 children: not-inline
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (505.5,254.858978) content-size 121x190.282043 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGSVGBox <svg> at (50,450) content-size 200x200 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (59.5,459.5) content-size 81x81 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (159.5,459.5) content-size 81x81 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (59.5,559.5) content-size 81x81 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
SVGGeometryBox <rect> at (159.5,559.5) content-size 81x81 children: not-inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
111
Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html
Normal file
111
Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html
Normal file
@ -0,0 +1,111 @@
|
||||
<style>
|
||||
body {
|
||||
margin: 50px;
|
||||
}
|
||||
* {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
</style>
|
||||
<!-- SVG transforms test page, based on MDN examples -->
|
||||
<svg
|
||||
width="200px" height="100px"
|
||||
viewBox="0 0 150 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g
|
||||
fill="grey"
|
||||
transform="rotate(-10 50 100)
|
||||
translate(-36 45.5)
|
||||
skewX(40)
|
||||
scale(1 0.5)">
|
||||
<path
|
||||
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="red"
|
||||
>
|
||||
<path
|
||||
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="10" y="10" width="30" height="20" fill="green" />
|
||||
<rect
|
||||
x="10"
|
||||
y="10"
|
||||
width="30"
|
||||
height="20"
|
||||
fill="red"
|
||||
transform="matrix(3 1 -1 3 30 40)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-3" y="-3" width="6" height="6" />
|
||||
|
||||
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="10" height="10" />
|
||||
|
||||
<!-- rotation is done around the point 0,0 -->
|
||||
<rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
|
||||
|
||||
<!-- rotation is done around the point 10,10 -->
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="10"
|
||||
height="10"
|
||||
fill="green"
|
||||
transform="rotate(100 10 10)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- uniform scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
|
||||
|
||||
<!-- vertical scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1 4)" />
|
||||
|
||||
<!-- horizontal scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="pink" transform="scale(4 1)" />
|
||||
|
||||
<!-- No scale -->
|
||||
<circle cx="0" cy="0" r="10" fill="black" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-3" y="-3" width="6" height="6" />
|
||||
|
||||
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
|
||||
</svg>
|
||||
<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- No translation -->
|
||||
<rect x="5" y="5" width="40" height="40" fill="green" />
|
||||
|
||||
<!-- Horizontal translation -->
|
||||
<rect
|
||||
x="5"
|
||||
y="5"
|
||||
width="40"
|
||||
height="40"
|
||||
fill="blue"
|
||||
transform="translate(50)" />
|
||||
|
||||
<!-- Vertical translation -->
|
||||
<rect
|
||||
x="5"
|
||||
y="5"
|
||||
width="40"
|
||||
height="40"
|
||||
fill="red"
|
||||
transform="translate(0 50)" />
|
||||
|
||||
<!-- Both horizontal and vertical translation -->
|
||||
<rect
|
||||
x="5"
|
||||
y="5"
|
||||
width="40"
|
||||
height="40"
|
||||
fill="yellow"
|
||||
transform="translate(50 50)" />
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user