diff --git a/layout/reftests/svg/reftest.list b/layout/reftests/svg/reftest.list
index 153956e41f2b..4611f5803606 100644
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -439,3 +439,5 @@ skip-if(Android) pref(layout.css.mix-blend-mode.enabled,true) == blend-differenc
 == use-localRef-marker-01.svg use-localRef-marker-01-ref.svg
 == use-localRef-clipPath-01.svg use-localRef-clipPath-01-ref.svg
 == use-localRef-filter-01.svg use-localRef-filter-01-ref.svg
+== use-localRef-fill-01.svg use-localRef-fill-01-ref.svg
+== use-localRef-stroke-01.svg use-localRef-stroke-01-ref.svg
diff --git a/layout/reftests/svg/use-localRef-fill-01-ref.svg b/layout/reftests/svg/use-localRef-fill-01-ref.svg
new file mode 100644
index 000000000000..407e0a78c16c
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-fill-01-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Reference for fill linked to local-ref URL</title>
+  <defs>
+    <linearGradient id="gradient1">
+      <stop offset="0%" stop-color="white"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+  </defs>
+  <rect x="10" y="10" width="80" height="80" fill="url(#gradient1)"/>
+  <rect x="10" y="110" width="80" height="80" fill="url(#gradient1)"/>
+  <rect x="10" y="210" width="80" height="80" fill="url(#gradient1)"/>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-fill-01.svg b/layout/reftests/svg/use-localRef-fill-01.svg
new file mode 100644
index 000000000000..d8f9c7c6eb10
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-fill-01.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Testcase for fill linked to local-ref URL</title>
+  <defs>
+    <linearGradient id="gradient1">
+      <stop offset="0%" stop-color="blue"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="gradient2">
+      <stop offset="0%" stop-color="white"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="gradient3">
+      <stop offset="0%" stop-color="white"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+  </defs>
+  <style>
+    #fill3 {
+      fill: url(#gradient3);
+    }
+  </style>
+  <use xlink:href="use-localRef-fill-resource.svg#fill1"/>
+  <use xlink:href="use-localRef-fill-resource.svg#fill2" fill="url(#gradient2)"/>
+  <use xlink:href="use-localRef-fill-resource.svg#fill3"/>
+</svg>
diff --git a/layout/reftests/svg/use-localRef-fill-resource.svg b/layout/reftests/svg/use-localRef-fill-resource.svg
new file mode 100644
index 000000000000..4771a77d923b
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-fill-resource.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="gradient1">
+      <stop offset="0%" stop-color="white"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="gradient2">
+      <stop offset="0%" stop-color="blue"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="gradient3">
+      <stop offset="0%" stop-color="blue"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+  </defs>
+  <rect id="fill1" x="10" y="10" width="80" height="80" fill="url(#gradient1)"/>
+  <rect id="fill2" x="10" y="110" width="80" height="80"/>
+  <rect id="fill3" x="10" y="210" width="80" height="80"/>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-stroke-01-ref.svg b/layout/reftests/svg/use-localRef-stroke-01-ref.svg
new file mode 100644
index 000000000000..ce7695684edd
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-stroke-01-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Reference for stroke linked to local-ref URL</title>
+  <defs>
+    <linearGradient id="gradient1">
+      <stop offset="0%" stop-color="white"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+  </defs>
+  <rect x="10" y="10" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/>
+  <rect x="10" y="110" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/>
+  <rect x="10" y="210" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-stroke-01.svg b/layout/reftests/svg/use-localRef-stroke-01.svg
new file mode 100644
index 000000000000..1e8e3e59225a
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-stroke-01.svg
@@ -0,0 +1,26 @@
+<?xml-stylesheet href="use-localRef.css" type="text/css"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Testcase for stroke linked to local-ref URL</title>
+  <defs>
+      <linearGradient id="gradient1">
+        <stop offset="0%" stop-color="blue"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <linearGradient id="gradient2">
+        <stop offset="0%" stop-color="white"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <linearGradient id="gradient3">
+        <stop offset="0%" stop-color="white"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+  </defs>
+  <style>
+    #stroke3 {
+      stroke: url(#gradient3);
+    }
+  </style>
+  <use xlink:href="use-localRef-stroke-resource.svg#stroke1"/>
+  <use xlink:href="use-localRef-stroke-resource.svg#stroke2" stroke="url(#gradient2)"/>
+  <use xlink:href="use-localRef-stroke-resource.svg#stroke3"/>
+</svg>
diff --git a/layout/reftests/svg/use-localRef-stroke-resource.svg b/layout/reftests/svg/use-localRef-stroke-resource.svg
new file mode 100644
index 000000000000..e78b95dc5605
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-stroke-resource.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="gradient1">
+      <stop offset="0%" stop-color="white"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="gradient2">
+      <stop offset="0%" stop-color="blue"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="gradient3">
+      <stop offset="0%" stop-color="blue"/>
+      <stop offset="100%" stop-color="blue"/>
+    </linearGradient>
+  </defs>
+  <rect id="stroke1" x="10" y="10" width="80" height="80" fill="white" stroke-width="5" stroke="url(#gradient1)"/>
+  <rect id="stroke2" x="10" y="110" width="80" height="80" fill="white" stroke-width="5" />
+  <rect id="stroke3" x="10" y="210" width="80" height="80" fill="white" stroke-width="5" />
+</svg>
\ No newline at end of file