Bug 1762792 - SVG <use> elements should render despite zero values in their width and height attributes (unless they're referencing a <svg> or <symbol> element) r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D150258

dom/svg/SVGUseElement.cpp

@@ -577,6 +577,10 @@ gfxMatrix SVGUseElement::PrependLocalTransformsTo(
 
 /* virtual */
 bool SVGUseElement::HasValidDimensions() const {
+  if (!OurWidthAndHeightAreUsed()) {
+    return true;
+  }
+
   return (!mLengthAttributes[ATTR_WIDTH].IsExplicitlySet() ||
           mLengthAttributes[ATTR_WIDTH].GetAnimValInSpecifiedUnits() > 0) &&
          (!mLengthAttributes[ATTR_HEIGHT].IsExplicitlySet() ||

layout/reftests/svg/dynamic-use-03.svg

@@ -6,7 +6,9 @@
      xmlns:xlink="http://www.w3.org/1999/xlink"
      style="background: lime;" class="reftest-wait">
   <defs>
-    <rect fill="red" width="100%" height="100%" id="r"/>
+    <symbol id="r">
+      <rect fill="red" width="100%" height="100%"/>
+    </symbol>
   </defs>
   <use id="u" xlink:href="#r" />
   <script type="text/javascript">

layout/reftests/svg/dynamic-use-04.svg

@@ -6,7 +6,9 @@
      xmlns:xlink="http://www.w3.org/1999/xlink"
      style="background: red;" class="reftest-wait">
   <defs>
-    <rect fill="lime" width="100%" height="100%" id="r"/>
+    <symbol id="r">
+      <rect fill="lime" width="100%" height="100%"/>
+    </symbol>
   </defs>
   <use id="u" xlink:href="#r" width="0" />
   <script type="text/javascript">
@@ -16,13 +18,11 @@
     setTimeout(doTest, 4000); // fallback for running outside reftest
 
     function doTest() {
-        // Since the <use> does not reference an <svg> or <symbol>, the value
-        // of its 'width' attribute is ignored except to disable/enable its
-        // rendering by setting it to zero/non-zero. Setting it to a non-zero
-        // value here should show the entire referenced <rect>. See
-        // http://www.w3.org/TR/SVG11/struct.html#UseElement
+        // Setting a non-zero value for width here should show the entire
+        // referenced <rect>. See
+        // https://www.w3.org/TR/SVG2/struct.html#UseElement
         var u = document.getElementById("u");
-        u.setAttribute("width", "1");
+        u.setAttribute("width", "100%");
         document.documentElement.removeAttribute('class');
       }
 

layout/reftests/svg/reftest.list

@@ -557,6 +557,7 @@ fuzzy(0-1,0-100) == tspan-xy-anchor-end-01.svg tspan-xy-anchor-end-ref.svg
 pref(layout.css.devPixelsPerPx,"1.0") == svg-blurry-with-subpixel-position.html svg-blurry-with-subpixel-position-ref.html
 
 == use-01.svg pass.svg
+== use-02.svg pass.svg
 == use-01-extref.svg pass.svg
 == use-02-extref.svg use-02-extref-ref.svg
 == use-extref-dataURI-01.svg pass.svg

layout/reftests/svg/use-01.svg

@@ -6,12 +6,16 @@
      xmlns:xlink="http://www.w3.org/1999/xlink">
   <title>Testing that 'use' with zero width/height is not displayed</title>
   <defs>
-    <rect id="red" width="100" height="100" fill="red"/>
-    <rect id="lime" width="100" height="100" fill="lime"/>
+    <symbol id="red">
+      <rect width="100" height="100" fill="red"/>
+    </symbol>
+    <symbol id="lime">
+      <rect width="100" height="100" fill="lime"/>
+    </symbol>
   </defs>
   <rect width="100%" height="100%" fill="lime"/>
   
-  <!-- zero width/height should disable -->
+  <!-- zero width/height pointing at symbol should disable -->
   <use x="0" y="0" width="0" xlink:href="#red"/>
   <use x="150" y="0" height="0" xlink:href="#red"/>
   

layout/reftests/svg/use-02.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Testing that 'use' with zero width/height is displayed when
+         not referencing svg or symbol elements</title>
+  <defs>
+    <rect id="to-cover" x="2" y="2" height="96" width="96" fill="red"/>
+    <rect id="r" x="0" y="0" height="100" width="100" fill="lime"/>
+  </defs>
+  <rect width="100%" height="100%" fill="lime"/>
+
+  <use href="#to-cover"/>
+  <use x="110" href="#to-cover"/>
+  <use y="110" href="#to-cover"/>
+
+  <use href="#r" width="0" height="0" />
+  <use x="110" href="#r" width="0" />
+  <use y="110" href="#r" height="0" />
+</svg>