LayoutTests/svg/hittest/svg-ellipse.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.</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       <ellipse id="ellipse" cx="150" cy="150" rx="200" ry="100"/>
  28     </svg>
  29
  30     <script><![CDATA[
  31     if (window.layoutTestController)
  32       layoutTestController.dumpAsText();
  33
  34     var resultString = "";
  35     var ellipseElement = document.getElementById("ellipse");
  36
  37     var pointsInEllipse = [
  38        {x: 150, y: 150},
  39        {x: 275, y: 150},
  40        {x: 250, y: 225}
  41     ];
  42
  43     var pointsNotInEllipse = [
  44         {x: 0, y: 0},
  45         {x: 275, y: 250}
  46     ];
  47
  48     var pointsOnEllipseStroke = [
  49        {x: 275, y: 250}, // outer stroke
  50        {x: 300, y: 200} // inner stroke
  51     ];
  52
  53     var pointsNotOnEllipseStroke = [
  54        {x: 375, y: 375}, // outside ellipse
  55        {x: 0, y: 0}, // outside ellipse
  56        {x: 150, y: 150} // inside ellipse
  57     ];
  58
  59     ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
  60     pointsInEllipse.forEach( function(point) {
  61         var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
  62         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse contains point at (" + point.x + ", " + point.y + ")\n";
  63     });
  64     pointsNotInEllipse.forEach( function(point) {
  65         var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
  66         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse does not contain point at (" + point.x + ", " + point.y + ")\n";
  67     });
  68
  69     ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
  70     pointsOnEllipseStroke.forEach( function(point) {
  71         var pass = (ellipseElement == document.elementFromPoint(point.x, point.y));
  72         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke contains point at (" + point.x + ", " + point.y + ")\n";
  73     });
  74     pointsNotOnEllipseStroke.forEach( function(point) {
  75         var pass = (ellipseElement != document.elementFromPoint(point.x, point.y));
  76         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
  77     });
  78     document.getElementById("console").innerHTML = resultString;
  79     ]]></script>
  80  </body>
  81 </html>