LayoutTests/svg/hittest/svg-ellipse-rect-stroke.xhtml

   1 <html xmlns='http://www.w3.org/1999/xhtml'>
   2   <head>
   3     <style>
   4       #svgRoot {
   5           margin: 0px;
   6           padding: 0px;
   7           position: absolute;
   8           top: 0px;
   9           left: 0px;
  10       }
  11
  12       #ellipse, #rect {
  13           fill: green;
  14           fill-opacity: 0.1;
  15           stroke-width: 0.3px;
  16           stroke: green;
  17           stroke-opacity: 0.2;
  18       }
  19     </style>
  20   </head>
  21   <body>
  22     <p>Make sure hit testing works properly on stroked ellipses and rects.</p>
  23     <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p>
  24     <pre id="console"></pre>
  25
  26     <svg id="svgRoot" width="400px" height="400px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  27       <g transform="scale(200)">
  28         <ellipse id="ellipse" cx="0.5" cy="0.5" rx="0.3" ry="0.2"/>
  29         <rect id="rect" x="1.1" y="0.9" width="0.5" height="0.5"/>
  30       </g>
  31     </svg>
  32
  33     <script><![CDATA[
  34     if (window.layoutTestController)
  35       layoutTestController.dumpAsText();
  36
  37     var resultString = "";
  38     var ellipseElement = document.getElementById("ellipse");
  39     var rectElement = document.getElementById("rect");
  40
  41     var pointsInEllipse = [
  42        {x: 65, y: 81},
  43        {x: 89, y: 100},
  44        {x: 133, y: 128}
  45     ];
  46
  47     var pointsNotInEllipse = [
  48         {x: 100, y: 148}, // outer stroke
  49         {x: 0, y: 0}
  50     ];
  51
  52     var pointsOnEllipseStroke = [
  53        {x: 43, y: 54}, // outer stroke
  54        {x: 56, y: 123}, // inner stroke
  55        {x: 146, y: 134}, // outer stroke
  56        {x: 129, y: 109} // inner stroke
  57     ];
  58
  59     var pointsNotOnEllipseStroke = [
  60        {x: 0, y: 100}, // outside ellipse
  61        {x: 160, y: 160}, // outside ellipse
  62        {x: 95, y: 100} // inside ellipse
  63     ];
  64
  65     var pointsInRect = [
  66        {x: 230, y: 190},
  67        {x: 280, y: 245},
  68        {x: 310, y: 275}
  69     ];
  70
  71     var pointsNotInRect = [
  72         {x: 337, y: 298}, // outer stroke
  73         {x: 0, y: 0}
  74     ];
  75
  76     var pointsOnRectStroke = [
  77        {x: 208, y: 168}, // outer stroke
  78        {x: 237, y: 198}, // inner stroke
  79        {x: 301, y: 305}, // outer stroke
  80        {x: 302, y: 264} // inner stroke
  81     ];
  82
  83     var pointsNotOnRectStroke = [
  84        {x: 0, y: 100}, // outside rect
  85        {x: 375, y: 315}, // outside rect
  86        {x: 267, y: 233} // inside rect
  87     ];
  88
  89     ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
  90     rectElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
  91     pointsInEllipse.forEach( function(point) {
  92         var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
  93         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse contains point at (" + point.x + ", " + point.y + ")\n";
  94     });
  95     pointsNotInEllipse.forEach( function(point) {
  96         var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
  97         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse does not contain point at (" + point.x + ", " + point.y + ")\n";
  98     });
  99     pointsInRect.forEach( function(point) {
 100         var pass = (rectElement == document.elementFromPoint(point.x, point.y));
 101         resultString += ((pass) ? "PASS" : "FAIL") + " rect contains point at (" + point.x + ", " + point.y + ")\n";
 102     });
 103     pointsNotInRect.forEach( function(point) {
 104         var pass = (rectElement != document.elementFromPoint(point.x, point.y));
 105         resultString += ((pass) ? "PASS" : "FAIL") + " rect does not contain point at (" + point.x + ", " + point.y + ")\n";
 106     });
 107
 108     ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
 109     rectElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
 110     pointsOnEllipseStroke.forEach( function(point) {
 111         var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
 112         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke contains point at (" + point.x + ", " + point.y + ")\n";
 113     });
 114     pointsNotOnEllipseStroke.forEach( function(point) {
 115         var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
 116         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
 117     });
 118     pointsOnRectStroke.forEach( function(point) {
 119         var pass = (rectElement == document.elementFromPoint(point.x, point.y));
 120         resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke contains point at (" + point.x + ", " + point.y + ")\n";
 121     });
 122     pointsNotOnRectStroke.forEach( function(point) {
 123         var pass = (rectElement != document.elementFromPoint(point.x, point.y));
 124         resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
 125     });
 126     document.getElementById("console").innerHTML = resultString;
 127     ]]></script>
 128  </body>
 129 </html>