diff --git a/layout/reftests/svg/reftest.list b/layout/reftests/svg/reftest.list
index d99e98dcaa77..f3a1d4e87456 100644
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -600,3 +600,4 @@ fails-if(Android) != mask-resource.html about:blank # The image the test uses is
 == 1570363-1.html 1570363-1-ref.html
 
 fuzzy-if(webrender,0-1,0-92) fuzzy-if(!webrender,0-2,0-7882) == mask-opacity-invalidation-1.html mask-opacity-invalidation-1-ref.html # clip-path mask/opacity optimization
+== transform-animation-on-path.html transform-animation-on-path-ref.html
diff --git a/layout/reftests/svg/transform-animation-on-path-ref.html b/layout/reftests/svg/transform-animation-on-path-ref.html
new file mode 100644
index 000000000000..ecdf155e8257
--- /dev/null
+++ b/layout/reftests/svg/transform-animation-on-path-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+  <path id="target" d="M .1 .1 H .9 V .9 H .10 L .10 .10"/>
+</svg>
+</html>
diff --git a/layout/reftests/svg/transform-animation-on-path.html b/layout/reftests/svg/transform-animation-on-path.html
new file mode 100644
index 000000000000..065e080a9e17
--- /dev/null
+++ b/layout/reftests/svg/transform-animation-on-path.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<style>
+@keyframes anim {
+  from { transform: scale(1); }
+  to { transform: scale(0); }
+}
+</style>
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+  <path id="target" d="M .1 .1 H .9 V .9 H .10 L .10 .10"/>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 100s step-end reverse";
+  target.addEventListener("animationstart", () => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
+</html>
