diff options
Diffstat (limited to 'Tests')
| -rw-r--r-- | Tests/LibWeb/Layout/expected/svg-transforms-and-viewboxes.txt | 96 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html | 111 |
2 files changed, 207 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/svg-transforms-and-viewboxes.txt b/Tests/LibWeb/Layout/expected/svg-transforms-and-viewboxes.txt new file mode 100644 index 0000000000..8b8fc8b1da --- /dev/null +++ b/Tests/LibWeb/Layout/expected/svg-transforms-and-viewboxes.txt @@ -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> diff --git a/Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html b/Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html new file mode 100644 index 0000000000..7a57014a5c --- /dev/null +++ b/Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html @@ -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> |