diff --git a/css/css-masking/clip-path/clip-path-path-001.html b/css/css-masking/clip-path/clip-path-path-001.html
new file mode 100644
index 00000000000000..ebdfc2297bbcc8
--- /dev/null
+++ b/css/css-masking/clip-path/clip-path-path-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and path function with nonzero fill</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
+  <link rel="match" href="reference/clip-path-path-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+	'path()' for clipping. Test nonzero path function. On pass you should
+	see a green square.">
+</head>
+<style>
+  #rect {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    clip-path: path(nonzero, 'M10,10h80v80h-80zM25,25h50v50h-50z');
+  }
+</style>
+<body>
+  <p>The test passes if there are a green filled rect.</p>
+  <div id="rect"></div>
+</body>
+</html>
diff --git a/css/css-masking/clip-path/clip-path-path-002.html b/css/css-masking/clip-path/clip-path-path-002.html
new file mode 100644
index 00000000000000..e3049922ebdec9
--- /dev/null
+++ b/css/css-masking/clip-path/clip-path-path-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and path function with evenodd fill</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
+  <link rel="match" href="reference/clip-path-path-002-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+	'path()' for clipping. Test evenodd path function. On pass you should
+	see a hollow green square.">
+</head>
+<style>
+  #rect {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    clip-path: path(evenodd, 'M10,10h80v80h-80zM25,25h50v50h-50z');
+  }
+</style>
+<body>
+  <p>The test passes if there are a green hollow rect.</p>
+  <div id="rect"></div>
+</body>
+</html>
diff --git a/css/css-masking/clip-path/reference/clip-path-path-001-ref.html b/css/css-masking/clip-path/reference/clip-path-path-001-ref.html
new file mode 100644
index 00000000000000..afc1d18f204e9f
--- /dev/null
+++ b/css/css-masking/clip-path/reference/clip-path-path-001-ref.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Reference for clip-path's path function with nonzero</title>
+  <style type="text/css">
+    #rect {
+      width: 100px;
+      height: 100px;
+      background-color: green;
+      clip-path: url("#clip");
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there are a green filled rect.</p>
+  <div id="rect"></div>
+  <svg height="0" width="0">
+    <defs>
+      <clipPath id="clip">
+        <path clip-rule="nonzero" d="M10,10h80v80h-80zM25,25h50v50h-50z"/>
+      </clipPath>
+    </defs>
+  </svg>
+</body>
+</html>
diff --git a/css/css-masking/clip-path/reference/clip-path-path-002-ref.html b/css/css-masking/clip-path/reference/clip-path-path-002-ref.html
new file mode 100644
index 00000000000000..d9ea5183fb1e6a
--- /dev/null
+++ b/css/css-masking/clip-path/reference/clip-path-path-002-ref.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Reference for clip-path's path function with evenodd</title>
+  <style type="text/css">
+    #rect {
+      width: 100px;
+      height: 100px;
+      background-color: green;
+      clip-path: url("#clip");
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there are a green hollow rect.</p>
+  <div id="rect"></div>
+  <svg height="0" width="0">
+    <defs>
+      <clipPath id="clip">
+        <path clip-rule="evenodd" d="M10,10h80v80h-80zM25,25h50v50h-50z"/>
+      </clipPath>
+    </defs>
+  </svg>
+</body>
+</html>
