1 files changed, 92 insertions, 0 deletions
diff --git a/layout/reftests/svg/geometry-properties-in-css.html b/layout/reftests/svg/geometry-properties-in-css.html
new file mode 100644
index 0000000000..a17795f3f3
--- /dev/null
+++ b/layout/reftests/svg/geometry-properties-in-css.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<style>
+  svg {
+    width: 800px;
+    height: 600px;
+    font-size: 10px;
+  }
+  svg svg {
+    width: 80px;
+    height: 80px;
+  }
+  rect:first-child {
+    x: 40px;
+    y: calc(5% + 10px);
+    width: calc(80px + 2em);
+    height: 10em;
+    rx: auto;
+    ry: 5%;
+    cx: 100px;
+    cy: 200px;
+  }
+  circle {
+    r: calc(70px);
+  }
+  g > #c2 {
+    cx: 80px;
+    cy: calc(20% + 10px);
+    x: 40px;
+    y: calc(5% + 10px);
+  }
+  svg > svg > ellipse {
+    cx: 30%;
+    cy: 100px;
+    rx: 20px;
+    ry: 40px;
+  }
+  svg > svg > ellipse:nth-child(2) {
+    transform: translate(50px, -50px);
+  }
+  svg ellipse {
+    cx: 10px;
+    cy: 10px;
+    rx: 10px;
+    ry: 10px;
+  }
+  foreignObject {
+    transform: translate(450px,0);
+    y: 200px;
+    width: 80px;
+    height: 130px;
+  }
+  #r2 {
+    width: 50px;
+    height:50px;
+  }
+  svg image {
+    x: 300px;
+    y: 260px;
+    height: 50px;
+  }
+  use {
+    x:400px;
+    y:310px;
+  }
+</style>
+<svg>
+  <g>
+    <rect x="0" y="-10" width="30px" height="10px" rx="-5px" ry="auto" fill="purple" />
+    <rect x=" 40px /* some nonsense */ " y="150" width="30" height="20em" rx="20px" ry="20px" fill="magenta" />
+  </g>
+  <circle cx="/* more nonsense */ 170" cy="340" r="-5px" fill="pink" />
+  <g transform="translate(150,0)">
+    <circle id="c2" cx="20" cy="40" fill="skyblue" />
+  </g>
+  <svg x="300" width="200px" height="200px" viewBox="0 0 100 100">
+    <ellipse fill="cyan" />
+    <ellipse fill="navy" />
+  </svg>
+  <foreignObject>
+    <svg>
+      <rect id="r2" style="x:0;y:0" fill="brown" />
+    </svg>
+  </foreignObject>
+  <image href="data:image/svg+xml,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" />
+  <defs>
+    <g id="g">
+      <rect display="none"/>
+      <rect width="80" height="80" fill="skyblue" />
+    </g>
+  </defs>
+  <use href="#g"/>
+</svg>