We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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).
MacDue 2 years ago
parent
8aecd8c7ac
commit
5abffc9c5a
2 changed files with 207 additions and 0 deletions
Split View Show Diff Stats
  1. 96 0
      Tests/LibWeb/Layout/expected/svg-transforms-and-viewboxes.txt
  2. 111 0
      Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html

+ 96 - 0
Tests/LibWeb/Layout/expected/svg-transforms-and-viewboxes.txt
View File 

@@ -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 - 0
Tests/LibWeb/Layout/input/svg-transforms-and-viewboxes.html
View 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>

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5