| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 This tests hit testing on rects with simple strokes, exercising optimized code f
or hit testing the rects' strokes. If this test passes, you will see "PASS" belo
w. |
| 3 <p id="result">Running test...</p> |
| 4 <style> |
| 5 #rect1:hover, |
| 6 #rect2:hover, |
| 7 #rect3:hover, |
| 8 #rect4:hover, |
| 9 #rect5:hover, |
| 10 #rect6:hover { |
| 11 stroke: #00f; |
| 12 } |
| 13 </style> |
| 14 <svg id="svg" width="420" height="300" version="1.1"> |
| 15 <rect id="border" x="0.5" y="0.5" width="419" height="299" stroke="#000" str
oke-width="1" fill="none"/> |
| 16 |
| 17 <rect id="rect1" x="70" y="30" width="100" height="80" stroke="#000" stroke-
width="20" fill="none"/> |
| 18 <rect id="rect2" x="40" y="150" width="50" height="120" stroke="#000" stroke
-width="20" fill="none" transform="rotate(20 65 210)"/> |
| 19 <rect id="rect3" x="140" y="200" width="150" height="70" stroke="#000" strok
e-width="20" fill="none"/> |
| 20 <rect id="rect4" x="220" y="50" width="60" height="10" stroke="#000" stroke-
width="20" fill="none"/> |
| 21 <rect id="rect5" x="230" y="100" width="10" height="60" stroke="#000" stroke
-width="20" fill="none" transform="rotate(-45 235 130)"/> |
| 22 <rect id="rect6" x="310" y="130" width="10" height="10" stroke="#000" stroke
-width="20" fill="none"/> |
| 23 </svg> |
| 24 <script type="text/javascript"> |
| 25 if (window.testRunner) { |
| 26 testRunner.dumpAsText(); |
| 27 testRunner.waitUntilDone(); |
| 28 } |
| 29 |
| 30 var svg = document.getElementById("svg"); |
| 31 window.onload = function () { |
| 32 var tests = [ |
| 33 { x: 30, y: 12, expectedElemId: "svg" }, |
| 34 { x: 118, y: 10, expectedElemId: "svg" }, |
| 35 { x: 197, y: 12, expectedElemId: "svg" }, |
| 36 { x: 201, y: 28, expectedElemId: "svg" }, |
| 37 { x: 15, y: 70, expectedElemId: "svg" }, |
| 38 { x: 97, y: 52, expectedElemId: "svg" }, |
| 39 { x: 149, y: 49, expectedElemId: "svg" }, |
| 40 { x: 85, y: 82, expectedElemId: "svg" }, |
| 41 { x: 122, y: 98, expectedElemId: "svg" }, |
| 42 { x: 154, y: 75, expectedElemId: "svg" }, |
| 43 { x: 72, y: 130, expectedElemId: "svg" }, |
| 44 { x: 48, y: 145, expectedElemId: "svg" }, |
| 45 { x: 31, y: 279, expectedElemId: "svg" }, |
| 46 { x: 28, y: 201, expectedElemId: "svg" }, |
| 47 { x: 71, y: 179, expectedElemId: "svg" }, |
| 48 { x: 43, y: 244, expectedElemId: "svg" }, |
| 49 { x: 74, y: 219, expectedElemId: "svg" }, |
| 50 { x: 94, y: 261, expectedElemId: "svg" }, |
| 51 { x: 126, y: 231, expectedElemId: "svg" }, |
| 52 { x: 146, y: 185, expectedElemId: "svg" }, |
| 53 { x: 173, y: 216, expectedElemId: "svg" }, |
| 54 { x: 225, y: 258, expectedElemId: "svg" }, |
| 55 { x: 247, y: 284, expectedElemId: "svg" }, |
| 56 { x: 286, y: 174, expectedElemId: "svg" }, |
| 57 { x: 254, y: 120, expectedElemId: "svg" }, |
| 58 { x: 203, y: 96, expectedElemId: "svg" }, |
| 59 { x: 244, y: 163, expectedElemId: "svg" }, |
| 60 { x: 300, y: 37, expectedElemId: "svg" }, |
| 61 { x: 335, y: 136, expectedElemId: "svg" }, |
| 62 |
| 63 // Test all four outer corner points of #rect1 |
| 64 { x: 60, y: 20, expectedElemId: "rect1" }, |
| 65 { x: 180, y: 20, expectedElemId: "rect1" }, |
| 66 { x: 180, y: 120, expectedElemId: "rect1" }, |
| 67 { x: 60, y: 120, expectedElemId: "rect1" }, |
| 68 // Test all four interior corner points of #rect1 |
| 69 { x: 80, y: 40, expectedElemId: "rect1" }, |
| 70 { x: 160, y: 40, expectedElemId: "rect1" }, |
| 71 { x: 160, y: 100, expectedElemId: "rect1" }, |
| 72 { x: 80, y: 100, expectedElemId: "rect1" }, |
| 73 |
| 74 { x: 67, y: 56, expectedElemId: "rect1" }, |
| 75 { x: 146, y: 27, expectedElemId: "rect1" }, |
| 76 { x: 173, y: 111, expectedElemId: "rect1" }, |
| 77 |
| 78 { x: 28, y: 242, expectedElemId: "rect2" }, |
| 79 { x: 51, y: 182, expectedElemId: "rect2" }, |
| 80 { x: 89, y: 155, expectedElemId: "rect2" }, |
| 81 |
| 82 { x: 136, y: 198, expectedElemId: "rect3" }, |
| 83 { x: 177, y: 270, expectedElemId: "rect3" }, |
| 84 { x: 275, y: 197, expectedElemId: "rect3" }, |
| 85 { x: 297, y: 233, expectedElemId: "rect3" }, |
| 86 |
| 87 { x: 235, y: 47, expectedElemId: "rect4" }, |
| 88 { x: 272, y: 61, expectedElemId: "rect4" }, |
| 89 { x: 290, y: 70, expectedElemId: "rect4" }, |
| 90 |
| 91 { x: 233, y: 140, expectedElemId: "rect5" }, |
| 92 |
| 93 { x: 312, y: 128, expectedElemId: "rect6" }, |
| 94 { x: 330, y: 150, expectedElemId: "rect6" } |
| 95 ]; |
| 96 |
| 97 var bcr = svg.getBoundingClientRect(), |
| 98 x0 = bcr.left << 0, |
| 99 y0 = bcr.top << 0; |
| 100 |
| 101 for (var i = 0; i < tests.length; ++i) { |
| 102 var test = tests[i], |
| 103 elem = document.elementFromPoint(x0 + test.x, y0 + test.y), |
| 104 expectedElem = document.getElementById(test.expectedElemId), |
| 105 success; |
| 106 if (elem !== expectedElem) { |
| 107 success = false; |
| 108 result.textContent = "FAIL - unexpected element at (" + test.x + ",
" + test.y + ")"; |
| 109 } else { |
| 110 success = true; |
| 111 } |
| 112 |
| 113 // Draw a dot and a label at the test point (helps with identification). |
| 114 markPoint(test.x, test.y, success); |
| 115 } |
| 116 |
| 117 if (result.textContent == "Running test...") |
| 118 result.textContent = "PASS"; |
| 119 |
| 120 if (window.testRunner) |
| 121 testRunner.notifyDone(); |
| 122 }; |
| 123 |
| 124 function markPoint(testX, testY, success) { |
| 125 var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle"); |
| 126 dot.setAttribute("pointer-events", "none"); |
| 127 dot.setAttribute("cx", testX); |
| 128 dot.setAttribute("cy", testY); |
| 129 dot.setAttribute("r", "2"); |
| 130 if (success) |
| 131 dot.setAttribute("fill", "#0c0"); |
| 132 else |
| 133 dot.setAttribute("fill", "red"); |
| 134 svg.appendChild(dot); |
| 135 var label = document.createElementNS("http://www.w3.org/2000/svg", "text"); |
| 136 label.setAttribute("pointer-events", "none"); |
| 137 label.setAttribute("x", testX + 4); |
| 138 label.setAttribute("y", testY); |
| 139 label.textContent = "(" + testX + ", " + testY + ")"; |
| 140 if (success) |
| 141 label.setAttribute("fill", "#0c0"); |
| 142 else |
| 143 label.setAttribute("fill", "red"); |
| 144 svg.appendChild(label); |
| 145 } |
| 146 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1048043002:
Fix pointer-events:all when stroke="none" (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master