1 files changed, 43 insertions, 0 deletions
diff --git a/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg b/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg
new file mode 100644
index 0000000000..fb2ebf37ce
--- /dev/null
+++ b/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg
@@ -0,0 +1,43 @@
+<!--
+      Any copyright is dedicated to the Public Domain.
+      http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg onload="testElementFromPoint();" xmlns="http://www.w3.org/2000/svg">
+
+  <title>Testcase for CSS polygon clipPath</title>
+
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1246741 -->
+
+  <rect id="out" width="100%" height="100%"/>
+
+  <!-- test elementFromPoint can get the element using clip-path -->
+  <rect id="in" x="100" y="100" width="100" height="100"
+        clip-path="polygon(0 0, 50px 0, 50px 50px, 0 50px)"/>
+  <script>
+    function testElementFromPoint() {
+      let inCount = 0, outCount = 0, inElem, outElem;
+      document.getElementById("in").style.fill = "red";
+      document.getElementById("out").style.fill = "blue";
+
+      inElem = document.elementFromPoint(100, 100);
+      if (inElem.style.fill == "red") { ++inCount; }
+      inElem = document.elementFromPoint(149, 100);
+      if (inElem.style.fill == "red") { ++inCount; }
+      inElem = document.elementFromPoint(149, 149);
+      if (inElem.style.fill == "red") { ++inCount; }
+      inElem = document.elementFromPoint(100, 149);
+      if (inElem.style.fill == "red") { ++inCount; }
+      if (inCount == 4) { document.getElementById("in").style.fill = "lime"; }
+
+      outElem = document.elementFromPoint(99, 100);
+      if (outElem.style.fill == "blue") { ++outCount; }
+      outElem = document.elementFromPoint(150, 99);
+      if (outElem.style.fill == "blue") { ++outCount; }
+      outElem = document.elementFromPoint(151, 150);
+      if (outElem.style.fill == "blue") { ++outCount; }
+      outElem = document.elementFromPoint(100, 151);
+      if (outElem.style.fill == "blue") { ++outCount; }
+      if (outCount == 4) { document.getElementById("out").style.fill = "lime"; }
+    }
+  </script>
+</svg>