third_party/WebKit/LayoutTests/svg/hittest/svg-isPointInFill.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 onload="runTest()" 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.testRunner)
  32       testRunner.dumpAsText();
  33
  34     var pointsInEllipse = [
  35        {x: 150, y: 150},
  36        {x: 275, y: 150},
  37        {x: 250, y: 225}
  38     ];
  39
  40     var pointsNotInEllipse = [
  41         {x: 0, y: 0},
  42         {x: 275, y: 250}
  43     ];
  44
  45     var pointsOnEllipseStroke = [
  46        {x: 275, y: 250}, // outer stroke
  47        {x: 300, y: 200} // inner stroke
  48     ];
  49
  50     var pointsNotOnEllipseStroke = [
  51        {x: 375, y: 375}, // outside ellipse
  52        {x: 0, y: 0}, // outside ellipse
  53        {x: 150, y: 150} // inside ellipse
  54     ];
  55
  56     var resultString = "";
  57
  58     function testFill(ellipseElement, pointerEvents, visibility, expectedResultInEllipse, expectedResultNotInEllipse) {
  59         var mySVGPoint = ellipseElement.ownerSVGElement.createSVGPoint();
  60         ellipseElement.setAttribute("visibility", visibility);
  61         resultString += "Testing fill with pointer event " + pointerEvents + " and visibility=" + visibility + "\n";
  62         ellipseElement.setAttribute("pointer-events", pointerEvents);
  63         var count = 0;
  64         pointsInEllipse.forEach( function(point) {
  65             mySVGPoint.x = point.x;
  66             mySVGPoint.y = point.y;
  67             var found = ellipseElement.isPointInFill(mySVGPoint);
  68             var pass = found == expectedResultInEllipse[count++];
  69             resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse " + (found ? "contains" : "does not contain") + " point at (" + point.x + ", " + point.y + ")\n";
  70         });
  71         count = 0;
  72         pointsNotInEllipse.forEach( function(point) {
  73             mySVGPoint.x = point.x;
  74             mySVGPoint.y = point.y;
  75             var found = ellipseElement.isPointInFill(mySVGPoint);
  76             var pass = found == expectedResultNotInEllipse[count++];
  77             resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse " + (!found ? "does not contain" : "contains") + " point at (" + point.x + ", " + point.y + ")\n";
  78         });
  79         resultString += "\n";
  80     }
  81     function testStroke(ellipseElement, pointerEvents, visibility, expectedResultInEllipse, expectedResultNotInEllipse) {
  82         var mySVGPoint = ellipseElement.ownerSVGElement.createSVGPoint();
  83         ellipseElement.setAttribute("visibility", visibility);
  84         resultString += "Testing stroke with pointer event " + pointerEvents + " and visibility=" + visibility + "\n";
  85         ellipseElement.setAttribute("pointer-events", pointerEvents);
  86         var count = 0;
  87         pointsOnEllipseStroke.forEach( function(point) {
  88             mySVGPoint.x = point.x;
  89             mySVGPoint.y = point.y;
  90             var found = ellipseElement.isPointInStroke(mySVGPoint);
  91             var pass = found == expectedResultInEllipse[count++];
  92             resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse stroke " + (found ? "contains" : "does not contain") + " point at (" + point.x + ", " + point.y + ")\n";
  93         });
  94         count = 0;
  95         pointsNotOnEllipseStroke.forEach( function(point) {
  96             mySVGPoint.x = point.x;
  97             mySVGPoint.y = point.y;
  98             var found = ellipseElement.isPointInStroke(mySVGPoint);
  99             var pass = found == expectedResultNotInEllipse[count++];
 100             resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse stroke " + (!found ? "does not contain" : "contains") + " point at (" + point.x + ", " + point.y + ")\n";
 101         });
 102         resultString += "\n";
 103     }
 104
 105 function runTest() {
 106
 107     var ellipseElement = document.getElementById("ellipse");
 108     var mySVGPoint = ellipseElement.ownerSVGElement.createSVGPoint();
 109
 110     resultString += "Testing isPointInFill/isPointInStroke\n";
 111     try {
 112         ellipseElement.isPointInFill();
 113         resultString += "isPointInFill() throws no exception\n";
 114     } catch(ex) {
 115         resultString += "isPointInFill() throws exception\n";
 116     }
 117     try {
 118         ellipseElement.isPointInStroke();
 119         resultString += "isPointInStroke() throws no exception\n";
 120     } catch(ex) {
 121         resultString += "isPointInStroke() throws exception\n";
 122     }
 123     testFill(ellipseElement, "visibleFill", "visible", [true, true, true], [false, false]);
 124     testFill(ellipseElement, "visibleStroke", "visible", [false, false, false], [false, false]);
 125     testFill(ellipseElement, "visiblePainted", "visible", [true, true, true], [false, false]);
 126     testFill(ellipseElement, "fill", "visible", [true, true, true], [false, false]);
 127     testFill(ellipseElement, "stroke", "visible", [false, false, false], [false, false]);
 128     testFill(ellipseElement, "painted", "visible", [true, true, true], [false, false]);
 129     testFill(ellipseElement, "visible", "visible", [true, true, true], [false, false]);
 130     testFill(ellipseElement, "all", "visible", [true, true, true], [false, false]);
 131     testFill(ellipseElement, "none", "visible", [false, false, false], [false, false]);
 132
 133     testFill(ellipseElement, "visibleFill", "hidden", [false, false, false], [false, false]);
 134     testFill(ellipseElement, "visibleStroke", "hidden", [false, false, false], [false, false]);
 135     testFill(ellipseElement, "visiblePainted", "hidden", [false, false, false], [false, false]);
 136     testFill(ellipseElement, "fill", "hidden", [true, true, true], [false, false]);
 137     testFill(ellipseElement, "stroke", "hidden", [false, false, false], [false, false]);
 138     testFill(ellipseElement, "painted", "hidden", [true, true, true], [false, false]);
 139     testFill(ellipseElement, "visible", "hidden", [false, false, false], [false, false]);
 140     testFill(ellipseElement, "all", "hidden", [true, true, true], [false, false]);
 141     testFill(ellipseElement, "none", "hidden", [false, false, false], [false, false]);
 142
 143
 144     testStroke(ellipseElement, "visibleFill", "visible", [false, false], [false, false, false]);
 145     testStroke(ellipseElement, "visibleStroke", "visible", [true, true], [false, false, false]);
 146     testStroke(ellipseElement, "visiblePainted", "visible", [true, true], [false, false, false]);
 147     testStroke(ellipseElement, "fill", "visible", [false, false], [false, false, false]);
 148     testStroke(ellipseElement, "stroke", "visible", [true, true], [false, false, false]);
 149     testStroke(ellipseElement, "painted", "visible", [true, true], [false, false, false]);
 150     testStroke(ellipseElement, "visible", "visible", [true, true], [false, false, false]);
 151     testStroke(ellipseElement, "all", "visible", [true, true], [false, false, false]);
 152     testStroke(ellipseElement, "none", "visible", [false, false], [false, false, false]);
 153
 154     testStroke(ellipseElement, "visibleFill", "hidden", [false, false], [false, false, false]);
 155     testStroke(ellipseElement, "visibleStroke", "hidden", [false, false], [false, false, false]);
 156     testStroke(ellipseElement, "visiblePainted", "hidden", [false, false], [false, false, false]);
 157     testStroke(ellipseElement, "fill", "hidden", [false, false], [false, false, false]);
 158     testStroke(ellipseElement, "stroke", "hidden", [true, true], [false, false, false]);
 159     testStroke(ellipseElement, "painted", "hidden", [true, true], [false, false, false]);
 160     testStroke(ellipseElement, "visible", "hidden", [false, false], [false, false, false]);
 161     testStroke(ellipseElement, "all", "hidden", [true, true], [false, false, false]);
 162     testStroke(ellipseElement, "none", "hidden", [false, false], [false, false, false]);
 163
 164     document.getElementById("console").innerHTML = resultString;
 165 }
 166     ]]></script>
 167  </body>
 168 </html>