new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-fill.svg
@@ -0,0 +1,22 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+
+  <title>Test animation element in 'defs' element with 'fill' property</title>
+  <script xlink:href="smil-util.js" type="text/javascript"/>
+
+  <rect id="target" fill="red" width="100%" height="100%"/>
+  <defs>
+    <animate xlink:href="#target"
+             attributeName="fill"
+             calcMode="discrete"
+             values="red;lime"
+             dur="100s"/>
+  </defs>
+
+  <script>
+    window.addEventListener("MozReftestInvalidate", function() {
+      setTimeAndWaitToSnapshot(49.9, 0.1);
+    });
+  </script>
+</svg>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg
@@ -0,0 +1,25 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+
+  <title>Test animation of gradient attribute in 'defs' element</title>
+  <script xlink:href="smil-util.js" type="text/javascript"/>
+
+  <rect fill="url(#gradient)" width="100%" height="100%"/>
+  <defs>
+    <linearGradient id="gradient" x1="0">
+      <stop offset="0%" stop-color="red" />
+      <stop offset="100%" stop-color="lime" />
+      <animate attributeName="x1"
+               values="0;1"
+               calcMode="discrete"
+               dur="100s"/>
+    </linearGradient>
+  </defs>
+
+  <script>
+    window.addEventListener("MozReftestInvalidate", function() {
+      setTimeAndWaitToSnapshot(49.9, 0.1);
+    });
+  </script>
+</svg>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-gradient-property.svg
@@ -0,0 +1,25 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+
+  <title>Test animation of gradient property in 'defs' element</title>
+  <script xlink:href="smil-util.js" type="text/javascript"/>
+
+  <rect fill="url(#gradient)" width="100%" height="100%"/>
+  <defs>
+    <linearGradient id="gradient">
+      <stop>
+        <animate attributeName="stop-color"
+                 values="red;lime"
+                 calcMode="discrete"
+                 dur="100s"/>
+      </stop>
+    </linearGradient>
+  </defs>
+
+  <script>
+    window.addEventListener("MozReftestInvalidate", function() {
+      setTimeAndWaitToSnapshot(49.9, 0.1);
+    });
+  </script>
+</svg>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-width.svg
@@ -0,0 +1,22 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     class="reftest-wait">
+
+  <title>Test animation element in 'defs' element with 'width' attribute</title>
+  <script xlink:href="smil-util.js" type="text/javascript"/>
+
+  <rect id="target" fill="lime" width="0%" height="100%"/>
+  <defs>
+    <animate xlink:href="#target"
+             attributeName="width"
+             values="0%;100%"
+             calcMode="discrete"
+             dur="100s"/>
+  </defs>
+
+  <script>
+    window.addEventListener("MozReftestInvalidate", function() {
+      setTimeAndWaitToSnapshot(49.9, 0.1);
+    });
+  </script>
+</svg>

--- a/layout/reftests/svg/smil/reftest.list
+++ b/layout/reftests/svg/smil/reftest.list
@@ -160,17 +160,17 @@ fuzzy-if(Android,4,1) == anim-svg-viewBo
 == anim-class-02.svg lime.svg
 == anim-class-03.svg lime.svg
 == anim-class-04.svg anim-class-04-ref.svg
 
 # animate with some paint server values
 == anim-paintserver-1.svg anim-paintserver-1-ref.svg
 
 # animate attributes on text content children
-== anim-text-attr-01.svg anim-text-attr-01-ref.svg 
+== anim-text-attr-01.svg anim-text-attr-01-ref.svg
 
 # animate where the base value is non-interpolatable but will be replaced anyway
 == anim-fill-overpaintserver-1.svg lime.svg
 == anim-fill-overpaintserver-2.svg lime.svg
 
 # animate where we fallback from 'additive' animation to non-additive
 == anim-additive-fallback-1.svg anim-standard-ref.svg
 
@@ -264,8 +264,14 @@ fuzzy-if(cocoaWidget&&layersGPUAccelerat
 == smil-transitions-interaction-2b.svg lime.svg
 == smil-transitions-interaction-3a.svg lime.svg
 == smil-transitions-interaction-3b.svg lime.svg
 == smil-transitions-interaction-4a.svg lime.svg
 == smil-transitions-interaction-4b.svg lime.svg
 
 # Test filtering of excessive times
 == filtered-instance-time-1.svg anim-standard-ref.svg
+
+# Test animation using defs element
+== anim-defs-gradient-property.svg lime.svg
+== anim-defs-gradient-attribute.svg lime.svg
+== anim-defs-fill.svg lime.svg
+== anim-defs-width.svg lime.svg
\ No newline at end of file

--- a/layout/reftests/svg/smil/smil-util.js
+++ b/layout/reftests/svg/smil/smil-util.js
@@ -3,8 +3,24 @@
 function setTimeAndSnapshot(timeInSeconds, pauseFlag) {
   var svg = document.documentElement;
   if (pauseFlag) {
     svg.pauseAnimations();
   }
   svg.setCurrentTime(timeInSeconds);
   svg.removeAttribute("class");
 }
+
+// Seeks to the given time and then removes the SVG document's class to trigger
+// a reftest snapshot after waiting at least minWaitTimeInSeconds.
+function setTimeAndWaitToSnapshot(seekTimeInSeconds, minWaitTimeInSeconds) {
+  var svg = document.documentElement;
+  svg.setCurrentTime(seekTimeInSeconds);
+  var timeToTakeSnapshot =
+    window.performance.now() + minWaitTimeInSeconds * 1000;
+  requestAnimationFrame(function takeSnapshot(currentTime) {
+    if (currentTime > timeToTakeSnapshot) {
+      svg.removeAttribute("class");
+    } else {
+      requestAnimationFrame(takeSnapshot);
+    }
+  });
+}