third_party/WebKit/LayoutTests/svg/hittest/ellipse-hittest.html

   1 <!DOCTYPE html>
   2 This tests hit testing on ellipses with continuous strokes. If this test passes, you will see "PASS" below.
   3 <p id="result">Running test...</p>
   4 <style>
   5 #ell1:hover,
   6 #ell2:hover,
   7 #ell3:hover {
   8     stroke: #9f9;
   9 }
  10 </style>
  11 <svg id="svg" width="450" height="300" version="1.1">
  12     <rect id="border" x="0.5" y="0.5" width="449" height="299" stroke="#000" stroke-width="1" fill="none"/>
  13
  14     <ellipse id="ell1" cx="130" cy="30" rx="100" ry="15" stroke="#ccf" fill="none" stroke-width="20"/>
  15     <ellipse pointer-events="none" cx="130" cy="30" rx="110" ry="25" stroke="gray" fill="none"/>
  16     <ellipse pointer-events="none" cx="130" cy="30" rx="90" ry="5" stroke="gray" fill="none"/>
  17
  18     <ellipse id="ell2" cx="130" cy="180" rx="100" ry="100" stroke="#ccf" fill="none" stroke-width="30"/>
  19     <ellipse pointer-events="none" cx="130" cy="180" rx="115" ry="115" stroke="gray" fill="none"/>
  20     <ellipse pointer-events="none" cx="130" cy="180" rx="85" ry="85" stroke="gray" fill="none"/>
  21
  22     <ellipse id="ell3" cx="340" cy="155" rx="15" ry="100" stroke="#ccf" fill="none" stroke-width="20" transform="rotate(30 340 155)"/>
  23     <ellipse pointer-events="none" cx="340" cy="155" rx="25" ry="110" stroke="gray" fill="none" transform="rotate(30 340 155)"/>
  24     <ellipse pointer-events="none" cx="340" cy="155" rx="5" ry="90" stroke="gray" fill="none" transform="rotate(30 340 155)"/>
  25 </svg>
  26 <script type="text/javascript">
  27 if (window.testRunner) {
  28     testRunner.dumpAsText();
  29     testRunner.waitUntilDone();
  30 }
  31
  32 var svg = document.getElementById("svg");
  33 window.onload = function () {
  34     var tests = [
  35         { x: 27, y: 46, expectedElemId: "svg" },
  36         { x: 98, y: 33, expectedElemId: "svg" },
  37         { x: 202, y: 53, expectedElemId: "svg" },
  38         { x: 98, y: 142, expectedElemId: "svg" },
  39         { x: 130, y: 180, expectedElemId: "svg" },
  40         { x: 91, y: 247, expectedElemId: "svg" },
  41         { x: 27, y: 240, expectedElemId: "svg" },
  42         { x: 336, y: 166, expectedElemId: "svg" },
  43         { x: 337, y: 214, expectedElemId: "svg" },
  44
  45         { x: 31, y: 18, expectedElemId: "ell1" },
  46         { x: 209, y: 31, expectedElemId: "ell1" },
  47         { x: 132, y: 47, expectedElemId: "ell1" },
  48         { x: 229, y: 43, expectedElemId: "ell1" },
  49
  50         { x: 245, y: 180, expectedElemId: "ell2" },
  51         { x: 45, y: 180, expectedElemId: "ell2" },
  52         { x: 130, y: 95, expectedElemId: "ell2" },
  53         { x: 130, y: 295, expectedElemId: "ell2" },
  54         { x: 212, y: 255, expectedElemId: "ell2" },
  55
  56         { x: 280, y: 235, expectedElemId: "ell3" },
  57         { x: 301, y: 247, expectedElemId: "ell3" },
  58         { x: 378, y: 88, expectedElemId: "ell3" },
  59         { x: 335, y: 122, expectedElemId: "ell3" },
  60         { x: 333, y: 190, expectedElemId: "ell3" },
  61         { x: 377, y: 66, expectedElemId: "ell3" }
  62     ];
  63
  64     var bcr = svg.getBoundingClientRect(),
  65         x0 = bcr.left << 0,
  66         y0 = bcr.top << 0;
  67
  68     for (var i = 0; i < tests.length; ++i) {
  69         var test = tests[i],
  70             elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
  71             expectedElem = document.getElementById(test.expectedElemId),
  72             success;
  73         if (elem !== expectedElem) {
  74             success = false;
  75             result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
  76         } else {
  77             success = true;
  78         }
  79
  80         // Draw a dot and a label at the test point (helps with identification).
  81         markPoint(test.x, test.y, success);
  82     }
  83
  84     if (result.textContent == "Running test...")
  85         result.textContent = "PASS";
  86
  87     if (window.testRunner)
  88         testRunner.notifyDone();
  89 };
  90
  91 function markPoint(testX, testY, success) {
  92     var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  93     dot.setAttribute("pointer-events", "none");
  94     dot.setAttribute("cx", testX);
  95     dot.setAttribute("cy", testY);
  96     dot.setAttribute("r", "2");
  97     if (success)
  98         dot.setAttribute("fill", "#0c0");
  99     else
 100         dot.setAttribute("fill", "red");
 101     svg.appendChild(dot);
 102     var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
 103     label.setAttribute("pointer-events", "none");
 104     label.setAttribute("x", testX + 4);
 105     label.setAttribute("y", testY);
 106     label.textContent = "(" + testX + ", " + testY + ")";
 107     if (success)
 108         label.setAttribute("fill", "#0c0");
 109     else
 110         label.setAttribute("fill", "red");
 111     svg.appendChild(label);
 112 }
 113 </script>