diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
new file mode 100644
index 000000000000..573c6e419d9d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Long Filter Chain</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      /* The first 8 CSS filter functions result in this color. */
+      background-color: rgba(118, 153, 44, 0.8);
+      /* Use an equivalent SVG filter for the last 2 CSS filter functions. */
+      filter: url(#blur-and-drop-shadow);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square with a green drop shadow.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur-and-drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+      <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain.html b/layout/reftests/svg/filters/css-filter-chains/long-chain.html
new file mode 100644
index 000000000000..b99468eee2ca
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain.html
@@ -0,0 +1,41 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Long Filter Chain</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+  <link rel="match" href="long-chain-ref.html">
+  <meta name="assert"
+        content="Multiple chained CSS filter functions of different types should
+                 render correctly.">
+  <style type="text/css">
+    #target {
+      /*
+        Chain together all 10 CSS filter functions defined in the Filter Effects
+        Level 1 specification.
+      */
+      filter: brightness(2)
+              contrast(0.4)
+              grayscale(0.2)
+              hue-rotate(270deg)
+              invert(0.6)
+              opacity(0.8)
+              saturate(10)
+              sepia(0.4)
+              blur(3px)
+              drop-shadow(10px 10px 10px #0f0);
+      background-color: red;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square with a green drop shadow.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/reftest.list b/layout/reftests/svg/filters/css-filter-chains/reftest.list
index 7a723b7d8109..a7c702c6c932 100644
--- a/layout/reftests/svg/filters/css-filter-chains/reftest.list
+++ b/layout/reftests/svg/filters/css-filter-chains/reftest.list
@@ -3,4 +3,6 @@
 
 default-preferences pref(layout.css.filters.enabled,true)
 
+# Some platforms render this complex filter chain a little differently, and that's ok.
+fuzzy(5,13000) == long-chain.html long-chain-ref.html
 == same-filter.html same-filter-ref.html
