third_party/WebKit/LayoutTests/fast/events/hit-test-clip-path-reference.html

   1 <!DOCTYPE html>
   2 <style>
   3 #d {
   4     width: 180px;
   5     height: 180px;
   6     border: 1px solid black;
   7 }
   8 #clip {
   9     width: 160px;
  10     height: 160px;
  11     margin: 10px;
  12     background-color: green;
  13     z-index: 1;
  14     -webkit-clip-path: url(#c1);
  15 }
  16 #reference-box {
  17    width: 64px;
  18    height: 64px;
  19    background-color: red;
  20    position: relative;
  21    top: -122px;
  22    left: 58px;
  23    z-index: -1;
  24 }
  25 </style>
  26 <svg height="0">
  27     <clipPath id="c1" clipPathUnits="objectBoundingBox">
  28         <circle cx="0.5" cy="0.5" r="0.2">
  29     </clipPath>
  30 </svg>
  31 <div id="d">
  32   <div id="clip"></div>
  33   <div id="reference-box"></div>
  34 </div>
  35
  36 <script src="../../resources/js-test.js"></script>
  37 <script>
  38 description("Test that hit-test work with clip-path using svg reference");
  39
  40 onload = function() {
  41   var clipElement = document.getElementById('clip');
  42   var referenceElement = document.getElementById('reference-box');
  43   var resultString = "";
  44
  45   var circleBoundingRect = referenceElement.getBoundingClientRect();
  46   var center_x = (circleBoundingRect.left + circleBoundingRect.right) / 2;
  47   var center_y = (circleBoundingRect.top + circleBoundingRect.bottom) / 2;
  48   var pointsInPath = [
  49       {x: center_x, y: center_y},
  50       {x: center_x - 5, y: center_y - 5},
  51       {x: center_x + 5, y: center_y + 5},
  52       {x: center_x - 5, y: center_y + 5},
  53       {x: center_x + 5, y: center_y - 5},
  54   ];
  55
  56   var pointsNotInPath = [
  57       {x: circleBoundingRect.left,
  58        y: circleBoundingRect.top},
  59       {x: circleBoundingRect.left - 1,
  60        y: circleBoundingRect.top - 1},
  61       {x: circleBoundingRect.left + 1,
  62        y: circleBoundingRect.top + 1},
  63   ];
  64
  65     pointsInPath.forEach( function(point) {
  66         var pass = (clipElement == document.elementFromPoint(point.x, point.y));
  67         resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
  68     });
  69
  70     pointsNotInPath.forEach( function(point) {
  71         var pass = (clipElement != document.elementFromPoint(point.x, point.y));
  72         resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n";
  73     });
  74     debug(resultString);
  75 }
  76
  77 </script>