Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/filter-effects
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
460 files changed, 11810 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/filter-effects/META.yml b/testing/web-platform/tests/css/filter-effects/META.yml
new file mode 100644
index 0000000000..930b762b01
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/META.yml
@@ -0,0 +1,6 @@
+spec: https://drafts.fxtf.org/filter-effects/
+suggested_reviewers:
+  - svgeesus
+  - grorg
+  - dirkschulze
+  - chrishtr
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html
new file mode 100644
index 0000000000..d539a36c5a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-001.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="Matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        backdrop-filter: hue-rotate(30deg);
+      }
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+        backdrop-filter: hue-rotate(10deg);
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate(0deg) blur(6px)',
+        to: 'hue-rotate(180deg) blur(10px)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg) blur(4px)'},
+        {at: 0, expect: 'hue-rotate(0deg) blur(6px)'},
+        {at: 0.25, expect: 'hue-rotate(45deg) blur(7px)'},
+        {at: 0.5, expect: 'hue-rotate(90deg) blur(8px)'},
+        {at: 1, expect: 'hue-rotate(180deg) blur(10px)'},
+        {at: 1.5, expect: 'hue-rotate(270deg) blur(12px)'}
+      ]);
+
+      // Matching lists with differing units:
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate(80deg) blur(6mm)',
+        to: 'hue-rotate(100grad) blur(1cm)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(75deg) blur(4mm)'},
+        {at: 0, expect: 'hue-rotate(80deg) blur(6mm)'},
+        {at: 0.25, expect: 'hue-rotate(82.5deg) blur(7mm)'},
+        {at: 0.5, expect: 'hue-rotate(85deg) blur(8mm)'},
+        {at: 1, expect: 'hue-rotate(90deg) blur(10mm)'},
+        {at: 1.5, expect: 'hue-rotate(95deg) blur(12mm)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: neutralKeyframe,
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(5deg)'},
+        {at: 0, expect: 'hue-rotate(10deg)'},
+        {at: 0.3, expect: 'hue-rotate(13deg)'},
+        {at: 0.6, expect: 'hue-rotate(16deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(25deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'initial',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'inherit',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(35deg)'},
+        {at: 0, expect: 'hue-rotate(30deg)'},
+        {at: 0.3, expect: 'hue-rotate(27deg)'},
+        {at: 0.6, expect: 'hue-rotate(24deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(15deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'unset',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none',
+        to: 'hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.25, expect: 'hue-rotate(45deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(180deg)'},
+        {at: 1.5, expect: 'hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate(180deg)',
+        to: 'none'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(270deg)'},
+        {at: 0, expect: 'hue-rotate(180deg)'},
+        {at: 0.25, expect: 'hue-rotate(135deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(0deg)'},
+        {at: 1.5, expect: 'hue-rotate(-90deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'drop-shadow(0px 0px 0px currentcolor)',
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px white)'},
+        {at: 0, expect: 'drop-shadow(0px 0px 0px currentcolor)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px #80C080)'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #004100)'}
+      ]);
+
+      test_no_interpolation({
+        property: 'backdrop-filter',
+        from: 'url("#svgfilter")',
+        to: 'blur(5px)',
+      });
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'initial', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html
new file mode 100644
index 0000000000..84a9b565b8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="Partially matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none',
+        to: 'opacity(0.5) hue-rotate(180deg)',
+      }, [
+        {at: -0.5, expect: 'opacity(1) hue-rotate(-90deg)'},
+        {at: 0.25, expect: 'opacity(0.875) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'opacity(0.75) hue-rotate(90deg)'},
+        {at: 1, expect: 'opacity(0.5) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'opacity(0.25) hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'blur(6px)',
+        to: 'blur(10px) hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'blur(4px) hue-rotate(-90deg)'},
+        {at: 0.25, expect: 'blur(7px) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'blur(8px) hue-rotate(90deg)'},
+        {at: 1, expect: 'blur(10px) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'blur(12px) hue-rotate(270deg)'},
+      ]);
+
+      // Mismatched lists:
+      test_no_interpolation({
+        property: 'backdrop-filter',
+        from: 'grayscale(0) blur(0px)',
+        to: 'blur(10px)'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html
new file mode 100644
index 0000000000..a8508bb445
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-003.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="lacuna matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0px
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'brightness(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'contrast(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px transparent)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #00C000)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0
+        to: 'grayscale(1)'
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale(1)'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0deg
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0
+        to: 'invert(1)'
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert(1)'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'opacity(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'saturate(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'none', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+
+      test_no_interpolation({
+        property: 'backdrop-filter',
+        from: 'url("#svgfilter")',
+        to: 'none', // lacuna is not defined
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html
new file mode 100644
index 0000000000..12389ae3f6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/backdrop-filter-interpolation-004.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>backdrop-filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+    <meta name="assert" content="Default value when omitted matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'blur()', // Default value when omitted is 0px.
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0, expect: 'blur()'},
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'brightness(0)',
+        to: 'brightness()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1, expect: 'brightness()'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'contrast(0)',
+        to: 'contrast()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1, expect: 'contrast()'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'drop-shadow(0px 0px)', // The default value for omitted values is missing length values set to 0 and the missing used color is taken from the color property.
+        to: 'drop-shadow(20px 10px 30px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px blue)'},
+        {at: 0, expect: 'drop-shadow(0px 0px blue)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px 15px rgb(0, 64, 128))'},
+        {at: 1, expect: 'drop-shadow(20px 10px 30px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px 45px rgb(0, 192, 0))'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'grayscale(0)',
+        to: 'grayscale()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'grayscale(0)'},
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale()'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'hue-rotate()', // Default value when omitted is 0deg.
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0, expect: 'hue-rotate()'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'invert(0)',
+        to: 'invert()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'invert(0)'},
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert()'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'opacity(0)',
+        to: 'opacity()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1, expect: 'opacity()'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'saturate(0)',
+        to: 'saturate()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1, expect: 'saturate()'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'backdrop-filter',
+        from: 'sepia(0)',
+        to: 'sepia()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia()'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html b/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html
new file mode 100644
index 0000000000..d256ef3e73
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/color-interpolation-filters-no-interpolation.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_no_interpolation({
+  property: 'color-interpolation-filters',
+  from: 'initial',
+  to: 'auto'
+});
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html
new file mode 100644
index 0000000000..62fcbf0a5d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-001.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="Matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        filter: hue-rotate(30deg);
+      }
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+        filter: hue-rotate(10deg);
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate(0deg) blur(6px)',
+        to: 'hue-rotate(180deg) blur(10px)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg) blur(4px)'},
+        {at: 0, expect: 'hue-rotate(0deg) blur(6px)'},
+        {at: 0.25, expect: 'hue-rotate(45deg) blur(7px)'},
+        {at: 0.5, expect: 'hue-rotate(90deg) blur(8px)'},
+        {at: 1, expect: 'hue-rotate(180deg) blur(10px)'},
+        {at: 1.5, expect: 'hue-rotate(270deg) blur(12px)'}
+      ]);
+
+      // Matching lists with differing units:
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate(80deg) blur(6mm)',
+        to: 'hue-rotate(100grad) blur(1cm)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(75deg) blur(4mm)'},
+        {at: 0, expect: 'hue-rotate(80deg) blur(6mm)'},
+        {at: 0.25, expect: 'hue-rotate(82.5deg) blur(7mm)'},
+        {at: 0.5, expect: 'hue-rotate(85deg) blur(8mm)'},
+        {at: 1, expect: 'hue-rotate(90deg) blur(10mm)'},
+        {at: 1.5, expect: 'hue-rotate(95deg) blur(12mm)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: neutralKeyframe,
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(5deg)'},
+        {at: 0, expect: 'hue-rotate(10deg)'},
+        {at: 0.3, expect: 'hue-rotate(13deg)'},
+        {at: 0.6, expect: 'hue-rotate(16deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(25deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'initial',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'inherit',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(35deg)'},
+        {at: 0, expect: 'hue-rotate(30deg)'},
+        {at: 0.3, expect: 'hue-rotate(27deg)'},
+        {at: 0.6, expect: 'hue-rotate(24deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(15deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'unset',
+        to: 'hue-rotate(20deg)',
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-10deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.3, expect: 'hue-rotate(6deg)'},
+        {at: 0.6, expect: 'hue-rotate(12deg)'},
+        {at: 1, expect: 'hue-rotate(20deg)'},
+        {at: 1.5, expect: 'hue-rotate(30deg)'},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html
new file mode 100644
index 0000000000..6ef25a7daf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-002.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="Partially matching lists interpolate.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none',
+        to: 'opacity(0.5) hue-rotate(180deg)',
+      }, [
+        {at: -0.5, expect: 'opacity(1) hue-rotate(-90deg)'},
+        {at: 0, expect: 'opacity(1) hue-rotate(0deg)'},
+        {at: 0.25, expect: 'opacity(0.875) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'opacity(0.75) hue-rotate(90deg)'},
+        {at: 1, expect: 'opacity(0.5) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'opacity(0.25) hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'blur(6px)',
+        to: 'blur(10px) hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'blur(4px) hue-rotate(-90deg)'},
+        {at: 0, expect: 'blur(6px) hue-rotate(0deg)'},
+        {at: 0.25, expect: 'blur(7px) hue-rotate(45deg)'},
+        {at: 0.5, expect: 'blur(8px) hue-rotate(90deg)'},
+        {at: 1, expect: 'blur(10px) hue-rotate(180deg)'},
+        {at: 1.5, expect: 'blur(12px) hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none',
+        to: 'hue-rotate(180deg)'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(-90deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.25, expect: 'hue-rotate(45deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(180deg)'},
+        {at: 1.5, expect: 'hue-rotate(270deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate(180deg)',
+        to: 'none'
+      }, [
+        {at: -0.5, expect: 'hue-rotate(270deg)'},
+        {at: 0, expect: 'hue-rotate(180deg)'},
+        {at: 0.25, expect: 'hue-rotate(135deg)'},
+        {at: 0.5, expect: 'hue-rotate(90deg)'},
+        {at: 1, expect: 'hue-rotate(0deg)'},
+        {at: 1.5, expect: 'hue-rotate(-90deg)'},
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'drop-shadow(0px 0px 0px currentcolor)',
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px white)'},
+        {at: 0, expect: 'drop-shadow(0px 0px 0px currentcolor)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px #80C080)'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #004100)'}
+      ]);
+
+      // crbug.com/904333: Test that ResolveInterpolableColor doesn't overflow.
+      test_interpolation({
+        property: 'filter',
+        from: 'drop-shadow(20px 10px blue)',
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: 2147483648, expect: 'drop-shadow(20px 10px #00FF00'}
+      ]);
+
+      // Mismatched lists:
+      test_no_interpolation({
+        property: 'filter',
+        from: 'grayscale(0) blur(0px)',
+        to: 'blur(10px)'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html
new file mode 100644
index 0000000000..1d512487de
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-003.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="lacuna matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .target {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        color: white;
+        margin-right: 2px;
+        filter: hue-rotate(10deg);
+      }
+      .expected {
+        margin-right: 20px;
+      }
+      .test {
+        padding-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0px
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0, expect: 'blur(0px)'},
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'brightness(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1, expect: 'brightness(1)'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'contrast(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1, expect: 'contrast(1)'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
+        to: 'drop-shadow(20px 10px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px transparent)'},
+        {at: 0, expect: 'drop-shadow(0px 0px 0px transparent)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
+        {at: 1, expect: 'drop-shadow(20px 10px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px #00C000)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0
+        to: 'grayscale(1)'
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'grayscale(0)'},
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale(1)'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0deg
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0, expect: 'hue-rotate(0deg)'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0
+        to: 'invert(1)'
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'invert(0)'},
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert(1)'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'opacity(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1, expect: 'opacity(1)'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'saturate(0)',
+        to: 'none' // lacuna is 1
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1, expect: 'saturate(1)'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'none', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+
+      test_no_interpolation({
+        property: 'filter',
+        from: 'url("#svgfilter")',
+        to: 'none', // lacuna is not defined
+      });
+
+      test_no_interpolation({
+        property: 'filter',
+        from: 'url("#svgfilter")',
+        to: 'blur(5px)',
+      });
+
+      test_interpolation({
+        property: 'filter',
+        from: 'initial', // lacuna is 0
+        to: 'sepia(1)'
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'}, // Equivalent to sepia(0)
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia(1)'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html
new file mode 100644
index 0000000000..63dd17361a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/animation/filter-interpolation-004.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>filter interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+    <meta name="assert" content="Default value when omitted matches spec.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      body {
+        color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'filter',
+        from: 'blur()', // Default value when omitted is 0px.
+        to: 'blur(10px)'
+      }, [
+        {at: -1, expect: 'blur(0px)'}, // Negative values are not allowed.
+        {at: 0, expect: 'blur()'},
+        {at: 0.5, expect: 'blur(5px)'},
+        {at: 1, expect: 'blur(10px)'},
+        {at: 1.5, expect: 'blur(15px)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'brightness(0)',
+        to: 'brightness()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'brightness(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'brightness(0)'},
+        {at: 0.5, expect: 'brightness(0.5)'},
+        {at: 1, expect: 'brightness()'},
+        {at: 1.5, expect: 'brightness(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'contrast(0)',
+        to: 'contrast()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'contrast(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'contrast(0)'},
+        {at: 0.5, expect: 'contrast(0.5)'},
+        {at: 1, expect: 'contrast()'},
+        {at: 1.5, expect: 'contrast(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'drop-shadow(0px 0px)', // The default value for omitted values is missing length values set to 0 and the missing used color is taken from the color property.
+        to: 'drop-shadow(20px 10px 30px green)'
+      }, [
+        {at: -1, expect: 'drop-shadow(-20px -10px blue)'},
+        {at: 0, expect: 'drop-shadow(0px 0px blue)'},
+        {at: 0.5, expect: 'drop-shadow(10px 5px 15px rgb(0, 64, 128))'},
+        {at: 1, expect: 'drop-shadow(20px 10px 30px green)'},
+        {at: 1.5, expect: 'drop-shadow(30px 15px 45px rgb(0, 192, 0))'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'grayscale(0)',
+        to: 'grayscale()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'grayscale(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'grayscale(0)'},
+        {at: 0.5, expect: 'grayscale(0.5)'},
+        {at: 1, expect: 'grayscale()'},
+        {at: 1.5, expect: 'grayscale(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'hue-rotate()', // Default value when omitted is 0deg.
+        to: 'hue-rotate(360deg)'
+      }, [
+        {at: -1, expect: 'hue-rotate(-360deg)'},
+        {at: 0, expect: 'hue-rotate()'},
+        {at: 0.5, expect: 'hue-rotate(180deg)'},
+        {at: 1, expect: 'hue-rotate(360deg)'},
+        {at: 1.5, expect: 'hue-rotate(540deg)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'invert(0)',
+        to: 'invert()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'invert(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'invert(0)'},
+        {at: 0.5, expect: 'invert(0.5)'},
+        {at: 1, expect: 'invert()'},
+        {at: 1.5, expect: 'invert(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'opacity(0)',
+        to: 'opacity()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'opacity(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'opacity(0)'},
+        {at: 0.5, expect: 'opacity(0.5)'},
+        {at: 1, expect: 'opacity()'},
+        {at: 1.5, expect: 'opacity(1)'} // Should clamp values to 1.
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'saturate(0)',
+        to: 'saturate()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'saturate(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'saturate(0)'},
+        {at: 0.5, expect: 'saturate(0.5)'},
+        {at: 1, expect: 'saturate()'},
+        {at: 1.5, expect: 'saturate(1.5)'}
+      ]);
+
+      test_interpolation({
+        property: 'filter',
+        from: 'sepia(0)',
+        to: 'sepia()' // Default value when omitted is 1.
+      }, [
+        {at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
+        {at: 0, expect: 'sepia(0)'},
+        {at: 0.5, expect: 'sepia(0.5)'},
+        {at: 1, expect: 'sepia()'},
+        {at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color-ref.html
new file mode 100644
index 0000000000..4997007f0b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-background-color-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter with background color</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: A green box and an overlapping blue box, with a purple<br>
+  overlapping region.</p>
+</div>
+<div class="colorbox"></div>
+<div class="box2outside"></div>
+<div class="box2inside"></div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+.box2outside {
+    background: #000088;
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 60px;
+    top: 150px;
+}
+.box2inside {
+    background: #773bff;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    left: 60px;
+    top: 150px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-2-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-2-ref.html
new file mode 100644
index 0000000000..3a27cf37c1
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-2-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter with opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: Just a single grey box.</p>
+</div>
+<div class="colorbox"></div>
+
+
+<style>
+.colorbox {
+    position: absolute;
+    background: #808080;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-2.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-2.html
new file mode 100644
index 0000000000..c40e8bc098
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter with opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-basic-opacity-2-ref.html">
+
+<div>
+  <p>Expected: Just a single grey box.</p>
+</div>
+<div class="box colorbox"></div>
+<div class="box filterbox"></div>
+
+<style>
+.box {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+.colorbox {
+    background: green;
+}
+.filterbox {
+    backdrop-filter: invert(1);
+    opacity: 0.5;
+    /* An invert backdrop-filter with opacity 0.5 should always give a grey
+       result. It will always mix the background color with its inverse, in
+       equal proportion.*/
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html
new file mode 100644
index 0000000000..7e6d45c6de
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter with opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: Just a single green box.</p>
+</div>
+<div class="colorbox"></div>
+
+
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html
new file mode 100644
index 0000000000..52662f3897
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-opacity.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter with opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-basic-opacity-ref.html">
+
+<div>
+  <p>Expected: Just a single green box.</p>
+</div>
+<div class="colorbox">
+  <div class="filterbox"></div>
+</div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+.filterbox {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 50px;
+    top: 50px;
+    backdrop-filter: invert(1);
+    opacity: 0;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-ref.html
new file mode 100644
index 0000000000..71e42e5ca7
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: A green box and an overlapping black box, with a magenta<br>
+  overlapping region.</p>
+</div>
+<div class="colorbox"></div>
+<div class="box2outside"></div>
+<div class="box2inside"></div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+.box2outside {
+    background: black;
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 60px;
+    top: 150px;
+}
+.box2inside {
+    background: #ff7fff;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    left: 60px;
+    top: 150px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html
new file mode 100644
index 0000000000..d5d170d795
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-basic.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-basic-ref.html">
+
+<div>
+  <p>Expected: A green box and an overlapping black box, with a magenta<br>
+  overlapping region.</p>
+</div>
+<div class="colorbox">
+  <div class="filterbox"></div>
+</div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+.filterbox {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 50px;
+    top: 50px;
+    backdrop-filter: invert(1);
+    opacity: 1.0;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect-ref.html
new file mode 100644
index 0000000000..d1e785ec28
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Clip the filter at border box of element</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: A green box, color-inverted inside the short, wide box with a<br>
+  blue border and rounded corners, and not color-inverted anywhere else. In<br>
+  particular, there should be no color inversion inside the tall, narrow box,<br>
+  or anywhere outside that.</p>
+</div>
+<div class="box"></div>
+<div class="navbar"></div>
+<div class="menu"></div>
+<div class="menu2"></div>
+
+<style>
+div {
+  position: absolute;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  top: 100px;
+  left: 100px;
+  background: green;
+}
+.navbar {
+  width: 300px;
+  height: 50px;
+  top: 150px;
+  left: 50px;
+  border: 2px solid blue;
+  backdrop-filter: invert(1);
+  border-radius: 10px 20px 30px 40px;
+}
+.menu {
+  width: 100px;
+  height: 150px;
+  top: 202px;
+  left: 147px;
+  border: 2px solid red;
+}
+.menu2 {
+  width: 100px;
+  height: 30px;
+  top: 118px;
+  left: 147px;
+  border: 2px solid red;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect.html
new file mode 100644
index 0000000000..5d5c707116
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rect.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Clip the filter at border box of element</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clip-rect-ref.html">
+
+<div>
+  <p>Expected: A green box, color-inverted inside the short, wide box with a<br>
+  blue border and rounded corners, and not color-inverted anywhere else. In<br>
+  particular, there should be no color inversion inside the tall, narrow box,<br>
+  or anywhere outside that.</p>
+</div>
+<div class="box"></div>
+<div class="navbar">
+  <div class="menu"></div>
+  <div class="menu2"></div>
+</div>
+<style>
+div {
+  position: absolute;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  top: 100px;
+  left: 100px;
+  background: green;
+}
+.navbar {
+  width: 300px;
+  height: 50px;
+  top: 150px;
+  left: 50px;
+  border: 2px solid blue;
+  backdrop-filter: invert(1);
+  border-radius: 10px 20px 30px 40px;
+}
+.menu {
+  width: 100px;
+  height: 150px;
+  top: 50px;
+  left: 95px;
+  border: 2px solid red;
+}
+.menu2 {
+  width: 100px;
+  height: 30px;
+  top: -34px;
+  left: 95px;
+  border: 2px solid red;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip-ref.html
new file mode 100644
index 0000000000..bdadb35fff
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="position: relative; left: 100px; background: lime; width: 100px; height: 300px"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip.html
new file mode 100644
index 0000000000..e532750a27
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clip-rounded-clip.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>backdrop-filter under overflow clip under border-radius overflow clip</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clip-rounded-clip-ref.html">
+<meta name="fuzzy" content="0-1;0-200">
+<div style="width: 300px; height: 200px; border-radius: 80px; overflow: hidden">
+  <div style="position: relative; height: 100px; overflow: hidden">
+    <!-- This should be fully clipped by the outer rounded clip. -->
+    <div style="width: 10px; height: 10px; background: cyan"></div>
+    <!-- This should be fully visible and inverted to green. -->
+    <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 100px; background: magenta"></div>
+    <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 1000px; backdrop-filter: invert(1)"></div>
+  </div>
+  <!-- This should not be affected by the backdrop filter. -->
+  <div style="width: 100px; height: 100px; margin-left: 100px; background: lime"></div>
+</div>
+<!-- This should not be affected by the backdrop filter. -->
+<div style="width: 100px; height: 100px; margin-left: 100px; background: lime"></div>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-clipped-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clipped-ref.html
new file mode 100644
index 0000000000..5100d6a646
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clipped-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Basic operation of filter</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<p>Expected: A green box</p>
+<div id="colorbox"></div>
+
+
+
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 50px;
+    background: green;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-clipped.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clipped.html
new file mode 100644
index 0000000000..b5535a812a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-clipped.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: A rounded-corner clip rect parent should not form a Backdrop Root</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clipped-ref.html">
+
+<p>Expected: A green box</p>
+<div class="colorbox"></div>
+<div class="clipper">
+  <div class="filterbox"></div>
+</div>
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 50px;
+}
+.colorbox {
+    background: #ff7fff;
+}
+.clipper {
+    overflow: hidden;
+    border-radius: 0.001px;
+}
+.filterbox {
+    top:0;
+    left:0;
+    backdrop-filter: invert(1);
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block-ref.html
new file mode 100644
index 0000000000..389802b577
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Forms a containing block for fixed/absolute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<p>Expected: one green square and one red square, both 200px by 200px.</p>
+<div class="container">
+  <div class="fixed-child"></div>
+  <div class="absolute-child"></div>
+</div>
+
+<style>
+.container {
+  width: 200px;
+  will-change: transform;
+}
+
+.fixed-child {
+  position: fixed;
+  top: 0;
+  background-color: green;
+  width: 200px;
+  height: 200px;
+}
+
+.absolute-child {
+  position: absolute;
+  top: 0;
+  left: 210px;
+  background-color: red;
+  width: 200px;
+  height: 200px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block.html
new file mode 100644
index 0000000000..364405c72d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-containing-block.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Forms a containing block for fixed/absolute</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-containing-block-ref.html">
+
+<p>Expected: one green square and one red square, both 200px by 200px.</p>
+<div class="container">
+  <div class="fixed-child"></div>
+  <div class="absolute-child"></div>
+</div>
+
+<style>
+.container {
+  width: 200px;
+  backdrop-filter: invert(1);
+}
+
+.fixed-child {
+  position: fixed;
+  top: 0;
+  background-color: green;
+  width: 100%;
+  height: 200px;
+}
+
+.absolute-child {
+  position: absolute;
+  top: 0;
+  left: 210px;
+  background-color: red;
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-behavior-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-behavior-ref.html
new file mode 100644
index 0000000000..b605e3251c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-behavior-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Edge behavior</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+
+<div>
+  <p>Expected: The black box inside the red box should not contain any red.</p>
+</div>
+
+<div id=backdrop></div>
+<div id=scroller></div>
+
+<style>
+  #scroller {
+    position: relative;
+    top:-202px;
+    width: 250px;
+    height: 250px;
+    border: 6px solid red;
+  }
+  #backdrop {
+    position: relative;
+    height: 200px;
+    width: 200px;
+    left: 6px;
+    top: 3px;
+    border: 1px solid black;
+  }
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-behavior.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-behavior.html
new file mode 100644
index 0000000000..29f5dc5146
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-behavior.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Edge behavior</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="help" href="https://crbug.com/1165868">
+<link rel="match"  href="backdrop-filter-edge-behavior-ref.html">
+
+<div>
+  <p>Expected: The black box inside the red box should not contain any red.</p>
+</div>
+
+<div id=scroller>
+  <div class=filler></div>
+  <div id=backdrop></div>
+  <div class=filler></div>
+</div>
+
+<style>
+  #scroller {
+    width: 250px;
+    height: 250px;
+    overflow: scroll;
+    border: 6px solid red;
+  }
+  #scroller::-webkit-scrollbar {
+    width: 0px;
+  }
+  #backdrop {
+    height: 200px;
+    width: 200px;
+    backdrop-filter: blur(10px);
+    border: 1px solid black;
+  }
+  .filler {
+    position: relative;
+    left: 50px;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<script>
+  scroller.scrollTop = 103;
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-clipping.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-clipping.html
new file mode 100644
index 0000000000..f6f7d89e5b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-clipping.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Filter input is at element bounds</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-paint-order-ref.html">
+
+<div>
+  <p>Expected: A pure white box with a blue border, surrounded by green.<br>
+  No green should be observed within the white box.<br>
+  No dark/black should be observed within the white box either.</p>
+</div>
+
+<div class="greenbox top"></div>
+<div class="greenbox right"></div>
+<div class="greenbox bottom"></div>
+<div class="filterbox">
+  <div class="children" style="top:-31px;left:35px;"></div>
+  <div class="children" style="top:101px;left:35px;"></div>
+  <div class="children" style="top:35px;left:101px;"></div>
+  <div class="children" style="top:35px;left:-31px;"></div>
+</div>
+<style>
+.filterbox {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 150px;
+  left: 0px;
+  border: 1px solid blue;
+  backdrop-filter: blur(20px);
+}
+.greenbox {
+  position:absolute;
+  width: 150px;
+  height: 50px;
+  background: green;
+}
+.top {
+  top:100px;
+  left: 10px;
+}
+.right {
+  top:130px;
+  left: 102px;
+  width: 58px;
+  height: 150px;
+}
+.bottom {
+  top:252px;
+  left: 10px;
+}
+.children {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: 0px;
+  left: 0px;
+  background: green;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels-ref.html
new file mode 100644
index 0000000000..36c509ff95
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Edge pixels shouldn't get filtered</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div class="box"></div>
+<div style="position:absolute;top:100px;will-change:transform;">
+  <p>Expected above: A pure white box with a blue border.<br>
+  No dark/black should be observed within the white box.</p>
+</div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 0px;
+  left: 0px;
+  border: 1px solid blue;
+
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels.html
new file mode 100644
index 0000000000..5a70020890
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-edge-pixels.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Edge pixels shouldn't get filtered</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-edge-pixels-ref.html">
+
+<div class="box"></div>
+<div style="position:absolute;top:100px;will-change:transform;">
+  <p>Expected above: A pure white box with a blue border.<br>
+  No dark/black should be observed within the white box.</p>
+</div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 0px;
+  left: 0px;
+  border: 1px solid blue;
+  backdrop-filter: blur(30px);
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-feimage-crash.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-feimage-crash.html
new file mode 100644
index 0000000000..762452e8e6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-feimage-crash.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1770063">
+<style>
+* {
+  backdrop-filter: url(#a);
+  filter: saturate(60%);
+}
+</style>
+<svg>
+<filter id='a'>
+<feImage>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip-ref.html
new file mode 100644
index 0000000000..38a8c8b253
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should not filter outside of clip/scroll.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div style="width:600px;">
+  <p>Expected: A green box, overlapping red box, and a small, inset cyan box. The<br>
+  cyan should not extend to the bottom/right edges of the red box.</p>
+</div>
+
+<div id="A">
+  <div id="B">
+    <div id="F"></div>
+    <div id="T"></div>
+  </div>
+</div>
+
+<style>
+div {
+  position:absolute;
+  width: 200px;
+  height: 200px;
+}
+#A {
+  overflow:hidden;
+  top: 110px;
+  left: 10px;
+}
+#B {
+
+  background:green;
+}
+#F {
+  position:fixed;
+  background:#f008;
+  top:150px;
+  left:50px;
+}
+#T {
+  background:#c0e3ff;
+  top:90px;
+  left:90px;
+  width: 110px;
+  height: 110px;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip.html
new file mode 100644
index 0000000000..346fad93f3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-fixed-clip.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should not filter outside of clip/scroll.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-fixed-clip-ref.html">
+
+<div style="width:600px;">
+  <p>Expected: A green box, overlapping red box, and a small, inset cyan box. The<br>
+  cyan should not extend to the bottom/right edges of the red box.</p>
+</div>
+
+<div id="A">
+  <div id="B">
+    <div id="F"></div>
+    <div id="T"></div>
+  </div>
+</div>
+
+<style>
+div {
+  position:absolute;
+  width: 200px;
+  height: 200px;
+}
+#A {
+  overflow:hidden;
+  top: 110px;
+  left: 10px;
+}
+#B {
+  opacity: 0.99999;
+  background:green;
+}
+#F {
+  position:fixed;
+  background:#f008;
+  top:150px;
+  left:50px;
+}
+#T {
+  background:#fff8;
+  top:90px;
+  left:90px;
+  backdrop-filter:invert(1);
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-invalid.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-invalid.html
new file mode 100644
index 0000000000..57d69b8b8d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-invalid.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Invalid backdrop-filter doesn't cause element to disappear</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#typedef-filter-value-list">
+<link rel="match" href="filter-invalid-ref.html">
+<style>
+div, rect {
+  width: 100px;
+  height: 100px;
+  backdrop-filter: url(#not-found);
+}
+div {
+  background-color: blue;
+}
+rect {
+  fill: purple;
+}
+</style>
+<div></div>
+<svg>
+  <rect></rect>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-fixed.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-fixed.html
new file mode 100644
index 0000000000..9954ecb86d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-fixed.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: fixed position should not cause a backdrop root.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-non-isolation-ref.html">
+
+<div>
+  <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br>
+  of BOTH green boxes should be inverted (pink).</p>
+</div>
+<div class="box outside">
+  <div class="box stacking-context">
+    <div class="box filter">
+    </div>
+  </div>
+</div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.outside {
+  top: 110px;
+  left: 10px;
+}
+.stacking-context {
+  position: fixed;
+  top: 110px;
+  left: 130px;
+}
+.filter {
+  width: 160px;
+  height: 160px;
+  top: 30px;
+  left: -90px;
+  backdrop-filter: invert(1);
+  background: #ff08;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-isolate.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-isolate.html
new file mode 100644
index 0000000000..97bb7fe22a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-isolate.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: isolation isolate should not cause a backdrop root.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-non-isolation-ref.html">
+
+<div>
+  <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br>
+  of BOTH green boxes should be inverted (pink).</p>
+</div>
+<div class="box outside">
+  <div class="box stacking-context">
+    <div class="box filter">
+    </div>
+  </div>
+</div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.outside {
+  top: 110px;
+  left: 10px;
+}
+.stacking-context {
+  isolation: isolate;
+  top: 0px;
+  left: 120px;
+}
+.filter {
+  width: 160px;
+  height: 160px;
+  top: 30px;
+  left: -90px;
+  backdrop-filter: invert(1);
+  background: #ff08;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html
new file mode 100644
index 0000000000..fc2bccc36c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should not filter outside parent stacking context.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br>
+  of the right-hand box ONLY should be inverted (pink).</p>
+</div>
+<div class="box outside">
+  <div class="box stacking-context">
+    <div class="box filter">
+    </div>
+  </div>
+</div>
+<div class="box overlay"></div>
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.outside {
+  top: 110px;
+  left: 10px;
+}
+.stacking-context {
+  will-change: transform;
+  top: 0px;
+  left: 120px;
+}
+.filter {
+  width: 160px;
+  height: 160px;
+  top: 30px;
+  left: -90px;
+  will-change: transform;
+  background: #ff08;
+}
+.overlay {
+  background:#ffc377;
+  width:70px;
+  height:70px;
+  top:140px;
+  left:130px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
new file mode 100644
index 0000000000..06791f73d2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Should not filter outside parent stacking context.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-isolation-ref.html">
+
+<div>
+  <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br>
+  of the right-hand box ONLY should be inverted (pink).</p>
+</div>
+<div class="box outside">
+  <div class="box stacking-context">
+    <div class="box filter">
+    </div>
+  </div>
+</div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.outside {
+  top: 110px;
+  left: 10px;
+}
+.stacking-context {
+  opacity: 0.9999;
+  top: 0px;
+  left: 120px;
+}
+.filter {
+  width: 160px;
+  height: 160px;
+  top: 30px;
+  left: -90px;
+  backdrop-filter: invert(1);
+  background: #ff08;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-non-isolation-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-non-isolation-ref.html
new file mode 100644
index 0000000000..229d6b4faa
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-non-isolation-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Isolation</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br>
+  of BOTH green boxes should be inverted (pink).</p>
+</div>
+<div class="box green"></div>
+<div class="box green" style="left: 130px;"></div>
+<div class="box yellow" style="width:160px;height:160px;top:140px;left:40px;"></div>
+<div class="box orange" style="width:70px;height:70px;top:140px;left:40px;"></div>
+<div class="box orange" style="width:70px;height:70px;top:140px;left:130px;"></div>
+
+<style>
+.box {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top:110px;
+  left:10px;
+}
+.green { background: green; }
+.yellow { background: #880; }
+.orange { background: #ffc377; }
+
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-opacity-rounded-clip-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-opacity-rounded-clip-ref.html
new file mode 100644
index 0000000000..79177d1238
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-opacity-rounded-clip-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="position: relative; left: 100px; background: green; width: 100px; height: 100px"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-opacity-rounded-clip.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-opacity-rounded-clip.html
new file mode 100644
index 0000000000..88fed57420
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-opacity-rounded-clip.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>backdrop-filter with opacity:0 under border radius overflow clip should have no effect</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-opacity-rounded-clip-ref.html">
+<div style="width: 300px; height: 200px; border-radius: 80px; overflow: hidden; position: relative">
+  <!-- This should be fully clipped by the outer rounded clip. -->
+  <div style="width: 10px; height: 10px; background: cyan"></div>
+  <!-- This should be fully visible and not affected by the backdrop filter. -->
+  <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 100px; background: green"></div>
+  <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 1000px; opacity: 0; backdrop-filter: blur(3px)"></div>
+</div>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order-ref.html
new file mode 100644
index 0000000000..78b135b0f4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Only filter objects painted before</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<div>
+  <p>Expected: A pure white box with a blue border, surrounded by green.<br>
+  No green should be observed within the white box.<br>
+  No dark/black should be observed within the white box either.</p>
+</div>
+
+<div class="filterbox"></div>
+<div class="greenbox top"></div>
+<div class="greenbox right"></div>
+<div class="greenbox bottom"></div>
+<style>
+.filterbox {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 150px;
+  left: 0px;
+  border: 1px solid blue;
+
+
+}
+.greenbox {
+  position:absolute;
+  width: 150px;
+  height: 50px;
+  background: green;
+}
+.top {
+  top:100px;
+  left: 10px;
+}
+.right {
+  top:130px;
+  left: 102px;
+  width: 58px;
+  height: 150px;
+}
+.bottom {
+  top:252px;
+  left: 10px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order.html
new file mode 100644
index 0000000000..b5499d4781
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-paint-order.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Only filter objects painted before</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-paint-order-ref.html">
+
+<div>
+  <p>Expected: A pure white box with a blue border, surrounded by green.<br>
+  No green should be observed within the white box.<br>
+  No dark/black should be observed within the white box either.</p>
+</div>
+
+<div class="filterbox"></div>
+<div class="greenbox top"></div>
+<div class="greenbox right"></div>
+<div class="greenbox bottom"></div>
+<style>
+.filterbox {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 150px;
+  left: 0px;
+  border: 1px solid blue;
+  backdrop-filter: blur(20px);
+}
+.greenbox {
+  position:absolute;
+  width: 150px;
+  height: 50px;
+  background: green;
+}
+.top {
+  top:100px;
+  left: 10px;
+}
+.right {
+  top:130px;
+  left: 102px;
+  width: 58px;
+  height: 150px;
+}
+.bottom {
+  top:252px;
+  left: 10px;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-filter-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-filter-ref.html
new file mode 100644
index 0000000000..aa421fd982
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-filter-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Only filter objects painted before</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<p>Expected: A green box with an overlapping purple box.<br>
+The overlapping portion of the boxes should be bright magenta.<br>
+
+<div class="container">
+  <div class="orangebox"></div>
+  <div class="bluebox blur-bd"></div>
+  <div class="invert"></div>
+</div>
+
+
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+.container {
+  width:200px;
+  height:200px;
+  top: 50px;
+  position:absolute;
+}
+.blur-bd {
+  backdrop-filter: blur(10px);
+}
+.orangebox {
+  left: 10px;
+  top: 50px;
+  background: green;
+}
+.bluebox {
+  left: 60px;
+  top: 110px;
+  background: #00ff0055;
+}
+.invert {
+  left: 60px;
+  top: 110px;
+  background: transparent;
+  backdrop-filter: invert(1);
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-filter.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-filter.html
new file mode 100644
index 0000000000..546786d8e6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-filter.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply filters to backdrop-filter content</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-plus-filter-ref.html">
+
+<p>Expected: A green box with an overlapping purple box.<br>
+The overlapping portion of the boxes should be bright magenta.<br>
+
+<div class="container">
+  <div class="orangebox"></div>
+  <div class="bluebox blur blur-bd"></div>
+</div>
+
+
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+.container {
+  width:200px;
+  height:200px;
+  top: 50px;
+  position:absolute;
+}
+.blur {
+  filter: invert(1);
+}
+.blur-bd {
+  backdrop-filter: blur(10px);
+}
+.orangebox {
+  left: 10px;
+  top: 50px;
+  background: green;
+}
+.bluebox {
+  left: 60px;
+  top: 110px;
+  background: #00ff0055;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity-ref.html
new file mode 100644
index 0000000000..aa7224fdea
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply backdrop-filter with opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<p>Expected: A green box.</p>
+
+<div class="greenbox"></div>
+
+
+<style>
+.greenbox {
+  position: absolute;
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity.html
new file mode 100644
index 0000000000..4909e59ae2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-opacity.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply backdrop-filter with opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-plus-opacity-ref.html">
+
+<p>Expected: A green box.</p>
+
+<div class="greenbox"></div>
+<div class="filter"></div>
+
+<style>
+.greenbox {
+  position: absolute;
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+}
+.filter {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 50px;
+  left: 10px;
+  backdrop-filter: invert(1);
+  opacity: 0;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-will-change-opacity.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-will-change-opacity.html
new file mode 100644
index 0000000000..250a13e0f4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-plus-will-change-opacity.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply backdrop-filter with will-change opacity</title>
+<link rel="author" href="mailto:pdr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="reference/backdrop-filter-plus-will-change-opacity-ref.html">
+
+<p>Expected: A black box.</p>
+
+<div id="filter"></div>
+
+<style>
+  #filter {
+    width: 100px;
+    height: 100px;
+    backdrop-filter: invert(1);
+    will-change: opacity;
+  }
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-reference-filter.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-reference-filter.html
new file mode 100644
index 0000000000..60a51d674d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-reference-filter.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply reference filter</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-clip-rect-ref.html">
+
+<div>
+  <p>Expected: A green box, color-inverted inside the short, wide box with a<br>
+  blue border and rounded corners, and not color-inverted anywhere else. In<br>
+  particular, there should be no color inversion inside the tall, narrow box,<br>
+  or anywhere outside that.</p>
+</div>
+<div class="box"></div>
+<div class="navbar">
+  <div class="menu"></div>
+  <div class="menu2"></div>
+</div>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
+  <defs>
+    <filter id="svgInvert">
+      <feColorMatrix in="SourceGraphic" type="matrix" values="-1  0  0 0 1
+                                                               0 -1  0 0 1
+                                                               0  0 -1 0 1
+                                                               0  0  0 1 0"/>
+    </filter>
+  </defs>
+</svg>
+
+<style>
+div {
+  position: absolute;
+}
+.box {
+  width: 200px;
+  height: 200px;
+  top: 100px;
+  left: 100px;
+  background: green;
+}
+.navbar {
+  width: 300px;
+  height: 50px;
+  top: 150px;
+  left: 50px;
+  border: 2px solid blue;
+  backdrop-filter: url(#svgInvert);
+  border-radius: 10px 20px 30px 40px;
+}
+.menu {
+  width: 100px;
+  height: 150px;
+  top: 50px;
+  left: 95px;
+  border: 2px solid red;
+}
+.menu2 {
+  width: 100px;
+  height: 30px;
+  top: -34px;
+  left: 95px;
+  border: 2px solid red;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-root-element-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-root-element-ref.html
new file mode 100644
index 0000000000..c92741df43
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-root-element-ref.html
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<meta charset="utf-8">
+<title>backdrop-filter: no effect on the root element</title>
+<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<style>
+  html {
+    background: green;
+  }
+</style>
+Test
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-root-element.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-root-element.html
new file mode 100644
index 0000000000..890e6ae51a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-root-element.html
@@ -0,0 +1,13 @@
+<!doctype HTML>
+<meta charset="utf-8">
+<title>backdrop-filter: no effect on the root element</title>
+<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-root-element-ref.html">
+<style>
+  html {
+    background: green;
+    backdrop-filter: invert(1);
+  }
+</style>
+Test
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg-background-image-blur.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg-background-image-blur.html
new file mode 100644
index 0000000000..9cd18b0542
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg-background-image-blur.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Maybe-unsupported backdrop-filter doesn't cause element to disappear</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#BackdropFilterProperty">
+<link rel="mismatch" href="/css/reference/blank.html">
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  border: 5px solid green;
+  backdrop-filter: url(#from-svg);
+}
+</style>
+<div></div>
+<svg>
+  <defs>
+    <filter id="from-svg">
+      <feGaussianBlur in="BackgroundImage" stdDeviation="20" result="blur" />
+      <feMerge>
+        <feMergeNode in="SourceGraphic" />
+        <feMergeNode in="blur" />
+      </feMerge>
+    </filter>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg-foreignObject.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg-foreignObject.html
new file mode 100644
index 0000000000..4ccaa0cf81
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg-foreignObject.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>backdrop-filter: on SVG foreignObject</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-basic-ref.html">
+
+<div>
+  <p>Expected: A green box and an overlapping black box, with a magenta<br>
+  overlapping region.</p>
+</div>
+<div class="colorbox">
+  <svg>
+    <foreignObject class="filterbox"></foreignObject>
+  </svg>
+</div>
+
+<style>
+.colorbox {
+    position: absolute;
+    background: green;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 100px;
+}
+svg {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    left: 50px;
+    top: 50px;
+}
+.filterbox {
+    width: 100px;
+    height: 100px;
+    backdrop-filter: invert(1);
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg.html
new file mode 100644
index 0000000000..01771ed563
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-svg.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly apply backdrop-filter with an SVG filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="reference/backdrop-filter-svg-ref.html">
+
+<div class="fuchsiabox"></div>
+<div class="filter"></div>
+
+<svg>
+  <filter id="invert" color-interpolation-filters="sRGB">
+    <feComponentTransfer>
+        <feFuncR type="table" tableValues="1 0"/>
+        <feFuncG type="table" tableValues="1 0"/>
+        <feFuncB type="table" tableValues="1 0"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+
+<style>
+.fuchsiabox {
+  position: absolute;
+  background: fuchsia;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+}
+.filter {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+  backdrop-filter: url(#invert);
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-update-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-update-ref.html
new file mode 100644
index 0000000000..6e719b635e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-update-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Update filter value</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+
+<p>Expected: A green box</p>
+<div id="colorbox"></div>
+
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 50px;
+    background: green;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-update.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-update.html
new file mode 100644
index 0000000000..6a81fc63eb
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-update.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>backdrop-filter: Update filter value</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-update-ref.html">
+
+<p>Expected: A green box</p>
+<div id="colorbox"></div>
+<div id="filterbox"></div>
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 10px;
+    top: 50px;
+}
+#colorbox {
+    background: #ff7fff;
+}
+#filterbox {
+    backdrop-filter: invert(0);
+}
+</style>
+
+<script>
+window.onload = function(e) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      let filt = document.getElementById("filterbox");
+      filt.style.backdropFilter = "invert(1)";
+	  document.documentElement.classList.remove('reftest-wait');
+    });
+  });
+}
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-zero-size-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-zero-size-ref.html
new file mode 100644
index 0000000000..e8f5ef7e72
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-zero-size-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Zero-size div with backdrop filter shouldn't filter anything</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+
+<p>Expected: A single green box.</p>
+<div></div>
+
+
+
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: green;
+    left: 10px;
+    top: 100px;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-zero-size.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-zero-size.html
new file mode 100644
index 0000000000..ecd7974a5f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-zero-size.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: Zero-size div with backdrop filter shouldn't filter anything</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match"  href="backdrop-filter-zero-size-ref.html">
+
+<p>Expected: A single green box.</p>
+<div class="colorbox"></div>
+<div class="filterparent">
+    <div class="filterchild"></div>
+</div>
+
+<style>
+div {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+}
+.colorbox {
+    background: green;
+    left: 10px;
+    top: 100px;
+}
+.filterparent {
+    width: 0px;
+    height: 0px;
+    left: 50px;
+    top: 150px;
+    backdrop-filter: invert(1);
+    background: lime;
+}
+.filterchild {
+    top: 100px;
+    background: #FFFFFF00;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-brightness-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-brightness-ref.html
new file mode 100644
index 0000000000..999894eb81
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-brightness-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Brightness</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+        filter: brightness(50%);
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        background: white;
+        filter: brightness(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p>
+<div class="filt"></div>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-brightness.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-brightness.html
new file mode 100644
index 0000000000..cb74e0a886
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-brightness.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Brightness</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filters-brightness-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=37500" />
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        backdrop-filter: brightness(50%);
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-contrast-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-contrast-ref.html
new file mode 100644
index 0000000000..01b38f7b33
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-contrast-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Contrast</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+        filter: contrast(50%);
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        background: white;
+        filter: contrast(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="filt"></div>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-contrast.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-contrast.html
new file mode 100644
index 0000000000..e2f5ccdd8b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-contrast.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Contrast</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filters-contrast-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-7500" />
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        backdrop-filter: contrast(50%);
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-001.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-001.html
new file mode 100644
index 0000000000..9bdcdb4a63
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters: Grayscale(50%)</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=831485">
+<link rel="match" href="reference/backdrop-filters-grayscale-001-ref.html">
+<meta name="assert" content="Check that backdrop-filter works with grayscale(50%)."/>
+<style>
+.square {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: 100px;
+    left: 100px;
+    background: blue;
+}
+
+.filt {
+    backdrop-filter: grayscale(50%);
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    top: 50px;
+    left: 50px;
+}
+
+.greenbox {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: 75px;
+    left: 75px;
+    background: green;
+}
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-002.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-002.html
new file mode 100644
index 0000000000..971bed88d3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Backdrop Filters: Grayscale(100%) with transparent background color</title>
+<link rel="author" title="Hendrik Wagenaar" href="mailto:hendrikw@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=497522">
+<link rel="match" href="reference/backdrop-filters-grayscale-002-ref.html">
+<meta name="assert" content="Check that backdrop-filter works with grayscale(100%) and a transparent background color."/>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+.background_object {
+  left: 10px;
+  top: 10px;
+  background: orange;
+}
+
+.grayscale_backdrop {
+  left: 60px;
+  top: 60px;
+  background: #fff0;
+  backdrop-filter: grayscale(100%);
+}
+</style>
+</head>
+
+<body>
+  <div class="background_object"></div>
+  <div class="grayscale_backdrop"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-003.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-003.html
new file mode 100644
index 0000000000..816846df2a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-grayscale-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Backdrop Filters: Grayscale(100%) with no background</title>
+<link rel="author" title="Jay Dasika" href="mailto:jaydasika@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=527452">
+<link rel="match" href="reference/backdrop-filters-grayscale-003-ref.html">
+<meta name="assert" content="Check that backdrop-filter works with grayscale(100%) and no background."/>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+.background_object {
+  left: 10px;
+  top: 10px;
+  background: orange;
+}
+
+.grayscale_backdrop {
+  left: 60px;
+  top: 60px;
+  backdrop-filter: grayscale(100%);
+}
+</style>
+</head>
+
+<body>
+  <div class="background_object"></div>
+  <div class="grayscale_backdrop"></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-hue-rotate-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-hue-rotate-ref.html
new file mode 100644
index 0000000000..177872cc90
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-hue-rotate-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Hue Rotate</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+        filter: hue-rotate(45deg);
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        background: white;
+        filter: hue-rotate(45deg);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a violet rectangle with a green box. Neither red nor blue.</p>
+<div class="filt"></div>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-hue-rotate.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-hue-rotate.html
new file mode 100644
index 0000000000..203a6b7627
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-hue-rotate.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Hue-rotate</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filters-hue-rotate-ref.html">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        backdrop-filter: hue-rotate(45deg);
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a violet rectangle with a green box. Neither red nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-invert-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-invert-ref.html
new file mode 100644
index 0000000000..61f285608b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-invert-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Invert</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+        filter: invert(50%);
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        background: white;
+        filter: invert(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="filt"></div>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-invert.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-invert.html
new file mode 100644
index 0000000000..b652946818
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-invert.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Invert</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filters-invert-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-37500" />
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        backdrop-filter: invert(50%);
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-opacity-ref.html
new file mode 100644
index 0000000000..acdf050313
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-opacity-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a blue square with a green box inside.</p>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-opacity.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-opacity.html
new file mode 100644
index 0000000000..b3703c3067
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-opacity.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filters-opacity-ref.html">
+<style>
+    /* Note that per the spec, the backdrop image is read back, filters
+       are applied, any additional content is drawn, and then the resulting
+       image is composited back into the parent (over the top of the
+       existing backdrop image) using source-over compositing. In this case,
+       the only backdrop filter is opacity, so the backdrop image will be
+       filtered by opacity 50%, the green box (100% opacity) is drawn over
+       that at 100% opacity, and then the entire thing is composited into
+       the backdrop, which already contains the 100% opacity blue square.
+       So the blue square stays 100% blue. */
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        backdrop-filter: opacity(50%);
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a blue square with a green box inside.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-saturate-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-saturate-ref.html
new file mode 100644
index 0000000000..f3407f3449
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-saturate-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Saturate</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: #f4fbff;
+        filter: saturate(2500%);
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        background: white;
+        filter: saturate(2500%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a light-blue rectangle with a green box. Neither cyan nor white.</p>
+<div class="filt"></div>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-saturate.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-saturate.html
new file mode 100644
index 0000000000..4a5de5b560
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-saturate.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Saturate</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filters-saturate-ref.html">
+<meta name="fuzzy" content="maxDifference=0-4; totalPixels=0-37500" />
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: #f4fbff;
+    }
+    .filt {
+        backdrop-filter: saturate(2500%);
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a light-blue rectangle with a green box. Neither cyan nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-sepia-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-sepia-ref.html
new file mode 100644
index 0000000000..eae10fe65c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-sepia-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Sepia</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+        filter: sepia(50%);
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        background: white;
+        filter: sepia(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="filt"></div>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filters-sepia.html b/testing/web-platform/tests/css/filter-effects/backdrop-filters-sepia.html
new file mode 100644
index 0000000000..3d10bf3eed
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filters-sepia.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Sepia</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="backdrop-filters-sepia-ref.html">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        backdrop-filter: sepia(50%);
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/background-image-blur-repaint.html b/testing/web-platform/tests/css/filter-effects/background-image-blur-repaint.html
new file mode 100644
index 0000000000..6ec81b6f5e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/background-image-blur-repaint.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<title>CSS Filters: Repaint of element with background-image and blur filter</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-image">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=415106">
+<link rel="match" href="reference/background-image-blur-repaint-ref.html">
+<meta name="assert" content="An element with background-image and a filter should be rendered correctly after other elements on the page change size. You should see a 50x50 green box over a blurred background."/>
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<script>
+function runTest() {
+  function shrinkBox() {
+    var box = document.getElementsByClassName("box")[0];
+    box.style.width = "50px";
+    box.style.height = "50px";
+  }
+
+  waitForAtLeastOneFrame().then(function() {
+    shrinkBox();
+    takeScreenshot();
+  });
+}
+</script>
+<style>
+.bg {
+  position: absolute;
+  left:   200px;
+  top:    0px;
+  width:  400px;
+  height: 300px;
+  background-image: url(support/color-palette.png);
+  filter: blur(8px);
+}
+.box {
+  position: absolute;
+  left:   300px;
+  top:    50px;
+  width:  100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+</head>
+
+<body onload="runTest()">
+<div class="bg"></div>
+<div class="box"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-001.html b/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-001.html
new file mode 100644
index 0000000000..a96994a8af
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-001.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>CSS Test: Blurs are correctly clipped by an overflow: hidden ancestor</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1459065">
+<link rel="match" href="blur-clip-stacking-context-ref.html">
+<style>
+  #cover, #clip, #blur {
+    width: 100px;
+    height: 100px;
+  }
+
+  #cover, #clip {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+
+  #cover {
+    background: green;
+  }
+
+  #clip {
+    overflow: hidden;
+    background: red;
+  }
+
+  #blur {
+    background: blue;
+    filter: blur(20px);
+  }
+</style>
+<div id="clip"><div id="blur"></div></div>
+<div id="cover"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-002.html b/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-002.html
new file mode 100644
index 0000000000..0473f12949
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-002.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>CSS Test: Blurs on an overflow: hidden element are correctly not-clipped to the padding box</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1459065">
+<link rel="mismatch" href="blur-clip-stacking-context-ref.html">
+<style>
+  #cover, #clip {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 100px;
+    height: 100px;
+  }
+
+  #cover {
+    background: green;
+  }
+
+  #clip {
+    overflow: hidden;
+    background: blue;
+    filter: blur(20px);
+  }
+</style>
+<div id="clip"></div>
+<div id="cover"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-ref.html b/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-ref.html
new file mode 100644
index 0000000000..82b907334f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/blur-clip-stacking-context-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<style>
+  div {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: green;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/blur-text-ref.html b/testing/web-platform/tests/css/filter-effects/blur-text-ref.html
new file mode 100644
index 0000000000..3f57da1f70
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/blur-text-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p style="max-inline-size: 30ch;"><span style="filter: blur(4px);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac diam risus. Aenean condimentum velit in arcu gravida, vel placerat nibh eleifend. Phasellus purus dolor, interdum sed quam vel, auctor pretium odio. Aliquam urna tortor, dictum ut dapibus quis, euismod eget diam. Vestibulum ultrices dapibus ornare. Morbi tempor diam urna, nec sollicitudin nunc mollis sed. Curabitur id turpis leo. Mauris semper felis felis, sit amet pretium sem imperdiet sit amet. Vivamus tincidunt dictum sapien nec faucibus. Vivamus blandit magna sit amet interdum faucibus.</span></p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/blur-text.html b/testing/web-platform/tests/css/filter-effects/blur-text.html
new file mode 100644
index 0000000000..cfb692386b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/blur-text.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<title>Blur text</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur">
+<link rel="match" href="blur-text-ref.html">
+<body>
+<p style="max-inline-size: 30ch;"><span style="filter: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='4' /></filter></svg>#blur&quot;);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac diam risus. Aenean condimentum velit in arcu gravida, vel placerat nibh eleifend. Phasellus purus dolor, interdum sed quam vel, auctor pretium odio. Aliquam urna tortor, dictum ut dapibus quis, euismod eget diam. Vestibulum ultrices dapibus ornare. Morbi tempor diam urna, nec sollicitudin nunc mollis sed. Curabitur id turpis leo. Mauris semper felis felis, sit amet pretium sem imperdiet sit amet. Vivamus tincidunt dictum sapien nec faucibus. Vivamus blandit magna sit amet interdum faucibus.</span></p>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/clip-under-filter-001.html b/testing/web-platform/tests/css/filter-effects/clip-under-filter-001.html
new file mode 100644
index 0000000000..7fbf0d6018
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/clip-under-filter-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>CSS Filters: Clips on descendants of filter elements are applied</title>
+<link rel="author" title="Xianzhu Wang" href="wangxianzhu@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-blur">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
+<link rel="help" href="https://crbug.com/809102">
+<link rel="match" href="reference/clip-under-filter-001-ref.html">
+<meta name="assert" content="Check that there is a blurred square, left half blue and right half green."/>
+
+<div style="filter: blur(10px)">
+  <div style="position: relative; width: 100px; height: 100px; background: blue; overflow: hidden">
+    <div style="position: absolute; width: 100px; height: 100px; right: -50px; background: green"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/clip-under-filter-002.html b/testing/web-platform/tests/css/filter-effects/clip-under-filter-002.html
new file mode 100644
index 0000000000..8b6a66d452
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/clip-under-filter-002.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>CSS Filters: Clips on descendants of filter elements are applied</title>
+<link rel="author" title="Xianzhu Wang" href="wangxianzhu@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-blur">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
+<link rel="help" href="https://crbug.com/809102">
+<link rel="match" href="reference/clip-under-filter-002-ref.html">
+<meta name="assert" content="Check that there is a blurred square, left half blue and right half green"/>
+
+<div style="filter: blur(10px)">
+  <div style="position: relative; width: 100px; height: 100px; background: blue; overflow: hidden">
+    <div style="position: absolute; width: 100px; height: 100px; right: -50px; background: green; overflow: hidden"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/clip-under-filter-003.html b/testing/web-platform/tests/css/filter-effects/clip-under-filter-003.html
new file mode 100644
index 0000000000..2cfda2a0d3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/clip-under-filter-003.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS filter : Clipping on descendant of filter element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-opacity">
+<link rel="help" href="https://crbug.com/734116">
+<link rel="help" href="https://crbug.com/747511">
+<link rel="match" href="reference/clip-under-filter-003-ref.html">
+<meta name="assert" content="This test ensures that overflow clip correctly applies to children in the presence of a filter on the same element"/>
+<div style="position:relative; width:100px; height:100px; border:5px dashed black; background:green; overflow:hidden; filter:opacity(1);">
+  <div style="margin-left:-5px; margin-top:-5px; width:100px; height:100px; border:5px solid red;"></div>
+</div>
+This test verifies overflow clip correctly applies to children in the presence of a filter on the same element.<br/>
+It succeeds if a green box with dashed black border is shown. No red border should be visible.
diff --git a/testing/web-platform/tests/css/filter-effects/crashtests/broken-reference-crash-001.html b/testing/web-platform/tests/css/filter-effects/crashtests/broken-reference-crash-001.html
new file mode 100644
index 0000000000..6e18e06c31
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/crashtests/broken-reference-crash-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: non-existent filters should not crash</title>
+  <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+  <link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+  <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1304748">
+  <meta name="assert" content="Check that a non-existent filter with an animation does not crash."/>
+  <style>
+    @keyframes filter_keyframes {
+      0% { filter: blur(5px); }
+      100% { filter: blur(10px); }
+    }
+    #animating {
+      font-size: 36pt;
+      animation: filter_keyframes 999s linear 999s;
+      will-change: contents;
+      filter: url("#doesotexist");
+    }
+    #child {
+      width: 10px;
+      height: 10px;
+      transform: translateX(10px);
+    }
+    #force_document_scroll {
+      width: 2000px;
+      height: 2000px;
+    }
+    </style>
+
+</head>
+<body>
+  <div id="animating">
+    <div id="child">PASS</div>
+  </div>
+  <div id="force_document_scroll"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/crashtests/felighting-display-none-mutation-crash.html b/testing/web-platform/tests/css/filter-effects/crashtests/felighting-display-none-mutation-crash.html
new file mode 100644
index 0000000000..bc3e2333bf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/crashtests/felighting-display-none-mutation-crash.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>
+  Changing 'display' to 'none' on a filter primitive shouldn't crash.
+</title>
+<script src="/common/rendering-utils.js"></script>
+<svg>
+  <filter id="f">
+    <feDiffuseLighting lighting-color="blue" id="target"/>
+  </filter>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="red" filter="url(#f)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    const lighting = document.getElementById("target");
+    lighting.style.display = "none";
+    document.body.offsetTop;
+    lighting.removeAttribute("lighting-color");
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/crashtests/multiple-references-id-crash-001.html b/testing/web-platform/tests/css/filter-effects/crashtests/multiple-references-id-crash-001.html
new file mode 100644
index 0000000000..9ee04e1015
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/crashtests/multiple-references-id-crash-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Filters: multiple references to non-existent filter</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=439970">
+<meta name="assert" content="Check that applying the same filter pointing to a non-existing target from multiple elements does not crash when removed."/>
+
+<style>
+.filter {
+  filter: url(#foo);
+}
+</style>
+<body onload="runTest()">
+<div class="filter"></div>
+<div class="filter"></div>
+<button form="bar"></button>
+
+<script>
+function runTest() {
+  document.body.innerHTML = "PASS if no crash";
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/crashtests/multiple-references-id-crash-002.html b/testing/web-platform/tests/css/filter-effects/crashtests/multiple-references-id-crash-002.html
new file mode 100644
index 0000000000..f7141da63c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/crashtests/multiple-references-id-crash-002.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>CSS Filters: multiple references to filter in mutating subtree</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=439970">
+<meta name="assert" content="Check that applying the same filter pointing to several target elements in a mutating subtree does not crash."/>
+
+<script src="/common/rendering-utils.js"></script>
+
+<style>
+#move, #obj, #bdo {
+  filter: url(#target);
+}
+</style>
+
+<body>
+<object id="obj">PASS if no crash</object>
+<div id="move">
+  <span id="target"></span>
+</div>
+<div id="bdo"></div>
+
+<script>
+waitForAtLeastOneFrame().then(function() {
+  bdo.style.zoom = 2;
+  obj.appendChild(move);
+  document.documentElement.classList.remove('test-wait');
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-blur-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-blur-ref.html
new file mode 100644
index 0000000000..643d084cec
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-blur-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Blur Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: blur(10px);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a blurred rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-blur.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-blur.html
new file mode 100644
index 0000000000..0b3e429dc3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-blur.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Blur</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-blur-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: blur(20px);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a blurred rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-brightness-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-brightness-ref.html
new file mode 100644
index 0000000000..bf894ac578
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-brightness-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Brightness Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: brightness(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-brightness.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-brightness.html
new file mode 100644
index 0000000000..cdcd9b5b70
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-brightness.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Brightness</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-brightness-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: brightness(0%);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box. Neither black nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-combined-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-combined-ref.html
new file mode 100644
index 0000000000..575c56d740
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-combined-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Combined filters 001 Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter:
+            blur(10px)
+            brightness(50%)
+            sepia(50%)
+            grayscale(50%)
+            saturate(50%)
+            hue-rotate(45deg)
+            invert(50%)
+            opacity(50%)
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray blurred rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-combined.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-combined.html
new file mode 100644
index 0000000000..e8661cc337
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-combined.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Combined filters 001</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-combined-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter:
+                blur(20px)
+                brightness(0%)
+                sepia(100%)
+                grayscale(100%)
+                saturate(0%)
+                hue-rotate(90deg)
+                invert(100%)
+                opacity(0%)
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray blurred rectangle with a green box.</p>
+
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-contrast-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-contrast-ref.html
new file mode 100644
index 0000000000..b118df6b39
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-contrast-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Contrast Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: contrast(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-contrast.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-contrast.html
new file mode 100644
index 0000000000..537f65cf53
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-contrast.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Contrast</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-contrast-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: contrast(0%);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-drop-shadow-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-drop-shadow-ref.html
new file mode 100644
index 0000000000..4d1f43792c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-drop-shadow-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Drop Shadow Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: drop-shadow(15px 15px 0px rgba(0, 0, 0, 0.5));
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a blue rectangle in top of a gray one, with a green box on top.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-drop-shadow.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-drop-shadow.html
new file mode 100644
index 0000000000..c0f634a184
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-drop-shadow.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Drop Shadow</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-drop-shadow-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: drop-shadow(30px 30px 0px black);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a blue rectangle in top of a gray one, with a green box on top.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-grayscale-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-grayscale-ref.html
new file mode 100644
index 0000000000..072652009a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-grayscale-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Blur Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: grayscale(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-grayscale.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-grayscale.html
new file mode 100644
index 0000000000..fe08d8f1ad
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-grayscale.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Grayscale</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-grayscale-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: grayscale(100%);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-hue-rotate-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-hue-rotate-ref.html
new file mode 100644
index 0000000000..f10855da38
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-hue-rotate-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Hue-rotate Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: hue-rotate(45deg);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a violet rectangle with a green box. Neither red nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-hue-rotate.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-hue-rotate.html
new file mode 100644
index 0000000000..3bc8fe496b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-hue-rotate.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Hue-rotate</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-hue-rotate-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: hue-rotate(90deg);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a violet rectangle with a green box. Neither red nor blue.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-invert-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-invert-ref.html
new file mode 100644
index 0000000000..9d4efb433e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-invert-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Invert Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: invert(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-invert.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-invert.html
new file mode 100644
index 0000000000..3291fa54fd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-invert.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Invert</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-invert-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: invert(100%);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a gray rectangle with a green box. Neither black nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-opacity-ref.html
new file mode 100644
index 0000000000..d95b01ab4c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-opacity-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Opacity Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: opacity(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a blue square with a green box inside.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-opacity.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-opacity.html
new file mode 100644
index 0000000000..66bffefd51
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-opacity.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Opacity</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-opacity-ref.html">
+<style>
+    /* Note that per the spec, the backdrop image is read back, filters
+       are applied, any additional content is drawn, and then the resulting
+       image is composited back into the parent (over the top of the
+       existing backdrop image) using source-over compositing. In this case,
+       the only backdrop filter is opacity, so the backdrop image will be
+       filtered by opacity 50%, the green box (100% opacity) is drawn over
+       that at 100% opacity, and then the entire thing is composited into
+       the backdrop, which already contains the 100% opacity blue square.
+       So the blue square stays 100% blue. */
+    @keyframes animate {
+        0% {
+            backdrop-filter: opacity(0%);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: black;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a blue square with a green box inside.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-saturate-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-saturate-ref.html
new file mode 100644
index 0000000000..572ae31a1c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-saturate-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Saturate Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: #f4fbff;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: saturate(2500%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a light-blue rectangle with a green box. Neither cyan nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-saturate.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-saturate.html
new file mode 100644
index 0000000000..dda167161e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-saturate.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Saturate</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-saturate-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: saturate(4900%);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: #f4fbff;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a light-blue rectangle with a green box. Neither cyan nor white.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-sepia-ref.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-sepia-ref.html
new file mode 100644
index 0000000000..4161d90cc0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-sepia-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Sepia Reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        backdrop-filter: sepia(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-sepia.html b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-sepia.html
new file mode 100644
index 0000000000..c28d3f98ce
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-backdrop-filters-animation-sepia.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Sepia</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="css-backdrop-filters-animation-sepia-ref.html">
+<style>
+    @keyframes animate {
+        0% {
+            backdrop-filter: sepia(100%);
+        }
+        100% {
+            backdrop-filter: none;
+        }
+    }
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        animation-name: animate;
+        animation-play-state: paused;
+        animation-delay: -2s;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 75px;
+        left: 75px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="square"></div>
+<div class="filt">
+    <div class="greenbox"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-blur-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-blur-ref.html
new file mode 100644
index 0000000000..86929b82e6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-blur-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Blur Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            filter: blur(10px);
+            will-change: filter;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a blurred rectangle.</p>
+<div class="square"></div>
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-blur.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-blur.html
new file mode 100644
index 0000000000..f1bedd1c24
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-blur.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Blur</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-blur">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-blur-ref.html">
+    <meta name="assert" content="The blue square should be 10px blurred">
+    <meta name="fuzzy" content="0-5;0-16000">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: blur(20px);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+     </style>
+</head>
+<body>
+<p>You should see a blurred rectangle.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-brightness-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-brightness-ref.html
new file mode 100644
index 0000000000..f4d252b65b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-brightness-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Brightness Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            filter: brightness(50%);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a dark blue rectangle. Neither black nor blue.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-brightness.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-brightness.html
new file mode 100644
index 0000000000..7cd51abe87
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-brightness.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Brightness</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-brightness">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-brightness-ref.html">
+    <meta name="assert" content="The blue square should be dark blue">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: brightness(0%);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a dark blue rectangle. Neither black nor blue.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001-ref.html
new file mode 100644
index 0000000000..0d4e755c68
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Combined filters 001 Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            filter:
+                blur(10px)
+                brightness(50%)
+                sepia(50%)
+                grayscale(50%)
+                saturate(50%)
+                hue-rotate(45deg)
+                invert(50%)
+                opacity(50%)
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray blurred rectangle.</p>
+<div class="square"></div>
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001.html
new file mode 100644
index 0000000000..db917daa9a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Combined filters 001</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-blur">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-brightness">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-sepia">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-grayscale">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-saturate">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-hue-rotate">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-invert">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-opacity">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-combined-001-ref.html">
+    <meta name="assert" content="The black square should be a gray square 10px blurred">
+    <meta name="fuzzy" content="0-1;0-10000">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter:
+                    blur(20px)
+                    brightness(0%)
+                    sepia(100%)
+                    grayscale(100%)
+                    saturate(0%)
+                    hue-rotate(90deg)
+                    invert(100%)
+                    opacity(0%)
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray blurred rectangle.</p>
+
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-contrast-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-contrast-ref.html
new file mode 100644
index 0000000000..67c9ee0772
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-contrast-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Contrast Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            filter: contrast(50%);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray rectangle. Neither black nor white.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-contrast.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-contrast.html
new file mode 100644
index 0000000000..a189dc5496
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-contrast.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Contrast</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-contrast">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-contrast-ref.html">
+    <meta name="assert" content="The black square should be gray">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: contrast(0%);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray rectangle. Neither black nor white.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow-ref.html
new file mode 100644
index 0000000000..d6be73bcbd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Drop Shadow Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            filter: drop-shadow(15px 15px 0px rgba(0, 0, 0, 0.5));
+        }
+    </style>
+</head>
+<body>
+<p>You should see a blue rectangle in top of a gray one.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow.html
new file mode 100644
index 0000000000..5613485cc1
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Drop Shadow</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-drop-shadow">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-drop-shadow-ref.html">
+    <meta name="assert" content="The blue square should be on top of a gray one">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: drop-shadow(30px 30px 0px black);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a blue rectangle in top of a gray one.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-grayscale-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-grayscale-ref.html
new file mode 100644
index 0000000000..7036063f92
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-grayscale-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Blur Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            filter: grayscale(50%);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a dark blue rectangle.</p>
+<div class="square"></div>
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-grayscale.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-grayscale.html
new file mode 100644
index 0000000000..c258718f69
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-grayscale.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Grayscale</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-grayscale">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-grayscale-ref.html">
+    <meta name="assert" content="The blue square should be half-grayscaled">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: grayscale(100%);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a dark blue rectangle.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate-ref.html
new file mode 100644
index 0000000000..10c9034159
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Hue-rotate Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            filter: hue-rotate(45deg);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a violet rectangle. Neither red nor blue.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate.html
new file mode 100644
index 0000000000..06c9940426
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Hue-rotate</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-hue-rotate">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-hue-rotate-ref.html">
+    <meta name="assert" content="The blue square should be violet">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: hue-rotate(90deg);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a violet rectangle. Neither red nor blue.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-invert-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-invert-ref.html
new file mode 100644
index 0000000000..606924fb51
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-invert-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Invert Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            filter: invert(50%);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray rectangle. Neither black nor white.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-invert.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-invert.html
new file mode 100644
index 0000000000..09c456e5ff
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-invert.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Invert</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-invert">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-invert-ref.html">
+    <meta name="assert" content="The black square should be gray">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: invert(100%);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray rectangle. Neither black nor white.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-opacity-ref.html
new file mode 100644
index 0000000000..439e8a02cc
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-opacity-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Opacity Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            filter: opacity(50%);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray rectangle. Neither black nor white.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-opacity.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-opacity.html
new file mode 100644
index 0000000000..a7c1a1235f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-opacity.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Opacity</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-opacity">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-opacity-ref.html">
+    <meta name="assert" content="The black square should be gray">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: opacity(0%);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: black;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a gray rectangle. Neither black nor white.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate-ref.html
new file mode 100644
index 0000000000..c87c2fac63
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Saturate Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: #f4fbff;
+            filter: saturate(2500%);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a light-blue rectangle. Neither cyan nor white.</p>
+<div class="square"></div>
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate.html
new file mode 100644
index 0000000000..ca560d79e9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Saturate</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-saturate">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-saturate-ref.html">
+    <meta name="assert" content="The blue square should be light-blue">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: saturate(4900%);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: #f4fbff;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a light-blue rectangle. Neither cyan nor white.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-sepia-ref.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-sepia-ref.html
new file mode 100644
index 0000000000..7b21bfadf1
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-sepia-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Sepia Reference</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <style type="text/css">
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            filter: sepia(50%);
+        }
+    </style>
+</head>
+<body>
+<p>You should see a dark blue rectangle.</p>
+<div class="square"></div>
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/css-filters-animation-sepia.html b/testing/web-platform/tests/css/filter-effects/css-filters-animation-sepia.html
new file mode 100644
index 0000000000..2239701110
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-sepia.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters Animation: Sepia</title>
+    <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-sepia">
+    <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
+    <link rel="match" href="css-filters-animation-sepia-ref.html">
+    <meta name="assert" content="The blue square should be half-sepia">
+    <style type="text/css">
+        @keyframes animate {
+            0% {
+                filter: sepia(100%);
+            }
+            100% {
+                filter: none;
+            }
+        }
+
+        .square {
+            width: 100px;
+            height: 100px;
+            background: blue;
+            animation-name: animate;
+            animation-play-state: paused;
+            animation-delay: -2s;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+        }
+    </style>
+</head>
+<body>
+<p>You should see a dark blue rectangle.</p>
+<div class="square"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-reference-large-svg-filter-ref.html b/testing/web-platform/tests/css/filter-effects/css-reference-large-svg-filter-ref.html
new file mode 100644
index 0000000000..21c33ea1cd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-reference-large-svg-filter-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter References Large SVG Filter Effect Reference</title>
+    <link rel="author" title="Michael Ludwig" href="mailto:michaelludwig@google.com">
+    <link rel="help" href="https://crbug.com/1466359">
+</head>
+<body>
+<div style="width: 200px; height: 200px; background-color: green;"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/css-reference-large-svg-filter.html b/testing/web-platform/tests/css/filter-effects/css-reference-large-svg-filter.html
new file mode 100644
index 0000000000..0750fd7f63
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/css-reference-large-svg-filter.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter References Large SVG Filter Effect</title>
+    <link rel="author" title="Michael Ludwig" href="mailto:michaelludwig@google.com">
+    <link rel="help" href="https://crbug.com/1466359">
+    <link rel="match" href="css-reference-large-svg-filter-ref.html">
+    <meta name="assert" content="The test passes if a green square is visible.">
+
+    <style>
+        html {
+            filter: url(#full_page_filter)
+        }
+    </style>
+</head>
+<body>
+    <div style="position: absolute;left: -100000px">Offscreen content increasing size of HTML body.</div>
+    <div style="width: 200px; height: 200px; background-color: green;"></div>
+
+    <svg xmlns="http://www.w3.org/2000/svg">
+        <filter x="0" y="0" width="999999"  height="99999" id="full_page_filter">
+            <feComponentTransfer>
+                <feFuncR type="identity" exponent="3"></feFuncR>
+                <feFuncG type="identity" exponent="3"></feFuncG>
+                <feFuncB type="identity" exponent="3"></feFuncB>
+            </feComponentTransfer>
+        </filter>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/drop-shadow-clipped-001.html b/testing/web-platform/tests/css/filter-effects/drop-shadow-clipped-001.html
new file mode 100644
index 0000000000..c08331d77f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/drop-shadow-clipped-001.html
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<title>CSS Filters: drop-shadow clipping</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#dropshadowEquivalent">
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=804670">
+<link rel="match" href="reference/drop-shadow-clipped-001-ref.html">
+<meta name="assert" content="This test ensures that the overflowing parts of drop-shadowed elements cast shadows.">
+<div style="overflow: hidden; width: 100px; height: 100px">
+  <div style="filter: drop-shadow(-105px 0 0 green);">
+    <div style="width: 50px; height: 50px; position: relative; left: 105px; background: red"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/drop-shadow-currentcolor-dynamic-001.html b/testing/web-platform/tests/css/filter-effects/drop-shadow-currentcolor-dynamic-001.html
new file mode 100644
index 0000000000..9c70274d5d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/drop-shadow-currentcolor-dynamic-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Filter Effects: Dynamic 'currentcolor' in drop-shadow()</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  background-color: green;
+  width: 50px;
+  height: 100px;
+  filter: drop-shadow(50px 0px 0px currentcolor);
+}
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}
+</style>
+<div id="container" class="red">
+  <div id="target"></div>
+</div>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  const container = document.getElementById('container');
+  container.classList.toggle('red');
+  container.classList.toggle('green');
+  takeScreenshot();
+});
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/drop-shadow-currentcolor-dynamic-002.html b/testing/web-platform/tests/css/filter-effects/drop-shadow-currentcolor-dynamic-002.html
new file mode 100644
index 0000000000..3f17b5d634
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/drop-shadow-currentcolor-dynamic-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Filter Effects: Dynamic 'currentcolor' in drop-shadow(); SVG content</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  fill: green;
+  filter: drop-shadow(50px 0px 0px currentcolor);
+}
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}
+</style>
+<svg id="container" class="red">
+  <rect id="target" width="50" height="100"/>
+</svg>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  const container = document.getElementById('container');
+  container.classList.toggle('red');
+  container.classList.toggle('green');
+  takeScreenshot();
+});
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/dynamic-filter-changes-001.html b/testing/web-platform/tests/css/filter-effects/dynamic-filter-changes-001.html
new file mode 100644
index 0000000000..e2a28a3fe4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/dynamic-filter-changes-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>CSS Filters: dynamic filter changes on images with will-change: transform</title>
+<link rel="author" title="Noel Gordon" href="mailto:noel@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=405803">
+<link rel="match" href="reference/dynamic-filter-changes-001-ref.html">
+<meta name="assert" content="A filtered image should be visible after adding a filter to an image with will-change: transform."/>
+
+<style>
+.filter {
+  filter: invert(100%);
+}
+</style>
+
+<script src="/common/reftest-wait.js"></script>
+<script>
+function load(element) {
+  element.classList.add('filter');
+  takeScreenshotDelayed(0);
+}
+</script>
+
+<body>
+  <img style="will-change: transform" onload="load(this)" src="/images/green-256x256.png">
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-add-hw-001.html b/testing/web-platform/tests/css/filter-effects/effect-reference-add-hw-001.html
new file mode 100644
index 0000000000..78f30c35f4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-add-hw-001.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>SVG Filters: feColorMatrix filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feColorMatrixElement">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=227025">
+<link rel="match" href="reference/effect-reference-add-hw-001-ref.html">
+<meta name="assert" content="Check that a reference filter can be dynamically set on elements with will-change: transform."/>
+<div style="width: 100px; height: 100px; background-color: rgb(255, 0, 0); will-change: transform" id="div1"></div>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs>
+    <filter id="colormatrix">
+      <feColorMatrix type="matrix" values="0 1 0 0 0  1 0 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+    </filter>
+  </defs>
+</svg>
+<script>
+  var div = document.getElementById("div1");
+  div.style.filter = "url(#colormatrix)";
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-after-001.html b/testing/web-platform/tests/css/filter-effects/effect-reference-after-001.html
new file mode 100644
index 0000000000..a6de246502
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-after-001.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>SVG Filters: feColorMatrix filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feColorMatrixElement">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=90405">
+<link rel="match" href="reference/effect-reference-after-001-ref.html">
+<meta name="assert" content="Check that a reference filter with forward references work"/>
+<body>
+<img style="filter: url(#MyFilter);" src="support/color-palette.png">
+<svg width="0px" height="0px">
+  <defs>
+    <filter id="MyFilter">
+      <feColorMatrix type="hueRotate" values="180"/>
+    </filter>
+  </defs>
+</svg>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-delete.html b/testing/web-platform/tests/css/filter-effects/effect-reference-delete.html
new file mode 100644
index 0000000000..314c9a7d12
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-delete.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>CSS Filters: reference to deleted SVG filter</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=90405">
+<link rel="match" href="reference/effect-reference-delete-ref.html">
+<meta name="assert" content="Check that a CSS filter no longer affects its target element after having deleted the SVG element referenced from the CSS filter."/>
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+
+<svg width="0" height="0">
+  <defs>
+    <filter id="MyFilter">
+      <feColorMatrix type="hueRotate" values="180"/>
+    </filter>
+  </defs>
+</svg>
+<img style="filter: url(#MyFilter);" src="support/color-palette.png">
+<script>
+waitForAtLeastOneFrame().then(function() {
+  document.querySelector('svg').remove();
+  takeScreenshot();
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-displacement-negative-scale-001.html b/testing/web-platform/tests/css/filter-effects/effect-reference-displacement-negative-scale-001.html
new file mode 100644
index 0000000000..282ea10050
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-displacement-negative-scale-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>SVG Filters: feDisplacementMap filter with negative scale</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feDisplacementMapElement">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=641854">
+<link rel="match" href="reference/effect-reference-displacement-negative-scale-001-ref.html">
+<meta name="assert" content="feDisplacementMap with a negative scale applies the displacement in the opposite direction.">
+
+<div style="position: relative">
+  <div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: green; filter: url(#displacementFilter);"></div>
+</div>
+<svg width="0" height="0">
+  <filter id="displacementFilter" x="-0.2" y="-0.2" color-interpolation-filters="sRGB">
+    <feFlood flood-color="black"/>
+    <feDisplacementMap in="SourceGraphic" scale="-40" xChannelSelector="R" yChannelSelector="R"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-001.html b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-001.html
new file mode 100644
index 0000000000..3a8fb36db9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>CSS Filters: feImage and CSS reference filters.</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feImageElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="reference/effect-reference-feimage-001-ref.html">
+<meta name="assert" content="This test ensures that CSS reference filters supports feImage."/>
+<style>
+  #filtered {
+    width: 160px;
+    height: 90px;
+    filter: url(#imagereplace);
+  }
+</style>
+<div id="filtered"></div>
+<svg width="0" height="0">
+  <filter id="imagereplace" x="0%" y="0%" width="100%" height="100%">
+     <feimage xlink:href="support/color-palette.png"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-002.html b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-002.html
new file mode 100644
index 0000000000..c10be0f173
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Filters: feImage and CSS reference filters.</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feImageElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="reference/effect-reference-feimage-002-ref.html">
+<meta name="assert" content="This test ensures that CSS reference filters with 'will-change: transform' supports feImage."/>
+<style>
+  #filtered {
+    width: 160px;
+    height: 90px;
+    filter: url(#imagereplace);
+    will-change: transform;
+  }
+</style>
+<div id="filtered"></div>
+<svg width="0" height="0">
+  <filter id="imagereplace" color-interpolation-filters="sRGB" x="0%" y="0%" width="100%" height="100%">
+     <feimage xlink:href="support/color-palette.png"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-003.html b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-003.html
new file mode 100644
index 0000000000..887f5ff212
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-003.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Filters: feImage and CSS reference filters.</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feImageElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="reference/effect-reference-feimage-003-ref.html">
+<meta name="assert" content="This test ensures that CSS reference filters support a dynamically attached feImage."/>
+<body>
+
+<style>
+  #filtered {
+    width: 160px;
+    height: 90px;
+    filter: url(#imagereplace);
+  }
+</style>
+
+<script type="text/html" id="source">
+  <div id="filtered"></div>
+  <svg width="0" height="0">
+    <filter id="imagereplace" x="0%" y="0" width="100%" height="100%">
+       <feimage xlink:href="support/color-palette.png"/>
+    </filter>
+  </svg>
+</script>
+
+<script>
+  document.body.offsetLeft;
+  var div = document.createElement('div');
+  div.innerHTML = document.getElementById('source').textContent;
+  document.body.appendChild(div);
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-004.html b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-004.html
new file mode 100644
index 0000000000..99b0e8f5ab
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-feimage-004.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Filters: feImage and CSS reference filters.</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feImageElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="reference/effect-reference-feimage-004-ref.html">
+<meta name="assert" content="This test ensures that CSS reference filters with 'will-change: filter' supports feImage."/>
+<style>
+  #filtered {
+    width: 160px;
+    height: 90px;
+    filter: url(#imagereplace);
+    will-change: filter;
+  }
+</style>
+<div id="filtered"></div>
+<svg width="0" height="0">
+  <filter id="imagereplace" color-interpolation-filters="sRGB" x="0%" y="0%" width="100%" height="100%">
+     <feimage xlink:href="support/color-palette.png"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-lighting-no-light.tentative.html b/testing/web-platform/tests/css/filter-effects/effect-reference-lighting-no-light.tentative.html
new file mode 100644
index 0000000000..beefd47a54
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-lighting-no-light.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Filters: feDiffuseLighting and feSpecularLighting error handling.</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feDiffuseLightingElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feSpecularLightingElement">
+<link rel="match" href="reference/effect-reference-lighting-no-light.tentative-ref.html">
+<meta name="assert" content="This test ensures that invalid parameters to both feDiffuseLighting and feSpecularLighting produce transparent black."/>
+<style>
+.target {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+</style>
+<div class="target" style="filter: url(#noLightDiffuse)"></div>
+<div class="target" style="filter: url(#noLightSpecular)"></div>
+<svg height="0" color-interpolation-filters="sRGB">
+  <filter id="noLightDiffuse" x="0" y="0" width="1" height="1">
+    <feDiffuseLighting lighting-color="blue"/>
+    <!-- Using 0.5 on the matrices below can cause in different engines
+     an off-by-one difference (127 vs. 128), when rounding 127.5 (255 * 0.5)
+     either up or downwards.
+     Hence, the test uses 0.502 (~128/255) to avoid this tie-break. -->
+    <feColorMatrix values="1 0 0 0 0,
+                           0 1 0 0 0.502,
+                           0 0 1 0 0,
+                           0 0 0 1 1"/>
+  </filter>
+
+  <filter id="noLightSpecular" x="0" y="0" width="1" height="1">
+    <feSpecularLighting lighting-color="blue"/>
+    <feColorMatrix values="1 0 0 0 0,
+                           0 1 0 0 0.502,
+                           0 0 1 0 0,
+                           0 0 0 1 1"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-local-url-with-base-001.html b/testing/web-platform/tests/css/filter-effects/effect-reference-local-url-with-base-001.html
new file mode 100644
index 0000000000..d3c81300e6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-local-url-with-base-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>SVG Filters: local URL with a base element</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.csswg.org/css-values/#local-urls">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=470608">
+<link rel="match" href="reference/effect-reference-local-url-with-base-001-ref.html">
+<meta name="assert" content="Check that fragment-only URLs are always document-local references.">
+
+<base href="http://www.example.com/">
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+  filter: url(#filter);
+}
+</style>
+<div id="target"></div>
+<svg>
+  <filter id="filter" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+    <feFlood flood-color="green"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-merge-no-inputs.tentative.html b/testing/web-platform/tests/css/filter-effects/effect-reference-merge-no-inputs.tentative.html
new file mode 100644
index 0000000000..4fb67db643
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-merge-no-inputs.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>CSS Filters: feMerge with no input feMergeNode</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feMergeElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feCompositeElement">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=533457">
+<link rel="match" href="reference/effect-reference-merge-no-inputs.tentative-ref.html">
+<meta name="assert" content="Check that the result of an feMerge with no feMergeNode children is transparent black."/>
+
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  filter: url(#emptyMerge);
+}
+</style>
+<div id="target"></div>
+<svg height="0">
+  <filter id="emptyMerge">
+    <feColorMatrix values="0 0 0 0 0, 0 0 1 0 0, 0 0 0 0 0, 0 0 0 1 0" result="lime"/>
+    <feColorMatrix values="0 1 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 1 0" result="red"/>
+    <feMerge/>
+    <feComposite in2="lime"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-obb-dimensions.html b/testing/web-platform/tests/css/filter-effects/effect-reference-obb-dimensions.html
new file mode 100644
index 0000000000..2bb424d90c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-obb-dimensions.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Filters: objectBoundingBox type of primitiveUnits in SVG filters</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#InterfaceSVGFilterElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#attr-valuedef-primitiveunits-objectboundingbox">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=532938">
+<link rel="match" href="reference/effect-reference-obb-dimensions-ref.html">
+<meta name="assert" content="Check that primitiveUnits of type objectBoundingBox get properly applied in SVG filter primitives."/>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+#target {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+  filter: url('#bboxOffset');
+}
+</style>
+<div id="target"></div>
+<svg height="0">
+  <filter id="bboxOffset" primitiveUnits="objectBoundingBox" x="0" y="0" width="1.25" height="1.25">
+    <feOffset dx="0.2" dy="0.2"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-on-span.html b/testing/web-platform/tests/css/filter-effects/effect-reference-on-span.html
new file mode 100644
index 0000000000..66bd8fa886
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-on-span.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Filters: filters on <span> elements</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=513408">
+<link rel="match" href="reference/effect-reference-on-span-ref.html">
+<meta name="assert" content="Check that a CSS filter to a <span> element works as expected."/>
+
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs>
+    <filter id="colormatrix" color-interpolation-filters="sRGB">
+      <feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 1 0 0 0 0, 0 0 0 1 0"/>
+    </filter>
+  </defs>
+</svg><span style="background-color: red; filter: url(#colormatrix);">This text's background should be blue.</span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-on-transparent-element.html b/testing/web-platform/tests/css/filter-effects/effect-reference-on-transparent-element.html
new file mode 100644
index 0000000000..e88a656170
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-on-transparent-element.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Filters: SVG filter on transparent element</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=510541">
+<link rel="match" href="reference/effect-reference-on-transparent-element-ref.html">
+<meta name="assert" content="Check that applying a SVG filter to a transparent element works as expected. You should see a green lime colored square."/>
+
+<style>
+.box {
+  width: 100px;
+  height: 100px;
+  filter: url(#flood_green);
+}
+</style>
+
+<body>
+<div class="box"></div>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
+  <defs>
+    <filter id="flood_green" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
+      <feColorMatrix type="matrix" values="0 0 0 0 0
+                                           0 0 0 0 1
+                                           0 0 0 0 0
+                                           0 0 0 0 1"/>
+    </filter>
+  </defs>
+</svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-rename-001.html b/testing/web-platform/tests/css/filter-effects/effect-reference-rename-001.html
new file mode 100644
index 0000000000..6c8374536f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-rename-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Filters: reference to renamed SVG filter</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=90405">
+<link rel="match" href="reference/effect-reference-rename-001-ref.html">
+<meta name="assert" content="Check that a SVG filter, initially named differently than what an element expects, gets applied to such element once renamed with the expected value."/>
+
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
+  <defs>
+    <filter id="NotMyFilter">
+      <feColorMatrix type="hueRotate" values="180"/>
+    </filter>
+  </defs>
+</svg>
+<img style="filter: url(#MyFilter);" src="support/color-palette.png">
+<script>
+document.getElementById("NotMyFilter").id = "MyFilter";
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-rename-002.html b/testing/web-platform/tests/css/filter-effects/effect-reference-rename-002.html
new file mode 100644
index 0000000000..86528819bc
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-rename-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>CSS Filters: reference to renamed SVG filter</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=453019">
+<link rel="match" href="reference/effect-reference-rename-002-ref.html">
+<meta name="assert" content="Check that a SVG filter, initially named differently than what an element expects, gets applied to such element once renamed, after rendering the first frame."/>
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+
+<body>
+<svg height="0">
+  <filter id="NotMyFilter">
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+</svg>
+<div style="width: 100px; height: 100px; background-color: red; filter: url(#MyFilter);"></div>
+<script>
+waitForAtLeastOneFrame().then(function() {
+  document.getElementById("NotMyFilter").id = "MyFilter";
+  takeScreenshot();
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-reset-style-delete-crash.html b/testing/web-platform/tests/css/filter-effects/effect-reference-reset-style-delete-crash.html
new file mode 100644
index 0000000000..e1c0eb9aec
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-reset-style-delete-crash.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Filters: Crash when a SVG filter is deleted</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterElement">
+<link rel="issue" href="https://bugs.webkit.org/show_bug.cgi?id=90405">
+<meta name="assert" content="Check that crash doesn't happen when a SVG filter is deleted that used to be referenced by an HTML element but is no longer.">
+<body>
+  <img id="html" style="filter: url(#MyFilter);" src="support/color-palette.png">
+  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1" id="svg">
+    <defs>
+      <filter id="MyFilter">
+        <feColorMatrix type="hueRotate" values="180"/>
+      </filter>
+    </defs>
+  </svg>
+  <script>
+    html = document.getElementById('html');
+    html.style = "";
+    svg = document.getElementById('svg');
+    svg.parentNode.removeChild(svg);
+  </script>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-source-alpha-001.html b/testing/web-platform/tests/css/filter-effects/effect-reference-source-alpha-001.html
new file mode 100644
index 0000000000..3bb76015ee
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-source-alpha-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Filters: feMergeNode with SourceAlpha</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feMergeElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#attr-valuedef-in-sourcealpha">
+<link rel="help" href="https://crbug.com/109224">
+<link rel="match" href="reference/effect-reference-source-alpha-001-ref.html">
+<meta name="assert" content="Check that SourceAlpha is correctly derived from SourceGraphic which is the output of the opacity(0) filter function which essentially sets all pixels to transparent."/>
+
+<style>
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+#test {
+  background-color: red;
+  filter: opacity(0) url(#f);
+}
+</style>
+<div style="background-color: green"></div>
+<div id="test">
+<svg height="0">
+  <filter id="f">
+    <feMerge><feMergeNode in="SourceAlpha"></feMergeNode></feMerge>
+  </filter>
+</svg>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/effect-reference-source-alpha-002.html b/testing/web-platform/tests/css/filter-effects/effect-reference-source-alpha-002.html
new file mode 100644
index 0000000000..3c570c59e2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/effect-reference-source-alpha-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Filters: feColorMatrix with SourceAlpha</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feColorMatrixElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#attr-valuedef-in-sourcealpha">
+<link rel="help" href="https://crbug.com/331362">
+<link rel="match" href="reference/effect-reference-source-alpha-002-ref.html">
+<meta name="assert" content="Check that the result of an identity feColorMatrix with SourceAlpha from an element with will-change: transform as input is opaque black"/>
+
+<style>
+.rect {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    filter: url(#alpha);
+    will-change: transform;
+}
+</style>
+<div class="rect"></div>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs>
+    <filter id="alpha" color-interpolation-filters="sRGB">
+      <feColorMatrix in="SourceAlpha"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/empty-element-with-filter.html b/testing/web-platform/tests/css/filter-effects/empty-element-with-filter.html
new file mode 100644
index 0000000000..3e8fc7e164
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/empty-element-with-filter.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Filter Effects: filters on elements that otherwise have no visible content</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="match" href="reference/empty-element-with-filter-ref.html">
+<meta name="assert" content="This test ensures we properly render filters on elements that otherwise have no visible content.">
+<style>
+  .turbulent {
+    width: 160px;
+    height: 90px;
+    margin: 10px;
+    filter: url(#turbulence);
+  }
+
+  .visibleContent {
+    background-color: red;
+  }
+</style>
+<div class="turbulent visibleContent"></div>
+<div class="turbulent"></div>
+
+This test passes if both divs look the same.
+
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs>
+    <filter id="turbulence" color-interpolation-filters="sRGB">
+      <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/fecolormatrix-type-ref.html b/testing/web-platform/tests/css/filter-effects/fecolormatrix-type-ref.html
new file mode 100644
index 0000000000..182b4b547c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/fecolormatrix-type-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filter Effects: Test feColorMatrix with type matrix</title>
+    <link rel="author" title="Takaki Yasuma" href="mailto:takakiyasuma@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+       div{
+	       width: 200px;
+	       height: 200px;
+	       background-color: rgba(39.3%, 68.6%, 53.4%, 1);
+       }
+
+    </style>
+</head>
+
+<body>
+
+	<p>You should see a aquamarine colored rectangle.</p>
+
+	<div></div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/fecolormatrix-type.html b/testing/web-platform/tests/css/filter-effects/fecolormatrix-type.html
new file mode 100644
index 0000000000..990225d011
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/fecolormatrix-type.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filter Effects: Test feColorMatrix with type matrix</title>
+    <link rel="author" title="Takaki Yasuma" href="mailto:takakiyasuma@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#feColorMatrixElement">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#element-attrdef-fecolormatrix-type">
+    <link rel="match" href="fecolormatrix-type-ref.html">
+    <meta name="assert" content="If the test runs, you should see a auqamarine colored rectangle.">
+    <style type="text/css">
+
+       div{
+	       width: 200px;
+	       height: 200px;
+	       background-color: red;
+	       filter: url(#sepia);
+       }
+
+    </style>
+</head>
+
+<body>
+
+	<p>You should see a aquamarine colored rectangle.</p>
+
+	<div></div>
+
+	<svg>
+		<filter id="sepia" color-interpolation-filters="sRGB">
+			<feColorMatrix type="matrix" values="0.393 0.189 0.349 0 0
+	                   0.686 0.168 0.272 0 0
+	                   0.534 0.131 0 0 0
+	                   0 0 0 1 0"/>
+		</filter>
+	</svg>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/fecomposite-non-zero-inoffset-001.html b/testing/web-platform/tests/css/filter-effects/fecomposite-non-zero-inoffset-001.html
new file mode 100644
index 0000000000..b2d71cfa98
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/fecomposite-non-zero-inoffset-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>CSS Filters: Correct destination rectangle in feComposite</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feMorphologyElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feFloodElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feCompositeElement">
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=391200">
+<link rel="match" href="reference/fecomposite-non-zero-inoffset-001-ref.html">
+<meta name="assert" content="This test ensures that feComposite with 'operator=in' works properly on the correct destination rectangle.">
+<body>
+  <div style="filter: url('#filter'); width: 100px; height: 100px; padding: 1px;">
+    <div style="background-color: red; width: 98px; height: 98px;"></div>
+  </div>
+  <svg width="0" height="0">
+    <filter id="filter">
+      <feFlood result="outlineColor" flood-color="green"/>
+      <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
+      <feComposite operator="in" in="outlineColor"/>
+    </filter>
+  </svg>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/feflood-with-filter-reference.html b/testing/web-platform/tests/css/filter-effects/feflood-with-filter-reference.html
new file mode 100644
index 0000000000..0a8fede7e6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/feflood-with-filter-reference.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>Filter primitive (feFlood) with filter reference</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feFloodElement">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="f" x="0" y="0" width="1" height="1"
+          color-interpolation-filters="sRGB">
+    <feFlood flood-color="green" filter="url(#f)"/>
+  </filter>
+  <rect width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/feimage-circular-reference-foreign-object-crash.html b/testing/web-platform/tests/css/filter-effects/feimage-circular-reference-foreign-object-crash.html
new file mode 100644
index 0000000000..00f0e36223
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/feimage-circular-reference-foreign-object-crash.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>CSS Filters: filter reference a SVG foreign object.</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="bookmark" href="https://crrev.com/c/1080147">
+<meta name="assert" content="Test ensures that updating a filter which references a SVG foreign object through feImage with a circular reference does not crash."/>
+<script src="/common/rendering-utils.js"></script>
+<script>
+waitForAtLeastOneFrame().then(function() {
+  feImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#svg');
+  document.documentElement.classList.remove('test-wait');
+});
+</script>
+<svg>
+  <filter id="filter">
+    <feImage id="feImage"></feImage>
+  </filter>
+</svg>
+<svg id="svg">
+  <foreignObject id="foreignObject" filter="url(#filter)">FO</foreignObject>
+</svg>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/feimage-reference-foreign-object-crash.html b/testing/web-platform/tests/css/filter-effects/feimage-reference-foreign-object-crash.html
new file mode 100644
index 0000000000..dde4805a36
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/feimage-reference-foreign-object-crash.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>CSS Filters: filter reference a SVG foreign object.</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="bookmark" href="https://crrev.com/c/1080147">
+<meta name="assert" content="Test ensures that updating a filter which references a SVG foreign object through feImage does not crash."/>
+<script src="/common/rendering-utils.js"></script>
+<script>
+waitForAtLeastOneFrame().then(function() {
+  feImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#svg');
+  document.documentElement.classList.remove('test-wait');
+});
+</script>
+
+<svg>
+  <filter id="filter">
+    <feImage id="feImage"></feImage>
+  </filter>
+</svg>
+<div style="filter: url(#filter)"></div>
+<svg id="svg">
+  <foreignObject id="foreignObject">FO</foreignObject>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/feimage-target-child-reference-crash.html b/testing/web-platform/tests/css/filter-effects/feimage-target-child-reference-crash.html
new file mode 100644
index 0000000000..eef96ef094
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/feimage-target-child-reference-crash.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>feImage referencing a child of the filter's target element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<svg>
+  <filter id='f1' x='0' y='0' width='1' height='1'>
+    <feFlood flood-color='green'/>
+  </filter>
+  <filter id='f2' x='0' y='0' width='1' height='1'>
+    <feImage href='#inner'/>
+  </filter>
+  <g filter='url(#f2)'>
+    <g id='inner' filter='url(#f1)'>
+      <rect width='50' height='50' fill='orange'/>
+    </g>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/felighting-no-light-source-style-update-crash.html b/testing/web-platform/tests/css/filter-effects/felighting-no-light-source-style-update-crash.html
new file mode 100644
index 0000000000..dfc255df3d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/felighting-no-light-source-style-update-crash.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>
+  Changing style on a &lt;fe*Lighting> without a light source shouldn't crash
+</title>
+<script src="/common/rendering-utils.js"></script>
+<svg>
+  <filter id="f">
+    <feSpecularLighting/>
+    <feDiffuseLighting/>
+  </filter>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="red" filter="url(#f)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let filter = document.querySelector('filter');
+    filter.style['color-interpolation-filters'] = 'sRGB';
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-001-ref.html
new file mode 100644
index 0000000000..d092a401e4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<title>CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+<style>
+
+#cb {
+    position: relative;
+    filter: brightness(100%);
+}
+
+#abspos {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    background: blue;
+}
+
+</style>
+
+<p>Filler text.</p>
+
+<div>
+    <span id="cb">Blue box should cover top-left corner of this sentence.<span id="abspos"></span></span>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-001.html b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-001.html
new file mode 100644
index 0000000000..34d0373b3e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<title>CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+<link rel="match" href="filter-cb-abspos-inline-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<meta name="assert" content="A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.">
+<meta name="assert" content="A value of 100% leaves the input unchanged.">
+<style>
+
+#cb {
+    filter: brightness(100%);
+}
+
+#abspos {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    background: blue;
+}
+
+</style>
+
+<p>Filler text.</p>
+
+<div>
+    <span id="cb">Blue box should cover top-left corner of this sentence.<span id="abspos"></span></span>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-002.html b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-002.html
new file mode 100644
index 0000000000..6fcf8fea16
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<title>CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+<link rel="match" href="filter-cb-abspos-inline-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<meta name="flags" content="dom">
+<meta name="assert" content="A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.">
+<meta name="assert" content="A value of 100% leaves the input unchanged.">
+<style>
+
+#cb {
+    perspective: 100px;
+}
+
+#abspos {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    background: blue;
+}
+
+</style>
+<script>
+
+window.addEventListener("load", function window_load(event) {
+    document.body.offsetTop; // flush layout
+    document.getElementById("cb").style.filter = "brightness(100%)";
+});
+
+</script>
+
+<p>Filler text.</p>
+
+<div>
+    <span id="cb">Blue box should cover top-left corner of this sentence.<span id="abspos"></span></span>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-003-ref.html b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-003-ref.html
new file mode 100644
index 0000000000..7536951a6b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-003-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<title>CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+<style>
+
+#abspos {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background: blue;
+}
+
+</style>
+
+<div>
+    <span id="cb">Blue box should be in top-right corner of screen.</span>
+</div>
+<div id="abspos"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-003.html b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-003.html
new file mode 100644
index 0000000000..d050f7e810
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-abspos-inline-003.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<title>CSS Filter: Establishing containing block for absolutely-positioned elements, on an inline element</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+<link rel="match" href="filter-cb-abspos-inline-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#supported-filter-functions">
+<meta name="flags" content="dom">
+<meta name="assert" content="A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.">
+<meta name="assert" content="A value of 100% leaves the input unchanged.">
+<style>
+
+#cb {
+    perspective: 100px;
+}
+
+#abspos {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background: blue;
+}
+
+</style>
+<script>
+
+window.addEventListener("load", function window_load(event) {
+    document.body.offsetTop; // flush layout
+    document.getElementById("cb").style.filter = "";
+});
+
+</script>
+
+<div>
+    <span id="cb" style="filter: brightness(100%)">Blue box should be in top-right corner of screen.<span id="abspos"></span></span>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1-ref.html b/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1-ref.html
new file mode 100644
index 0000000000..7b746b82b2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #fixedmoves {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="fixedmoves"></div>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1a.html b/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1a.html
new file mode 100644
index 0000000000..cc8c74701f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.fxtf.org/filters-1/#FilterProperty">
+<link rel="help" href="http://www.w3.org/2015/02/10-fx-minutes.html#action02">
+<link rel="match" href="filter-cb-dynamic-1-ref.html">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changefilter {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changefilter" style="filter: blur(4px)">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changefilter = document.getElementById("changefilter");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changefilter.style.filter = "";
+  </script>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1b.html b/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1b.html
new file mode 100644
index 0000000000..15e30ee571
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-cb-dynamic-1b.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.fxtf.org/filters-1/#FilterProperty">
+<link rel="help" href="http://www.w3.org/2015/02/10-fx-minutes.html#action02">
+<link rel="match" href="filter-cb-dynamic-1-ref.html">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changefilter {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changefilter">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changefilter = document.getElementById("changefilter");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changefilter.style.filter = "blur(0px)";
+  </script>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-chained-url-url-001.html b/testing/web-platform/tests/css/filter-effects/filter-chained-url-url-001.html
new file mode 100644
index 0000000000..3f58834989
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-chained-url-url-001.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Chained identity url() filters with 'linearRGB' color-interpolation-filters</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-color-interpolation-filters">
+<link rel="match" href="reference/green-100x100.html">
+<div style="width: 100px; height: 100px; background-color: green; filter: url(#identity) url(#identity)"></div>
+<svg height="0">
+  <filter id="identity">
+    <feColorMatrix type="identity"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-contrast-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-contrast-001-ref.html
new file mode 100644
index 0000000000..1be00e8bba
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-contrast-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+       div {
+           width: 200px;
+           height: 200px;
+           background-color: green;
+       }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is a green box.</p>
+
+    <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-contrast-001.html b/testing/web-platform/tests/css/filter-effects/filter-contrast-001.html
new file mode 100644
index 0000000000..b88954f9b9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-contrast-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter contrast: CSS contrast filter shotrhand</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-contrast">
+    <link rel="match" href="filter-contrast-001-ref.html">
+    <meta name="assert" content="CSS contrast filter will apply a component transfer to the div element to adjust the
+    contrast of the colors. Since contrast is 100%, it will leave unchanged.">
+    <style type="text/css">
+
+       div {
+           width: 200px;
+           height: 200px;
+           background-color: green;
+           filter: contrast(100%);
+       }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is a green box.</p>
+
+    <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-contrast-002-ref.html b/testing/web-platform/tests/css/filter-effects/filter-contrast-002-ref.html
new file mode 100644
index 0000000000..51ee9548d5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-contrast-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+       div {
+           width: 200px;
+           height: 200px;
+           background-color: #808080;
+       }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is a gray box and no red.</p>
+
+    <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-contrast-002.html b/testing/web-platform/tests/css/filter-effects/filter-contrast-002.html
new file mode 100644
index 0000000000..e337bce9ea
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-contrast-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter contrast: CSS contrast filter shotrhand</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-contrast">
+    <link rel="match" href="filter-contrast-002-ref.html">
+    <meta name="assert" content="CSS contrast filter will apply a component transfer to the div element to adjust the
+    contrast of the colors. Since contrast is 0%, it must be the completely gray.">
+    <style type="text/css">
+
+       div {
+           width: 200px;
+           height: 200px;
+           background-color: red;
+           filter: contrast(0%);
+       }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is a gray box and no red.</p>
+
+    <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-contrast-003-ref.html b/testing/web-platform/tests/css/filter-effects/filter-contrast-003-ref.html
new file mode 100644
index 0000000000..6ce55c0f12
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-contrast-003-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+       div {
+           width: 200px;
+           height: 200px;
+           background-color: black;
+       }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is a black box and no dark red.</p>
+
+    <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-contrast-003.html b/testing/web-platform/tests/css/filter-effects/filter-contrast-003.html
new file mode 100644
index 0000000000..3f799f3fa0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-contrast-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter contrast: Test for CSS contrast filter shorthand</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-contrast">
+    <link rel="match" href="filter-contrast-003-ref.html">
+    <meta name="assert" content="CSS contrast filter will apply a component transfer to the div element to adjust the
+    contrast of the colors. Since contrast is 200%, it will be less contrast.">
+    <style type="text/css">
+       div {
+           width: 200px;
+           height: 200px;
+           background-color: #3f0000;
+           filter: contrast(200%);
+       }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is a black box and no dark red.</p>
+
+    <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-effect-remove-unattached.html b/testing/web-platform/tests/css/filter-effects/filter-effect-remove-unattached.html
new file mode 100644
index 0000000000..cfb11af605
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-effect-remove-unattached.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>CSS Filters: Remove a filter effect from an unattached element</title>
+<link rel="author" title="Ali Juma" href="mailto:ajuma@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feGaussianBlurElement">
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=502026">
+<link rel="match" href="reference/filter-effect-remove-unattached-ref.html">
+<meta name="assert" content="This test ensures that we can remove a filter effect from an unattached element.">
+<script src="/common/reftest-wait.js"></script>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs id="svgDefs" style="display:none">
+   <filter id="blurY" color-interpolation-filters="sRGB">
+    <feGaussianBlur id="blurEffect" stdDeviation="0 5">
+    </feGaussianBlur>
+   </filter>
+  </defs>
+</svg>
+
+<script>
+  onload = function() {
+    // Render one frame with the blur effect, then remove it.
+    window.requestAnimationFrame(function() {
+      window.requestAnimationFrame(function() {
+        var filterElement = document.getElementById("blurY");
+        var filterEffectElement = document.getElementById("blurEffect");
+        filterElement.removeChild(filterEffectElement);
+
+        // Ensure we draw a frame.
+        document.getElementById("other").style.backgroundColor = "blue";
+        takeScreenshot();
+      });
+    });
+  }
+</script>
+
+<img src="resources/reference.png" style="filter: url(#blurY);">
+
+<div id="other" style="width: 10px; height: 10px"></div>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/filter-external-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-external-001-ref.html
new file mode 100644
index 0000000000..794674da48
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-external-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Reference for Saturate short hand</title>
+    <link rel="author" title="Akihiro Oyamada" href="mailto:admin@yomotsu.net">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+    div {
+        width: 200px;
+        height: 200px;
+        background: rgb(0%, 46.896%, 0.396%);
+    }
+
+    </style>
+</head>
+<body>
+    <p>You should see a green rectangle.</p>
+
+    <div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-external-001-test.html b/testing/web-platform/tests/css/filter-effects/filter-external-001-test.html
new file mode 100644
index 0000000000..588263c57c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-external-001-test.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: load external SVG Filter (ID attribute)</title>
+    <link rel="author" title="Akihiro Oyamada" href="mailto:admin@yomotsu.net">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#typedef-filter-url">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent">
+    <link rel="match" href="filter-external-001-ref.html">
+    <meta name="flags" content="svg">
+    <meta name="assert" content="the test passes if you see green box.">
+    <style type="text/css">
+    div {
+        width: 200px;
+        height: 200px;
+        background: red;
+        filter: url( #filter );
+    }
+
+    </style>
+</head>
+<body>
+    <p>You should see a green rectangle.</p>
+
+    <div></div>
+
+    <svg>
+        <filter id="filter" color-interpolation-filters="sRGB">
+            <feColorMatrix type="hueRotate" in="SourceGraphic" values="150"/>
+        </filter>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-external-002-test.html b/testing/web-platform/tests/css/filter-effects/filter-external-002-test.html
new file mode 100644
index 0000000000..e365998c6a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-external-002-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: load external SVG Filter (svg file)</title>
+    <link rel="author" title="Akihiro Oyamada" href="mailto:admin@yomotsu.net">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#typedef-filter-url">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent">
+    <link rel="match" href="filter-external-001-ref.html">
+    <meta name="flags" content="svg">
+    <meta name="assert" content="the test passes if you see green box.">
+    <style type="text/css">
+    div {
+        width: 200px;
+        height: 200px;
+        background: red;
+        filter: url( support/filter-external-002-filter.svg#filter );
+    }
+
+    </style>
+</head>
+<body>
+    <p>You should see a green rectangle.</p>
+
+    <div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-001.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-001.html
new file mode 100644
index 0000000000..4294218511
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function can be applied to an image included as content</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<style>
+div {
+    width: 100px;
+    height: 100px;
+    background: red;
+    image-rendering: crisp-edges;
+    content: filter(url(resources/green-transparent-100x100.png), drop-shadow(50px 0 0 green));
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-002.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-002.html
new file mode 100644
index 0000000000..c1b0b0a78c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function can be applied to border-image</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<style>
+.test {
+    position: relative;
+    width: 50px;
+    height: 100px;
+    box-sizing: border-box;
+    border: 25px solid black;
+    border-image: filter(url(resources/green-transparent-200x200.png), drop-shadow(50px 0 0 green)) 75 / 75px / 50px;
+}
+.red {
+    position: absolute;
+    left: -25px;
+    top: -25px;
+    width: 100px;
+    height: 100px;
+    background: red;
+    z-index: -1;
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div class="test">
+ <div class="red"></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-003.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-003.html
new file mode 100644
index 0000000000..cb1bf35819
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function can be applied to a background-image</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<style>
+.test {
+    width: 100px;
+    height: 100px;
+    background: filter(url(resources/green-transparent-100x100.png), drop-shadow(50px 0 0 green)) top left no-repeat, red;
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div class="test"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-004.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-004.html
new file mode 100644
index 0000000000..07825d8d0d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function can be applied to a mask-image</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-mode"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<style>
+.test {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    mask: filter(url(resources/green-transparent-100x100.png), drop-shadow(50px 0 0 black)) top left no-repeat alpha;
+    -webkit-mask: filter(url(resources/green-transparent-100x100.png), drop-shadow(50px 0 0 black)) top left no-repeat alpha;
+}
+.content {
+    width: 100px;
+    height: 100px;
+    background: green;
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div class="test"><div class="content"></div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-005.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-005.html
new file mode 100644
index 0000000000..2d3ad5b9a9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function units are not scaled when applied to a scaled image included as content</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<meta name="assert" content="The dimensions in the filter functions are absolute dimensions, and if the image they are applied to is scaled (as it is here due to being part of an image included as generated content), the units in the filters should not be scaled. The filter must be applied after scaling." />
+<style>
+div {
+    width: 100px;
+    height: 100px;
+    background: red;
+    image-rendering: crisp-edges;
+    content: filter(url(resources/green-transparent-20x10.png), drop-shadow(50px 0 0 green));
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-006.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-006.html
new file mode 100644
index 0000000000..fe5c0c3849
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-006.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function unis are not scaled when applied to a scaled border-image</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<meta name="assert" content="The dimensions in the filter functions are absolute dimensions, and if the image they are applied to is scaled (as it is here due to being part of a border-image), the units in the filters should not be scaled. The filter must be applied after scaling."/>
+<style>
+.test {
+    position: relative;
+    width: 50px;
+    height: 100px;
+    box-sizing: border-box;
+    border: 25px solid black;
+    image-rendering: crisp-edges;
+    border-image: filter(url(resources/green-transparent-80x80.png), drop-shadow(50px 0 0 green)) 30 / 75px / 50px;
+}
+.red {
+    position: absolute;
+    left: -25px;
+    top: -25px;
+    width: 100px;
+    height: 100px;
+    background: red;
+    z-index: -1;
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div class="test">
+ <div class="red"></div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-007.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-007.html
new file mode 100644
index 0000000000..aad794e019
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-007.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function units are not scaled when applied to a scaled background-image</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<meta name="assert" content="The dimensions in the filter functions are absolute dimensions, and if the image they are applied to is scaled (as it is here due to being part of a background-image), the units in the filters should not be scaled. The filter must be applied after scaling."/>
+<style>
+.test {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    image-rendering: crisp-edges;
+    background: filter(url(resources/green-transparent-20x10.png), drop-shadow(50px 0 0 green)) top left / 100px 100px no-repeat, red;
+}
+.red {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: red;
+    z-index: -1;
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div class="test">
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-008.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-008.html
new file mode 100644
index 0000000000..951a4ed7fd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-008.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>filter function units are not scaled when applied to a scaled mask-image</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter"/>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-mode"/>
+<link rel="author" title="Mike Bremford" href="http://bfo.com/" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"/>
+<meta name="assert" content="The dimensions in the filter functions are absolute dimensions, and if the image they are applied to is scaled (as it is here due to being part of a mask-image), the units in the filters should not be scaled. The filter must be applied after scaling."/>
+<style>
+.test {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    mask: filter(url(resources/green-transparent-20x10.png), drop-shadow(50px 0 0 black)) top left / 100px 100px no-repeat alpha;
+    -webkit-mask: filter(url(resources/green-transparent-20x10.png), drop-shadow(50px 0 0 black)) top left / 100px 100px no-repeat alpha;
+}
+.content {
+    width: 100px;
+    height: 100px;
+    background: green;
+}
+</style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div class="test"><div class="content"></div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-conic-gradient-ref.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-conic-gradient-ref.html
new file mode 100644
index 0000000000..535feb40eb
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-conic-gradient-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        position: relative;
+        width: 400px;
+        height: 400px;
+    }
+    #container > div {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    #background {
+        background-image: conic-gradient(red, orange);
+        filter: invert(1);
+    }
+    #foreground {
+        color: purple;
+    }
+</style>
+<div id="container">
+    <div id="background"></div>
+    <div id="foreground">This text should be purple on a background with a light blue gradient.</div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-conic-gradient.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-conic-gradient.html
new file mode 100644
index 0000000000..fd5f3965d9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-conic-gradient.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>filter() function with conic-gradient</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterCSSImageValue">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="filter-function-conic-gradient-ref.html">
+<style>
+    div {
+        background-image: filter(conic-gradient(red, orange), invert(1));
+        width: 400px;
+        height: 400px;
+        color: purple;
+    }
+</style>
+<div>This text should be purple on a background with a light blue gradient.</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-linear-gradient-ref.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-linear-gradient-ref.html
new file mode 100644
index 0000000000..6758f16fb6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-linear-gradient-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        position: relative;
+        width: 400px;
+        height: 400px;
+    }
+    #container > div {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    #background {
+        background-image: linear-gradient(red, orange);
+        filter: invert(1);
+    }
+    #foreground {
+        color: purple;
+    }
+</style>
+<div id="container">
+    <div id="background"></div>
+    <div id="foreground">This text should be purple on a background with a light blue gradient.</div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-linear-gradient.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-linear-gradient.html
new file mode 100644
index 0000000000..de965b1e9a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-linear-gradient.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>filter() function with linear-gradient</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterCSSImageValue">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="filter-function-linear-gradient-ref.html">
+<style>
+    div {
+        background-image: filter(linear-gradient(red, orange), invert(1));
+        width: 400px;
+        height: 400px;
+        color: purple;
+    }
+</style>
+<div>This text should be purple on a background with a light blue gradient.</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-radial-gradient-ref.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-radial-gradient-ref.html
new file mode 100644
index 0000000000..8c1667a3aa
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-radial-gradient-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        position: relative;
+        width: 400px;
+        height: 400px;
+    }
+    #container > div {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    #background {
+        background-image: radial-gradient(red, orange);
+        filter: invert(1);
+    }
+    #foreground {
+        color: purple;
+    }
+</style>
+<div id="container">
+    <div id="background"></div>
+    <div id="foreground">This text should be purple on a background with a light blue gradient.</div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-radial-gradient.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-radial-gradient.html
new file mode 100644
index 0000000000..a1d8867744
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-radial-gradient.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>filter() function with radial-gradient</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterCSSImageValue">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="filter-function-radial-gradient-ref.html">
+<style>
+    div {
+        background-image: filter(radial-gradient(red, orange), invert(1));
+        width: 400px;
+        height: 400px;
+        color: purple;
+    }
+</style>
+<div>This text should be purple on a background with a light blue gradient.</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-conic-gradient-ref.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-conic-gradient-ref.html
new file mode 100644
index 0000000000..fc104daaf0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-conic-gradient-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        position: relative;
+        width: 400px;
+        height: 400px;
+    }
+    #container > div {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    #background {
+        background-image: repeating-conic-gradient(red, red 5%, black 5%, black 10%);
+        filter: invert(1);
+    }
+    #foreground {
+        color: purple;
+    }
+</style>
+<div id="container">
+    <div id="background"></div>
+    <div id="foreground">This text should be purple on a background with a striped blue gradient.</div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-conic-gradient.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-conic-gradient.html
new file mode 100644
index 0000000000..8920a8b31c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-conic-gradient.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>filter() function with repeating-conic-gradient</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterCSSImageValue">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="filter-function-repeating-conic-gradient-ref.html">
+<style>
+    div {
+        background-image: filter(repeating-conic-gradient(red, red 5%, black 5%, black 10%), invert(1));
+        width: 400px;
+        height: 400px;
+        color: purple;
+    }
+</style>
+<div>This text should be purple on a background with a striped blue gradient.</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-linear-gradient-ref.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-linear-gradient-ref.html
new file mode 100644
index 0000000000..5aca26e041
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-linear-gradient-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        position: relative;
+        width: 400px;
+        height: 400px;
+    }
+    #container > div {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    #background {
+        background-image: repeating-linear-gradient(red, red 10px, black 10px, black 20px);
+        filter: invert(1);
+    }
+    #foreground {
+        color: purple;
+    }
+</style>
+<div id="container">
+    <div id="background"></div>
+    <div id="foreground">This text should be purple on a background with a striped blue gradient.</div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-linear-gradient.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-linear-gradient.html
new file mode 100644
index 0000000000..dc81e0995b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-linear-gradient.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>filter() function with repeating-linear-gradient</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterCSSImageValue">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="filter-function-repeating-linear-gradient-ref.html">
+<style>
+    div {
+        background-image: filter(repeating-linear-gradient(red, red 10px, black 10px, black 20px), invert(1));
+        width: 400px;
+        height: 400px;
+        color: purple;
+    }
+</style>
+<div>This text should be purple on a background with a striped blue gradient.</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-radial-gradient-ref.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-radial-gradient-ref.html
new file mode 100644
index 0000000000..b91a8bed2f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-radial-gradient-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        position: relative;
+        width: 400px;
+        height: 400px;
+    }
+    #container > div {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    #background {
+        background-image: repeating-radial-gradient(red, red 10px, black 10px, black 20px);
+        filter: invert(1);
+    }
+    #foreground {
+        color: purple;
+    }
+</style>
+<div id="container">
+    <div id="background"></div>
+    <div id="foreground">This text should be purple on a background with a striped blue gradient.</div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-radial-gradient.html b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-radial-gradient.html
new file mode 100644
index 0000000000..ec6c9bf83c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/filter-function-repeating-radial-gradient.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>filter() function with repeating-radial-gradient</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterCSSImageValue">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="match" href="filter-function-repeating-radial-gradient-ref.html">
+<style>
+    div {
+        background-image: filter(repeating-radial-gradient(red, red 10px, black 10px, black 20px), invert(1));
+        width: 400px;
+        height: 400px;
+        color: purple;
+    }
+</style>
+<div>This text should be purple on a background with a striped blue gradient.</div>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-100x100.png b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-100x100.png
new file mode 100644
index 0000000000..fe89b0da37
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-100x100.png
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-200x200.png b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-200x200.png
new file mode 100644
index 0000000000..deac37042f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-200x200.png
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-20x10.png b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-20x10.png
new file mode 100644
index 0000000000..3570d53218
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-20x10.png
diff --git a/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-80x80.png b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-80x80.png
new file mode 100644
index 0000000000..cf180535b9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-function/resources/green-transparent-80x80.png
diff --git a/testing/web-platform/tests/css/filter-effects/filter-grayscale-001.html b/testing/web-platform/tests/css/filter-effects/filter-grayscale-001.html
new file mode 100644
index 0000000000..c6fc1be727
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-001.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<!-- Submitted from TestTWF Paris -->
+	<head>
+		<title>CSS Filter Test: apply a filter to a div with background-color</title>
+		<link rel="author" title="Pierre Van der Eecken" href="mailto:pierre.vandereecken@gmail.com">
+		<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterFunction">
+		<link rel="match" href="filter-grayscale-ref.html">
+		<meta name="assert" content="The background color of an div element change when a grayscale filter apply">
+		<style type="text/css">
+			.testzone{
+				position: relative;
+			}
+			.box{
+				background-color: blue;
+				height: 30px;
+				width: 30px;
+			}
+			.filter{
+				filter: grayscale(100%);
+			}
+		</style>
+	</head>
+	<body>
+		<p>The test passes if the little box looks grey.</p>
+		<div class="testzone">
+			<div class="box filter"></div>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-grayscale-002.html b/testing/web-platform/tests/css/filter-effects/filter-grayscale-002.html
new file mode 100644
index 0000000000..30c926f7bf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-002.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>CSS Filter Test: apply a filter to a div with background-color</title>
+		<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+		<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterFunction">
+		<link rel="match" href="filter-grayscale-ref.html">
+		<meta name="assert" content="grayscale syntax (zero percent)">
+		<style type="text/css">
+			.testzone{
+				position: relative;
+			}
+			.box{
+				background-color: #121212;
+				height: 30px;
+				width: 30px;
+			}
+			.filter{
+				filter: grayscale(0%);
+			}
+		</style>
+	</head>
+	<body>
+		<p>The test passes if the little box looks grey.</p>
+		<div class="testzone">
+			<div class="box filter"></div>
+		</div>
+	</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/filter-grayscale-003.html b/testing/web-platform/tests/css/filter-effects/filter-grayscale-003.html
new file mode 100644
index 0000000000..d8a3c27b3a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-003.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>CSS Filter Test: apply a filter to a div with background-color</title>
+		<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+		<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterFunction">
+		<link rel="match" href="filter-grayscale-ref.html">
+		<meta name="assert" content="grayscale syntax (zero)">
+		<style type="text/css">
+			.testzone{
+				position: relative;
+			}
+			.box{
+				background-color: #121212;
+				height: 30px;
+				width: 30px;
+			}
+			.filter{
+				filter: grayscale(0);
+			}
+		</style>
+	</head>
+	<body>
+		<p>The test passes if the little box looks grey.</p>
+		<div class="testzone">
+			<div class="box filter"></div>
+		</div>
+	</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/filter-grayscale-004.html b/testing/web-platform/tests/css/filter-effects/filter-grayscale-004.html
new file mode 100644
index 0000000000..8b7d11a42a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-004.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<!-- Submitted from TestTWF Paris -->
+	<head>
+		<title>CSS Filter Test: apply a filter to a div with background-color</title>
+		<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+		<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterFunction">
+		<link rel="match" href="filter-grayscale-ref.html">
+		<meta name="assert" content="grayscale syntax (1)">
+		<style type="text/css">
+			.testzone{
+				position: relative;
+			}
+			.box{
+				background-color: blue;
+				height: 30px;
+				width: 30px;
+			}
+			.filter{
+				filter: grayscale(1);
+			}
+		</style>
+	</head>
+	<body>
+		<p>The test passes if the little box looks grey.</p>
+		<div class="testzone">
+			<div class="box filter"></div>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-grayscale-005.html b/testing/web-platform/tests/css/filter-effects/filter-grayscale-005.html
new file mode 100644
index 0000000000..0aa4a3b6bd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-005.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<!-- Submitted from TestTWF Paris -->
+	<head>
+		<title>CSS Filter Test: apply a filter to a div with background-color</title>
+		<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+		<link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterFunction">
+		<link rel="match" href="filter-grayscale-ref.html">
+		<meta name="assert" content="grayscale syntax (300%, clamp to 1)">
+		<style type="text/css">
+			.testzone{
+				position: relative;
+			}
+			.box{
+				background-color: blue;
+				height: 30px;
+				width: 30px;
+			}
+			.filter{
+				filter: grayscale(300%);
+			}
+		</style>
+	</head>
+	<body>
+		<p>The test passes if the little box looks grey.</p>
+		<div class="testzone">
+			<div class="box filter"></div>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-grayscale-ref.html b/testing/web-platform/tests/css/filter-effects/filter-grayscale-ref.html
new file mode 100644
index 0000000000..beaa72aaa3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<!-- Submitted from TestTWF Paris -->
+	<head>
+		<title>CSS Filter Reference file</title>
+		<link rel="author" title="Pierre Van der Eecken" href="mailto:pierre.vandereecken@gmail.com">
+		<style type="text/css">
+			.testzone{
+				position: relative;
+			}
+			.box{
+				background-color: #121212;
+				height: 30px;
+				width: 30px;
+			}
+		</style>
+	</head>
+	<body>
+		<p>The test passes if the little box looks grey.</p>
+		<div class="testzone">
+			<div class="box"></div>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-hue_rotate-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-hue_rotate-001-ref.html
new file mode 100644
index 0000000000..dcb4fb6b3f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-hue_rotate-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Hue Rotate  Reference</title>
+    <link rel="author" title="Tien Le" href="mailto:shonentokyo@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height: 200px;
+		background-color: green;
+	}
+
+    </style>
+</head>
+<body>
+    <p>You should see a green rectangle.</p>
+
+	<div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-hue_rotate-001-test.html b/testing/web-platform/tests/css/filter-effects/filter-hue_rotate-001-test.html
new file mode 100644
index 0000000000..9b7eb98695
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-hue_rotate-001-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS filter hue rotate: CSS hue rotate filter shorthand</title>
+    <link rel="author" title="Tien Le" href="mailto:shonentokyo@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-hue-rotate">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent">
+    <link rel="match" href="filter-hue_rotate-001-ref.html">
+    <meta name="assert" content="CSS hue rotate filter will apply a matrix to rotate the hue. Since angle is 0, it has
+    no affect on the rectangle.">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height: 200px;
+		background-color: green;
+		filter: hue-rotate(0deg);
+	}
+
+    </style>
+</head>
+<body>
+    <p>You should see a green rectangle.</p>
+
+	<div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-invalid-ref.html b/testing/web-platform/tests/css/filter-effects/filter-invalid-ref.html
new file mode 100644
index 0000000000..086dfe97a0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-invalid-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+div, rect {
+  width: 100px;
+  height: 100px;
+}
+div {
+  background-color: blue;
+}
+rect {
+  fill: purple;
+}
+</style>
+<div></div>
+<svg>
+  <rect></rect>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-invalid.html b/testing/web-platform/tests/css/filter-effects/filter-invalid.html
new file mode 100644
index 0000000000..3aad44efd4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-invalid.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Invalid filter draws unfiltered frame</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#typedef-filter-url">
+<link rel="match" href="filter-invalid-ref.html">
+<style>
+div, rect {
+  width: 100px;
+  height: 100px;
+  filter: url(#not-found);
+}
+div {
+  background-color: blue;
+}
+rect {
+  fill: purple;
+}
+</style>
+<div></div>
+<svg>
+  <rect></rect>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-invert-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-invert-001-ref.html
new file mode 100644
index 0000000000..5242811f06
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-invert-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Sepia Reference</title>
+    <link rel="author" title="Tien Le" href="mailto:shonentokyo@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height: 200px;
+		background-color: yellow;
+	}
+
+    </style>
+</head>
+<body>
+    <p>You should see a yellow rectangle.</p>
+
+	<div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-invert-001-test.html b/testing/web-platform/tests/css/filter-effects/filter-invert-001-test.html
new file mode 100644
index 0000000000..001e3a6e1d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-invert-001-test.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS filter grayscale: CSS grayscale filter shorthand</title>
+    <link rel="author" title="Tien Le" href="mailto:shonentokyo@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-invert">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#invertEquivalent">
+    <link rel="match" href="filter-invert-001-ref.html">
+    <meta name="assert" content="CSS invert filter will apply a color matrix to the div element to invert the colors.
+    Since invert is 0, it has no affect on the div.">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height: 200px;
+		background-color: yellow;
+		filter: invert(0%);
+	}
+
+    </style>
+</head>
+<body>
+    <p>You should see a yellow rectangle.</p>
+ 	<div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-invert-002-ref.html b/testing/web-platform/tests/css/filter-effects/filter-invert-002-ref.html
new file mode 100644
index 0000000000..e95205b8ca
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-invert-002-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Invert Reference</title>
+    <link rel="author" title="Tien Le" href="mailto:shonentokyo@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height: 200px;
+		background-color: blue;
+	}
+
+    </style>
+</head>
+<body>
+    <p>You should see a blue rectangle.</p>
+
+	<div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-invert-002-test.html b/testing/web-platform/tests/css/filter-effects/filter-invert-002-test.html
new file mode 100644
index 0000000000..add64624b5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-invert-002-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS filter invert: CSS invert filter shorthand</title>
+    <link rel="author" title="Tien Le" href="mailto:shonentokyo@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-invert">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#invertEquivalent">
+    <link rel="match" href="filter-invert-002-ref.html">
+    <meta name="assert" content="CSS invert filter will apply a color matrix to the rectangle to invert the colors.
+    Since invert is 100%, the yellow rectangle should become blue.">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height: 200px;
+		background-color: yellow;
+		filter: invert(100%);
+	}
+
+    </style>
+</head>
+<body>
+    <p>You should see a blue rectangle.</p>
+
+	<div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-region-calc-001.html b/testing/web-platform/tests/css/filter-effects/filter-region-calc-001.html
new file mode 100644
index 0000000000..7f894ef24b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-region-calc-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>SVG Filters: &lt;filter> with filter region using calc() for 'width'</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#ColorInterpolationFiltersProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feFloodElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-width">
+<link rel="match" href="reference/green-100x100.html">
+<style>
+#target {
+  width: 200px;
+  height: 100px;
+  background-color: red;
+  filter: url(#f);
+}
+</style>
+<div id="target"></div>
+<svg width="0" height="0">
+  <filter id="f" x="0" y="0" width="calc(25% + 0.25px)" height="1"
+          color-interpolation-filters="sRGB">
+    <feFlood flood-color="green"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-region-negative-positioned-child-001.html b/testing/web-platform/tests/css/filter-effects/filter-region-negative-positioned-child-001.html
new file mode 100644
index 0000000000..8f302ab52a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-region-negative-positioned-child-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>SVG Filters: CSS reference filters with negative positioned children</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#ColorInterpolationFiltersProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feColorMatrixElement">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=638091">
+<link rel="match" href="reference/filter-region-negative-positioned-child-001-ref.html">
+<meta name="assert" content="CSS reference filters with negative positioned children"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs>
+    <filter id="f1" color-interpolation-filters="sRGB">
+      <feColorMatrix type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0"/>
+    </filter>
+  </defs>
+</svg>
+<style>
+.box {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+.green {
+  background-color: green;
+}
+.blue {
+  background-color: blue;
+}
+.above {
+  top: -100px;
+}
+.parent {
+  filter: url(#f1);
+  background-color: white;
+  position: relative;
+  top: 100px;
+}
+</style>
+<div class="parent">
+<div class="green box"></div>
+<div class="blue box above"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-region-transformed-child-001.html b/testing/web-platform/tests/css/filter-effects/filter-region-transformed-child-001.html
new file mode 100644
index 0000000000..cd097faf70
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-region-transformed-child-001.html
@@ -0,0 +1,30 @@
+<title>CSS Filter: Scale a transformed child element"></title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feComponentTransferElement">
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=333014">
+<link rel="match" href="reference/filter-region-transformed-child-001-ref.html">
+<meta name="assert" content="This test ensures that the feComponentTransfer filter scales a child with CSS scale transform.">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
+  <defs>
+    <filter id="filter" x="25%" y="0%" width="50%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="linear" intercept="0" slope="1"/>
+        <feFuncG type="linear" intercept="0" slope="0"/>
+        <feFuncB type="linear" intercept="0" slope="0"/>
+        <feFuncA type="linear" intercept="0" slope="1"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+</svg>
+<style>
+#parent {
+    display: inline-block;
+    filter: url(#filter);
+}
+#child {
+    background-color: gray;
+    width: 50px;
+    height: 50px;
+    transform: translate(25px, 25px) scale(2);
+}
+</style>
+<div id="parent"><div id="child"></div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-region-transformed-composited-child-001.html b/testing/web-platform/tests/css/filter-effects/filter-region-transformed-composited-child-001.html
new file mode 100644
index 0000000000..c6bef8adf7
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-region-transformed-composited-child-001.html
@@ -0,0 +1,51 @@
+<title>CSS Filters: filtered parent with composited or transformed child</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feComponentTransferElement">
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=618642">
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=620394">
+<link rel="match" href="reference/filter-region-transformed-composited-child-001-ref.html">
+<meta name="assert" content="This test ensures that filtered parent works correctly with composited or transformed children.">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
+  <defs>
+    <filter id="filter" x="25%" y="0%" width="50%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="linear" intercept="0" slope="1"/>
+        <feFuncG type="linear" intercept="0" slope="0"/>
+        <feFuncB type="linear" intercept="0" slope="0"/>
+        <feFuncA type="linear" intercept="0" slope="1"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+</svg>
+<style>
+div {
+    position: absolute;
+}
+.filtered {
+    filter: url(#filter);
+}
+.child {
+    background-color: gray;
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    will-change: transform;
+}
+.p1 {
+    left: 50px;
+    top: 50px;
+}
+.c1 {
+    transform: translate(0px, 25px);
+}
+.p2 {
+    left: 150px;
+    top: 50px;
+}
+.c2 {
+    transform: translate(0px, -25px);
+}
+</style>
+<div class="filtered p1"><div class="child c1"></div></div>
+<div class="filtered p2"><div class="child c2"></div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-region-units-001.html b/testing/web-platform/tests/css/filter-effects/filter-region-units-001.html
new file mode 100644
index 0000000000..332ca1016a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-region-units-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>SVG Filters: &lt;filter> with filter region using  for 'width' w/ objectBoundingBox units</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#ColorInterpolationFiltersProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feFloodElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#element-attrdef-filter-width">
+<link rel="match" href="reference/green-100x100.html">
+<style>
+#target {
+  width: 10px;
+  height: 100px;
+  background-color: red;
+  filter: url(#f);
+}
+</style>
+<div id="target"></div>
+<svg width="0" height="0">
+  <filter id="f" x="0" y="0" width="1em" height="1" font-size="10px"
+          color-interpolation-filters="sRGB">
+    <feFlood flood-color="green"/>
+  </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-saturate-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-saturate-001-ref.html
new file mode 100644
index 0000000000..4f654f9c55
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-saturate-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Reference for Saturate short hand</title>
+    <link rel="author" title="Akihiro Oyamada" href="mailto:admin@yomotsu.net">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+    div {
+        width: 200px;
+        height: 200px;
+        background: #EDEDED;
+    }
+
+    </style>
+</head>
+<body>
+    <p>You should see a gray rectangle.</p>
+
+    <div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-saturate-001-test.html b/testing/web-platform/tests/css/filter-effects/filter-saturate-001-test.html
new file mode 100644
index 0000000000..0342cf0acd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-saturate-001-test.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Test for Saturate short hand</title>
+    <link rel="author" title="Akihiro Oyamada" href="mailto:admin@yomotsu.net">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-saturate">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#saturateEquivalent">
+    <link rel="match" href="filter-saturate-001-ref.html">
+    <meta name="assert" content="the test passes if you see gray box.">
+    <style type="text/css">
+    div {
+        width: 200px;
+        height: 200px;
+        background: yellow;
+        filter: saturate( 0% );
+    }
+
+    </style>
+</head>
+<body>
+    <p>You should see a gray rectangle.</p>
+
+    <div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-scale-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-scale-001-ref.html
new file mode 100644
index 0000000000..0f9d348e3a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-scale-001-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+  div {
+    width: 150px;
+    height: 150px;
+    background: green;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-scale-001.html b/testing/web-platform/tests/css/filter-effects/filter-scale-001.html
new file mode 100644
index 0000000000..d1382b97d7
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-scale-001.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>CSS Filter Effects test: Scaling is properly accounted for.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1497239">
+<link rel="match" href="filter-scale-001-ref.html">
+<style>
+  #outer {
+    width: 15px;
+    height: 15px;
+    transform: scale(10);
+    transform-origin: 0 0;
+  }
+  #inner {
+    filter: url(#blur);
+    width: 15px;
+    height: 15px;
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="0,0"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-scaling-001-ref.html b/testing/web-platform/tests/css/filter-effects/filter-scaling-001-ref.html
new file mode 100644
index 0000000000..0500f94024
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-scaling-001-ref.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<title>CSS Test Reference.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  :root, #outer {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  #outer {
+    transform-origin: 0 0;
+    transform: scale(5);
+  }
+
+  #pad {
+    /* So that scaling by five it takes half of the viewport */
+    height: 10vh;
+  }
+
+  #filtered {
+    width: 100%;
+    height: 10vh;
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="pad"></div>
+  <div id="filtered"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-scaling-001.html b/testing/web-platform/tests/css/filter-effects/filter-scaling-001.html
new file mode 100644
index 0000000000..d00c1ce8c4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-scaling-001.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<title>CSS Test: Blur filter scaling.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1224207">
+<link rel="match" href="filter-scaling-001-ref.html">
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  :root, #outer {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  #outer {
+    transform-origin: 0 0;
+    transform: scale(5);
+  }
+
+  #pad {
+    /* So that scaling by five it takes half of the viewport */
+    height: 10vh;
+  }
+
+  #filtered {
+    filter: url(#blur);
+    width: 100%;
+    height: 10vh;
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="pad"></div>
+  <div id="filtered"></div>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <defs>
+      <filter id="blur">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="0,0"></feGaussianBlur>
+      </filter>
+    </defs>
+  </svg>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-subregion-01-ref.html b/testing/web-platform/tests/css/filter-effects/filter-subregion-01-ref.html
new file mode 100644
index 0000000000..a91e1fa0d2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-subregion-01-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>filter primitive subregion: Clip to filter primitive subregion</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<p>Test passes if two semi-transparent green rectangles are on top of the
+blue boxes to the left, and one opaque green rectangle on the blue box
+to the right.</p>
+<!-- this is example filtersubregion00 from the specification -->
+<img src="support/filtersubregion00.png" style="width:400px; height: 400px"/>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-subregion-01.html b/testing/web-platform/tests/css/filter-effects/filter-subregion-01.html
new file mode 100644
index 0000000000..08c8367f24
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-subregion-01.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>filter primitive subregion: Clip to filter primitive subregion</title>
+<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterPrimitiveSubRegion">
+<link rel="match"  href="filter-subregion-01-ref.html">
+<p>Test passes if two semi-transparent green rectangles are on top of the
+blue boxes to the left, and one opaque green rectangle on the blue box
+to the right.</p>
+<!-- this is example filtersubregion00.svg from the specification -->
+<svg width="400" height="400">
+	<defs>
+		<filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
+		   <feFlood x="25%" y="25%" width="50%" height="50%"
+					flood-color="green" flood-opacity="0.75"/>
+		</filter>
+		<filter id="blend" primitiveUnits="objectBoundingBox">
+		   <feBlend x="25%" y="25%" width="50%" height="50%"
+					in2="SourceGraphic" mode="multiply"/>
+		</filter>
+		<filter id="merge" primitiveUnits="objectBoundingBox">
+		   <feMerge x="25%" y="25%" width="50%" height="50%">
+				<feMergeNode in="SourceGraphic"/>
+				<feMergeNode in="FillPaint"/>
+		   </feMerge>
+		</filter>
+	</defs>
+
+	<g fill="none" stroke="blue" stroke-width="4">
+	   <rect width="200" height="200"/>
+	   <line x2="200" y2="200"/>
+	   <line x1="200" y2="200"/>
+	</g>
+	<circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>
+
+	<g transform="translate(200 0)">
+		<g fill="none" stroke="blue" stroke-width="4">
+		   <rect width="200" height="200"/>
+		   <line x2="200" y2="200"/>
+		   <line x1="200" y2="200"/>
+		</g>
+		<circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
+	</g>
+
+	<g transform="translate(0 200)">
+		<g fill="none" stroke="blue" stroke-width="4">
+		   <rect width="200" height="200"/>
+		   <line x2="200" y2="200"/>
+		   <line x1="200" y2="200"/>
+		</g>
+		<circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
+	</g>
+</svg>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/filter-svg-background-image-blur.html b/testing/web-platform/tests/css/filter-effects/filter-svg-background-image-blur.html
new file mode 100644
index 0000000000..ab56d73c05
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-svg-background-image-blur.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Unsupported filter draws unfiltered frame</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="mismatch" href="/css/reference/blank.html">
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  border: 5px solid green;
+  filter: url(#from-svg);
+}
+</style>
+<div></div>
+<svg>
+  <defs>
+    <filter id="from-svg">
+      <feGaussianBlur in="BackgroundImage" stdDeviation="20" result="blur" />
+      <feMerge>
+        <feMergeNode in="SourceGraphic" />
+        <feMergeNode in="blur" />
+      </feMerge>
+    </filter>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-turbulence-invalid-001.html b/testing/web-platform/tests/css/filter-effects/filter-turbulence-invalid-001.html
new file mode 100644
index 0000000000..7400c8b379
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-turbulence-invalid-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>CSS Filter Effects: feTurbulence with negative values from baseFrequency</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#element-attrdef-feturbulence-basefrequency">
+<link rel="help" href="https://crbug.com/1068863"/>
+<link rel="match" href="reference/filter-turbulence-invalid-001-ref.html">
+<meta name="assert" content="This test checks that negative baseFrequency values are unsupported for feTurbulence.">
+<style>
+.target {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+</style>
+<div class="target" style="filter: url(#fn1)"></div>
+<div class="target" style="filter: url(#fn2)"></div>
+<div class="target" style="filter: url(#tb1)"></div>
+<div class="target" style="filter: url(#tb2)"></div>
+<svg height="0" color-interpolation-filters="sRGB">
+    <!-- type=fractalNoise -->
+    <filter id="fn1" x="0" y="0" width="1" height="1">
+        <feTurbulence type="fractalNoise" baseFrequency="-1 1"/>
+        <feComponentTransfer>
+            <feFuncR type="discrete" tableValues="1 0 1"/>
+            <feFuncG type="discrete" tableValues="0 0.502 0"/> <!-- map [0..1/3] -> 0; [1/3...2/3] -> 0.502; [2/3..1] -> 0 -->
+            <feFuncB type="discrete" tableValues="0"/>
+            <feFuncA type="discrete" tableValues="0 1 0"/>
+        </feComponentTransfer>
+    </filter>
+
+    <filter id="fn2" x="0" y="0" width="1" height="1">
+        <feTurbulence type="fractalNoise" baseFrequency="1 -1"/>
+        <feComponentTransfer>
+            <feFuncR type="discrete" tableValues="1 0 1"/>
+            <feFuncG type="discrete" tableValues="0 0.502 0"/> <!-- map [0..1/3] -> 0; [1/3...2/3] -> 0.502; [2/3..1] -> 0 -->
+            <feFuncB type="discrete" tableValues="0"/>
+            <feFuncA type="discrete" tableValues="0 1 0"/>
+        </feComponentTransfer>
+    </filter>
+
+    <!-- type=turbulence -->
+    <filter id="tb1" x="0" y="0" width="1" height="1">
+        <feTurbulence type="turbulence" baseFrequency="-1 1"/>
+        <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.502, 0 0 1 0 0, 0 0 0 1 1"/>
+    </filter>
+
+    <filter id="tb2" x="0" y="0" width="1" height="1">
+        <feTurbulence type="turbulence" baseFrequency="1 -1"/>
+        <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.502, 0 0 1 0 0, 0 0 0 1 1"/>
+    </filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/filter-url-to-non-existent-filter-001.html b/testing/web-platform/tests/css/filter-effects/filter-url-to-non-existent-filter-001.html
new file mode 100644
index 0000000000..6351c903f0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filter-url-to-non-existent-filter-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>CSS Filters: url() with non-existent filter reference</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#local-urls">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=419429">
+<link rel="match" href="reference/filter-url-to-non-existent-filter-001-ref.html">
+<meta name="assert" content="Tests that a non-existent filter reference is gracefully ignored."/>
+
+<marquee>
+  <li style="filter: url(#foo); color: white"></li>
+</marquee>
+<!-- Test passes by not crashing -->
+<p>PASS</p>
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-block-is-container-ref.html b/testing/web-platform/tests/css/filter-effects/filtered-block-is-container-ref.html
new file mode 100644
index 0000000000..fc9467f871
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-block-is-container-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Filter: Filtered block establishes a containing block reference.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+
+<style>
+#scroller {
+  width: 500px;
+  height: 500px;
+  overflow: scroll
+}
+.spacer {
+  width: 1000px;
+  height: 500px;
+  background-color: lightgreen;
+}
+#transform {
+  /* no-op transform */
+  transform: translateX(0px);
+  width: 100px;
+  height: 50px;
+  background-color: lightblue;
+}
+#fixed, #absolute {
+  width: 100px;
+  height: 100px;
+}
+#fixed {
+  position: fixed;
+  top: 100px;
+  left: 150px;
+  background-color: green;
+}
+#absolute {
+  position: absolute;
+  top: 200px;
+  left: 300px;
+  background-color: blue;
+}
+</style>
+
+<div id="scroller">
+  <div class="spacer">
+  </div>
+  <div id="transform">
+    <div id="fixed"></div>
+    <div id="absolute"></div>
+  </div>
+  <div class="spacer">
+  </div>
+</div>
+
+<script>
+window.onload = function() {
+  document.getElementById("scroller").scrollTo(50, 250);
+}
+</script>
+
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-block-is-container.html b/testing/web-platform/tests/css/filter-effects/filtered-block-is-container.html
new file mode 100644
index 0000000000..6f99f364e6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-block-is-container.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Filter: Filtered block establishes a containing block.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="filtered-block-is-container-ref.html">
+
+<style>
+#scroller {
+  width: 500px;
+  height: 500px;
+  overflow: scroll
+}
+.spacer {
+  width: 1000px;
+  height: 500px;
+  background-color: lightgreen;
+}
+#filter {
+  /* no-op filter */
+  filter: blur(0px);
+  width: 100px;
+  height: 50px;
+  background-color: lightblue;
+}
+#fixed, #absolute {
+  width: 100px;
+  height: 100px;
+}
+#fixed {
+  position: fixed;
+  top: 100px;
+  left: 150px;
+  background-color: green;
+}
+#absolute {
+  position: absolute;
+  top: 200px;
+  left: 300px;
+  background-color: blue;
+}
+</style>
+
+<div id="scroller">
+  <div class="spacer">
+  </div>
+  <div id="filter">
+    <div id="fixed"></div>
+    <div id="absolute"></div>
+  </div>
+  <div class="spacer">
+  </div>
+</div>
+
+<script>
+window.onload = function() {
+  document.getElementById("scroller").scrollTo(50, 250);
+}
+</script>
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container-ref.html b/testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container-ref.html
new file mode 100644
index 0000000000..c1f179a676
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Filter: Filtered html element does not establish a containing block.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+
+<style>
+#spacer {
+  width: 2000px;
+  height: 2000px;
+  background-color: lightgreen;
+}
+#fixed, #absolute {
+  width: 100px;
+  height: 100px;
+}
+#fixed {
+  position: fixed;
+  top: 100px;
+  left: 150px;
+  background-color: green;
+}
+#absolute {
+  position: absolute;
+  top: 200px;
+  left: 300px;
+  background-color: blue;
+}
+</style>
+
+<div id="fixed"></div>
+<div id="absolute"></div>
+<div id="spacer"></div>
+
+<script>
+window.onload = function() { window.scrollTo(50, 100); };
+</script>
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container.html b/testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container.html
new file mode 100644
index 0000000000..8adc302f31
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-html-is-not-container.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Filter: Filtered html element does not establish a containing block.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="filtered-html-is-not-container-ref.html">
+
+<style>
+html {
+  filter: blur(0px);
+}
+#spacer {
+  width: 2000px;
+  height: 2000px;
+  background-color: lightgreen;
+}
+#fixed, #absolute {
+  width: 100px;
+  height: 100px;
+}
+#fixed {
+  position: fixed;
+  top: 100px;
+  left: 150px;
+  background-color: green;
+}
+#absolute {
+  position: absolute;
+  top: 200px;
+  left: 300px;
+  background-color: blue;
+}
+</style>
+
+<div id="fixed"></div>
+<div id="absolute"></div>
+<div id="spacer"></div>
+
+<script>
+window.onload = function() { window.scrollTo(50, 100); };
+</script>
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-inline-applies-to-float-ref.html b/testing/web-platform/tests/css/filter-effects/filtered-inline-applies-to-float-ref.html
new file mode 100644
index 0000000000..439d7c443c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-inline-applies-to-float-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+#float {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background: green;
+    filter: blur(2px);
+}
+</style>
+<p>There should be a blurred green square.</p>
+<div id="float"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-inline-applies-to-float.html b/testing/web-platform/tests/css/filter-effects/filtered-inline-applies-to-float.html
new file mode 100644
index 0000000000..2d368dec46
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-inline-applies-to-float.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty" />
+<link rel="match" href="filtered-inline-applies-to-float-ref.html" />
+<meta name="assert" content="A filter on an inline element applies to floats." />
+<style>
+span { filter: blur(2px); }
+#float {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background: green;
+}
+</style>
+<p>There should be a blurred green square.</p>
+<div>
+  <span><div id="float"></div></span>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-inline-is-container-ref.html b/testing/web-platform/tests/css/filter-effects/filtered-inline-is-container-ref.html
new file mode 100644
index 0000000000..aa6c12e33b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-inline-is-container-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Filter: Filtered inline establishes a containing block.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+
+<style>
+#scroller {
+  width: 500px;
+  height: 500px;
+  overflow: scroll
+}
+.spacer {
+  width: 1000px;
+  height: 500px;
+  background-color: lightgreen;
+}
+#transform {
+  /* no-op filter */
+  transform: translateX(0px);
+}
+#fixed, #absolute {
+  width: 100px;
+  height: 100px;
+}
+#fixed {
+  position: fixed;
+  top: 100px;
+  left: 150px;
+  background-color: green;
+}
+#absolute {
+  position: absolute;
+  top: 200px;
+  left: 300px;
+  background-color: blue;
+}
+</style>
+
+<div id="scroller">
+  <div class="spacer">
+  </div>
+  <div id="transform">
+    a
+    <div id="fixed"></div>
+    <div id="absolute"></div>
+  </div>
+  <div class="spacer">
+  </div>
+</div>
+
+<script>
+window.onload = function() {
+  document.getElementById("scroller").scrollTo(50, 250);
+}
+</script>
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/filtered-inline-is-container.html b/testing/web-platform/tests/css/filter-effects/filtered-inline-is-container.html
new file mode 100644
index 0000000000..56f1d91ff9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filtered-inline-is-container.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Filter: Filtered inline establishes a containing block reference.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="match" href="filtered-inline-is-container-ref.html">
+
+<style>
+#scroller {
+  width: 500px;
+  height: 500px;
+  overflow: scroll
+}
+.spacer {
+  width: 1000px;
+  height: 500px;
+  background-color: lightgreen;
+}
+#filter {
+  /* no-op filter */
+  filter: blur(0px);
+  display: inline;
+}
+#fixed, #absolute {
+  width: 100px;
+  height: 100px;
+}
+#fixed {
+  position: fixed;
+  top: 100px;
+  left: 150px;
+  background-color: green;
+}
+#absolute {
+  position: absolute;
+  top: 200px;
+  left: 300px;
+  background-color: blue;
+}
+</style>
+
+<div id="scroller">
+  <div class="spacer">
+  </div>
+  <div id="filter">
+    a
+    <div id="fixed"></div>
+    <div id="absolute"></div>
+  </div>
+  <div class="spacer">
+  </div>
+</div>
+
+<script>
+window.onload = function() {
+  document.getElementById("scroller").scrollTo(50, 250);
+}
+</script>
+
+
diff --git a/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-001.html b/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-001.html
new file mode 100644
index 0000000000..9a36b7ffeb
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Writing Modes Test: drop-shadow offset test</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-drop-shadow">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#dropshadowEquivalent">
+    <link rel="match" href="reference/filters-drop-shadow-001-ref.html">
+    <meta name="assert" content="This test verifies that the drop-shadow shorthand works. Green box with green shadow.
+    The shadows appear 10px down and 20px right under the Green box. The red box must not appear under the Green box.">
+    <style type="text/css">
+
+        #ok {
+            position: absolute;
+            top: 100px;
+            left:0px;
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 255,0);
+            filter: drop-shadow(20px 10px rgb(0, 255, 0));
+        }
+        #ng {
+            position: absolute;
+            top: 110px;
+            left:20px;
+            width: 200px;
+            height: 200px;
+            background-color: rgb(255, 0, 0);
+        }
+    </style>
+</head>
+<body>
+    <p>You should see two green overlapping rectangles and no red.</p>
+    <div id="ng"></div>
+    <div id="ok"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-002.html b/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-002.html
new file mode 100644
index 0000000000..e9eca4da04
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Filters: drop-shadow filter on element with clipped children</title>
+<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=350411">
+<link rel="match" href="reference/filters-drop-shadow-002-ref.html">
+<meta name="assert" content="Check that clipping gets correctly applied on children of a container with a drop-shadow filter in effect."/>
+
+<style>
+.container {
+    filter: drop-shadow(5px 5px 5px black);
+}
+.circle-mask {
+    border-radius: 80px;
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+}
+.green-box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<div class="container">
+  <div class="circle-mask">
+    <div class="green-box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-003.html b/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-003.html
new file mode 100644
index 0000000000..2dda6d0140
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-drop-shadow-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>CSS Filters: drop-shadow filter on element in outside of the view</title>
+<link rel="author" title="Fujii Hironori" href="mailto:Hironori.Fujii@sony.com">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://webkit.org/b/236800">
+<link rel="match" href="reference/filters-drop-shadow-003-ref.html">
+<meta name="assert" content="Check that a drop-shadow of an element with drop-shadow filter placed in the outside of the view appears"/>
+<style>
+div {
+    width: 300px;
+    height: 300px;
+    top: -1000px;
+    left: -1000px;
+    background-color: red;
+    position: relative;
+    filter: drop-shadow(1000px 1000px 0 green);
+}
+</style>
+You should see a green box.
+<div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-grayscale-001-ref.html b/testing/web-platform/tests/css/filter-effects/filters-grayscale-001-ref.html
new file mode 100644
index 0000000000..e219a55d33
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-grayscale-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Test grayscale shorthand with value 1</title>
+    <link rel="author" title="Takaki Yasuma" href="mailto:takakiyasuma@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+       div{
+	       width: 200px;
+	       height: 200px;
+	       background-color: #363636;
+       }
+
+    </style>
+</head>
+
+<body>
+
+	<p>You should see a black olive colored rectangle.</p>
+
+	<div></div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-grayscale-001-test.html b/testing/web-platform/tests/css/filter-effects/filters-grayscale-001-test.html
new file mode 100644
index 0000000000..40e49b60be
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-grayscale-001-test.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Test grayscale shorthand with value 1</title>
+    <link rel="author" title="Takaki Yasuma" href="mailto:takakiyasuma@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-grayscale">
+    <link rel="match" href="filters-grayscale-001-ref.html">
+    <meta name="assert" content="If the test runs, you should see a black olive colored rectangle.">
+    <style type="text/css">
+
+       div{
+	       width: 200px;
+	       height: 200px;
+	       background-color: red;
+	       filter: grayscale(1);
+       }
+
+    </style>
+</head>
+
+<body>
+
+	<p>You should see a black olive colored rectangle.</p>
+
+	<div></div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-opacity-001-test.html b/testing/web-platform/tests/css/filter-effects/filters-opacity-001-test.html
new file mode 100644
index 0000000000..21f45d66b6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-opacity-001-test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Test opacity shorthand with value 1</title>
+    <link rel="author" title="Naohiro Nakajima" href="mailto:nakajima.jmg@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-opacity">
+    <link rel="match" href="reference/filters-opacity-001-ref.html">
+    <meta name="assert" content="CSS opacity filter will apply a transparency to the div element.
+    Since opacity is 1, it has no affect on the div.">
+    <style type="text/css">
+
+        div {
+            width: 200px;
+            height: 200px;
+            background: green;
+            filter: opacity(1);
+        }
+
+    </style>
+</head>
+<body>
+<p>Test opacity CSS shorthand.You should see a green box.</p>
+<!-- PAGE CONTENT -->
+<div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-opacity-002-test.html b/testing/web-platform/tests/css/filter-effects/filters-opacity-002-test.html
new file mode 100644
index 0000000000..aec849516a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-opacity-002-test.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Test opacity shorthand with value 0</title>
+    <link rel="author" title="Naohiro Nakajima" href="mailto:nakajima.jmg@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-opacity">
+    <link rel="match" href="reference/filters-opacity-002-ref.html">
+    <meta name="assert" content="CSS opacity filter will apply a transparency to the div element.
+    Since opacity is 0, it has affect on the div to be transparent.">
+    <style type="text/css">
+
+        .box1{
+            width:200px;
+            height: 200px;
+            background: green;
+        }
+       .box2{
+            width: 200px;
+            height: 200px;
+            background: red;
+            filter: opacity(0);
+        }
+
+    </style>
+</head>
+<body>
+<p>Test filter opacity CSS shorthand. You should see a green box.</p>
+<!-- PAGE CONTENT -->
+    <div class="box1"></div>
+    <div class="box2"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-001.html b/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-001.html
new file mode 100644
index 0000000000..dd160bc65d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+        div.brightness_hundred {
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 255, 0);
+        }
+    </style>
+</head>
+<body>
+    <p>You should see green rectangle.</p>
+    <div class="brightness_hundred"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-002.html b/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-002.html
new file mode 100644
index 0000000000..808cc5f0d4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+        div.brightness_zero {
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 0, 0);
+        }
+    </style>
+</head>
+<body>
+    <p>You should see a black rectangle and no red.</p>
+    <div class="brightness_zero"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-003.html b/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-003.html
new file mode 100644
index 0000000000..a587321538
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-ref-brightness-003.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+        div.brightness_noset {
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 255, 0);
+        }
+    </style>
+</head>
+<body>
+    <p>You should see green rectangle.</p>
+    <div class="brightness_noset"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-sepia-001-ref.html b/testing/web-platform/tests/css/filter-effects/filters-sepia-001-ref.html
new file mode 100644
index 0000000000..bb4478fb3a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-sepia-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Test sepia shorthand with value 1</title>
+    <link rel="author" title="Takaki Yasuma" href="mailto:takakiyasuma@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+       div{
+	       width: 200px;
+	       height: 200px;
+	       background-color: #645945;
+       }
+
+    </style>
+</head>
+
+<body>
+
+	<p>You should see a field drab colored rectangle.</p>
+
+	<div></div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-sepia-001-test.html b/testing/web-platform/tests/css/filter-effects/filters-sepia-001-test.html
new file mode 100644
index 0000000000..3435f5fbb4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-sepia-001-test.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Test: Test sepia shorthand with value 1</title>
+    <link rel="author" title="Takaki Yasuma" href="mailto:takakiyasuma@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-sepia">
+    <link rel="match" href="filters-sepia-001-ref.html">
+    <meta name="assert" content="If the test runs, you should see a field drab colored rectangle.">
+    <style type="text/css">
+
+       div{
+	       width: 200px;
+	       height: 200px;
+	       background-color: red;
+	       filter: sepia(1);
+       }
+
+    </style>
+</head>
+
+<body>
+
+	<p>You should see a field drab colored rectangle.</p>
+
+	<div></div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-test-brightness-001.html b/testing/web-platform/tests/css/filter-effects/filters-test-brightness-001.html
new file mode 100644
index 0000000000..0ea903f71e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-test-brightness-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Writing Modes Test: drop-shadow offset test</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-brightness">
+    <link rel="match" href="filters-ref-brightness-001.html">
+    <meta name="assert" content="This test verifies that the brightness shorthand works. Green rectangle must shown,
+    when brightness set to 100%.">
+    <style type="text/css">
+
+        div.brightness_hundred {
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 255, 0);
+            filter: brightness(100%);
+        }
+    </style>
+</head>
+<body>
+    <p>You should see green rectangle.</p>
+    <div class="brightness_hundred"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-test-brightness-002.html b/testing/web-platform/tests/css/filter-effects/filters-test-brightness-002.html
new file mode 100644
index 0000000000..8be043047a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-test-brightness-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Writing Modes Test: drop-shadow offset test</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-brightness">
+    <link rel="match" href="filters-ref-brightness-002.html">
+    <meta name="assert" content="This test verifies that the brightness shorthand works. Black rectangle must shown,
+    when brightness set 0%.">
+    <style type="text/css">
+        div.brightness_zero {
+            width: 200px;
+            height: 200px;
+            background-color: rgb(255, 0, 0);
+            filter: brightness(0%);
+        }
+    </style>
+</head>
+<body>
+    <p>You should see a black rectangle and no red.</p>
+    <div class="brightness_zero"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/filters-test-brightness-003.html b/testing/web-platform/tests/css/filter-effects/filters-test-brightness-003.html
new file mode 100644
index 0000000000..6f4b3dbb56
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/filters-test-brightness-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Effects: brightness(...) without argument</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+    <link rel="help" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-brightness">
+    <link rel="match" href="filters-ref-brightness-003.html">
+    <meta name="assert" content="This test verifies that the brightness shorthand works. Green rectangle must shown,
+    when brightness is not set.">
+    <style type="text/css">
+
+        div.brightness_noset {
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 255, 0);
+            filter: brightness(0);
+            filter: brightness();
+        }
+    </style>
+</head>
+<body>
+    <p>You should see green rectangle.</p>
+    <div class="brightness_noset"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-001.html b/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-001.html
new file mode 100644
index 0000000000..3633872711
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>filter + fixed pos clipping</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://bugzil.la/1661147">
+<link rel="match"  href="/css/reference/blank.html">
+<body style="margin:0">
+<div style="background:red; width: 200px; height: 200px;"></div>
+<div style="position: fixed; left: 0px; top: 0px;">
+  <div style="position: relative; background: white; filter: blur(10px); width: 400px; height: 400px; left: -50px; top: -50px;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-002-ref.html b/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-002-ref.html
new file mode 100644
index 0000000000..d281f2a852
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+:root { background-color: green }
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-002.html b/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-002.html
new file mode 100644
index 0000000000..196e4c91fc
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/fixed-pos-filter-clip-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>filter + fixed pos clipping</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://bugzil.la/1661147">
+<link rel="match"  href="fixed-pos-filter-clip-002-ref.html">
+<style>
+  :root { overflow: hidden }
+  div {
+    width: calc(100vw + 100px);
+    height: calc(100vh + 100px);
+    background:green;
+    filter: blur(10px);
+    position: fixed;
+    top: -50px;
+    left: -50px;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/idlharness.any.js b/testing/web-platform/tests/css/filter-effects/idlharness.any.js
new file mode 100644
index 0000000000..5df3aaf4b2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/idlharness.any.js
@@ -0,0 +1,15 @@
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+// META: timeout=long
+
+'use strict';
+
+// https://drafts.fxtf.org/filter-effects/
+
+idl_test(
+  ['filter-effects'],
+  ['SVG', 'html', 'dom'],
+  idl_array => {
+    // TODO: objects
+  }
+);
diff --git a/testing/web-platform/tests/css/filter-effects/inheritance.html b/testing/web-platform/tests/css/filter-effects/inheritance.html
new file mode 100644
index 0000000000..acb811bfad
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/inheritance.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of Filter Effects properties</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#property-index">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#property-index">
+<meta name="assert" content="Properties inherit according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+assert_not_inherited('backdrop-filter', 'none', 'blur(10px)');
+assert_inherited('color-interpolation-filters', 'linearrgb', 'srgb');
+assert_not_inherited('filter', 'none', 'blur(10px)');
+assert_not_inherited('flood-color', 'rgb(0, 0, 0)', 'rgb(42, 53, 64)');
+assert_not_inherited('flood-opacity', '1', '0.5');
+assert_not_inherited('lighting-color', 'rgb(255, 255, 255)', 'rgb(42, 53, 64)');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/morphology-mirrored.html b/testing/web-platform/tests/css/filter-effects/morphology-mirrored.html
new file mode 100644
index 0000000000..f0338e1803
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/morphology-mirrored.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>feMorphology filter on mirrored content</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feMorphologyElement">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="dilate" filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB">
+    <feMorphology operator="dilate" radius="10"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect x="10" y="10" width="80" height="30" fill="green" filter="url(#dilate)"
+        transform="translate(0, 50) scale(1, -1)"/>
+  <rect x="10" y="60" width="80" height="30" fill="green" filter="url(#dilate)"
+        transform="translate(100, 0) scale(-1, 1)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-computed.html b/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-computed.html
new file mode 100644
index 0000000000..5e8ce6bae6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-computed.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 2: getComputedStyle().backdropFilter</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<meta name="assert" content="backdrop-filter supports omitted arguments'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<style>
+  #target {
+    color: lime;
+  }
+</style>
+<div id="target"></div>
+<script>
+test_computed_value("backdrop-filter", "none");
+
+test_computed_value("backdrop-filter", "blur(100px)");
+test_computed_value("backdrop-filter", "blur()", "blur(0px)");
+
+test_computed_value("backdrop-filter", "brightness(0)");
+test_computed_value("backdrop-filter", "brightness(300%)", "brightness(3)");
+test_computed_value("backdrop-filter", "brightness()", "brightness(1)");
+
+test_computed_value("backdrop-filter", "contrast(0)");
+test_computed_value("backdrop-filter", "contrast(300%)", "contrast(3)");
+test_computed_value("backdrop-filter", "contrast()", "contrast(1)");
+
+test_computed_value("backdrop-filter", "drop-shadow(1px 2px)", "drop-shadow(rgb(0, 255, 0) 1px 2px 0px)");
+test_computed_value("backdrop-filter", "drop-shadow(rgb(4, 5, 6) 1px 2px 0px)");
+
+test_computed_value("backdrop-filter", "grayscale(50%)", "grayscale(0.5)");
+test_computed_value("backdrop-filter", "grayscale()", "grayscale(1)");
+
+test_computed_value("backdrop-filter", "hue-rotate(90deg)");
+test_computed_value("backdrop-filter", "hue-rotate()", "hue-rotate(0deg)");
+
+test_computed_value("backdrop-filter", "invert(0)");
+test_computed_value("backdrop-filter", "invert(100%)", "invert(1)");
+test_computed_value("backdrop-filter", "invert()", "invert(1)");
+
+test_computed_value("backdrop-filter", "opacity(0)");
+test_computed_value("backdrop-filter", "opacity(100%)", "opacity(1)");
+test_computed_value("backdrop-filter", "opacity()", "opacity(1)");
+
+test_computed_value("backdrop-filter", "saturate(0)");
+test_computed_value("backdrop-filter", "saturate(300%)", "saturate(3)");
+test_computed_value("backdrop-filter", "saturate()", "saturate(1)");
+
+test_computed_value("backdrop-filter", "sepia(0)");
+test_computed_value("backdrop-filter", "sepia(100%)", "sepia(1)");
+test_computed_value("backdrop-filter", "sepia()", "sepia(1)");
+
+test_computed_value("backdrop-filter", 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-invalid.html b/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-invalid.html
new file mode 100644
index 0000000000..4e6b74682c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-invalid.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 2: parsing backdrop-filter with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<meta name="assert" content="backdrop-filter supports only the grammar 'none | <backdrop-filter-function-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// Edge fails: expected "" but got "none"
+
+test_invalid_value("backdrop-filter", "auto");
+test_invalid_value("backdrop-filter", "none hue-rotate(0deg)");
+
+test_invalid_value("backdrop-filter", "blur(10)");
+test_invalid_value("backdrop-filter", "blur(-100px)");
+
+test_invalid_value("backdrop-filter", "brightness(-20)");
+test_invalid_value("backdrop-filter", "brightness(30px)");
+
+test_invalid_value("backdrop-filter", "contrast(-20)");
+test_invalid_value("backdrop-filter", "contrast(30px)");
+
+test_invalid_value("backdrop-filter", "drop-shadow(10 20)");
+test_invalid_value("backdrop-filter", "drop-shadow(10% 20%)");
+test_invalid_value("backdrop-filter", "drop-shadow(1px)");
+test_invalid_value("backdrop-filter", "drop-shadow(1px 2px 3px 4px)");
+test_invalid_value("backdrop-filter", "drop-shadow(rgb(4, 5, 6))");
+test_invalid_value("backdrop-filter", "drop-shadow()");
+
+test_invalid_value("backdrop-filter", "grayscale(-20)");
+test_invalid_value("backdrop-filter", "grayscale(30px)");
+
+test_invalid_value("backdrop-filter", "hue-rotate(90)");
+
+test_invalid_value("backdrop-filter", "invert(-20)");
+test_invalid_value("backdrop-filter", "invert(30px)");
+
+test_invalid_value("backdrop-filter", "opacity(-20)");
+test_invalid_value("backdrop-filter", "opacity(30px)");
+
+test_invalid_value("backdrop-filter", "saturate(-20)");
+test_invalid_value("backdrop-filter", "saturate(30px)");
+
+test_invalid_value("backdrop-filter", "sepia(-20)");
+test_invalid_value("backdrop-filter", "sepia(30px)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-valid.html b/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-valid.html
new file mode 100644
index 0000000000..ddb897e6ec
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/backdrop-filter-parsing-valid.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 2: parsing backdrop-filter with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<meta name="assert" content="backdrop-filter supports the full grammar 'none | <backdrop-filter-function-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("backdrop-filter", "none");
+
+test_valid_value("backdrop-filter", "blur(100px)");
+test_valid_value("backdrop-filter", "blur(0)", "blur(0px)");
+test_valid_value("backdrop-filter", "blur()", ["blur()", "blur(0px)"]);
+
+test_valid_value("backdrop-filter", "brightness(0)");
+test_valid_value("backdrop-filter", "brightness(300%)");
+test_valid_value("backdrop-filter", "brightness()", ["brightness()", "brightness(1)"]);
+
+test_valid_value("backdrop-filter", "contrast(0)");
+test_valid_value("backdrop-filter", "contrast(300%)");
+test_valid_value("backdrop-filter", "contrast()", ["contrast()", "contrast(1)"]);
+
+test_valid_value("backdrop-filter", "drop-shadow(1px 2px)");
+test_valid_value("backdrop-filter", "drop-shadow(1px 2px 3px)");
+test_valid_value("backdrop-filter", "drop-shadow(0 0 0)", "drop-shadow(0px 0px 0px)");
+test_valid_value("backdrop-filter", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
+test_valid_value("backdrop-filter", "drop-shadow(1px 2px rgb(4, 5, 6))", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
+test_valid_value("backdrop-filter", "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)");
+
+test_valid_value("backdrop-filter", "grayscale(0)");
+test_valid_value("backdrop-filter", "grayscale(300%)", "grayscale(100%)");
+test_valid_value("backdrop-filter", "grayscale()", ["grayscale()", "grayscale(1)"]);
+
+test_valid_value("backdrop-filter", "hue-rotate(90deg)");
+test_valid_value("backdrop-filter", "hue-rotate(0)", "hue-rotate(0deg)");
+test_valid_value("backdrop-filter", "hue-rotate()", ["hue-rotate()", "hue-rotate(0deg)"]);
+
+test_valid_value("backdrop-filter", "invert(0)");
+test_valid_value("backdrop-filter", "invert(300%)", "invert(100%)");
+test_valid_value("backdrop-filter", "invert()", ["invert()", "invert(1)"]);
+
+test_valid_value("backdrop-filter", "opacity(0)");
+test_valid_value("backdrop-filter", "opacity(300%)", "opacity(100%)");
+test_valid_value("backdrop-filter", "opacity()", ["opacity()", "opacity(1)"]);
+
+test_valid_value("backdrop-filter", "saturate(0)");
+test_valid_value("backdrop-filter", "saturate(300%)");
+test_valid_value("backdrop-filter", "saturate()", ["saturate()", "saturate(1)"]);
+
+test_valid_value("backdrop-filter", "sepia(0)");
+test_valid_value("backdrop-filter", "sepia(300%)", "sepia(100%)");
+test_valid_value("backdrop-filter", "sepia()", ["sepia()", "sepia(1)"]);
+
+test_valid_value("backdrop-filter", 'url("picture.svg#f")');
+
+test_valid_value("backdrop-filter", 'url("https://www.example.com/picture.svg#f")');
+
+test_valid_value("backdrop-filter", 'blur(10px) url("picture.svg#f") contrast(20) brightness(30)');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-computed.html b/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-computed.html
new file mode 100644
index 0000000000..f79aca3b41
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: getComputedStyle().colorInterpolationFilters</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#ColorInterpolationFiltersProperty">
+<meta name="assert" content="color-interpolation-filters computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("color-interpolation-filters", "auto");
+test_computed_value("color-interpolation-filters", "srgb");
+test_computed_value("color-interpolation-filters", "linearrgb");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-parsing-invalid.html b/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-parsing-invalid.html
new file mode 100644
index 0000000000..6fdf647a43
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-parsing-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing color-interpolation-filters with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#ColorInterpolationFiltersProperty">
+<meta name="assert" content="color-interpolation-filters supports only the grammar 'auto | sRGB | linearRGB'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("color-interpolation-filters", "none");
+test_invalid_value("color-interpolation-filters", "linearRGB sRGB");
+test_invalid_value("color-interpolation-filters", "auto sRGB linearRGB");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-parsing-valid.html b/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-parsing-valid.html
new file mode 100644
index 0000000000..9faea8e1c5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/color-interpolation-filters-parsing-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing color-interpolation-filters with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#ColorInterpolationFiltersProperty">
+<link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values">
+<meta name="assert" content="color-interpolation-filters supports the full grammar 'auto | sRGB | linearRGB'.">
+<meta name="assert" content="Keywords serialize in lower case.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("color-interpolation-filters", "auto");
+test_valid_value("color-interpolation-filters", "sRGB", "srgb");
+test_valid_value("color-interpolation-filters", "linearRGB", "linearrgb");
+test_valid_value("color-interpolation-filters", "LiNeArRgB", "linearrgb");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/filter-computed.html b/testing/web-platform/tests/css/filter-effects/parsing/filter-computed.html
new file mode 100644
index 0000000000..3525a8c7c8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/filter-computed.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: getComputedStyle().filter</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<meta name="assert" content="filter supports omitted arguments'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<style>
+  #target {
+    color: lime;
+  }
+</style>
+<div id="target"></div>
+<script>
+test_computed_value("filter", "none");
+
+test_computed_value("filter", "blur(100px)");
+test_computed_value("filter", "blur()", "blur(0px)");
+
+test_computed_value("filter", "brightness(0)");
+test_computed_value("filter", "brightness(300%)", "brightness(3)");
+test_computed_value("filter", "brightness()", "brightness(1)");
+
+test_computed_value("filter", "contrast(0)");
+test_computed_value("filter", "contrast(300%)", "contrast(3)");
+test_computed_value("filter", "contrast()", "contrast(1)");
+
+test_computed_value("filter", "drop-shadow(1px 2px)", "drop-shadow(rgb(0, 255, 0) 1px 2px 0px)");
+test_computed_value("filter", "drop-shadow(rgb(4, 5, 6) 1px 2px 0px)");
+
+test_computed_value("filter", "grayscale(50%)", "grayscale(0.5)");
+test_computed_value("filter", "grayscale(2)", "grayscale(1)");
+test_computed_value("filter", "grayscale()", "grayscale(1)");
+
+test_computed_value("filter", "hue-rotate(90deg)");
+test_computed_value("filter", "hue-rotate()", "hue-rotate(0deg)");
+
+test_computed_value("filter", "invert(0)");
+test_computed_value("filter", "invert(100%)", "invert(1)");
+test_computed_value("filter", "invert(2)", "invert(1)");
+test_computed_value("filter", "invert()", "invert(1)");
+
+test_computed_value("filter", "opacity(0)");
+test_computed_value("filter", "opacity(100%)", "opacity(1)");
+test_computed_value("filter", "opacity(2)", "opacity(1)");
+test_computed_value("filter", "opacity()", "opacity(1)");
+
+test_computed_value("filter", "saturate(0)");
+test_computed_value("filter", "saturate(300%)", "saturate(3)");
+test_computed_value("filter", "saturate()", "saturate(1)");
+
+test_computed_value("filter", "sepia(0)");
+test_computed_value("filter", "sepia(100%)", "sepia(1)");
+test_computed_value("filter", "sepia(2)", "sepia(1)");
+test_computed_value("filter", "sepia()", "sepia(1)");
+
+test_computed_value("filter", 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/filter-parsing-invalid.html b/testing/web-platform/tests/css/filter-effects/parsing/filter-parsing-invalid.html
new file mode 100644
index 0000000000..a03532af16
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/filter-parsing-invalid.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing filter with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<meta name="assert" content="filter supports only the grammar 'none | <filter-function-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// Edge fails: expected "" but got "none"
+
+test_invalid_value("filter", "auto");
+test_invalid_value("filter", "none hue-rotate(0deg)");
+
+test_invalid_value("filter", "blur(10)");
+test_invalid_value("filter", "blur(-100px)");
+
+test_invalid_value("filter", "brightness(-20)"); // crbug.com/776208 Blink/WebKit accept negative brightness.
+test_invalid_value("filter", "brightness(30px)");
+
+test_invalid_value("filter", "contrast(-20)");
+test_invalid_value("filter", "contrast(30px)");
+
+test_invalid_value("filter", "drop-shadow(10 20)");
+test_invalid_value("filter", "drop-shadow(10% 20%)");
+test_invalid_value("filter", "drop-shadow(1px)");
+test_invalid_value("filter", "drop-shadow(1px 2px 3px 4px)");
+test_invalid_value("filter", "drop-shadow(rgb(4, 5, 6))");
+test_invalid_value("filter", "drop-shadow()");
+
+test_invalid_value("filter", "grayscale(-20)");
+test_invalid_value("filter", "grayscale(30px)");
+
+test_invalid_value("filter", "hue-rotate(90)");
+
+test_invalid_value("filter", "invert(-20)");
+test_invalid_value("filter", "invert(30px)");
+
+test_invalid_value("filter", "opacity(-20)");
+test_invalid_value("filter", "opacity(30px)");
+
+test_invalid_value("filter", "saturate(-20)");
+test_invalid_value("filter", "saturate(30px)");
+
+test_invalid_value("filter", "sepia(-20)");
+test_invalid_value("filter", "sepia(30px)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/filter-parsing-valid.html b/testing/web-platform/tests/css/filter-effects/parsing/filter-parsing-valid.html
new file mode 100644
index 0000000000..7867c9edae
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/filter-parsing-valid.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing filter with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<meta name="assert" content="filter supports the full grammar 'none | <filter-function-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("filter", "none");
+
+test_valid_value("filter", "blur(100px)");
+test_valid_value("filter", "blur(0)", "blur(0px)");
+test_valid_value("filter", "blur()", ["blur()", "blur(0px)"]);
+
+test_valid_value("filter", "brightness(0)");
+test_valid_value("filter", "brightness(300%)");
+test_valid_value("filter", "brightness()", ["brightness()", "brightness(1)"]);
+
+test_valid_value("filter", "contrast(0)");
+test_valid_value("filter", "contrast(300%)");
+test_valid_value("filter", "contrast()", ["contrast()", "contrast(1)"]);
+
+test_valid_value("filter", "drop-shadow(1px 2px)");
+test_valid_value("filter", "drop-shadow(1px 2px 3px)");
+test_valid_value("filter", "drop-shadow(0 0 0)", "drop-shadow(0px 0px 0px)");
+// https://github.com/w3c/fxtf-drafts/issues/240
+test_valid_value("filter", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
+test_valid_value("filter", "drop-shadow(1px 2px rgb(4, 5, 6))", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
+test_valid_value("filter", "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)");
+
+test_valid_value("filter", "grayscale(0)");
+test_valid_value("filter", "grayscale(300%)", "grayscale(100%)");
+test_valid_value("filter", "grayscale()", ["grayscale()", "grayscale(1)"]);
+
+test_valid_value("filter", "hue-rotate(90deg)");
+test_valid_value("filter", "hue-rotate(0)", "hue-rotate(0deg)"); // https://github.com/w3c/fxtf-drafts/issues/228
+test_valid_value("filter", "hue-rotate()", ["hue-rotate()", "hue-rotate(0deg)"]);
+
+test_valid_value("filter", "invert(0)");
+test_valid_value("filter", "invert(300%)", "invert(100%)");
+test_valid_value("filter", "invert()", ["invert()", "invert(1)"]);
+
+test_valid_value("filter", "opacity(0)");
+test_valid_value("filter", "opacity(300%)", "opacity(100%)");
+test_valid_value("filter", "opacity()", ["opacity()", "opacity(1)"]);
+
+test_valid_value("filter", "saturate(0)");
+test_valid_value("filter", "saturate(300%)");
+test_valid_value("filter", "saturate()", ["saturate()", "saturate(1)"]);
+
+test_valid_value("filter", "sepia(0)");
+test_valid_value("filter", "sepia(300%)", "sepia(100%)");
+test_valid_value("filter", "sepia()", ["sepia()", "sepia(1)"]);
+
+// Edge serializes url(...) without quotes. Blink/WebKit and Firefox use quotes.
+test_valid_value("filter", "url(picture.svg#f)", ['url("picture.svg#f")', 'url(picture.svg#f)']);
+
+test_valid_value("filter", 'url("https://www.example.com/picture.svg#f")',
+  ['url("https://www.example.com/picture.svg#f")', 'url(https://www.example.com/picture.svg#f)']);
+
+test_valid_value("filter", 'blur(10px) url("picture.svg#f") contrast(20) brightness(30)',
+  ['blur(10px) url("picture.svg#f") contrast(20) brightness(30)', 'blur(10px) url(picture.svg#f) contrast(20) brightness(30)']);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/flood-color-computed.html b/testing/web-platform/tests/css/filter-effects/parsing/flood-color-computed.html
new file mode 100644
index 0000000000..b773d58d10
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/flood-color-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: getComputedStyle().floodColor</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FloodColorProperty">
+<meta name="assert" content="flood-color computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    color: lime;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("flood-color", "currentcolor", "rgb(0, 255, 0)");
+
+test_computed_value("flood-color", "red", "rgb(255, 0, 0)");
+test_computed_value("flood-color", "#00FF00", "rgb(0, 255, 0)");
+test_computed_value("flood-color", "rgb(0, 0, 255)");
+test_computed_value("flood-color", "rgb(100%, 100%, 0%)", "rgb(255, 255, 0)");
+test_computed_value("flood-color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)");
+test_computed_value("flood-color", "teal", "rgb(0, 128, 128)");
+
+test_computed_value("flood-color", "transparent", "rgba(0, 0, 0, 0)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/flood-color-invalid.html b/testing/web-platform/tests/css/filter-effects/parsing/flood-color-invalid.html
new file mode 100644
index 0000000000..7cc9148901
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/flood-color-invalid.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing flood-color with invalid values</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FloodColorProperty">
+<meta name="assert" content="flood-color supports only the grammar '<color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("flood-color", "none");
+test_invalid_value("flood-color", "black white");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/flood-color-valid.html b/testing/web-platform/tests/css/filter-effects/parsing/flood-color-valid.html
new file mode 100644
index 0000000000..5fb4a266e6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/flood-color-valid.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing flood-color with valid values</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FloodColorProperty">
+<meta name="assert" content="flood-color supports the full grammar '<color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("flood-color", "currentcolor");
+
+test_valid_value("flood-color", "red");
+test_valid_value("flood-color", "#00FF00", "rgb(0, 255, 0)");
+test_valid_value("flood-color", "rgb(0, 0, 255)");
+test_valid_value("flood-color", "rgb(100%, 100%, 0%)", "rgb(255, 255, 0)");
+test_valid_value("flood-color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)");
+test_valid_value("flood-color", "teal");
+
+test_valid_value("flood-color", "transparent");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-computed.svg b/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-computed.svg
new file mode 100644
index 0000000000..a395eda22e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-computed.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>Filter Effects Module Level 1: getComputedStyle().floodOpacity</title>
+  <metadata>
+    <h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
+    <h:meta name="assert" content="flood-opacity computed value is clamped to the range [0,1]."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("flood-opacity", "-1", "0");
+test_computed_value("flood-opacity", "0.5");
+test_computed_value("flood-opacity", "3", "1");
+test_computed_value("flood-opacity", "-100%", "0");
+test_computed_value("flood-opacity", "50%", "0.5");
+test_computed_value("flood-opacity", "300%", "1");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-invalid.svg b/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-invalid.svg
new file mode 100644
index 0000000000..ac21f8d8fb
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-invalid.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>Filter Effects Module Level 1: parsing flood-opacity with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
+    <h:meta name="assert" content="flood-opacity supports only the grammar 'alpha-value'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("flood-opacity", "1.");
+test_invalid_value("flood-opacity", "2 3");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-valid.svg b/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-valid.svg
new file mode 100644
index 0000000000..67eb37fad5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/flood-opacity-valid.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>Filter Effects Module Level 1: parsing flood-opacity with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://drafts.fxtf.org/filter-effects/#propdef-flood-opacity"/>
+    <h:meta name="assert" content="flood-opacity supports the full grammar 'alpha-value'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("flood-opacity", "-1");
+test_valid_value("flood-opacity", "0.5");
+test_valid_value("flood-opacity", "3");
+test_valid_value("flood-opacity", "-100%", "-1");
+test_valid_value("flood-opacity", "50%", "0.5");
+test_valid_value("flood-opacity", "300%", "3");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-computed.html b/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-computed.html
new file mode 100644
index 0000000000..f7dc3c6173
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-computed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: getComputedStyle().lightingColor</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#LightingColorProperty">
+<meta name="assert" content="lighting-color computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("lighting-color", "rgb(1, 2, 3)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-parsing-invalid.html b/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-parsing-invalid.html
new file mode 100644
index 0000000000..3c5525b36f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-parsing-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing lighting-color with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#LightingColorProperty">
+<meta name="assert" content="lighting-color supports only the grammar '<color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("lighting-color", "auto");
+test_invalid_value("lighting-color", "none");
+test_invalid_value("lighting-color", "#a");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-parsing-valid.html b/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-parsing-valid.html
new file mode 100644
index 0000000000..c39088842e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/parsing/lighting-color-parsing-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Filter Effects Module Level 1: parsing lighting-color with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#LightingColorProperty">
+<meta name="assert" content="lighting-color supports the full grammar '<color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("lighting-color", "rgb(1,2,3)", "rgb(1, 2, 3)");
+test_valid_value("lighting-color", "#102030", "rgb(16, 32, 48)");
+test_valid_value("lighting-color", "rgba(1, 2, 3, 0.5)");
+
+test_valid_value("lighting-color", "currentColor", "currentcolor");
+test_valid_value("lighting-color", "currentcolor", "currentcolor");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference-filter-update-on-attribute-change-001.html b/testing/web-platform/tests/css/filter-effects/reference-filter-update-on-attribute-change-001.html
new file mode 100644
index 0000000000..cc5ac7c65d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference-filter-update-on-attribute-change-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>SVG Filters: Invalidation of SVG filter attributes on HTML</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feColorMatrixElement">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=105635">
+<link rel="match" href="reference/reference-filter-update-on-attribute-change-001-ref.html">
+<meta name="assert" content="Dynamically adding an attribute of a filter primitive"/>
+<head>
+  <script>
+    function run() {
+      document.getElementById('color').setAttribute('values', '90');
+    }
+ </script>
+</head>
+<body onload="run()">
+   <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+    <defs>
+      <filter id="MyFilter">
+        <fecolormatrix id="color" type="hueRotate"></fecolormatrix>
+      </filter>
+    </defs>
+  </svg>
+  <div style="filter: url(#MyFilter); width:100px; height:100px; background-color:red;"></div>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-plus-will-change-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-plus-will-change-opacity-ref.html
new file mode 100644
index 0000000000..56c6243809
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-plus-will-change-opacity-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<p>Expected: A black box.</p>
+<div id="blackbox"></div>
+<style>
+  #blackbox {
+    width: 100px;
+    height: 100px;
+    background-color: black;
+  }
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-svg-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-svg-ref.html
new file mode 100644
index 0000000000..3d5853ac66
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-svg-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<div class="fuchsiabox"></div>
+<div class="filter"></div>
+
+<style>
+.fuchsiabox {
+  position: absolute;
+  background: fuchsia;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+}
+.filter {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 100px;
+  left: 60px;
+  backdrop-filter: invert(1);
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-001-ref.html
new file mode 100644
index 0000000000..ba01ac6bd0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>CSS Backdrop Filters Animation: Grayscale</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+
+<style>
+    .square {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background: blue;
+        filter: grayscale(50%);
+    }
+    .filt {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        top: 50px;
+        left: 50px;
+        background: white;
+        filter: grayscale(50%);
+    }
+    .greenbox {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 125px;
+        left: 125px;
+        background: green;
+    }
+</style>
+<p>You should see a dark blue rectangle with a green box.</p>
+<div class="filt"></div>
+<div class="square"></div>
+<div class="greenbox"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-002-ref.html
new file mode 100644
index 0000000000..b241017d17
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-002-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+.background_object {
+  left: 10px;
+  top: 10px;
+  background: orange;
+}
+
+.grayscale {
+  left: 60px;
+  top: 60px;
+  width: 50px;
+  height: 50px;
+  background: #ACACAC;
+}
+</style>
+</head>
+<body>
+  <div class="background_object"></div>
+  <div class="grayscale"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-003-ref.html
new file mode 100644
index 0000000000..9ce975c1ef
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-003-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+.background_object {
+  left: 10px;
+  top: 10px;
+  background: orange;
+}
+
+.grayscale {
+  left: 60px;
+  top: 60px;
+  width: 50px;
+  height: 50px;
+  background: #ACACAC;
+}
+</style>
+</head>
+<body>
+  <div class="background_object"></div>
+  <div class="grayscale"></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/reference/background-image-blur-repaint-ref.html b/testing/web-platform/tests/css/filter-effects/reference/background-image-blur-repaint-ref.html
new file mode 100644
index 0000000000..bf16d1fa28
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/background-image-blur-repaint-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.bg {
+  position: absolute;
+  left:   200px;
+  top:    0px;
+  width:  400px;
+  height: 300px;
+  background-image: url(../support/color-palette.png);
+  filter: blur(8px);
+}
+.box {
+  position: absolute;
+  left:   300px;
+  top:    50px;
+  width:  50px;
+  height: 50px;
+  background-color: green;
+}
+</style>
+</head>
+<body>
+<div class="bg"></div>
+<div class="box"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-001-ref.html
new file mode 100644
index 0000000000..60c2c33634
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<div style="filter: blur(10px)">
+  <div style="width: 100px; height: 100px; background: blue">
+    <div style="position: relative; left: 50px; width: 50px; height: 100px; background: green"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-002-ref.html
new file mode 100644
index 0000000000..60c2c33634
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<div style="filter: blur(10px)">
+  <div style="width: 100px; height: 100px; background: blue">
+    <div style="position: relative; left: 50px; width: 50px; height: 100px; background: green"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-003-ref.html
new file mode 100644
index 0000000000..e60456b305
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-003-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="width:100px; height:100px; border:5px dashed black; background:green;">
+</div>
+This test verifies overflow clip correctly applies to children in the presence of a filter on the same element.<br/>
+It succeeds if a green box with dashed black border is shown. No red border should be visible.
diff --git a/testing/web-platform/tests/css/filter-effects/reference/drop-shadow-clipped-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/drop-shadow-clipped-001-ref.html
new file mode 100644
index 0000000000..305b1d2233
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/drop-shadow-clipped-001-ref.html
@@ -0,0 +1,2 @@
+<!doctype HTML>
+<div style="width: 50px; height: 50px; background: green"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/dynamic-filter-changes-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/dynamic-filter-changes-001-ref.html
new file mode 100644
index 0000000000..699d57c2a8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/dynamic-filter-changes-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<style>
+  .filter {
+    transform: translateZ(0);
+    filter: invert(100%);
+  }
+</style>
+
+<!-- There should be a bright pink box on this page -->
+<body>
+  <img class="filter" src="/images/green-256x256.png">
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-add-hw-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-add-hw-001-ref.html
new file mode 100644
index 0000000000..79a1522361
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-add-hw-001-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="width: 100px; height: 100px; background-color: rgb(0, 255, 0); will-change: transform"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-after-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-after-001-ref.html
new file mode 100644
index 0000000000..45192b1345
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-after-001-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0px" height="0px">
+      <defs>
+        <filter id="MyFilter">
+          <feColorMatrix type="hueRotate" values="180"/>
+        </filter>
+      </defs>
+    </svg><img style="filter: url(#MyFilter);" src="../support/color-palette.png">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-delete-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-delete-ref.html
new file mode 100644
index 0000000000..918715265f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-delete-ref.html
@@ -0,0 +1,5 @@
+<html>
+  <body>
+    <img src="../support/color-palette.png">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-displacement-negative-scale-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-displacement-negative-scale-001-ref.html
new file mode 100644
index 0000000000..f718ea6abf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-displacement-negative-scale-001-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-001-ref.html
new file mode 100644
index 0000000000..9b982b3cfb
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-001-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<img src="../support/color-palette.png">
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-002-ref.html
new file mode 100644
index 0000000000..72250a1cf8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-002-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<img src="../support/color-palette.png" style="will-change: transform;">
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-003-ref.html
new file mode 100644
index 0000000000..9b982b3cfb
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-003-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<img src="../support/color-palette.png">
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-004-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-004-ref.html
new file mode 100644
index 0000000000..0aa3378e59
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-004-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<img src="../support/color-palette.png" style="will-change: filter;">
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-lighting-no-light.tentative-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-lighting-no-light.tentative-ref.html
new file mode 100644
index 0000000000..e863a6703b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-lighting-no-light.tentative-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+.target {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+<div class="target"></div>
+<div class="target"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-local-url-with-base-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-local-url-with-base-001-ref.html
new file mode 100644
index 0000000000..f718ea6abf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-local-url-with-base-001-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-merge-no-inputs.tentative-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-merge-no-inputs.tentative-ref.html
new file mode 100644
index 0000000000..5743e0c3de
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-merge-no-inputs.tentative-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: lime"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-obb-dimensions-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-obb-dimensions-ref.html
new file mode 100644
index 0000000000..f460c439aa
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-obb-dimensions-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+body {
+    margin: 0;
+    padding: 0;
+}
+#target {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<div id="target"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-span-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-span-ref.html
new file mode 100644
index 0000000000..76a7953831
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-span-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+<span style="background-color: blue;">This text's background should be blue.</span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-transparent-element-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-transparent-element-ref.html
new file mode 100644
index 0000000000..6e27519825
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-transparent-element-ref.html
@@ -0,0 +1,8 @@
+<style>
+.box {
+  width: 100px;
+  height: 100px;
+  background-color: rgb(0, 255, 0);
+}
+</style>
+<div class="box"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-001-ref.html
new file mode 100644
index 0000000000..fe3beae2d4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-001-ref.html
@@ -0,0 +1,12 @@
+<html>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
+  <defs>
+    <filter id="MyFilter">
+      <feColorMatrix type="hueRotate" values="180"/>
+    </filter>
+  </defs>
+</svg>
+<img style="filter: url(#MyFilter);" src="../support/color-palette.png">
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-002-ref.html
new file mode 100644
index 0000000000..d8719aa43a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-002-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<svg height="0">
+  <filter id="MyFilter">
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+</svg>
+<div style="width: 100px; height: 100px; background-color: red; filter: url(#MyFilter);"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-001-ref.html
new file mode 100644
index 0000000000..f718ea6abf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-001-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-002-ref.html
new file mode 100644
index 0000000000..eb106f327a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-002-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+.rect {
+    background-color: black;
+    width: 100px;
+    height: 100px;
+    will-change: transform;
+}
+</style>
+<div class="rect"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/empty-element-with-filter-ref.html b/testing/web-platform/tests/css/filter-effects/reference/empty-element-with-filter-ref.html
new file mode 100644
index 0000000000..cf2c997f6c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/empty-element-with-filter-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<style>
+  .turbulent {
+    width: 160px;
+    height: 90px;
+    margin: 10px;
+    filter: url(#turbulence);
+  }
+
+  .visibleContent {
+    background-color: red;
+  }
+</style>
+<div class="turbulent"></div>
+<div class="turbulent visibleContent"></div>
+
+This test passes if both divs look the same.
+
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs>
+    <filter id="turbulence" color-interpolation-filters="sRGB">
+      <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/fecomposite-non-zero-inoffset-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/fecomposite-non-zero-inoffset-001-ref.html
new file mode 100644
index 0000000000..e4900ad047
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/fecomposite-non-zero-inoffset-001-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <div style="width: 100px; height: 100px; background-color: green;"></div>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-effect-remove-unattached-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-effect-remove-unattached-ref.html
new file mode 100644
index 0000000000..5f9f7a76ec
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filter-effect-remove-unattached-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs id="svgDefs" style="display:none">
+   <filter id="blurY" color-interpolation-filters="sRGB">
+   </filter>
+  </defs>
+ </svg>
+
+<img src="../resources/reference.png" style="filter: url(#blurY);">
+
+<div id="other" style="width: 10px; height: 10px; background-color: blue;"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-region-negative-positioned-child-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-region-negative-positioned-child-001-ref.html
new file mode 100644
index 0000000000..c9da47b1b4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filter-region-negative-positioned-child-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+  <defs>
+    <filter id="f1" color-interpolation-filters="sRGB">
+      <feColorMatrix type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0"/>
+    </filter>
+  </defs>
+</svg>
+<style>
+.box {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+.green {
+  background-color: green;
+}
+.blue {
+  background-color: blue;
+}
+.below {
+  top: 100px;
+}
+.parent {
+  filter: url(#f1);
+  background-color: white;
+  position: relative;
+}
+</style>
+<div class="parent">
+<div class="blue box"></div>
+<div class="green box below"></div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-child-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-child-001-ref.html
new file mode 100644
index 0000000000..bcf6494119
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-child-001-ref.html
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
+  <defs>
+    <filter id="filter" x="25%" y="0%" width="50%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="linear" intercept="0" slope="1"/>
+        <feFuncG type="linear" intercept="0" slope="0"/>
+        <feFuncB type="linear" intercept="0" slope="0"/>
+        <feFuncA type="linear" intercept="0" slope="1"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+</svg>
+<style>
+div {
+    display: inline-block;
+    filter: url(#filter);
+    background-color: gray;
+    width: 50px;
+    height: 50px;
+    transform: translate(25px, 25px) scale(2);
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-composited-child-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-composited-child-001-ref.html
new file mode 100644
index 0000000000..1a8ab40d20
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-composited-child-001-ref.html
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
+  <defs>
+    <filter id="filter" x="25%" y="0%" width="50%" height="100%">
+      <feComponentTransfer>
+        <feFuncR type="linear" intercept="0" slope="1"/>
+        <feFuncG type="linear" intercept="0" slope="0"/>
+        <feFuncB type="linear" intercept="0" slope="0"/>
+        <feFuncA type="linear" intercept="0" slope="1"/>
+      </feComponentTransfer>
+    </filter>
+  </defs>
+</svg>
+<style>
+div {
+    position: absolute;
+    filter: url(#filter);
+    background-color: gray;
+    width: 50px;
+    height: 50px;
+    will-change: transform;
+}
+.p1 {
+    left: 50px;
+    top: 50px;
+    transform: translate(0px, 25px);
+}
+.p2 {
+    left: 150px;
+    top: 50px;
+    transform: translate(0px, -25px);
+}
+</style>
+<div class="p1"></div>
+<div class="p2"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-turbulence-invalid-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-turbulence-invalid-001-ref.html
new file mode 100644
index 0000000000..afd3facc10
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filter-turbulence-invalid-001-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+.target {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+<div class="target"></div>
+<div class="target"></div>
+<div class="target"></div>
+<div class="target"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-url-to-non-existent-filter-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-url-to-non-existent-filter-001-ref.html
new file mode 100644
index 0000000000..c1aeed8c44
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filter-url-to-non-existent-filter-001-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<marquee>
+  <li style="color: white"></li>
+</marquee>
+<p>PASS</p>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-001-ref.html
new file mode 100644
index 0000000000..3776a00609
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+        #box {
+            position: absolute;
+            top: 100px;
+            left:0px;
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 255,0);
+        }
+        #box_shadow {
+            position: absolute;
+            top: 110px;
+            left:20px;
+            width: 200px;
+            height: 200px;
+            background-color: rgb(0, 255, 0);
+        }
+    </style>
+</head>
+<body>
+    <p>You should see two green overlapping rectangles and no red.</p>
+    <div id="box_shadow"></div>
+    <div id="box"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-002-ref.html
new file mode 100644
index 0000000000..4227e8cb14
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-002-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.container {
+    filter: drop-shadow(5px 5px 5px black);
+}
+.circle-mask {
+    border-radius: 80px;
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+}
+.green-box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<div class="container">
+  <div class="circle-mask">
+    <div class="green-box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-003-ref.html
new file mode 100644
index 0000000000..94c265066b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-003-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+div {
+    width: 300px;
+    height: 300px;
+    background-color: green;
+}
+</style>
+You should see a green box.
+<div></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-001-ref.html
new file mode 100644
index 0000000000..17d891ee70
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Opacity Reference If the value is 0</title>
+    <link rel="author" title="Naohiro Nakajima" href="mailto:nakajima.jmg@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height: 200px;
+		background-color: green;
+	}
+
+    </style>
+</head>
+<body>
+<p>Test opacity CSS shorthand.You should see a green box.</p>
+
+	<div></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-002-ref.html
new file mode 100644
index 0000000000..cfd8029223
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filter Opacity Reference with value 0</title>
+    <link rel="author" title="Naohiro Nakajima" href="mailto:nakajima.jmg@gmail.com">
+    <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <style type="text/css">
+
+	div {
+		width: 200px;
+		height:200px;
+		background:green;
+	}
+
+    </style>
+</head>
+<body>
+    <p>Test filter opacity CSS shorthand. You should see a green box.</p>
+	<div></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/reference/green-100x100.html b/testing/web-platform/tests/css/filter-effects/reference/green-100x100.html
new file mode 100644
index 0000000000..f718ea6abf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/green-100x100.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/green-blue-stripe-100x100.html b/testing/web-platform/tests/css/filter-effects/reference/green-blue-stripe-100x100.html
new file mode 100644
index 0000000000..01546f115d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/green-blue-stripe-100x100.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 50px; height: 100px; background-color: blue; border-left: 50px solid green"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/reference-filter-update-on-attribute-change-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/reference-filter-update-on-attribute-change-001-ref.html
new file mode 100644
index 0000000000..91326ef585
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/reference-filter-update-on-attribute-change-001-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<body>
+   <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
+    <defs>
+      <filter id="MyFilter">
+        <fecolormatrix id="color" type="hueRotate" values="90"></fecolormatrix>
+      </filter>
+    </defs>
+  </svg>
+  <div style="filter: url(#MyFilter); width:100px; height:100px; background-color:red;"></div>
+</body>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/remove-filter-repaint-ref.html b/testing/web-platform/tests/css/filter-effects/reference/remove-filter-repaint-ref.html
new file mode 100644
index 0000000000..bde2a93360
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/remove-filter-repaint-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Filters: Repaint a compositing layer</title>
+    <style>
+    .backdrop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100px;
+        width: 100px;
+        background-color: silver;
+    }
+
+    .overlay {
+        position: absolute;
+        top: 50px;
+        left: 50px;
+        width: 400px;
+        height: 100px;
+        background: gray;
+        box-shadow: 0 0 4px black;
+    }
+
+    .play {
+        font-size: 36pt;
+        background-color: navy;
+        color: white;
+    }
+    .composited {
+        will-change: transform;
+    }
+    </style>
+</head>
+<body>
+    <div class="composited backdrop"></div>
+    <div class="overlay">
+        <span id="play" class="play changed">this should be visible</span>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/repaint-added-backdrop-filter-ref.html b/testing/web-platform/tests/css/filter-effects/reference/repaint-added-backdrop-filter-ref.html
new file mode 100644
index 0000000000..caaa3061ed
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/repaint-added-backdrop-filter-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<p>Expected: A black box.</p>
+<div id="filter"></div>
+<style>
+  #filter {
+    width: 100px;
+    height: 100px;
+    background-color: black;
+  }
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/root-element-with-opacity-filter-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/root-element-with-opacity-filter-001-ref.html
new file mode 100644
index 0000000000..cd16e54c8e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/root-element-with-opacity-filter-001-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+<body style="filter: opacity(0.501)">
+This test ensures we properly paint the root element when an opacity filter is applied.
diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-feflood-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-feflood-ref.html
new file mode 100644
index 0000000000..5623b08ecd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/svg-feflood-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <meta name="flags" content="svg">
+    <style type="text/css">
+    svg {
+        width: 500px;
+        height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a black square and no red.</p>
+    <svg>
+        <rect width="300" height="300" fill="black"/>
+    </svg>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-feimage-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-feimage-ref.html
new file mode 100644
index 0000000000..5623b08ecd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/svg-feimage-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <meta name="flags" content="svg">
+    <style type="text/css">
+    svg {
+        width: 500px;
+        height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a black square and no red.</p>
+    <svg>
+        <rect width="300" height="300" fill="black"/>
+    </svg>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-feoffset-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-feoffset-ref.html
new file mode 100644
index 0000000000..5623b08ecd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/svg-feoffset-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <meta name="flags" content="svg">
+    <style type="text/css">
+    svg {
+        width: 500px;
+        height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a black square and no red.</p>
+    <svg>
+        <rect width="300" height="300" fill="black"/>
+    </svg>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-001-ref.html
new file mode 100644
index 0000000000..82f301f5f6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-001-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: red; filter: url(../support/hueRotate.svg#MyFilter)"></div>
+<div style="width: 100px; height: 100px; background-color: red; filter: url(../support/hueRotate.svg#MyFilter)"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-002-ref.html
new file mode 100644
index 0000000000..344ee53e03
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-002-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+img {
+    margin: 10px;
+}
+</style>
+<img style="filter: url(../support/hueRotate.svg#MyFilter)" src="../support/color-palette.png">
diff --git a/testing/web-platform/tests/css/filter-effects/remove-filter-repaint.html b/testing/web-platform/tests/css/filter-effects/remove-filter-repaint.html
new file mode 100644
index 0000000000..2e85f9f542
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/remove-filter-repaint.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<html>
+<head>
+  <title>CSS Filters: Repaint a compositing layer</title>
+  <link rel="author" title="Simon Fraser" href="mailto:simon.fraser@apple.com>">
+  <link rel="help" href="https://drafts.fxtf.org/filter-effects/#dropshadowEquivalent">
+  <link rel="issue" href="https://bugs.webkit.org/show_bug.cgi?id=120135">
+  <link rel="issue" href="https://chromiumcodereview.appspot.com/23526037">
+  <link rel="match" href="reference/remove-filter-repaint-ref.html">
+  <meta name="assert" content="This test ensures that we can repaint the compositing layer when removing a filter on an inline child of a compositing layer.">
+  <script src="/common/reftest-wait.js"></script>
+  <style>
+    .backdrop {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100px;
+      width: 100px;
+      background-color: silver;
+    }
+    .overlay {
+      position: absolute;
+      top: 50px;
+      left: 50px;
+      width: 400px;
+      height: 100px;
+      background: gray;
+      box-shadow: 0 0 4px black;
+    }
+    .play {
+      font-size: 36pt;
+      background-color: navy;
+      color: white;
+    }
+    .play.changed {
+      filter: drop-shadow(black 0 0 5px);
+    }
+    .composited {
+      will-change: transform;
+    }
+    </style>
+    <script>
+      function doTest() {
+        requestAnimationFrame(function() {
+          requestAnimationFrame(function() {
+            document.getElementById('play').classList.remove('changed');
+            takeScreenshot();
+          });
+        });
+      }
+      window.addEventListener('load', doTest, false);
+  </script>
+</head>
+<body>
+  <div class="composited backdrop"></div>
+  <div class="overlay">
+    <span id="play" class="play changed">this should be visible</span>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/repaint-added-backdrop-filter.html b/testing/web-platform/tests/css/filter-effects/repaint-added-backdrop-filter.html
new file mode 100644
index 0000000000..6678ba4358
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/repaint-added-backdrop-filter.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>backdrop-filter: Correctly repaint added backdrop-filter</title>
+<link rel="author" href="mailto:pdr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="reference/repaint-added-backdrop-filter-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<p>Expected: A black box.</p>
+
+<div id="filter"></div>
+
+<style>
+  #filter {
+    width: 100px;
+    height: 100px;
+    backdrop-filter: none;
+    will-change: opacity;
+  }
+</style>
+
+<script>
+  function doTest() {
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        document.getElementById('filter').style.backdropFilter = 'invert(1)';
+        takeScreenshot();
+      });
+    });
+  }
+  window.addEventListener('load', doTest, false);
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/resources/reference.png b/testing/web-platform/tests/css/filter-effects/resources/reference.png
new file mode 100644
index 0000000000..68641b7677
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/resources/reference.png
diff --git a/testing/web-platform/tests/css/filter-effects/root-element-with-opacity-filter-001.html b/testing/web-platform/tests/css/filter-effects/root-element-with-opacity-filter-001.html
new file mode 100644
index 0000000000..577e2bd4c0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/root-element-with-opacity-filter-001.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>Opacity Filter: root element opacity filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#funcdef-filter-opacity">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=349587">
+<link rel="match" href="reference/root-element-with-opacity-filter-001-ref.html">
+<meta name="assert" content="This test ensures that the root renderer has an opacity filter"/>
+<html style="filter: opacity(0.501)">
+This test ensures we properly paint the root element when an opacity filter is applied.
diff --git a/testing/web-platform/tests/css/filter-effects/support/1x1-green.png b/testing/web-platform/tests/css/filter-effects/support/1x1-green.png
new file mode 100644
index 0000000000..b98ca0ba0a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/1x1-green.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/1x1-lime.png b/testing/web-platform/tests/css/filter-effects/support/1x1-lime.png
new file mode 100644
index 0000000000..cb397fb090
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/1x1-lime.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/1x1-maroon.png b/testing/web-platform/tests/css/filter-effects/support/1x1-maroon.png
new file mode 100644
index 0000000000..3f86b07219
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/1x1-maroon.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/1x1-navy.png b/testing/web-platform/tests/css/filter-effects/support/1x1-navy.png
new file mode 100644
index 0000000000..9b9a03955b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/1x1-navy.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/1x1-red.png b/testing/web-platform/tests/css/filter-effects/support/1x1-red.png
new file mode 100644
index 0000000000..6bd73ac101
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/1x1-red.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/1x1-white.png b/testing/web-platform/tests/css/filter-effects/support/1x1-white.png
new file mode 100644
index 0000000000..dd43faec54
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/1x1-white.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/60x60-gg-rr.png b/testing/web-platform/tests/css/filter-effects/support/60x60-gg-rr.png
new file mode 100644
index 0000000000..84f5b2a4f1
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/60x60-gg-rr.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/60x60-green.png b/testing/web-platform/tests/css/filter-effects/support/60x60-green.png
new file mode 100644
index 0000000000..b3c8cf3eb4
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/60x60-green.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/README b/testing/web-platform/tests/css/filter-effects/support/README
new file mode 100644
index 0000000000..2e5f2ad073
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/README
@@ -0,0 +1,28 @@
+CSS Global Support Directory
+============================
+
+This directory contains common support files (such as images and external
+style sheets). These are sync'ed into the support directories of all our
+test suites. If you have test-suite-specific support files, please add
+them to the appropriate test-suite-specific support/ directory.
+
+If you add to a support/ directory, please run the tools/supportprop.py
+script from the top of the repository to cascade support files into the
+lower-level support directories.
+
+Description of the Common Support File Collection
+-------------------------------------------------
+
+The 1x1-* images are all exactly one pixel.
+
+The swatch-* images all use 15x15 cells.
+
+The square-* images all use 15x15 cells with one pixel borders.
+
+The pattern-* images use cells of various sizes:
+
+   pattern-grg-rgr-grg.png   20x20
+   pattern-rgr-grg-rgr.png   20x20
+   pattern-tr.png            15x15
+   pattern-grg-rrg-rgg.png   15x15
+
diff --git a/testing/web-platform/tests/css/filter-effects/support/a-green.css b/testing/web-platform/tests/css/filter-effects/support/a-green.css
new file mode 100644
index 0000000000..b0dbb071d5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/testing/web-platform/tests/css/filter-effects/support/b-green.css b/testing/web-platform/tests/css/filter-effects/support/b-green.css
new file mode 100644
index 0000000000..a0473f5ca2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/b-green.css
@@ -0,0 +1 @@
+.b { color: green; }
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/support/c-red.css b/testing/web-platform/tests/css/filter-effects/support/c-red.css
new file mode 100644
index 0000000000..d4ba5c64e9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/c-red.css
@@ -0,0 +1 @@
+.c { color: red; }
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/support/cat.png b/testing/web-platform/tests/css/filter-effects/support/cat.png
new file mode 100644
index 0000000000..85dd732481
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/cat.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/color-palette.png b/testing/web-platform/tests/css/filter-effects/support/color-palette.png
new file mode 100644
index 0000000000..68641b7677
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/color-palette.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/div-with-filter.html b/testing/web-platform/tests/css/filter-effects/support/div-with-filter.html
new file mode 100644
index 0000000000..9a4d4105a8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/div-with-filter.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: red; filter: url(support/hueRotate.svg#MyFilter)"></div>
diff --git a/testing/web-platform/tests/css/filter-effects/support/filter-external-002-filter.svg b/testing/web-platform/tests/css/filter-effects/support/filter-external-002-filter.svg
new file mode 100644
index 0000000000..0d5fc65c6f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/filter-external-002-filter.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<filter id="filter" color-interpolation-filters="sRGB">
+		<feColorMatrix type="hueRotate" in="SourceGraphic" values="150"/>
+	</filter>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/support/filter-from-external-url.css b/testing/web-platform/tests/css/filter-effects/support/filter-from-external-url.css
new file mode 100644
index 0000000000..2940461016
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/filter-from-external-url.css
@@ -0,0 +1,3 @@
+.hue-rotate {
+    filter: url('hueRotate.svg#MyFilter');
+}
diff --git a/testing/web-platform/tests/css/filter-effects/support/filtersubregion00.png b/testing/web-platform/tests/css/filter-effects/support/filtersubregion00.png
new file mode 100644
index 0000000000..b6c4bccb63
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/filtersubregion00.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg b/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg
new file mode 100644
index 0000000000..ed294041e1
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg
@@ -0,0 +1,7 @@
+<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <filter id="MyFilter">
+      <feColorMatrix type="hueRotate" values="90"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/support/import-green.css b/testing/web-platform/tests/css/filter-effects/support/import-green.css
new file mode 100644
index 0000000000..537104e663
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/import-green.css
@@ -0,0 +1 @@
+.import { color: green; }
diff --git a/testing/web-platform/tests/css/filter-effects/support/import-red.css b/testing/web-platform/tests/css/filter-effects/support/import-red.css
new file mode 100644
index 0000000000..9945ef4711
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/import-red.css
@@ -0,0 +1 @@
+.import { color: red; }
diff --git a/testing/web-platform/tests/css/filter-effects/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/filter-effects/support/pattern-grg-rgr-grg.png
new file mode 100644
index 0000000000..9b88fbd811
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/pattern-grg-rgr-grg.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/filter-effects/support/pattern-grg-rrg-rgg.png
new file mode 100644
index 0000000000..fcf4f3fd7d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/pattern-grg-rrg-rgg.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/filter-effects/support/pattern-rgr-grg-rgr.png
new file mode 100644
index 0000000000..d454e3a630
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/pattern-rgr-grg-rgr.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/pattern-tr.png b/testing/web-platform/tests/css/filter-effects/support/pattern-tr.png
new file mode 100644
index 0000000000..8b4b25364e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/pattern-tr.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/ruler-h-50%.png b/testing/web-platform/tests/css/filter-effects/support/ruler-h-50%.png
new file mode 100644
index 0000000000..cf2eea6b43
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/ruler-h-50%.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/ruler-h-50px.png b/testing/web-platform/tests/css/filter-effects/support/ruler-h-50px.png
new file mode 100644
index 0000000000..9f46583665
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/ruler-h-50px.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/ruler-v-100px.png b/testing/web-platform/tests/css/filter-effects/support/ruler-v-100px.png
new file mode 100644
index 0000000000..a837eca222
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/ruler-v-100px.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/ruler-v-50px.png b/testing/web-platform/tests/css/filter-effects/support/ruler-v-50px.png
new file mode 100644
index 0000000000..8414102802
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/ruler-v-50px.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/square-purple.png b/testing/web-platform/tests/css/filter-effects/support/square-purple.png
new file mode 100644
index 0000000000..0f522d7872
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/square-purple.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/square-teal.png b/testing/web-platform/tests/css/filter-effects/support/square-teal.png
new file mode 100644
index 0000000000..e567f51b91
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/square-teal.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/square-white.png b/testing/web-platform/tests/css/filter-effects/support/square-white.png
new file mode 100644
index 0000000000..5853cbb238
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/square-white.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/support/README b/testing/web-platform/tests/css/filter-effects/support/support/README
new file mode 100644
index 0000000000..ea8cb9ef35
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/support/README
@@ -0,0 +1,4 @@
+The swatch-green.png file in this directory is really a RED swatch,
+and the swatch-red.png file is really a green swatch.
+
+This directory is used to test relative URIs.
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/filter-effects/support/support/swatch-green.png b/testing/web-platform/tests/css/filter-effects/support/support/swatch-green.png
new file mode 100644
index 0000000000..1caf25c992
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/support/swatch-green.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/support/swatch-red.png b/testing/web-platform/tests/css/filter-effects/support/support/swatch-red.png
new file mode 100644
index 0000000000..0aa79b0c86
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/support/swatch-red.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-blue.png b/testing/web-platform/tests/css/filter-effects/support/swatch-blue.png
new file mode 100644
index 0000000000..bf2759634d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-blue.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-green.png b/testing/web-platform/tests/css/filter-effects/support/swatch-green.png
new file mode 100644
index 0000000000..0aa79b0c86
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-green.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-lime.png b/testing/web-platform/tests/css/filter-effects/support/swatch-lime.png
new file mode 100644
index 0000000000..55fd7fdaed
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-lime.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-orange.png b/testing/web-platform/tests/css/filter-effects/support/swatch-orange.png
new file mode 100644
index 0000000000..d3cd498b52
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-orange.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-red.png b/testing/web-platform/tests/css/filter-effects/support/swatch-red.png
new file mode 100644
index 0000000000..1caf25c992
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-red.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-teal.png b/testing/web-platform/tests/css/filter-effects/support/swatch-teal.png
new file mode 100644
index 0000000000..0293ce89de
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-teal.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-white.png b/testing/web-platform/tests/css/filter-effects/support/swatch-white.png
new file mode 100644
index 0000000000..1a7d4323d7
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-white.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/swatch-yellow.png b/testing/web-platform/tests/css/filter-effects/support/swatch-yellow.png
new file mode 100644
index 0000000000..1591aa0e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/swatch-yellow.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/test-bl.png b/testing/web-platform/tests/css/filter-effects/support/test-bl.png
new file mode 100644
index 0000000000..904e24e996
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/test-bl.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/test-br.png b/testing/web-platform/tests/css/filter-effects/support/test-br.png
new file mode 100644
index 0000000000..f413ff5c1a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/test-br.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/test-inner-half-size.png b/testing/web-platform/tests/css/filter-effects/support/test-inner-half-size.png
new file mode 100644
index 0000000000..e473bf80ef
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/test-inner-half-size.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/test-outer.png b/testing/web-platform/tests/css/filter-effects/support/test-outer.png
new file mode 100644
index 0000000000..82eeace7fc
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/test-outer.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/test-tl.png b/testing/web-platform/tests/css/filter-effects/support/test-tl.png
new file mode 100644
index 0000000000..f6ac0ef7e8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/test-tl.png
diff --git a/testing/web-platform/tests/css/filter-effects/support/test-tr.png b/testing/web-platform/tests/css/filter-effects/support/test-tr.png
new file mode 100644
index 0000000000..59843ae54b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/test-tr.png
diff --git a/testing/web-platform/tests/css/filter-effects/svg-empty-container-with-filter-content-added.html b/testing/web-platform/tests/css/filter-effects/svg-empty-container-with-filter-content-added.html
new file mode 100644
index 0000000000..6436461f78
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-empty-container-with-filter-content-added.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Adding content to a previously empty filtered container</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="match" href="reference/green-100x100.html">
+<link rel="bookmark" href="https://crbug.com/1154050">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <filter id="f" color-interpolation-filters="sRGB">
+    <feComponentTransfer><feFuncA/></feComponentTransfer>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <g id="target" filter="url(#f)"/>
+</svg>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+  rect.setAttribute('fill', 'green');
+  rect.setAttribute('width', '100');
+  rect.setAttribute('height', '100');
+  document.getElementById('target').appendChild(rect);
+  takeScreenshot();
+});
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-external-filter-resource.html b/testing/web-platform/tests/css/filter-effects/svg-external-filter-resource.html
new file mode 100644
index 0000000000..6df5fc281f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-external-filter-resource.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>Filter Effects: Referencing an external SVG filter from an SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-hue-rotate">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <rect width="100" height="100" fill="rgb(71.79%, 28.82%, 0%)"
+        filter="url(support/hueRotate.svg#MyFilter)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-feflood-001.html b/testing/web-platform/tests/css/filter-effects/svg-feflood-001.html
new file mode 100644
index 0000000000..4588cf93f6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-feflood-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filter Effects Test: feFlood in filter for SVG rect element</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#feFloodElement">
+    <link rel="match" href="reference/svg-feflood-ref.html">
+    <meta name="flags" content="svg">
+    <meta name="assert" content="The red rect gets filtered with the filter primitve feFlood. feFlood fills the rect with green. - The rect is black to avoid color interpolation issues.">
+    <style type="text/css">
+    svg {
+        width: 500px;
+        height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a black square and no red.</p>
+    <svg>
+        <defs>
+          <filter id="filter" x="0" y="0" width="1" height="1">
+            <feFlood flood-color="black"/>
+          </filter>
+        </defs>
+        <rect width="300" height="300" fill="red" filter="url(#filter)"/>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-feimage-001.html b/testing/web-platform/tests/css/filter-effects/svg-feimage-001.html
new file mode 100644
index 0000000000..bfa3211ae2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-feimage-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filter Effects Test: feImage referencing an IRI</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#feImageElement">
+    <link rel="match" href="reference/svg-feimage-ref.html">
+    <meta name="flags" content="svg">
+    <meta name="assert" content="The feImage primitve applied to the red rect should reference and display the green rect by it's IRI. - The rect is black to avoid color interpolation issues.">
+    <style type="text/css">
+    svg {
+        width: 500px;
+        height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a black square and no red.</p>
+    <svg>
+        <defs>
+          <rect id="blackRect" width="300" height="300" fill="black"/>
+          <filter id="filter" x="0" y="0" width="1" height="1">
+            <feImage xlink:href="#blackRect"/>
+          </filter>
+        </defs>
+        <rect x="1" y="1" width="298" height="298" fill="red"/>
+        <rect width="300" height="300" fill="red" filter="url(#filter)"/>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-feimage-002.html b/testing/web-platform/tests/css/filter-effects/svg-feimage-002.html
new file mode 100644
index 0000000000..b462ba91ad
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-feimage-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filter Effects Test: feImage referencing an data URL</title>
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#feImageElement">
+    <link rel="match" href="reference/svg-feimage-ref.html">
+    <meta name="flags" content="svg">
+    <meta name="assert" content="The feImage primitve applied to the red rect should reference and display the black rect. - The rect is black to avoid color interpolation issues.">
+    <style type="text/css">
+    svg {
+        width: 500px;
+        height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a black square and no red.</p>
+    <svg>
+        <defs>
+          <filter id="filter" x="0" y="0" width="1" height="1">
+            <feImage xlink:href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><rect id='blackRect' width='300' height='300' fill='black'/></svg>#blackRect" preserveAspectRatio="none"/>
+          </filter>
+        </defs>
+        <rect x="1" y="1" width="298" height="298" fill="red"/>
+        <rect width="300" height="300" fill="red" filter="url(#filter)"/>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-feoffset-001.html b/testing/web-platform/tests/css/filter-effects/svg-feoffset-001.html
new file mode 100644
index 0000000000..3d8118b387
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-feoffset-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Filter Effects Test: feOffset applied to SVG rect element</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#feOffsetElement">
+    <link rel="match" href="reference/svg-feoffset-ref.html">
+    <meta name="flags" content="svg">
+    <meta name="assert" content="The offset filter primitive will translate the rect by -100 pixels in each direction. - The rect is black to avoid color interpolation issues.">
+    <style type="text/css">
+    svg {
+        width: 500px;
+        height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <p>The test passes if you see a black square and no red.</p>
+    <svg>
+        <defs>
+          <filter filterUnits="userSpaceOnUse" id="filter" x="0" y="0" width="400" height="400">
+            <feOffset dx="-100" dy="-100"/>
+          </filter>
+        </defs>
+        <rect x="1" y="1" width="298" height="298" fill="red"/>
+        <rect x="100" y="100" width="300" height="300" fill="black" filter="url(#filter)"/>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-filter-vs-clip-path.html b/testing/web-platform/tests/css/filter-effects/svg-filter-vs-clip-path.html
new file mode 100644
index 0000000000..0e17117e35
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-filter-vs-clip-path.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Filter Effects: 'filter' and 'clip-path' on SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#placement">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <clipPath id="c">
+    <rect width="100" height="100"/>
+  </clipPath>
+  <rect width="100" height="100" fill="red"
+	filter="blur(20px)" clip-path="url(#c)"/>
+  <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-filter-vs-mask.html b/testing/web-platform/tests/css/filter-effects/svg-filter-vs-mask.html
new file mode 100644
index 0000000000..279db20022
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-filter-vs-mask.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Filter Effects: 'filter' and 'mask' on SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#placement">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <mask id="m">
+    <rect width="100" height="100" fill="white"/>
+  </mask>
+  <rect width="100" height="100" fill="red"
+	filter="blur(20px)" mask="url(#m)"/>
+  <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-image-root-filter-ref.html b/testing/web-platform/tests/css/filter-effects/svg-image-root-filter-ref.html
new file mode 100644
index 0000000000..a11aaf36f8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-image-root-filter-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<svg height='50px' width='50px' style='filter: hue-rotate(90deg)'>
+  <rect width='20px' height='20px' fill='red'></rect>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-image-root-filter.html b/testing/web-platform/tests/css/filter-effects/svg-image-root-filter.html
new file mode 100644
index 0000000000..6df6eb23b9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-image-root-filter.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Filter Effects: filters work on the root of an svg image</title>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1778718">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="match" href="svg-image-root-filter-ref.html">
+<img id="image"
+     src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='50px' width='50px' style='filter: hue-rotate(90deg)'><rect width='20px' height='20px' fill='red'></rect></svg>">
diff --git a/testing/web-platform/tests/css/filter-effects/svg-multiple-filter-functions.html b/testing/web-platform/tests/css/filter-effects/svg-multiple-filter-functions.html
new file mode 100644
index 0000000000..d1b182a1c6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-multiple-filter-functions.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>Filter Effects: filter with multiple filter functions on SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#filter-functions">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterElement">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="f_left" x="0" y="0" width="1" height="1"
+	  color-interpolation-filters="sRGB">
+    <feFlood flood-color="rgb(71.79%, 28.82%, 0%)" width="50"/>
+  </filter>
+  <filter id="f_right" x="0" y="0" width="1" height="1"
+	  color-interpolation-filters="sRGB">
+    <feFlood flood-color="rgb(71.79%, 28.82%, 0%)" x="50" width="50"/>
+    <feMerge>
+      <feMergeNode in="SourceGraphic"/>
+      <feMergeNode/>
+    </feMerge>
+  </filter>
+  <rect width="100" height="100" fill="red"
+	filter="url(#f_left) url(#f_right) hue-rotate(90deg)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-drop-shadow-color.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-drop-shadow-color.html
new file mode 100644
index 0000000000..6db3beb35c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-drop-shadow-color.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing color of drop-shadow() function on an SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="100" fill="green" filter="drop-shadow(50px 0 red)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("filter", "drop-shadow(50px 0 green)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-drop-shadow-offset.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-drop-shadow-offset.html
new file mode 100644
index 0000000000..d67b29820c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-drop-shadow-offset.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing offset of drop-shadow() function on an SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="100" fill="green" filter="drop-shadow(5px 0 green)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("filter", "drop-shadow(50px 0 green)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-filter-used-by-mask.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-filter-used-by-mask.html
new file mode 100644
index 0000000000..59ac6accbc
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-filter-used-by-mask.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Mutating filter primitive in &lt;filter> referenced by &lt;mask></title>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feColorMatrixElement">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feComponentTransferElement">
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#svg-masks">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="filter" color-interpolation-filters="sRGB">
+    <feColorMatrix type="hueRotate" values="0"/>
+    <feComponentTransfer>
+      <feFuncG type="linear" slope="10000"/>
+    </feComponentTransfer>
+    <feColorMatrix type="matrix" values="0 1 0 0 0, 0 1 0 0 0, 0 1 0 0 0, 0 0 0 1 0"/>
+  </filter>
+
+  <mask id="mask">
+    <rect width="100%" height="100%" fill="red" filter="url(#filter)"/>
+  </mask>
+
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green" mask="url(#mask)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    document.querySelector('svg > filter > feColorMatrix').setAttribute('values', 90);
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-function-to-url.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-function-to-url.html
new file mode 100644
index 0000000000..cd2f61f348
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-function-to-url.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: switching from hue-rotate() to url() on an SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#filter-functions">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterElement">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <filter id="hue" color-interpolation-filters="sRGB">
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+  <rect width="100" height="100" fill="rgb(71.79%, 28.82%, 0%)" filter="hue-rotate(330deg)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.querySelector("svg > rect");
+    rect.setAttribute("filter", "url(#hue)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-group-position-changed.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-group-position-changed.html
new file mode 100644
index 0000000000..c83c636d9b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-group-position-changed.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing the position of an SVG group with filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <g filter="drop-shadow(-50px 0 green)">
+    <rect id="target" width="50" height="100" fill="green"/>
+  </g>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("x", "50");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-group-size-changed.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-group-size-changed.html
new file mode 100644
index 0000000000..755343c2ba
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-group-size-changed.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing the size of an SVG group with filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <g filter="drop-shadow(50px 0 green)">
+    <rect id="target" width="50" height="50" fill="green"/>
+  </g>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("height", "100");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-group-transform-changed.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-group-transform-changed.html
new file mode 100644
index 0000000000..212ecf7b65
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-group-transform-changed.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing the transform of an SVG group with filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <g id="target" filter="drop-shadow(-50px 0 green)">
+    <rect width="50" height="100" fill="green"/>
+  </g>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let group = document.getElementById("target");
+    group.setAttribute("transform", "translate(50, 0)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-object-position-changed.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-object-position-changed.html
new file mode 100644
index 0000000000..2f0225439d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-object-position-changed.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing the position of an SVG element with filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="100" fill="green"
+	filter="drop-shadow(-50px 0 green)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("x", "50");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-object-size-changed.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-object-size-changed.html
new file mode 100644
index 0000000000..1604ba9d13
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-object-size-changed.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing the size of an SVG element with filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="50" fill="green"
+	filter="drop-shadow(50px 0 green)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("height", "100");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-object-transform-changed.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-object-transform-changed.html
new file mode 100644
index 0000000000..21f5683a2b
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-object-transform-changed.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: changing the transform of an SVG element with filter</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="100" fill="green"
+	filter="drop-shadow(-50px 0 green)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("transform", "translate(50, 0)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-single-to-multiple-001.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-single-to-multiple-001.html
new file mode 100644
index 0000000000..58129dff8f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-single-to-multiple-001.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: extending the filter chain with an additional function on SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-hue-rotate">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="100" fill="rgb(71.79%, 28.82%, 0%)"
+	filter="hue-rotate(90deg)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("filter", "hue-rotate(90deg) drop-shadow(50px 0 green)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-single-to-multiple-002.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-single-to-multiple-002.html
new file mode 100644
index 0000000000..918cf7e0e9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-single-to-multiple-002.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: extending the filter chain with an additional function on SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#feColorMatrixElement">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <filter id="hue" color-interpolation-filters="sRGB">
+    <feColorMatrix type="hueRotate" values="90"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="100" fill="rgb(71.79%, 28.82%, 0%)"
+	filter="url(#hue)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById("target");
+    rect.setAttribute("filter", "url(#hue) drop-shadow(50px 0 green)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-mutation-url-to-function.html b/testing/web-platform/tests/css/filter-effects/svg-mutation-url-to-function.html
new file mode 100644
index 0000000000..65b3b817d5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-mutation-url-to-function.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Filter Effects: switching from url() to hue-rotate() on an SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#filter-functions">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterElement">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <filter id="hue" color-interpolation-filters="sRGB">
+    <feColorMatrix type="hueRotate" values="330"/>
+  </filter>
+  <rect width="100" height="100" fill="rgb(71.79%, 28.82%, 0%)" filter="url(#hue)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.querySelector("svg > rect");
+    rect.setAttribute("filter", "hue-rotate(90deg)");
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-relative-urls-001.html b/testing/web-platform/tests/css/filter-effects/svg-relative-urls-001.html
new file mode 100644
index 0000000000..5dd382c6df
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-relative-urls-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Filter Effects: SVG-based filters and relative URLs</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#relative-urls">
+<link rel="help" href="https://crbug.com/405315"/>
+<link rel="match" href="reference/svg-relative-urls-001-ref.html">
+<meta name="assert" content="This test checks that relative SVG filter references in inline styles are correct after an element moves documents.">
+
+<body onload="runTest()">
+
+<iframe src="support/div-with-filter.html"></iframe>
+
+<div style="width: 100px; height: 100px; background-color: red; filter: url(support/hueRotate.svg#MyFilter)"></div>
+
+<script>
+function runTest() {
+  var iframe = document.querySelector('iframe');
+  var div_from_iframe = iframe.contentDocument.querySelector('div');
+  iframe.remove();
+  document.body.appendChild(div_from_iframe);
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-relative-urls-002.html b/testing/web-platform/tests/css/filter-effects/svg-relative-urls-002.html
new file mode 100644
index 0000000000..278ea16454
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-relative-urls-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>SVG Filters: relative URLs from external stylesheets</title>
+<link rel="author" title="Fredrik Söderquist" href="mailto:fs@opera.com">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#relative-urls">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=405315">
+<link rel="match" href="reference/svg-relative-urls-002-ref.html">
+<meta name="assert" content="Check that SVG filters can be referenced from external stylesheets using a relative URL">
+
+<link rel="stylesheet" href="support/filter-from-external-url.css"
+      onload="document.body && document.body.offsetTop">
+<style>
+img {
+    margin: 10px;
+}
+</style>
+<img class="hue-rotate" src="support/color-palette.png">
diff --git a/testing/web-platform/tests/css/filter-effects/svg-shorthand-drop-shadow-001.html b/testing/web-platform/tests/css/filter-effects/svg-shorthand-drop-shadow-001.html
new file mode 100644
index 0000000000..0d05046807
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-shorthand-drop-shadow-001.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>Filter Effects: drop-shadow() function on SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-drop-shadow">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="50" height="100" fill="green" filter="drop-shadow(50px 0 green)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-shorthand-hue-rotate-001.html b/testing/web-platform/tests/css/filter-effects/svg-shorthand-hue-rotate-001.html
new file mode 100644
index 0000000000..34f9b5c76d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-shorthand-hue-rotate-001.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>Filter Effects: hue-rotate() function on SVG element</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#funcdef-filter-hue-rotate">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <rect width="100" height="100" fill="rgb(71.79%, 28.82%, 0%)" filter="hue-rotate(90deg)"/>
+</svg>
+
diff --git a/testing/web-platform/tests/css/filter-effects/svg-sourcegraphic-currentcolor-dynamic-001.html b/testing/web-platform/tests/css/filter-effects/svg-sourcegraphic-currentcolor-dynamic-001.html
new file mode 100644
index 0000000000..e3be6544dc
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-sourcegraphic-currentcolor-dynamic-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Filter Effects: Dynamic 'currentcolor' in SourceGraphic</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#attr-valuedef-in-sourcegraphic">
+<link rel="match" href="reference/green-100x100.html">
+<style>
+rect {
+  fill: currentColor;
+}
+
+.filtered {
+  filter: url(#filter);
+}
+
+.green {
+  color: green;
+}
+</style>
+<svg style="color: red">
+  <defs>
+    <filter id="filter" color-interpolation-filters="sRGB">
+      <feMerge>
+        <feMergeNode/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <g class="target filtered">
+    <rect width="50" height="100"/>
+  </g>
+
+  <g class="target">
+    <g class="filtered">
+      <rect x="50" width="50" height="100"/>
+    </g>
+  </g>
+</svg>
+<script>
+document.body.offsetTop;
+requestAnimationFrame(function() {
+  requestAnimationFrame(function() {
+    let targets = document.querySelectorAll('.target');
+    for (let i = 0; i < targets.length; ++i)
+      targets[i].classList.toggle('green');
+    document.documentElement.classList.remove('reftest-wait');
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-sourcegraphic-invalidation-001.html b/testing/web-platform/tests/css/filter-effects/svg-sourcegraphic-invalidation-001.html
new file mode 100644
index 0000000000..2776aa50cf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-sourcegraphic-invalidation-001.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>SourceGraphic is invalidated when removing element from the document</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#attr-valuedef-in-sourcegraphic">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <filter id="f">
+    <feMerge><feMergeNode/></feMerge>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" width="50" height="100" fill="green" filter="url(#f)"/>
+</svg>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    let rect = document.getElementById('target');
+    let svg = rect.parentNode;
+    rect.remove();
+    rect.setAttribute('width', '100');
+    svg.appendChild(rect);
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-unknown-input-001.html b/testing/web-platform/tests/css/filter-effects/svg-unknown-input-001.html
new file mode 100644
index 0000000000..7789f2a9af
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-unknown-input-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Filter Effects: The in attribute</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://www.w3.org/TR/filter-effects-1/#CommonAttributes">
+<link rel="match" href="svg-unknown-input-ref.html">
+<meta name="flags" content="svg">
+<meta name="assert" content="References to non-existent results on a first primitive must be treated like SourceGraphic.">
+<p>The test passes if you see a green square and no red.</p>
+<svg width="100" height="100">
+  <defs>
+    <filter id="f" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <feComposite in="unknown" in2="SourceGraphic" result="a"/>
+      <feFlood flood-color="green" result="b"/>
+      <feComposite in="b" in2="a"/>
+    </filter>
+  </defs>
+  <rect width="100" height="100" fill="red"/>
+  <rect x="25" y="25" width="50" height="50" fill="green" filter="url(#f)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-unknown-input-002.html b/testing/web-platform/tests/css/filter-effects/svg-unknown-input-002.html
new file mode 100644
index 0000000000..cb07b65404
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-unknown-input-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Filter Effects: The in attribute</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://www.w3.org/TR/filter-effects-1/#CommonAttributes">
+<link rel="match" href="svg-unknown-input-ref.html">
+<meta name="flags" content="svg">
+<meta name="assert" content="References to non-existent results on a subsequent primitive must be treated like the previous primitive result.">
+<p>The test passes if you see a green square and no red.</p>
+<svg width="100" height="100">
+  <defs>
+    <filter id="f" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+      <feFlood flood-color="green"/>
+      <feComposite in="unknown" in2="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect width="100" height="100" fill="red"/>
+  <rect x="25" y="25" width="50" height="50" fill="blue" filter="url(#f)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-unknown-input-ref.html b/testing/web-platform/tests/css/filter-effects/svg-unknown-input-ref.html
new file mode 100644
index 0000000000..1fff2a6175
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-unknown-input-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<title>Filter Effects: Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<meta name="flags" content="svg">
+<p>The test passes if you see a green square and no red.</p>
+<svg width="100" height="100">
+  <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/svg-unused-filter-on-clippath-mutated-crash.html b/testing/web-platform/tests/css/filter-effects/svg-unused-filter-on-clippath-mutated-crash.html
new file mode 100644
index 0000000000..060b2547de
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svg-unused-filter-on-clippath-mutated-crash.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html class='test-wait'>
+<title>Mutating a filter primitive in a filter that isn't used doesn't crash</title>
+<link rel='help' href='https://drafts.fxtf.org/filter-effects/#FilterProperty'>
+<link rel='bookmark' href='https://crbug.com/1151610'>
+<script src='/common/rendering-utils.js'></script>
+<svg>
+  <filter id='f'>
+    <feDiffuseLighting id='dl' lighting-color='currentcolor'/>
+  </filter>
+  <clipPath id='c' filter='url(#f)'>
+    <rect width='100' height='100'/>
+  </clipPath>
+  <rect width='500' height='500' fill='green' clip-path='url(#c)'/>
+</svg>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  var primitive = document.getElementById('dl');
+  primitive.parentNode.appendChild(primitive);
+  primitive.setAttribute('lighting-color', 'blue');
+  document.documentElement.classList.remove('test-wait');
+});
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/svgfeblendelement-mode-001.html b/testing/web-platform/tests/css/filter-effects/svgfeblendelement-mode-001.html
new file mode 100644
index 0000000000..f27a23f51a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/svgfeblendelement-mode-001.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<title>SVGFEBlendElement.prototype.mode</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#InterfaceSVGFEBlendElement">
+<link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+// This test checks the use of SVGAnimatedEnumeration for 'mode' on SVGFEBlendElement.
+
+const svgNs = "http://www.w3.org/2000/svg";
+
+test(function() {
+  var element = document.createElementNS(svgNs, "feBlend");
+  assert_equals(element.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_NORMAL);
+  assert_false(element.hasAttribute("mode"));
+}, document.title + ", getter, initial value");
+
+test(function() {
+  var element = document.createElementNS(svgNs, "feBlend");
+  element.setAttribute("mode", "not-a-valid-value");
+  assert_equals(element.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_NORMAL);
+  assert_true(element.hasAttribute("mode"));
+  assert_equals(element.getAttribute("mode"), "not-a-valid-value");
+}, document.title + ", getter, invalid value");
+
+const enumerationMap = [
+  [ "normal", "NORMAL" ],
+  [ "multiply", "MULTIPLY" ],
+  [ "screen", "SCREEN" ],
+  [ "darken", "DARKEN" ],
+  [ "lighten", "LIGHTEN" ],
+  [ "overlay", "OVERLAY" ],
+  [ "color-dodge", "COLOR_DODGE" ],
+  [ "color-burn", "COLOR_BURN" ],
+  [ "hard-light", "HARD_LIGHT" ],
+  [ "soft-light", "SOFT_LIGHT" ],
+  [ "difference", "DIFFERENCE" ],
+  [ "exclusion", "EXCLUSION" ],
+  [ "hue", "HUE" ],
+  [ "saturation", "SATURATION" ],
+  [ "color", "COLOR" ],
+  [ "luminosity", "LUMINOSITY" ],
+];
+
+for (let [enumeration, value_suffix] of enumerationMap) {
+  test(function() {
+    let value = SVGFEBlendElement["SVG_FEBLEND_MODE_" + value_suffix];
+    var element = document.createElementNS(svgNs, "feBlend");
+    element.setAttribute("mode", enumeration);
+    assert_equals(element.mode.baseVal, value);
+  }, document.title + ", getter, numeric value for \"" + enumeration + "\"");
+}
+
+test(function() {
+  var element = document.createElementNS(svgNs, "feBlend");
+  element.setAttribute("mode", "lighten");
+  assert_equals(element.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
+  assert_equals(element.getAttribute('mode'), "lighten");
+
+  assert_throws_js(TypeError, function() { element.mode.baseVal = 17; });
+  assert_equals(element.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
+  assert_equals(element.getAttribute('mode'), "lighten");
+
+  assert_throws_js(TypeError, function() { element.mode.baseVal = -1; });
+  assert_equals(element.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
+  assert_equals(element.getAttribute('mode'), "lighten");
+
+  assert_throws_js(TypeError, function() { element.mode.baseVal = 0; });
+  assert_equals(element.mode.baseVal, SVGFEBlendElement.SVG_FEBLEND_MODE_LIGHTEN);
+  assert_equals(element.getAttribute('mode'), "lighten");
+}, document.title + ", setter, invalid value");
+
+for (let [enumeration, value_suffix] of enumerationMap) {
+  test(function() {
+    let value = SVGFEBlendElement["SVG_FEBLEND_MODE_" + value_suffix];
+    var element = document.createElementNS(svgNs, "feBlend");
+    element.mode.baseVal = value;
+    assert_equals(element.mode.baseVal, value);
+    assert_equals(element.getAttribute('mode'), enumeration);
+  }, document.title + ", setter, numeric value for \"" + enumeration + "\"");
+}
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feblend-001.html b/testing/web-platform/tests/css/filter-effects/tainting-feblend-001.html
new file mode 100644
index 0000000000..416f57849a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feblend-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feBlend: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="blend_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feBlend/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#blend_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feblend-002.html b/testing/web-platform/tests/css/filter-effects/tainting-feblend-002.html
new file mode 100644
index 0000000000..3d753413a6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feblend-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feBlend: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="blend_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feBlend/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#blend_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fecomponenttransfer-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fecomponenttransfer-001.html
new file mode 100644
index 0000000000..89c60ba968
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fecomponenttransfer-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feComponentTransfer: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="compxfer_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feComponentTransfer/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#compxfer_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fecomponenttransfer-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fecomponenttransfer-002.html
new file mode 100644
index 0000000000..6f29b35ba3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fecomponenttransfer-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feComponentTransfer: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="compxfer_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feComponentTransfer/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#compxfer_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fecomposite-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fecomposite-001.html
new file mode 100644
index 0000000000..ddaa53e1e2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fecomposite-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feComposite: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="composite_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feComposite/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#composite_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fecomposite-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fecomposite-002.html
new file mode 100644
index 0000000000..1e68378ac6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fecomposite-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feComposite: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="composite_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feComposite/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#composite_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feconvolvematrix-001.html b/testing/web-platform/tests/css/filter-effects/tainting-feconvolvematrix-001.html
new file mode 100644
index 0000000000..eda1d7e2fc
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feconvolvematrix-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feConvolveMatrix: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="convolve_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feConvolveMatrix order="1" kernelMatrix="1"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#convolve_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feconvolvematrix-002.html b/testing/web-platform/tests/css/filter-effects/tainting-feconvolvematrix-002.html
new file mode 100644
index 0000000000..e7ec038fbd
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feconvolvematrix-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feConvolveMatrix: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="convolve_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feConvolveMatrix order="1" kernelMatrix="1"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#convolve_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-001.html
new file mode 100644
index 0000000000..bce3a29181
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>feDiffuseLighting: no tainting with regular &lt;color> lighting-color</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="diffuse_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood/>
+    <feDiffuseLighting lighting-color="rgb(0%, 100%, 50%)">
+      <feDistantLight elevation="90"/>
+    </feDiffuseLighting>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100" x="0" y="0" width="100" height="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)" filter="url(#diffuse_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-002.html
new file mode 100644
index 0000000000..773c25bf02
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>feDiffuseLighting: 'currentcolor' lighting-color taints the primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="diffuse_currentcolor" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood/>
+    <feDiffuseLighting lighting-color="currentcolor"
+                       style="color: rgb(0%, 100%, 50%)">
+      <feDistantLight elevation="90"/>
+    </feDiffuseLighting>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#diffuse_currentcolor)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-003.html b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-003.html
new file mode 100644
index 0000000000..0b7bb4d19a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>feDiffuseLighting: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="diffuse_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: black"/>
+    <feDiffuseLighting lighting-color="rgb(0%, 100%, 50%)">
+      <feDistantLight elevation="90"/>
+    </feDiffuseLighting>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#diffuse_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-dynamic.html b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-dynamic.html
new file mode 100644
index 0000000000..89674095a0
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fediffuselighting-dynamic.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>feDiffuseLighting: tainting state changes dynamically</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <filter id="diffuse" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood/>
+    <feDiffuseLighting lighting-color="rgb(0%, 100%, 50%)"
+                       style="color: rgb(0%, 100%, 50%)">
+      <feDistantLight elevation="90"/>
+    </feDiffuseLighting>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100" x="0" y="0" width="100" height="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green" filter="url(#diffuse)"/>
+</svg>
+<script>
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      document.querySelector('feDiffuseLighting').style.lightingColor = 'currentcolor';
+      takeScreenshot();
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fedisplacementmap-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fedisplacementmap-001.html
new file mode 100644
index 0000000000..2c99cc4981
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fedisplacementmap-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>feDisplacementMap: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="dispmap_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feDisplacementMap xChannelSelector="G" yChannelSelector="B"
+                       scale="0"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#dispmap_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fedisplacementmap-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fedisplacementmap-002.html
new file mode 100644
index 0000000000..9648b54bf3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fedisplacementmap-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>feDisplacementMap: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="dispmap_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feDisplacementMap xChannelSelector="G" yChannelSelector="B"
+                       scale="0"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#dispmap_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-001.html
new file mode 100644
index 0000000000..1b3dbb497c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>feDropShadow: no tainting with regular &lt;color> flood-color</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="dropshdw_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood x="0" y="0" width="100" height="100"/>
+    <feDropShadow width="100%" flood-color="rgb(0%, 100%, 50%)" stdDeviation="0"
+                  dx="100" dy="0"/>
+    <feOffset dx="-100"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100" x="0" y="0" width="100" height="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)" filter="url(#dropshdw_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-002.html
new file mode 100644
index 0000000000..26fc687d88
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>feDropShadow: 'currentcolor' flood-color taints the primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="dropshdw_currentcolor" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood x="0" y="0" width="100" height="100"/>
+    <feDropShadow width="100%" flood-color="currentcolor" stdDeviation="0"
+                  dx="100" dy="0" style="color: rgb(0%, 100%, 50%)"/>
+    <feOffset dx="-100"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100" x="0" y="0" width="100" height="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#dropshdw_currentcolor)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-003.html b/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-003.html
new file mode 100644
index 0000000000..d42102aa6c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fedropshadow-003.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>feDropShadow: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="dropshdw_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood x="0" y="0" width="100" height="100" flood-color="currentcolor"
+             style="color: black"/>
+    <feDropShadow width="100%" flood-color="rgb(0%, 100%, 50%)" stdDeviation="0"
+                  dx="100" dy="0"/>
+    <feOffset dx="-100"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100" x="0" y="0" width="100" height="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#dropshdw_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feflood-001.html b/testing/web-platform/tests/css/filter-effects/tainting-feflood-001.html
new file mode 100644
index 0000000000..714e6b992f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feflood-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>feFlood: no tainting with regular &lt;color> flood-color</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="flood_notaint" color-interpolation-filters="sRGB">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)" filter="url(#flood_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feflood-002.html b/testing/web-platform/tests/css/filter-effects/tainting-feflood-002.html
new file mode 100644
index 0000000000..79ea8dac52
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feflood-002.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>feFlood: 'currentcolor' flood-color taints the primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="flood_currentcolor" color-interpolation-filters="sRGB">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#flood_currentcolor)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feflood-dynamic.html b/testing/web-platform/tests/css/filter-effects/tainting-feflood-dynamic.html
new file mode 100644
index 0000000000..fc9b3354fa
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feflood-dynamic.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>feFlood: tainting state changes dynamically</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<script src="/common/reftest-wait.js"></script>
+<svg>
+  <filter id="flood" color-interpolation-filters="sRGB">
+    <feFlood flood-color="rgb(0%, 100%, 50%)" style="color: rgb(0%, 100%, 50%)"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green" filter="url(#flood)"/>
+</svg>
+<script>
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      document.querySelector('feFlood').style.floodColor = 'currentcolor';
+      takeScreenshot();
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fegaussianblur-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fegaussianblur-001.html
new file mode 100644
index 0000000000..a938c7494f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fegaussianblur-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feGaussianBlur: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="gaussian_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feGaussianBlur stdDeviation="0"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#gaussian_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fegaussianblur-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fegaussianblur-002.html
new file mode 100644
index 0000000000..55dabbbdbb
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fegaussianblur-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feGaussianBlur: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="gaussian_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feGaussianBlur stdDeviation="0"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#gaussian_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-femorphology-001.html b/testing/web-platform/tests/css/filter-effects/tainting-femorphology-001.html
new file mode 100644
index 0000000000..9af566410d
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-femorphology-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feMorphology: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="morphology_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feMorphology radius="0.5"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#morphology_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-femorphology-002.html b/testing/web-platform/tests/css/filter-effects/tainting-femorphology-002.html
new file mode 100644
index 0000000000..2c097202ee
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-femorphology-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feMorphology: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="morphology_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feMorphology radius="0.5"/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#morphology_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feoffset-001.html b/testing/web-platform/tests/css/filter-effects/tainting-feoffset-001.html
new file mode 100644
index 0000000000..8704b693e8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feoffset-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feOffset: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="offset_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feOffset/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#offset_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-feoffset-002.html b/testing/web-platform/tests/css/filter-effects/tainting-feoffset-002.html
new file mode 100644
index 0000000000..3c04268f5c
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-feoffset-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feOffset: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="offset_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feOffset/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#offset_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-001.html
new file mode 100644
index 0000000000..c2825258a5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>feSpecularLighting: no tainting with regular &lt;color> lighting-color</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="specular_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood/>
+    <feSpecularLighting lighting-color="rgb(0%, 100%, 50%)">
+      <feDistantLight elevation="90"/>
+    </feSpecularLighting>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#specular_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-002.html
new file mode 100644
index 0000000000..773b0c7065
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>feSpecularLighting: 'currentcolor' lighting-color taints the primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="specular_currentcolor" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood/>
+    <feSpecularLighting lighting-color="currentcolor"
+                        style="color: rgb(0%, 100%, 50%)">
+      <feDistantLight elevation="90"/>
+    </feSpecularLighting>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#specular_currentcolor)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-003.html b/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-003.html
new file mode 100644
index 0000000000..173ed2da9f
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fespecularlighting-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>feSpecularLighting: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="specular_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: black"/>
+    <feSpecularLighting lighting-color="rgb(0%, 100%, 50%)">
+      <feDistantLight elevation="90"/>
+    </feSpecularLighting>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#specular_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fetile-001.html b/testing/web-platform/tests/css/filter-effects/tainting-fetile-001.html
new file mode 100644
index 0000000000..c5b955eef8
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fetile-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>feTile: does not taint the filter chain</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-blue-stripe-100x100.html">
+<svg>
+  <linearGradient id="g">
+    <stop stop-color="red"/>
+    <stop stop-color="red" offset=".5"/>
+    <stop stop-color="green" offset=".5"/>
+    <stop stop-color="green" offset="1"/>
+  </linearGradient>
+  <filter id="tile_notaint" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="rgb(0%, 100%, 50%)"/>
+    <feTile/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="blue"/>
+  <rect width="100" height="100" fill="url(#g)"
+        filter="url(#tile_notaint)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/tainting-fetile-002.html b/testing/web-platform/tests/css/filter-effects/tainting-fetile-002.html
new file mode 100644
index 0000000000..ed77301d2e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/tainting-fetile-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>feTile: propagates tainting from tainted input primitive</title>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
+<link rel="match" href="reference/green-100x100.html">
+<svg>
+  <filter id="tile_taintedinput" color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse">
+    <feFlood flood-color="currentcolor" style="color: rgb(0%, 100%, 50%)"/>
+    <feTile/>
+    <feDisplacementMap in="SourceGraphic"
+                       xChannelSelector="G" yChannelSelector="B"
+                       scale="100"/>
+  </filter>
+  <rect width="100" height="100" fill="red"/>
+  <rect width="100" height="100" fill="green"
+        filter="url(#tile_taintedinput)"/>
+</svg>
diff --git a/testing/web-platform/tests/css/filter-effects/will-change-blur-filter-under-clip.html b/testing/web-platform/tests/css/filter-effects/will-change-blur-filter-under-clip.html
new file mode 100644
index 0000000000..68e622c36a
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/will-change-blur-filter-under-clip.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
+<link rel="help" href="https://crbug.com/1228817">
+<link rel="match" href="reference/green-100x100.html">
+<div style="width: 100px; height: 100px; overflow: hidden">
+  <div style="width: 200px; height: 200px; margin-top: -50px; margin-left: -50px;
+              background: green; filter: blur(10px); will-change: filter"></div>
+</div>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/filter-effects
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip