1 files changed, 39 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-interpolation-001.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-interpolation-001.html
new file mode 100644
index 0000000000..1d881e5bd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-shape-interpolation-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>CSS Masking: Test clip-path nonzero path interpolation</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape">
+  <link rel="match" href="reference/clip-path-path-interpolation-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+	'shape()' for clipping. Test the interpolation of nonzero
+        path function.">
+  <style>
+    @keyframes anim {
+      from {
+        clip-path: shape(nonzero from 20px 20px,
+          hline by 60px, vline by 60px, hline by -60%, close,
+          move to 30% 30px, hline by 40px, vline by 40px, hline by -40px, close);
+      }
+      to {
+        clip-path: shape(nonzero from 50px 50px,
+          hline by 50px, vline by 50px, hline by -50%, close,
+          move to 20px 20%, hline by 50px, vline by 50px, hline by -50px, close);
+      }
+    }
+    #rect {
+      width: 100px;
+      height: 100px;
+      background-color: green;
+      animation: anim 10s -5s paused linear;
+    }
+  </style>
+</head>
+<body>
+  <div id="rect"></div>
+</body>
+<script>
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</html>