Make hit-test support clip-path references using svg clipPath

BUG=518816 Review URL: https://codereview.chromium.org/1292333004 git-svn-id: svn://svn.chromium.org/blink/trunk@201078 bbb929c8-8fbe-4397-9dbb-9b2b20218538

Make hit-test support clip-path references using svg clipPath
BUG=518816 Review URL: https://codereview.chromium.org/1292333004 git-svn-id: svn://svn.chromium.org/blink/trunk@201078 bbb929c8-8fbe-4397-9dbb-9b2b20218538
e9fce3b6 · miletus@chromium.org · 084e1b20 · e9fce3b6 · e9fce3b6 · e9fce3b6
Commit e9fce3b6 authored Aug 24, 2015 by miletus@chromium.org
4 changed files
--- a/third_party/WebKit/LayoutTests/TestExpectations
+++ b/third_party/WebKit/LayoutTests/TestExpectations
@@ -444,6 +444,10 @@ crbug.com/510492 fast/repaint/table-cell-collapsed-border.html [ NeedsRebaseline
 crbug.com/510492 fast/repaint/table-collapsed-border.html [ NeedsRebaseline ]
 crbug.com/510492 fast/table/border-collapsing/cached-change-cell-sl-border-color.html [ NeedsRebaseline ]

+crbug.com/518816 fast/events/hit-test-clip-path-reference.html [ NeedsRebaseline ]
+crbug.com/518816 virtual/trustedeventsdefaultaction/fast/events/hit-test-clip-path-reference.html [ NeedsRebaseline ]
+crbug.com/518816 virtual/pointerevent/fast/events/hit-test-clip-path-reference.html [ NeedsRebaseline ]
+
 crbug.com/380217 [ Linux Win ] fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-large-radius.html [ Skip ]
 crbug.com/380217 [ Win ] fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-bottom-left.html [ Skip ]


--- a/third_party/WebKit/LayoutTests/fast/events/hit-test-clip-path-reference-expected.txt
+++ b/third_party/WebKit/LayoutTests/fast/events/hit-test-clip-path-reference-expected.txt
+Test that hit-test work with clip-path using svg reference
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS path contains point at (99, 247)
+PASS path contains point at (94, 242)
+PASS path contains point at (104, 252)
+PASS path contains point at (94, 252)
+PASS path contains point at (104, 242)
+PASS path does not contain point at (67, 215)
+PASS path does not contain point at (66, 214)
+PASS path does not contain point at (68, 216)
+
+
--- a/third_party/WebKit/LayoutTests/fast/events/hit-test-clip-path-reference.html
+++ b/third_party/WebKit/LayoutTests/fast/events/hit-test-clip-path-reference.html
+<!DOCTYPE html>
+<style>
+#d {
+    width: 180px;
+    height: 180px;
+    border: 1px solid black;
+}
+#clip {
+    width: 160px;
+    height: 160px;
+    margin: 10px;
+    background-color: green;
+    z-index: 1;
+    -webkit-clip-path: url(#c1);
+}
+#reference-box {
+   width: 64px;
+   height: 64px;
+   background-color: red;
+   position: relative;
+   top: -122px;
+   left: 58px;
+   z-index: -1;
+}
+</style>
+<svg height="0">
+    <clipPath id="c1" clipPathUnits="objectBoundingBox">
+        <circle cx="0.5" cy="0.5" r="0.2">
+    </clipPath>
+</svg>
+<div id="d">
+  <div id="clip"></div>
+  <div id="reference-box"></div>
+</div>
+
+<script src="../../resources/js-test.js"></script>
+<script>
+description("Test that hit-test work with clip-path using svg reference");
+
+onload = function() {
+  var clipElement = document.getElementById('clip');
+  var referenceElement = document.getElementById('reference-box');
+  var resultString = "";
+
+  var circleBoundingRect = referenceElement.getBoundingClientRect();
+  var center_x = (circleBoundingRect.left + circleBoundingRect.right) / 2;
+  var center_y = (circleBoundingRect.top + circleBoundingRect.bottom) / 2;
+  var pointsInPath = [
+      {x: center_x, y: center_y},
+      {x: center_x - 5, y: center_y - 5},
+      {x: center_x + 5, y: center_y + 5},
+      {x: center_x - 5, y: center_y + 5},
+      {x: center_x + 5, y: center_y - 5},
+  ];
+
+  var pointsNotInPath = [
+      {x: circleBoundingRect.left,
+       y: circleBoundingRect.top},
+      {x: circleBoundingRect.left - 1,
+       y: circleBoundingRect.top - 1},
+      {x: circleBoundingRect.left + 1,
+       y: circleBoundingRect.top + 1},
+  ];
+
+    pointsInPath.forEach( function(point) {
+        var pass = (clipElement == document.elementFromPoint(point.x, point.y));
+        resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
+    });
+
+    pointsNotInPath.forEach( function(point) {
+        var pass = (clipElement != document.elementFromPoint(point.x, point.y));
+        resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n";
+    });
+    debug(resultString);
+}
+
+</script>
--- a/third_party/WebKit/Source/core/layout/LayoutBlock.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutBlock.cpp
@@ -59,6 +59,7 @@
 #include "core/layout/line/InlineIterator.h"
 #include "core/layout/line/InlineTextBox.h"
 #include "core/layout/shapes/ShapeOutsideInfo.h"
+#include "core/layout/svg/LayoutSVGResourceClipper.h"
 #include "core/page/Page.h"
 #include "core/paint/BlockPainter.h"
 #include "core/paint/BoxPainter.h"
@@ -1690,7 +1691,13 @@ bool LayoutBlock::nodeAtPoint(HitTestResult& result, const HitTestLocation& loca
            break;
        }
        case ClipPathOperation::REFERENCE:
-            // FIXME: handle REFERENCE
+            ReferenceClipPathOperation* referenceClipPathOperation = toReferenceClipPathOperation(style()->clipPath());
+            Element* element = document().getElementById(referenceClipPathOperation->fragment());
+            if (isSVGClipPathElement(element) && element->layoutObject()) {
+                LayoutSVGResourceClipper* clipper = toLayoutSVGResourceClipper(toLayoutSVGResourceContainer(element->layoutObject()));
+                if (!clipper->hitTestClipContent(borderBoxRect(), FloatPoint(locationInContainer.point() - localOffset)))
+                    return false;
+            }
            break;
        }
    }