--- a/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg
+++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg
@@ -7,130 +7,130 @@
   <!-- 1. gradientUnits -->
   <defs>
     <linearGradient id="gradientUnits" x1="0" y1="0" x2="100" y2="0"
       gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <rect width="100" height="100" fill="url(#gradientUnits)"/>
-  <g transform="translate(100)">
-    <rect width="100" height="100" fill="url(#gradientUnits)"/>
+  <rect width="100px" height="100px" fill="url(#gradientUnits)"/>
+  <g transform="translate(100px)">
+    <rect width="100px" height="100px" fill="url(#gradientUnits)"/>
   </g>
   <!-- 2. gradientTransform -->
   <defs>
     <linearGradient id="gradientTransform"
       gradientTransform="rotate(90 0.5 0.5)">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 100)">
-    <rect width="100" height="100" fill="url(#gradientTransform)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#gradientTransform)"/>
+  <g transform="translate(0px 100px)">
+    <rect width="100px" height="100px" fill="url(#gradientTransform)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#gradientTransform)"/>
     </g>
   </g>
   <!-- 3. x1, x2 -->
   <defs>
     <linearGradient id="x1x2" x1="40%" x2="60%">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 200)">
-    <rect width="100" height="100" fill="url(#x1x2)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#x1x2)"/>
+  <g transform="translate(0px 200px)">
+    <rect width="100px" height="100px" fill="url(#x1x2)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#x1x2)"/>
     </g>
   </g>
   <!-- 4. y1, y2 -->
   <defs>
     <linearGradient id="y1y2" x2="0%" y1="40%" y2="60%">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 300)">
-    <rect width="100" height="100" fill="url(#y1y2)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#y1y2)"/>
+  <g transform="translate(0px 300px)">
+    <rect width="100px" height="100px" fill="url(#y1y2)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#y1y2)"/>
     </g>
   </g>
   <!-- 5. cx, cy -->
   <defs>
     <radialGradient id="cxcy" cx="0%" cy="100%">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </radialGradient>
   </defs>
-  <g transform="translate(0 400)">
-    <rect width="100" height="100" fill="url(#cxcy)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#cxcy)"/>
+  <g transform="translate(0px 400px)">
+    <rect width="100px" height="100px" fill="url(#cxcy)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#cxcy)"/>
     </g>
   </g>
   <!-- 6. r -->
   <defs>
     <radialGradient id="r" r="100%">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </radialGradient>
   </defs>
-  <g transform="translate(0 500)">
-    <rect width="100" height="100" fill="url(#r)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#r)"/>
+  <g transform="translate(0px 500px)">
+    <rect width="100px" height="100px" fill="url(#r)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#r)"/>
     </g>
   </g>
   <!-- 7. fx, fy -->
   <defs>
     <radialGradient id="fxfy" fx="20%" fy="80%">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </radialGradient>
   </defs>
-  <g transform="translate(0 600)">
-    <rect width="100" height="100" fill="url(#fxfy)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#fxfy)"/>
+  <g transform="translate(0px 600px)">
+    <rect width="100px" height="100px" fill="url(#fxfy)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#fxfy)"/>
     </g>
   </g>
   <!-- 8. spreadMethod -->
   <defs>
     <linearGradient id="spreadMethod" x1="50%" spreadMethod="reflect">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 700)">
-    <rect width="100" height="100" fill="url(#spreadMethod)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#spreadMethod)"/>
+  <g transform="translate(0px 700px)">
+    <rect width="100px" height="100px" fill="url(#spreadMethod)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#spreadMethod)"/>
     </g>
   </g>
   <!-- 9. xlink:href -->
   <defs>
     <linearGradient id="xlink" xlink:href="#xlinkRef"/>
     <linearGradient id="xlinkRef">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 800)">
-    <rect width="100" height="100" fill="url(#xlink)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#xlinkRef)"/>
+  <g transform="translate(0px 800px)">
+    <rect width="100px" height="100" fill="url(#xlink)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#xlinkRef)"/>
     </g>
   </g>
   <!-- We were getting random but very minor anti-aliasing differences on OSX
        and OSX64 along the edges of these gradients so we draw a thick stroke
        over all the edges. -->
-  <path stroke="black" stroke-width="3" stroke-linecap="square" fill="none"
+  <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none"
     d="M0 0H200V900H0V0
        M0 100H200
        M0 200H200
        M0 300H200
        M0 400H200
        M0 500H200
        M0 600H200
        M0 700H200

--- a/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg
+++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg
@@ -31,157 +31,157 @@
   <defs>
     <linearGradient xlink:href="#gradientUnitsRef" id="gradientUnits"/>
     <linearGradient id="gradientUnitsRef" x1="0" y1="0" x2="100" y2="0">
       <set attributeName="gradientUnits" to="userSpaceOnUse"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <rect width="100" height="100" fill="url(#gradientUnits)"/>
-  <g transform="translate(100)">
-    <rect width="100" height="100" fill="url(#gradientUnitsRef)"/>
+  <rect width="100px" height="100px" fill="url(#gradientUnits)"/>
+  <g transform="translate(100px)">
+    <rect width="100px" height="100px" fill="url(#gradientUnitsRef)"/>
   </g>
   <!-- 2. gradientTransform: defaults to identity -->
   <defs>
     <linearGradient xlink:href="#gradientTransformRef" id="gradientTransform"/>
     <linearGradient id="gradientTransformRef">
       <animateTransform attributeName="gradientTransform" type="rotate"
         values="90 0.5 0.5" fill="freeze"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 100)">
-    <rect width="100" height="100" fill="url(#gradientTransform)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#gradientTransformRef)"/>
+  <g transform="translate(0px 100px)">
+    <rect width="100px" height="100px" fill="url(#gradientTransform)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#gradientTransformRef)"/>
     </g>
   </g>
   <!-- 3. x1: defaults to 0%
           x2: defaults to 100% -->
   <defs>
     <linearGradient xlink:href="#x1x2Ref" id="x1x2"/>
     <linearGradient id="x1x2Ref">
       <set attributeName="x1" to="40%"/>
       <set attributeName="x2" to="60%"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 200)">
-    <rect width="100" height="100" fill="url(#x1x2)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#x1x2Ref)"/>
+  <g transform="translate(0px 200px)">
+    <rect width="100px" height="100px" fill="url(#x1x2)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#x1x2Ref)"/>
     </g>
   </g>
   <!-- 4. y1: defaults to 0%
           y2: defaults to 0% -->
   <defs>
     <linearGradient xlink:href="#y1y2Ref" id="y1y2"/>
     <linearGradient id="y1y2Ref" x2="0%">
       <set attributeName="y1" to="40%"/>
       <set attributeName="y2" to="60%"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 300)">
-    <rect width="100" height="100" fill="url(#y1y2)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#y1y2Ref)"/>
+  <g transform="translate(0px 300px)">
+    <rect width="100px" height="100px" fill="url(#y1y2)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#y1y2Ref)"/>
     </g>
   </g>
   <!-- 5. cx: defaults to 50%
           cy: defaults to 50% -->
   <defs>
     <radialGradient xlink:href="#cxcyRef" id="cxcy"/>
     <radialGradient id="cxcyRef">
       <set attributeName="cx" to="0%"/>
       <set attributeName="cy" to="100%"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </radialGradient>
   </defs>
-  <g transform="translate(0 400)">
-    <rect width="100" height="100" fill="url(#cxcy)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#cxcyRef)"/>
+  <g transform="translate(0px 400px)">
+    <rect width="100px" height="100px" fill="url(#cxcy)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#cxcyRef)"/>
     </g>
   </g>
   <!-- 6. r: defaults to 50% -->
   <defs>
     <radialGradient xlink:href="#rRef" id="r"/>
     <radialGradient id="rRef">
       <set attributeName="r" to="100%"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </radialGradient>
   </defs>
-  <g transform="translate(0 500)">
-    <rect width="100" height="100" fill="url(#r)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#rRef)"/>
+  <g transform="translate(0px 500px)">
+    <rect width="100px" height="100px" fill="url(#r)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#rRef)"/>
     </g>
   </g>
   <!-- 7. fx: defaults to cx
           fy: defaults to cy -->
   <defs>
     <radialGradient xlink:href="#fxfyRef" id="fxfy"/>
     <radialGradient id="fxfyRef">
       <set attributeName="fx" to="20%"/>
       <set attributeName="fy" to="80%"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </radialGradient>
   </defs>
-  <g transform="translate(0 600)">
-    <rect width="100" height="100" fill="url(#fxfy)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#fxfyRef)"/>
+  <g transform="translate(0px 600px)">
+    <rect width="100px" height="100px" fill="url(#fxfy)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#fxfyRef)"/>
     </g>
   </g>
   <!-- 8. spreadMethod: defaults to pad -->
   <defs>
     <linearGradient xlink:href="#spreadMethodRef" id="spreadMethod"/>
     <linearGradient id="spreadMethodRef" x1="50%">
       <set attributeName="spreadMethod" to="reflect"/>
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 700)">
-    <rect width="100" height="100" fill="url(#spreadMethod)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#spreadMethodRef)"/>
+  <g transform="translate(0px 700px)">
+    <rect width="100px" height="100px" fill="url(#spreadMethod)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#spreadMethodRef)"/>
     </g>
   </g>
   <!-- 9. xlink:href
     This attribute is not affected by bug 608161 but we test it here for
     completeness.
     -->
   <defs>
     <linearGradient id="xlink">
       <set attributeName="xlink:href" to="#xlinkRef"/>
     </linearGradient>
     <linearGradient id="xlinkRef">
       <stop offset="0%" stop-color="#F60" />
       <stop offset="100%" stop-color="#FF6" />
     </linearGradient>
   </defs>
-  <g transform="translate(0 800)">
-    <rect width="100" height="100" fill="url(#xlink)"/>
-    <g transform="translate(100)">
-      <rect width="100" height="100" fill="url(#xlinkRef)"/>
+  <g transform="translate(0px 800px)">
+    <rect width="100px" height="100px" fill="url(#xlink)"/>
+    <g transform="translate(100px)">
+      <rect width="100px" height="100px" fill="url(#xlinkRef)"/>
     </g>
   </g>
   <!-- We were getting random but very minor anti-aliasing differences on OSX
        and OSX64 along the edges of these gradients so we draw a thick stroke
        over all the edges. -->
-  <path stroke="black" stroke-width="3" stroke-linecap="square" fill="none"
+  <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none"
     d="M0 0H200V900H0V0
        M0 100H200
        M0 200H200
        M0 300H200
        M0 400H200
        M0 500H200
        M0 600H200
        M0 700H200