Bug 1246741 - Add more test cases for basic shapes clipping in SVG content. r=jwatt
authorLouis Chang <lochang@mozilla.com>
Thu, 08 Jun 2017 14:15:01 +0800
changeset 363061 128c9d3bc0475f403ef54913b5c4d64b32a695d7
parent 363060 94a5f5ddcf39adb5f22bd0fc8b1401d0f75b7b33
child 363062 ff83c340468acd6c32f3802fe40bd0336930ea7f
push id91257
push usercbook@mozilla.com
push dateFri, 09 Jun 2017 07:59:27 +0000
treeherdermozilla-inbound@128c9d3bc047 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjwatt
bugs1246741
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1246741 - Add more test cases for basic shapes clipping in SVG content. r=jwatt MozReview-Commit-ID: 6UcD5NJxRcL
layout/reftests/svg/clipPath-polygon-01.svg
layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg
layout/reftests/svg/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/clipPath-polygon-01.svg
@@ -0,0 +1,51 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg 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 width="100%" height="100%" fill="lime"/>
+
+  <!-- test the clip is not too big (or ignored altogether) -->
+  <rect width="100%" height="100%" fill="red"
+        clip-path="polygon(100px 100px,200px 100px,200px 200px,100px 200px)"/>
+  <rect x="98" y="98" width="105" height="105" fill="lime"/>
+
+  <!-- test the clip does not simply make the element not render -->
+  <rect x="300" y="100" width="100" height="100" fill="red"/>
+  <rect x="280" y="80" width="150" height="150" fill="lime"
+        clip-path="polygon(20px 20px,120px 20px,120px 120px,20px 120px)"/>
+
+  <!-- percentage values -->
+  <svg x="100" y="300" width="100" height="100">
+    <rect width="100%" height="100%" fill="red"
+          clip-path="polygon(0 0,50% 0,50% 50%,0 50%)"/>
+    <rect width="55" height="55" fill="lime"/>
+  </svg>
+
+  <!-- mixed absolute and percentage values -->
+  <svg x="300" y="300" width="100" height="100">
+    <rect width="100%" height="100%" fill="red"
+          clip-path="polygon(0 0,50% 0,50px 50%,0 50px)"/>
+    <rect width="55" height="55" fill="lime"/>
+  </svg>
+
+  <!-- mixed other units -->
+  <svg x="500" y="300" width="100" height="100">
+    <rect width="100%" height="100%" fill="red"
+          clip-path="polygon(0 0,5em 0,5em 10%,0 10px)"/>
+    <rect width="5em" height="10%" fill="lime"/>
+  </svg>
+
+  <!-- check fill-rule and clip-rule are ignored for polygon clip-path -->
+  <svg x="500" y="100" width="100" height="100" fill-rule="evenodd" clip-rule="evenodd">
+    <rect width="100%" height="100%" fill="red"
+          clip-path="polygon(0 0,50px 0,50px 50px,0 50px,0 0,50px 0,50px 50px,0 50px,0 0)"/>
+    <rect width="55" height="55" fill="lime"/>
+  </svg>
+
+</svg>
new file mode 100644
--- /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 = 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(150, 100);
+      if (inElem.style.fill == "red") { ++inCount; }
+      inElem = document.elementFromPoint(150, 150);
+      if (inElem.style.fill == "red") { ++inCount; }
+      inElem = document.elementFromPoint(100, 150);
+      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>
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -75,16 +75,18 @@ fuzzy-if(/^Windows\x20NT\x2010\.0/.test(
 == clipPath-basic-05.svg pass.svg
 == clipPath-basic-06.svg pass.svg
 == clipPath-basic-07.svg pass.svg
 == clipPath-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html
 == clipPath-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html
 default-preferences pref(layout.css.clip-path-shapes.enabled,true)
 fuzzy(1,32400) == clipPath-on-outflowElement-02a.html clipPath-on-outflowElement-02-ref.html
 fuzzy(1,32400) == clipPath-on-outflowElement-02b.html clipPath-on-outflowElement-02-ref.html
+== clipPath-polygon-01.svg pass.svg
+== clipPath-polygon-elementFromPoint-01.svg pass.svg
 default-preferences
 != clipPath-on-thin-object.svg about:blank
 == clipPath-winding-01.svg pass.svg
 
 == comments-in-pres-attrs.svg pass.svg
 
 == conditions-01.svg pass.svg
 == conditions-02.svg pass.svg