LayoutTests/svg/hittest/svg-ellipse-non-scale-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 {
  13           fill: green;
  14           fill-opacity: 0.1;
  15           stroke-width: 100px;
  16           stroke: green;
  17           stroke-opacity: 0.2;
  18       }
  19     </style>
  20   </head>
  21   <body>
  22     <p>Tests for WK80423 - Make sure hit testing works properly on stroked ellipses with non-scaling stroke.</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(2)">
  28         <ellipse id="ellipse" cx="75" cy="75" rx="100" ry="50" vector-effect="non-scaling-stroke"/>
  29       </g>
  30     </svg>
  31
  32     <script><![CDATA[
  33     if (window.layoutTestController)
  34       layoutTestController.dumpAsText();
  35
  36     var resultString = "";
  37     var ellipseElement = document.getElementById("ellipse");
  38
  39     var pointsInEllipse = [
  40        {x: 150, y: 150},
  41        {x: 275, y: 150},
  42        {x: 250, y: 225}
  43     ];
  44
  45     var pointsNotInEllipse = [
  46         {x: 0, y: 0},
  47         {x: 275, y: 250}
  48     ];
  49
  50     var pointsOnEllipseStroke = [
  51        {x: 275, y: 250}, // outer stroke
  52        {x: 300, y: 200} // inner stroke
  53     ];
  54
  55     var pointsNotOnEllipseStroke = [
  56        {x: 375, y: 375}, // outside ellipse
  57        {x: 0, y: 0}, // outside ellipse
  58        {x: 150, y: 150} // inside ellipse
  59     ];
  60
  61     ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
  62     pointsInEllipse.forEach( function(point) {
  63         var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
  64         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse contains point at (" + point.x + ", " + point.y + ")\n";
  65     });
  66     pointsNotInEllipse.forEach( function(point) {
  67         var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
  68         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse does not contain point at (" + point.x + ", " + point.y + ")\n";
  69     });
  70
  71     ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
  72     pointsOnEllipseStroke.forEach( function(point) {
  73         var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
  74         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke contains point at (" + point.x + ", " + point.y + ")\n";
  75     });
  76     pointsNotOnEllipseStroke.forEach( function(point) {
  77         var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
  78         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
  79     });
  80     document.getElementById("console").innerHTML = resultString;
  81     ]]></script>
  82  </body>
  83 </html>