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