1 files changed, 89 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html
new file mode 100644
index 0000000000..22ceb6e02a
--- /dev/null
+++ b/devtools/client/inspector/test/doc_inspector_highlighter_cssshapes.html
@@ -0,0 +1,89 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  html, body {
+    height: 100%;
+    margin: 0;
+  }
+  .wrapper {
+    width: 800px;
+    height: 800px;
+    background: #f06;
+  }
+  #polygon {
+    clip-path: polygon(0 0%,
+                       100px 50%,
+                       200px 0,
+                       300px 50%,
+                       400px 0,
+                       500px 50%,
+                       600px 0,
+                       700px 50%,
+                       800px 0,
+                       90% 100%,
+                       50% 60%,
+                       10% 100%);
+  }
+  #circle {
+    clip-path: circle(25% at 30% 40%);
+  }
+  #ellipse {
+    clip-path: ellipse(40% 30% at 25% 30%) content-box;
+    padding: 20px;
+  }
+  #ellipse-padding-box {
+    clip-path: ellipse(40% 30% at 25% 30%) padding-box;
+    padding: 20px;
+  }
+  #inset {
+    clip-path: inset(200px 100px 30% 15%);
+  }
+  .svg {
+    width: 800px;
+    height: 800px;
+  }
+  #rect {
+    clip-path: polygon(0 0,
+                       100px 50%,
+                       200px 0,
+                       300px 50%,
+                       400px 0,
+                       500px 50%,
+                       600px 0,
+                       700px 50%,
+                       800px 0,
+                       90% 100%,
+                       50% 60%,
+                       10% 100%);
+    stroke: red;
+    stroke-width: 20px;
+    fill: blue;
+  }
+  #polygon-transform {
+    width: 600px;
+    height: 600px;
+    clip-path: polygon(0 0,
+                       100px 50%,
+                       200px 0,
+                       300px 50%,
+                       400px 0,
+                       500px 50%,
+                       600px 0,
+                       700px 50%,
+                       800px 0,
+                       90% 100%,
+                       50% 60%,
+                       10% 100%);
+  }
+</style>
+<div class="wrapper" id="polygon"></div>
+<div class="wrapper" id="circle"></div>
+<div class="wrapper" id="ellipse"></div>
+<div class="wrapper" id="ellipse-padding-box"></div>
+<div class="wrapper" id="inset"></div>
+<div class="wrapper" id="polygon-transform"></div>
+<svg class="svg">
+  <rect id="rect" x="10" y="10" width="700" height="700"></rect>
+</svg>