Bug 1119698 - Ensure image elements take pointer-events into account. r=jwatt, a=sledru
authorRobert Longson <longsonr@gmail.com>
Mon, 19 Jan 2015 15:06:01 +0000
changeset 242953 94e7cb795a05
parent 242952 cd88be2b57ac
child 242954 cee6bfbbecd7
push id4344
push userryanvm@gmail.com
push date2015-01-20 17:02 +0000
treeherdermozilla-beta@ea7deca21c27 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjwatt, sledru
bugs1119698
milestone36.0
Bug 1119698 - Ensure image elements take pointer-events into account. r=jwatt, a=sledru
dom/svg/test/mochitest.ini
dom/svg/test/test_pointer-events-7.xhtml
layout/svg/nsSVGImageFrame.cpp
--- a/dom/svg/test/mochitest.ini
+++ b/dom/svg/test/mochitest.ini
@@ -59,16 +59,17 @@ skip-if = true
 [test_pointAtLength.xhtml]
 [test_pointer-events-1a.xhtml]
 [test_pointer-events-1b.xhtml]
 [test_pointer-events-2.xhtml]
 [test_pointer-events-3.xhtml]
 [test_pointer-events-4.xhtml]
 [test_pointer-events-5.xhtml]
 [test_pointer-events-6.xhtml]
+[test_pointer-events-7.xhtml]
 [test_scientific.html]
 [test_selectSubString.xhtml]
 [test_stroke-linecap-hit-testing.xhtml]
 [test_SVGLengthList-2.xhtml]
 [test_SVGLengthList.xhtml]
 [test_SVGMatrix.xhtml]
 [test_SVG_namespace_ids.html]
 [test_SVGNumberList.xhtml]
copy from dom/svg/test/test_pointer-events-4.xhtml
copy to dom/svg/test/test_pointer-events-7.xhtml
--- a/dom/svg/test/test_pointer-events-4.xhtml
+++ b/dom/svg/test/test_pointer-events-7.xhtml
@@ -1,110 +1,66 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=820506
+https://bugzilla.mozilla.org/show_bug.cgi?id=1119698
 -->
 <head>
-  <title>Test pointer events with clipPath</title>
+  <title>Test pointer events with image</title>
   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body onload="run()">
 <script class="testbody" type="text/javascript">
 <![CDATA[
 
 SimpleTest.waitForExplicitFinish();
 
 function run()
 {
   var svgDoc = document.getElementById('svg');
   var div = document.getElementById("div");
   // Get the coords of the origin of the SVG canvas:
   var originX = div.offsetLeft;
   var originY = div.offsetTop;
-  var r1 = document.getElementById('r1');
-  var r2 = document.getElementById('r2');
+  var image4 = document.getElementById('image4');
+  var image5 = document.getElementById('image5');
   var element;
 
-  // Test r1 just outsite the clip area:
-
-  element = document.elementFromPoint(originX + 19, originY + 19);
-  is(element, background, 'Should not hit top-left of r1');
-
-  element = document.elementFromPoint(originX + 101, originY + 19);
-  is(element, background, 'Should not hit top-right of r1');
-
-  element = document.elementFromPoint(originX + 101, originY + 101);
-  is(element, background, 'Should not hit bottom-right of r1');
-
-  element = document.elementFromPoint(originX + 19, originY + 101);
-  is(element, background, 'Should not hit bottom-left of r1');
+  element = document.elementFromPoint(originX + 20, originY + 20);
+  is(element, background, 'Should not hit visibility:hidden image by default');
 
-  // Test r1 just inside the clip area:
-
-  element = document.elementFromPoint(originX + 21, originY + 21);
-  is(element, r1, 'Should hit top-left of r1');
-
-  element = document.elementFromPoint(originX + 99, originY + 21);
-  is(element, r1, 'Should hit top-right of r1');
-
-  element = document.elementFromPoint(originX + 99, originY + 99);
-  is(element, r1, 'Should hit bottom-right of r1');
-
-  element = document.elementFromPoint(originX + 21, originY + 99);
-  is(element, r1, 'Should hit bottom-left of r1');
+  element = document.elementFromPoint(originX + 120, originY + 20);
+  is(element, background, 'Should not hit pointer-events:none image');
 
-  // Test r2 just outsite the clip area:
-
-  element = document.elementFromPoint(originX + 109, originY + 19);
-  is(element, background, 'Should not hit top-left of r2');
-
-  element = document.elementFromPoint(originX + 201, originY + 19);
-  is(element, background, 'Should not hit top-right of r2');
-
-  element = document.elementFromPoint(originX + 201, originY + 101);
-  is(element, background, 'Should not hit bottom-right of r2');
-
-  element = document.elementFromPoint(originX + 109, originY + 101);
-  is(element, background, 'Should not hit bottom-left of r2');
+  element = document.elementFromPoint(originX + 220, originY + 20);
+  is(element, background, 'Should not hit pointer-events:visible visibility:hidden image');
 
-  // Test r2 just inside the clip area:
-
-  element = document.elementFromPoint(originX + 121, originY + 21);
-  is(element, r2, 'Should hit top-left of r2');
+  element = document.elementFromPoint(originX + 320, originY + 20);
+  is(element, image4, 'Should hit pointer-events:painted visibility:hidden image');
 
-  element = document.elementFromPoint(originX + 199, originY + 21);
-  is(element, r2, 'Should hit top-right of r2');
-
-  element = document.elementFromPoint(originX + 199, originY + 99);
-  is(element, r2, 'Should hit bottom-right of r2');
-
-  element = document.elementFromPoint(originX + 121, originY + 99);
-  is(element, r2, 'Should hit bottom-left of r2');
+  element = document.elementFromPoint(originX + 420, originY + 20);
+  is(element, image5, 'Should hit pointer-events:stroke visibility:hidden image');
 
   SimpleTest.finish();
 }
 
 ]]>
 </script>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=500174">Mozilla Bug 500174</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119698">Mozilla Bug 1119698</a>
 <p id="display"></p>
 <div id="content">
 
   <div width="100%" height="1" id="div">
   </div>
-  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg">
-    <clipPath id="cp1" clipPathUnits="userSpaceOnUse">
-      <rect x="20" y="20" width="80" height="80"/>
-    </clipPath>
-    <clipPath id="cp2" clipPathUnits="objectBoundingBox">
-      <rect x="0.1" y="0.1" width="0.8" height="0.8"/>
-    </clipPath>
-    <rect id="background" width="100%" height="100%" fill="blue"/>
-    <rect id="r1" x="10" y="10" width="100" height="100" clip-path="url(#cp1)"/>
-    <rect id="r2" x="110" y="10" width="100" height="100" clip-path="url(#cp2)"/>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" id="svg">
+      <rect id="background" width="100%" height="100%" fill="blue"/>
+      <image x="10" y="10" width="100" height="100" visibility="hidden" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
+      <image x="110" y="10" width="100" height="100" pointer-events="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
+      <image x="210" y="10" width="100" height="100" pointer-events="visible" visibility="hidden" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
+      <image id="image4" x="310" y="10" width="100" height="100" pointer-events="painted" visibility="hidden" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
+      <image id="image5" x="410" y="10" width="100" height="100" pointer-events="stroke" visibility="hidden" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
   </svg>
 
 </div>
 <pre id="test">
 </pre>
 </body>
 </html>
--- a/layout/svg/nsSVGImageFrame.cpp
+++ b/layout/svg/nsSVGImageFrame.cpp
@@ -405,16 +405,20 @@ nsSVGImageFrame::PaintSVG(gfxContext& aC
   }
 
   return rv;
 }
 
 nsIFrame*
 nsSVGImageFrame::GetFrameForPoint(const gfxPoint& aPoint)
 {
+  if (!(GetStateBits() & NS_STATE_SVG_CLIPPATH_CHILD) && !GetHitTestFlags()) {
+    return nullptr;
+  }
+
   Rect rect;
   SVGImageElement *element = static_cast<SVGImageElement*>(mContent);
   element->GetAnimatedLengthValues(&rect.x, &rect.y,
                                    &rect.width, &rect.height, nullptr);
 
   if (!rect.Contains(ToPoint(aPoint))) {
     return nullptr;
   }