summaryrefslogtreecommitdiff
path: root/Tests/LibWeb/Layout
diff options
context:
space:
mode:
authorMacDue <macdue@dueutil.tech>2023-04-10 12:48:57 +0100
committerAndreas Kling <kling@serenityos.org>2023-04-12 07:40:22 +0200
commit5abffc9c5a462fe7ed7d8d2da4d3367b346eaf9d (patch)
tree4a35335b0ce737aed1fa5c7f2a21e835b8e45dd6 /Tests/LibWeb/Layout
parent8aecd8c7aca6e02f8bea18e4afcef15e1e272a15 (diff)
downloadserenity-5abffc9c5a462fe7ed7d8d2da4d3367b346eaf9d.zip
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).
Diffstat (limited to 'Tests/LibWeb/Layout')
-rw-r--r--Tests/LibWeb/Layout/expected/svg-transforms-and-viewboxes.txt96
-rw-r--r--Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html111
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 09:27:49 +0000