| Index: LayoutTests/fast/events/hit-test-clip-path-reference.html
|
| diff --git a/LayoutTests/fast/events/hit-test-clip-path-reference.html b/LayoutTests/fast/events/hit-test-clip-path-reference.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..9605445c5648756d511bfa49af15353d317bf78e
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/events/hit-test-clip-path-reference.html
|
| @@ -0,0 +1,77 @@
|
| +<!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>
|
|
|
Chromium Code Reviews
Issue 1292333004:
Make hit-test support clip-path references using svg clipPath (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master