1 files changed, 48 insertions, 0 deletions
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>