third_party/WebKit/LayoutTests/svg/hittest/pointer-events-all2.html

   1 <!DOCTYPE html>
   2 Regression test for <a href="http://crbug.com/350338">http://crbug.com/350338</a>. This tests pointer-events:all on various shapes to make sure stroke:none and fill:none does not affect event processing. If this test passes, you will see "PASS" below.
   3 <p id="result">Running test...</p>
   4 <style>
   5 body {
   6     height: 1000px;
   7 }
   8 .testShape {
   9     pointer-events: all;
  10 }
  11 </style>
  12 <svg id="svg" width="690" height="200" version="1.1">
  13     <!-- stroke:none & fill:none -->
  14     <rect id="rect3" class="testShape" x="20" y="30" width="60" height="40" stroke="none" stroke-width="10" fill="none"/>
  15     <ellipse id="ellipse3" class="testShape" cx="150" cy="50" rx="20" ry="35" transform="rotate(20 150 50)" stroke="none" stroke-width="10" fill="none"/>
  16     <line id="line3" class="testShape" x1="220" y1="20" x2="280" y2="80" stroke="none" stroke-width="10" fill="none"/>
  17     <polyline id="polyline3" class="testShape" points="320,20 380,40 350,60 380,80 310,80" stroke="none" stroke-width="10" fill="none"/>
  18     <polygon id="polygon3" class="testShape" points="430,30 440,60 460,80 490,30 460,20" stroke="none" stroke-width="10" fill="none"/>
  19     <path id="path3" class="testShape" d="M610,20 a100 100 0 0 0 -70 70 a100 100 0 0 0 70 -70 z" stroke="none" stroke-width="10" fill="none"/>
  20
  21     <use id="useRect3" xlink:href="#rect3" class="testShape" y="100"/>
  22     <use id="useEllipse3" xlink:href="#ellipse3" class="testShape" y="100"/>
  23     <use id="useLine3" xlink:href="#line3" class="testShape" y="100"/>
  24     <use id="usePolyline3" xlink:href="#polyline3" class="testShape" y="100"/>
  25     <use id="usePolygon3" xlink:href="#polygon3" class="testShape" y="100"/>
  26     <use id="usePath3" xlink:href="#path3" class="testShape" y="100"/>
  27 </svg>
  28 <script type="text/javascript">
  29 if (window.testRunner) {
  30     testRunner.dumpAsText();
  31     testRunner.waitUntilDone();
  32 }
  33
  34 var svg = document.getElementById("svg");
  35 window.onload = function () {
  36     var tests = [
  37         { x: 16, y: 36, expectedElemId: "rect3" },
  38         { x: 54, y: 58, expectedElemId: "rect3" },
  39         { x: 28, y: 77, expectedElemId: "svg" },
  40
  41         { x: 139, y: 20, expectedElemId: "svg" },
  42         { x: 129, y: 41, expectedElemId: "ellipse3" },
  43         { x: 149, y: 55, expectedElemId: "ellipse3" },
  44         { x: 166, y: 70, expectedElemId: "ellipse3" },
  45         { x: 128, y: 82, expectedElemId: "svg" },
  46
  47         { x: 219, y: 19, expectedElemId: "svg" },
  48         { x: 242, y: 40, expectedElemId: "line3" },
  49         { x: 253, y: 64, expectedElemId: "svg" },
  50
  51         { x: 318, y: 84, expectedElemId: "polyline3" },
  52         { x: 323, y: 47, expectedElemId: "polyline3" },
  53         { x: 324, y: 18, expectedElemId: "polyline3" },
  54         { x: 375, y: 64, expectedElemId: "svg" },
  55
  56         { x: 426, y: 28, expectedElemId: "polygon3" },
  57         { x: 455, y: 44, expectedElemId: "polygon3" },
  58         { x: 445, y: 71, expectedElemId: "polygon3" },
  59         { x: 461, y: 85, expectedElemId: "polygon3" },
  60         { x: 497, y: 26, expectedElemId: "svg" },
  61
  62         { x: 536, y: 95, expectedElemId: "path3" },
  63         { x: 560, y: 70, expectedElemId: "path3" },
  64         { x: 555, y: 54, expectedElemId: "path3" },
  65         { x: 595, y: 38, expectedElemId: "path3" },
  66         { x: 614, y: 16, expectedElemId: "path3" },
  67         { x: 569, y: 33, expectedElemId: "svg" }
  68     ];
  69
  70     // Copy all of the tests for the <use> elements.
  71     var elemIdMap = {
  72         "rect3": "useRect3",
  73         "ellipse3": "useEllipse3",
  74         "line3": "useLine3",
  75         "polyline3": "usePolyline3",
  76         "polygon3": "usePolygon3",
  77         "path3": "usePath3"
  78     };
  79     tests.push.apply(tests, tests.map(function (test, i, tests) {
  80         return {
  81             x: test.x,
  82             y: test.y + 100,
  83             expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemId
  84         };
  85     }));
  86
  87     var bcr = svg.getBoundingClientRect(),
  88         x0 = bcr.left << 0,
  89         y0 = bcr.top << 0;
  90
  91     for (var i = 0; i < tests.length; ++i) {
  92         var test = tests[i],
  93             elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
  94             expectedElem = document.getElementById(test.expectedElemId),
  95             success;
  96         if (elem !== expectedElem) {
  97             success = false;
  98             result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
  99         } else {
 100             success = true;
 101         }
 102
 103         // Draw a dot and a label at the test point (helps with identification).
 104         markPoint(test.x, test.y, success);
 105     }
 106
 107     if (result.textContent == "Running test...")
 108         result.textContent = "PASS";
 109
 110     if (window.testRunner)
 111         testRunner.notifyDone();
 112 };
 113
 114 function markPoint(testX, testY, success) {
 115     var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 116     dot.setAttribute("pointer-events", "none");
 117     dot.setAttribute("cx", testX);
 118     dot.setAttribute("cy", testY);
 119     dot.setAttribute("r", "2");
 120     if (success)
 121         dot.setAttribute("fill", "#0c0");
 122     else
 123         dot.setAttribute("fill", "red");
 124     svg.appendChild(dot);
 125     var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
 126     label.setAttribute("pointer-events", "none");
 127     label.setAttribute("x", testX + 4);
 128     label.setAttribute("y", testY);
 129     label.textContent = "(" + testX + ", " + testY + ")";
 130     if (success)
 131         label.setAttribute("fill", "#0c0");
 132     else
 133         label.setAttribute("fill", "red");
 134     svg.appendChild(label);
 135 }
 136 </script>