Layout Test svg/dom/animated-tearoff-list-remove-target.html is a flaky timeout
[WebKit-https.git] / LayoutTests / svg / hittest / svg-small-path.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       #path {
13           fill: green;
14           fill-opacity: 0.1;
15           stroke: green;
16           stroke-opacity: 0.2;
17       }
18     </style>
19   </head>
20   <body>
21     <p>Tests for WK84117 - Make sure hit testing works properly on small paths.</p>
22     <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p>
23     <pre id="console"></pre>
24
25     <svg id="svgRoot" width="400px" height="400px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
26       <g transform="translate(100, 100) scale(100, 100)">
27         <path id="path" d="M 0 0 L 0.4 0 L 0.4 0.4 L 0 0.4 z" stroke-width="0.2" />
28       </g>
29     </svg>
30     
31     <script><![CDATA[
32     if (window.testRunner)
33       testRunner.dumpAsText();
34
35     var resultString = "";
36     var pathElement = document.getElementById("path");
37
38     var pointsInPath = [
39        {x: 106, y: 106},
40        {x: 124, y: 124},
41        {x: 121, y: 137}
42     ];
43
44     var pointsNotInPath = [
45         {x: 0, y: 0},
46         {x: 145, y: 145}
47     ];
48
49     var pointsOnPathStroke = [
50        {x: 122, y: 146}, // outer stroke
51        {x: 124, y: 136} // inner stroke
52     ];
53
54     var pointsNotOnPathStroke = [
55        {x: 160, y: 160}, // outside path
56        {x: 0, y: 0}, // outside path
57        {x: 120, y: 120} // inside path
58     ];
59
60     pathElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill
61     pointsInPath.forEach( function(point) {
62         var pass = (pathElement == document.elementFromPoint(point.x, point.y));
63         resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
64     });
65     pointsNotInPath.forEach( function(point) {
66         var pass = (pathElement != document.elementFromPoint(point.x, point.y));
67         resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n";
68     });
69
70     pathElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke
71     pointsOnPathStroke.forEach( function(point) {
72         var pass = (pathElement == document.elementFromPoint(point.x, point.y));
73         resultString += ((pass) ? "PASS" : "FAIL") + " path stroke contains point at (" + point.x + ", " + point.y + ")\n";
74     });
75     pointsNotOnPathStroke.forEach( function(point) {
76         var pass = (pathElement != document.elementFromPoint(point.x, point.y));
77         resultString += ((pass) ? "PASS" : "FAIL") + " path stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
78     });
79     document.getElementById("console").innerHTML = resultString;
80     ]]></script>
81  </body>
82 </html>