| <!DOCTYPE html> |
| 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. |
| <p id="result">Running test...</p> |
| <style> |
| body { |
| height: 1000px; |
| } |
| .testShape { |
| pointer-events: all; |
| } |
| </style> |
| <svg id="svg" width="690" height="200" version="1.1"> |
| <!-- stroke:none & fill:none --> |
| <rect id="rect3" class="testShape" x="20" y="30" width="60" height="40" stroke="none" stroke-width="10" fill="none"/> |
| <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"/> |
| <line id="line3" class="testShape" x1="220" y1="20" x2="280" y2="80" stroke="none" stroke-width="10" fill="none"/> |
| <polyline id="polyline3" class="testShape" points="320,20 380,40 350,60 380,80 310,80" stroke="none" stroke-width="10" fill="none"/> |
| <polygon id="polygon3" class="testShape" points="430,30 440,60 460,80 490,30 460,20" stroke="none" stroke-width="10" fill="none"/> |
| <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"/> |
| |
| <use id="useRect3" xlink:href="#rect3" class="testShape" y="100"/> |
| <use id="useEllipse3" xlink:href="#ellipse3" class="testShape" y="100"/> |
| <use id="useLine3" xlink:href="#line3" class="testShape" y="100"/> |
| <use id="usePolyline3" xlink:href="#polyline3" class="testShape" y="100"/> |
| <use id="usePolygon3" xlink:href="#polygon3" class="testShape" y="100"/> |
| <use id="usePath3" xlink:href="#path3" class="testShape" y="100"/> |
| </svg> |
| <script type="text/javascript"> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var svg = document.getElementById("svg"); |
| window.onload = function () { |
| var tests = [ |
| { x: 16, y: 36, expectedElemId: "rect3" }, |
| { x: 54, y: 58, expectedElemId: "rect3" }, |
| { x: 28, y: 77, expectedElemId: "svg" }, |
| |
| { x: 139, y: 20, expectedElemId: "svg" }, |
| { x: 129, y: 41, expectedElemId: "ellipse3" }, |
| { x: 149, y: 55, expectedElemId: "ellipse3" }, |
| { x: 166, y: 70, expectedElemId: "ellipse3" }, |
| { x: 128, y: 82, expectedElemId: "svg" }, |
| |
| { x: 219, y: 19, expectedElemId: "svg" }, |
| { x: 242, y: 40, expectedElemId: "line3" }, |
| { x: 253, y: 64, expectedElemId: "svg" }, |
| |
| { x: 318, y: 84, expectedElemId: "polyline3" }, |
| { x: 323, y: 47, expectedElemId: "polyline3" }, |
| { x: 324, y: 18, expectedElemId: "polyline3" }, |
| { x: 375, y: 64, expectedElemId: "svg" }, |
| |
| { x: 426, y: 28, expectedElemId: "polygon3" }, |
| { x: 455, y: 44, expectedElemId: "polygon3" }, |
| { x: 445, y: 71, expectedElemId: "polygon3" }, |
| { x: 461, y: 85, expectedElemId: "polygon3" }, |
| { x: 497, y: 26, expectedElemId: "svg" }, |
| |
| { x: 536, y: 95, expectedElemId: "path3" }, |
| { x: 560, y: 70, expectedElemId: "path3" }, |
| { x: 555, y: 54, expectedElemId: "path3" }, |
| { x: 595, y: 38, expectedElemId: "path3" }, |
| { x: 614, y: 16, expectedElemId: "path3" }, |
| { x: 569, y: 33, expectedElemId: "svg" } |
| ]; |
| |
| // Copy all of the tests for the <use> elements. |
| var elemIdMap = { |
| "rect3": "useRect3", |
| "ellipse3": "useEllipse3", |
| "line3": "useLine3", |
| "polyline3": "usePolyline3", |
| "polygon3": "usePolygon3", |
| "path3": "usePath3" |
| }; |
| tests.push.apply(tests, tests.map(function (test, i, tests) { |
| return { |
| x: test.x, |
| y: test.y + 100, |
| expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemId |
| }; |
| })); |
| |
| var bcr = svg.getBoundingClientRect(), |
| x0 = bcr.left << 0, |
| y0 = bcr.top << 0; |
| |
| for (var i = 0; i < tests.length; ++i) { |
| var test = tests[i], |
| elem = document.elementFromPoint(x0 + test.x, y0 + test.y), |
| expectedElem = document.getElementById(test.expectedElemId), |
| success; |
| if (elem !== expectedElem) { |
| success = false; |
| result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")"; |
| } else { |
| success = true; |
| } |
| |
| // Draw a dot and a label at the test point (helps with identification). |
| markPoint(test.x, test.y, success); |
| } |
| |
| if (result.textContent == "Running test...") |
| result.textContent = "PASS"; |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }; |
| |
| function markPoint(testX, testY, success) { |
| var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle"); |
| dot.setAttribute("pointer-events", "none"); |
| dot.setAttribute("cx", testX); |
| dot.setAttribute("cy", testY); |
| dot.setAttribute("r", "2"); |
| if (success) |
| dot.setAttribute("fill", "#0c0"); |
| else |
| dot.setAttribute("fill", "red"); |
| svg.appendChild(dot); |
| var label = document.createElementNS("http://www.w3.org/2000/svg", "text"); |
| label.setAttribute("pointer-events", "none"); |
| label.setAttribute("x", testX + 4); |
| label.setAttribute("y", testY); |
| label.textContent = "(" + testX + ", " + testY + ")"; |
| if (success) |
| label.setAttribute("fill", "#0c0"); |
| else |
| label.setAttribute("fill", "red"); |
| svg.appendChild(label); |
| } |
| </script> |
