Chromium Code Reviews Chromium Code Reviews
Issue 745383007:
Fix an issue where hit detection could fail on rect and ellipse shapes (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
|
fs
2014/12/03 15:56:06
Put the tests in svg/hittest/ instead?
| |
| 2 <html> | |
| 3 <body onload="onPageLoad()"> | |
| 4 Regression test for <a href="http://crbug.com/436214">http://crbug.com/436214</a >. This tests updating SVG <circle> and <ellipse> elements having va rious stroke styles. If this test passes, you will see "PASS" below. | |
| 5 <p id="result">WAITING - click within each of the elliptical areas for results</ p> | |
| 6 <svg id="svg" width="550" height="500" version="1.1"> | |
| 7 <rect fill="none" stroke="black" x="0.5" y="0.5" width="499" height="499"/> | |
| 8 | |
| 9 <circle pointer-events="none" stroke-width="10px" stroke="#888" stroke-opaci ty="0.2" fill="none" cx="380" cy="100" r="20"/> | |
| 10 <ellipse pointer-events="none" stroke-width="20px" stroke="#00a0f0" stroke-d asharray="30, 10" stroke-opacity="0.2" fill="none" cx="130" cy="110" rx="100" ry ="50"/> | |
| 11 <ellipse pointer-events="none" stroke-width="30px" stroke="#9000f0" stroke-l inejoin="bevel" stroke-opacity="0.2" fill="none" cx="150" cy="400" rx="70" ry="5 0"/> | |
| 12 <ellipse pointer-events="none" stroke-width="20px" stroke="#0000f0" stroke-o pacity="0.2" fill="none" cx="400" cy="370" rx="40" ry="70"/> | |
| 13 | |
| 14 <circle id="ell0" cursor="move" stroke-width="10px" stroke="#888" stroke-lin ecap="square" fill="none" cx="380" cy="100" r="20"/> | |
| 15 <ellipse id="ell1" cursor="move" stroke-width="20px" stroke="#00a0f0" stroke -dasharray="30, 10" fill="none" cx="130" cy="110" rx="100" ry="50"/> | |
| 16 <ellipse id="ell2" cursor="move" stroke-width="30px" stroke="#9000f0" stroke -linejoin="bevel" fill="none" cx="150" cy="400" rx="70" ry="50"/> | |
| 17 <ellipse id="ell3" cursor="move" stroke-width="20px" stroke="#0000f0" stroke -linecap="round" fill="none" cx="400" cy="370" rx="40" ry="70"/> | |
| 18 </svg> | |
| 19 <script type="text/javascript"> | |
| 20 if (window.testRunner) { | |
| 21 testRunner.dumpAsText(); | |
| 22 testRunner.waitUntilDone(); | |
| 23 } | |
| 24 | |
| 25 function withinEllipse(x, y, cx, cy, rx, ry) { | |
| 26 var t1 = (x - cx) / rx, | |
| 27 t2 = (y - cy) / ry; | |
| 28 return t1 * t1 + t2 * t2 <= 1; | |
| 29 } | |
| 30 | |
| 31 var result = document.getElementById("result"), | |
| 32 svg = document.getElementById("svg"), | |
| 33 ell0 = document.getElementById("ell0"), | |
| 34 ell1 = document.getElementById("ell1"), | |
| 35 ell2 = document.getElementById("ell2"), | |
| 36 ell3 = document.getElementById("ell3"); | |
| 37 function onPageLoad() { | |
| 38 var activeAreas = [{ | |
| 39 ellipse: ell0, | |
| 40 click: function () { | |
| 41 this.ellipse.setAttribute("r", "50"); | |
| 42 } | |
| 43 }, { | |
| 44 ellipse: ell1, | |
| 45 click: function () { | |
| 46 this.ellipse.setAttribute("cx", "170"); | |
| 47 } | |
| 48 }, { | |
| 49 ellipse: ell2, | |
| 50 click: function () { | |
| 51 this.ellipse.setAttribute("cy", "350"); | |
| 52 } | |
| 53 }, { | |
| 54 ellipse: ell3, | |
| 55 click: function () { | |
| 56 this.ellipse.setAttribute("cx", "390"); | |
| 57 this.ellipse.setAttribute("cy", "340"); | |
| 58 } | |
| 59 }]; | |
| 60 | |
| 61 for (var i = 0; i < activeAreas.length; ++i) { | |
| 62 var aa = activeAreas[i]; | |
| 63 aa.cx = +aa.ellipse.getAttribute("cx"); | |
| 64 aa.cy = +aa.ellipse.getAttribute("cy"); | |
| 65 if (aa.ellipse.localName == "circle") { | |
| 66 aa.rx = aa.ry = +aa.ellipse.getAttribute("r"); | |
| 67 } else { | |
| 68 aa.rx = +aa.ellipse.getAttribute("rx"); | |
| 69 aa.ry = +aa.ellipse.getAttribute("ry"); | |
| 70 } | |
| 71 } | |
| 72 | |
| 73 var bcr = svg.getBoundingClientRect(), | |
| 74 x0 = bcr.left << 0, | |
| 75 y0 = bcr.top << 0; | |
| 76 | |
| 77 requestAnimationFrame(function () { | |
| 78 document.addEventListener("mousedown", function onMouseDown(event) { | |
| 79 var x = event.clientX - x0, | |
| 80 y = event.clientY - y0; | |
| 81 for (var i = 0; i < activeAreas.length; ++i) { | |
| 82 var aa = activeAreas[i]; | |
| 83 if (withinEllipse(x, y, aa.cx, aa.cy, aa.rx, aa.ry)) { | |
| 84 aa.click(); | |
| 85 activeAreas.splice(i, 1); | |
| 86 break; | |
| 87 } | |
| 88 } | |
| 89 | |
| 90 if (activeAreas.length == 0) { | |
| 91 document.removeEventListener("mousedown", onMouseDown, false); | |
| 92 | |
| 93 result.textContent = "FAIL"; | |
| 94 | |
| 95 var tests = [ | |
| 96 { x: 383, y: 120, expectedElem: svg }, | |
| 97 { x: 429, y: 103, expectedElem: ell0 }, | |
| 98 | |
| 99 { x: 225, y: 116, expectedElem: svg }, | |
| 100 { x: 263, y: 87, expectedElem: ell1 }, | |
| 101 | |
| 102 { x: 119, y: 355, expectedElem: svg }, | |
| 103 { x: 150, y: 455, expectedElem: svg }, | |
| 104 { x: 223, y: 392, expectedElem: svg }, | |
| 105 { x: 201, y: 309, expectedElem: ell2 }, | |
| 106 | |
| 107 { x: 364, y: 345, expectedElem: svg }, | |
| 108 { x: 402, y: 269, expectedElem: ell3 } | |
| 109 ]; | |
| 110 | |
| 111 for (var i = 0; i < tests.length; ++i) { | |
| 112 var test = tests[i]; | |
| 113 try { | |
| 114 var elem = document.elementFromPoint(x0 + test.x, y0 + t est.y); | |
| 115 if (elem !== test.expectedElem) { | |
| 116 result.textContent = "FAIL - unexpected element at ( " + test.x + ", " + test.y + ")"; | |
| 117 return; | |
| 118 } | |
| 119 } finally { | |
| 120 // Draw a dot and a label at the test point (helps with identification). | |
| 121 svg.insertAdjacentHTML("beforeend", | |
| 122 '<circle pointer-events="none" cx ="' + test.x + '" cy="' + test.y + '" r="2"/>' + | |
| 123 '<text pointer-events="none" x="' + (test.x + 4) + '" y="' + test.y + '">(' + test.x + ', ' + test.y + ')</text>' ); | |
| 124 } | |
| 125 } | |
| 126 | |
| 127 if (result.textContent == "FAIL") | |
|
fs
2014/12/03 15:56:06
This looks a bit odd... =) Could you make the "def
| |
| 128 result.textContent = "PASS"; | |
| 129 | |
| 130 if (window.testRunner) | |
| 131 testRunner.notifyDone(); | |
| 132 } | |
| 133 }, false); | |
| 134 | |
| 135 if (window.eventSender) { | |
| 136 // The bug would only occur if the shape attributes were modified | |
| 137 // within a 'mousedown' handler when the mouse was pressed within | |
| 138 // the shape. | |
| 139 activeAreas.slice(0).map(function (aa, i, activeAreas) { | |
| 140 eventSender.mouseMoveTo((x0 + aa.cx) << 0, (y0 + aa.cy) << 0); | |
| 141 eventSender.mouseDown(); | |
| 142 eventSender.mouseUp(); | |
| 143 }); | |
| 144 } | |
| 145 }); | |
| 146 } | |
| 147 </script> | |
| 148 </body> | |
| 149 </html> | |
| OLD | NEW |
