third_party/WebKit/LayoutTests/svg/hittest/svg-shapes-non-scale-stroke.html

   1 <html xmlns='http://www.w3.org/1999/xhtml'>
   2   <head>
   3     <style type="text/css">
   4       #svgRoot {
   5         margin: 0px;
   6         padding: 0px;
   7         position: absolute;
   8         top: 0px;
   9         left: 0px;
  10       }
  11       .nonscaletest {
  12         stroke-width: 20px;
  13         fill: #ccc;
  14         fill-opacity: 0.4;
  15       }
  16       #ellipse1, #ellipse2 {
  17           stroke: #f31900;
  18       }
  19       #line1, #line2 {
  20           stroke: #3364c2;
  21       }
  22       #rect1, #rect2 {
  23           stroke: #f7d72b;
  24       }
  25       #curve1, #curve2 {
  26           stroke: #44c400;
  27       }
  28     </style>
  29     <script type="text/javascript">
  30       function enter(event) {
  31         event.target.setAttribute("stroke-opacity", "0.4");
  32       };
  33       function exit(event) {
  34         event.target.setAttribute("stroke-opacity", "0.7");
  35       };
  36     </script>
  37   </head>
  38   <body>
  39     <p>Tests for WK82628 - Make sure hit testing works properly on ellipses, rects, lines and curves with non-scaling stroke.</p>
  40     <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p>
  41     <pre id="console"></pre>
  42
  43     <svg id="svgRoot" width="500px" height="300px" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  44       <!-- The following are all small and scaled up -->
  45       <g transform="translate(30, 0) scale(5, 5)">
  46         <ellipse id="ellipse1" class="nonscaletest" cx="10" cy="10" rx="10" ry="5" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
  47         <rect id="rect1" class="nonscaletest" x="30" y="10" width="10" height="7" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7"  stroke-dasharray="15,25" stroke-linecap="round"/>
  48         <path id="line1" class="nonscaletest" d="M20 20 l 10 10z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
  49         <g transform="translate(-6, 12)">
  50           <path id="curve1" class="nonscaletest" d="M5,20 C10,10 25,10 25,20 S40,30 40,20" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
  51         </g>
  52       </g>
  53       <!-- The following are all large and scaled down -->
  54       <g transform="translate(275, 0) scale(0.2, 0.2)">
  55         <ellipse id="ellipse2" class="nonscaletest" cx="250" cy="250" rx="250" ry="125" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" class="nonscaletest" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
  56         <rect id="rect2" class="nonscaletest" x="750" y="250" width="250" height="175" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
  57         <path id="line2" class="nonscaletest" d="M500 500 l 250 250z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
  58         <g transform="translate(-150, 300)">
  59           <path id="curve2" class="nonscaletest" d="M125,500 C250,250 625,250 600,500 S1000,750 1000,500" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/>
  60         </g>
  61       </g>
  62     </svg>
  63     <script type="text/javascript">
  64       // document.body.onmousedown = function(evt) { console.log("mouse down at " + evt.x + "," + evt.y); }
  65       if (window.testRunner)
  66         testRunner.dumpAsText();
  67
  68       var resultString = "";
  69       var ellipse1 = document.getElementById("ellipse1");
  70       var ellipse2 = document.getElementById("ellipse2"); // 250px to the right of ellipse1
  71       var pointsOnEllipse1Stroke = [
  72          {x: 29, y: 37},
  73          {x: 34, y: 48},
  74          {x: 94, y: 70},
  75          {x: 100, y: 78}
  76       ];
  77       var pointsNotOnEllipse1Stroke = [
  78          {x: 33, y: 18},
  79          {x: 81, y: 49},
  80          {x: 129, y: 78}
  81       ];
  82
  83       var rect1 = document.getElementById("rect1");
  84       var rect2 = document.getElementById("rect2"); // 250px to the right of rect1
  85       var pointsOnRect1Stroke = [
  86          {x: 172, y: 45},
  87          {x: 183, y: 63},
  88          {x: 220, y: 82},
  89          {x: 233, y: 90}
  90       ];
  91       var pointsNotOnRect1Stroke = [
  92          {x: 205, y: 68}
  93       ];
  94
  95       var line1 = document.getElementById("line1");
  96       var line2 = document.getElementById("line2"); // 250px to the right of line1
  97       var pointsOnLine1Stroke = [
  98          {x: 127, y: 97},
  99          {x: 174, y: 146}
 100       ];
 101       var pointsNotOnLine1Stroke = [
 102          {x: 138, y: 131},
 103          {x: 177, y: 126}
 104       ];
 105
 106       var curve1 = document.getElementById("curve1");
 107       var curve2 = document.getElementById("curve2"); // 250px to the right of curve1
 108       var pointsOnCurve1Stroke = [
 109          {x: 24, y: 159},
 110          {x: 107, y: 126},
 111          {x: 169, y: 193},
 112          {x: 195, y: 159}
 113       ];
 114       var pointsNotOnCurve1Stroke = [
 115          {x: 5, y: 164},
 116          {x: 81, y: 140},
 117          {x: 161, y: 177}
 118       ];
 119
 120       pointsOnEllipse1Stroke.forEach( function(point) {
 121         var pass = (ellipse1 == document.elementFromPoint(point.x, point.y));
 122         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
 123         var pass = (ellipse2 == document.elementFromPoint(point.x + 250, point.y));
 124         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
 125       });
 126       pointsNotOnEllipse1Stroke.forEach( function(point) {
 127         var pass = (ellipse1 != document.elementFromPoint(point.x, point.y));
 128         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
 129         var pass = (ellipse2 != document.elementFromPoint(point.x + 250, point.y));
 130         resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
 131       });
 132
 133       pointsOnRect1Stroke.forEach( function(point) {
 134         var pass = (rect1 == document.elementFromPoint(point.x, point.y));
 135         resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
 136         var pass = (rect2 == document.elementFromPoint(point.x + 250, point.y));
 137         resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
 138       });
 139       pointsNotOnRect1Stroke.forEach( function(point) {
 140         var pass = (rect1 != document.elementFromPoint(point.x, point.y));
 141         resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
 142         var pass = (rect2 != document.elementFromPoint(point.x + 250, point.y));
 143         resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
 144       });
 145
 146       pointsOnLine1Stroke.forEach( function(point) {
 147         var pass = (line1 == document.elementFromPoint(point.x, point.y));
 148         resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
 149         var pass = (line2 == document.elementFromPoint(point.x + 250, point.y));
 150         resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
 151       });
 152       pointsNotOnLine1Stroke.forEach( function(point) {
 153         var pass = (line1 != document.elementFromPoint(point.x, point.y));
 154         resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
 155         var pass = (line2 != document.elementFromPoint(point.x + 250, point.y));
 156         resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
 157       });
 158
 159       pointsOnCurve1Stroke.forEach( function(point) {
 160         var pass = (curve1 == document.elementFromPoint(point.x, point.y));
 161         resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke contains point at (" + point.x + ", " + point.y + ")\n";
 162         var pass = (curve2 == document.elementFromPoint(point.x + 250, point.y));
 163         resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n";
 164       });
 165       pointsNotOnCurve1Stroke.forEach( function(point) {
 166         var pass = (curve1 != document.elementFromPoint(point.x, point.y));
 167         resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n";
 168         var pass = (curve2 != document.elementFromPoint(point.x + 250, point.y));
 169         resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n";
 170       });
 171
 172       document.getElementById("console").innerHTML = resultString;
 173     </script>
 174   </body>
 175 </html>