| <!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> |
