third_party/WebKit/LayoutTests/svg/hittest/pointer-events-all.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 that the values of the 'fill' and 'stroke' properties do 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="400" version="1.1">
  13     <!-- fill:none -->
  14     <rect id="rect1" class="testShape" x="20" y="30" width="60" height="40" stroke="#000" stroke-width="10" fill="none"/>
  15     <ellipse id="ellipse1" class="testShape" cx="150" cy="50" rx="20" ry="35" transform="rotate(20 150 50)" stroke="#000" stroke-width="10" fill="none"/>
  16     <line id="line1" class="testShape" x1="220" y1="20" x2="280" y2="80" stroke="#000" stroke-width="10" fill="none"/>
  17     <polyline id="polyline1" class="testShape" points="320,20 380,40 350,60 380,80 310,80" stroke="#000" stroke-width="10" fill="none"/>
  18     <polygon id="polygon1" class="testShape" points="430,30 440,60 460,80 490,30 460,20" stroke="#000" stroke-width="10" fill="none"/>
  19     <path id="path1" class="testShape" d="M610,20 a100 100 0 0 0 -70 70 a100 100 0 0 0 70 -70 z" stroke="#000" stroke-width="10" fill="none"/>
  20
  21     <!-- stroke:none -->
  22     <rect id="rect2" class="testShape" x="20" y="130" width="60" height="40" stroke="none" stroke-width="10" fill="#ccc"/>
  23     <ellipse id="ellipse2" class="testShape" cx="150" cy="150" rx="20" ry="35" transform="rotate(20 150 150)" stroke="none" stroke-width="10" fill="#ccc"/>
  24     <line id="line2" class="testShape" x1="220" y1="120" x2="280" y2="180" stroke="none" stroke-width="10" fill="#ccc"/>
  25     <polyline id="polyline2" class="testShape" points="320,120 380,140 350,160 380,180 310,180" stroke="none" stroke-width="10" fill="#ccc"/>
  26     <polygon id="polygon2" class="testShape" points="430,130 440,160 460,180 490,130 460,120" stroke="none" stroke-width="10" fill="#ccc"/>
  27     <path id="path2" class="testShape" d="M610,120 a100 100 0 0 0 -70 70 a100 100 0 0 0 70 -70 z" stroke="none" stroke-width="10" fill="#ccc"/>
  28
  29     <use id="useRect1" xlink:href="#rect1" class="testShape" y="200"/>
  30     <use id="useEllipse1" xlink:href="#ellipse1" class="testShape" y="200"/>
  31     <use id="useLine1" xlink:href="#line1" class="testShape" y="200"/>
  32     <use id="usePolyline1" xlink:href="#polyline1" class="testShape" y="200"/>
  33     <use id="usePolygon1" xlink:href="#polygon1" class="testShape" y="200"/>
  34     <use id="usePath1" xlink:href="#path1" class="testShape" y="200"/>
  35
  36     <use id="useRect2" xlink:href="#rect2" class="testShape" y="200"/>
  37     <use id="useEllipse2" xlink:href="#ellipse2" class="testShape" y="200"/>
  38     <use id="useLine2" xlink:href="#line2" class="testShape" y="200"/>
  39     <use id="usePolyline2" xlink:href="#polyline2" class="testShape" y="200"/>
  40     <use id="usePolygon2" xlink:href="#polygon2" class="testShape" y="200"/>
  41     <use id="usePath2" xlink:href="#path2" class="testShape" y="200"/>
  42 </svg>
  43 <script type="text/javascript">
  44 if (window.testRunner) {
  45     testRunner.dumpAsText();
  46     testRunner.waitUntilDone();
  47 }
  48
  49 var svg = document.getElementById("svg");
  50 window.onload = function () {
  51     var tests = [
  52         { x: 16, y: 36, expectedElemId: "rect1" },
  53         { x: 54, y: 58, expectedElemId: "rect1" },
  54         { x: 28, y: 77, expectedElemId: "svg" },
  55
  56         { x: 139, y: 20, expectedElemId: "svg" },
  57         { x: 129, y: 41, expectedElemId: "ellipse1" },
  58         { x: 149, y: 55, expectedElemId: "ellipse1" },
  59         { x: 166, y: 70, expectedElemId: "ellipse1" },
  60         { x: 128, y: 82, expectedElemId: "svg" },
  61
  62         { x: 219, y: 19, expectedElemId: "svg" },
  63         { x: 242, y: 40, expectedElemId: "line1" },
  64         { x: 253, y: 64, expectedElemId: "svg" },
  65
  66         { x: 318, y: 84, expectedElemId: "polyline1" },
  67         { x: 323, y: 47, expectedElemId: "polyline1" },
  68         { x: 324, y: 18, expectedElemId: "polyline1" },
  69         { x: 375, y: 64, expectedElemId: "svg" },
  70
  71         { x: 426, y: 28, expectedElemId: "polygon1" },
  72         { x: 455, y: 44, expectedElemId: "polygon1" },
  73         { x: 445, y: 71, expectedElemId: "polygon1" },
  74         { x: 461, y: 85, expectedElemId: "polygon1" },
  75         { x: 497, y: 26, expectedElemId: "svg" },
  76
  77         { x: 536, y: 95, expectedElemId: "path1" },
  78         { x: 560, y: 70, expectedElemId: "path1" },
  79         { x: 555, y: 54, expectedElemId: "path1" },
  80         { x: 595, y: 38, expectedElemId: "path1" },
  81         { x: 614, y: 16, expectedElemId: "path1" },
  82         { x: 569, y: 33, expectedElemId: "svg" }
  83     ];
  84
  85     // Create a copy of the tests for the stroke:none shapes, which are identical to the shapes
  86     // 100px above except for the 'stroke' and 'fill'.
  87     // Also create a copy of the tests for the stroke:none & fill:none shapes.
  88     var elemIdMap = {
  89         "rect1": "rect2",
  90         "ellipse1": "ellipse2",
  91         "line1": "line2",
  92         "polyline1": "polyline2",
  93         "polygon1": "polygon2",
  94         "path1": "path2"
  95     };
  96     var extraTests = tests.map(function (test, i, tests) {
  97         return {
  98             x: test.x,
  99             y: 100 + test.y,
 100             expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemId
 101         };
 102     })
 103     tests.push.apply(tests, extraTests);
 104
 105     // Now copy all of the tests again, for the <use> elements.
 106     elemIdMap = {
 107         "rect1": "useRect1",
 108         "ellipse1": "useEllipse1",
 109         "line1": "useLine1",
 110         "polyline1": "usePolyline1",
 111         "polygon1": "usePolygon1",
 112         "path1": "usePath1",
 113
 114         "rect2": "useRect2",
 115         "ellipse2": "useEllipse2",
 116         "line2": "useLine2",
 117         "polyline2": "usePolyline2",
 118         "polygon2": "usePolygon2",
 119         "path2": "usePath2"
 120     };
 121     tests.push.apply(tests, tests.map(function (test, i, tests) {
 122         return {
 123             x: test.x,
 124             y: test.y + 200,
 125             expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemId
 126         };
 127     }));
 128
 129     var bcr = svg.getBoundingClientRect(),
 130         x0 = bcr.left << 0,
 131         y0 = bcr.top << 0;
 132
 133     for (var i = 0; i < tests.length; ++i) {
 134         var test = tests[i],
 135             elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
 136             expectedElem = document.getElementById(test.expectedElemId),
 137             success;
 138         if (elem !== expectedElem) {
 139             success = false;
 140             result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
 141         } else {
 142             success = true;
 143         }
 144
 145         // Draw a dot and a label at the test point (helps with identification).
 146         markPoint(test.x, test.y, success);
 147     }
 148
 149     if (result.textContent == "Running test...")
 150         result.textContent = "PASS";
 151
 152     if (window.testRunner)
 153         testRunner.notifyDone();
 154 };
 155
 156 function markPoint(testX, testY, success) {
 157     var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 158     dot.setAttribute("pointer-events", "none");
 159     dot.setAttribute("cx", testX);
 160     dot.setAttribute("cy", testY);
 161     dot.setAttribute("r", "2");
 162     if (success)
 163         dot.setAttribute("fill", "#0c0");
 164     else
 165         dot.setAttribute("fill", "red");
 166     svg.appendChild(dot);
 167     var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
 168     label.setAttribute("pointer-events", "none");
 169     label.setAttribute("x", testX + 4);
 170     label.setAttribute("y", testY);
 171     label.textContent = "(" + testX + ", " + testY + ")";
 172     if (success)
 173         label.setAttribute("fill", "#0c0");
 174     else
 175         label.setAttribute("fill", "red");
 176     svg.appendChild(label);
 177 }
 178 </script>