| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 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 <rect> elements having various stroke styles. I
f this test passes, you will see "PASS" below. |
| 5 <p id="result">WAITING - click within each of the rectangular 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 <rect pointer-events="none" stroke-width="10px" stroke="#aaa" stroke-opacity
="0.2" fill="none" x="360" y="80" width="40" height="40"/> |
| 10 <rect pointer-events="none" stroke-width="20px" stroke="#f0a000" stroke-dash
array="30, 10" stroke-opacity="0.2" fill="none" x="60" y="60" width="200" height
="50"/> |
| 11 <rect pointer-events="none" stroke-width="40px" stroke="#d000d0" stroke-line
join="bevel" stroke-opacity="0.2" fill="none" x="80" y="350" width="140" height=
"100"/> |
| 12 <rect pointer-events="none" stroke-width="20px" stroke="#d00000" stroke-opac
ity="0.2" fill="none" x="400" y="340" width="80" height="140"/> |
| 13 |
| 14 <rect id="rect0" cursor="move" stroke-width="10px" stroke="#aaa" stroke-line
cap="square" fill="none" x="360" y="80" width="40" height="40"/> |
| 15 <rect id="rect1" cursor="move" stroke-width="20px" stroke="#f0a000" stroke-d
asharray="30, 10" fill="none" x="60" y="60" width="200" height="50"/> |
| 16 <rect id="rect2" cursor="move" stroke-width="40px" stroke="#d000d0" stroke-l
inejoin="bevel" fill="none" x="80" y="350" width="140" height="100"/> |
| 17 <rect id="rect3" cursor="move" stroke-width="20px" stroke="#d00000" stroke-l
inecap="round" fill="none" x="400" y="340" width="80" height="140"/> |
| 18 </svg> |
| 19 <script type="text/javascript"> |
| 20 if (window.testRunner) { |
| 21 testRunner.dumpAsText(); |
| 22 testRunner.waitUntilDone(); |
| 23 } |
| 24 |
| 25 var result = document.getElementById("result"), |
| 26 svg = document.getElementById("svg"), |
| 27 rect0 = document.getElementById("rect0"), |
| 28 rect1 = document.getElementById("rect1"), |
| 29 rect2 = document.getElementById("rect2"), |
| 30 rect3 = document.getElementById("rect3"); |
| 31 function onPageLoad() { |
| 32 var activeAreas = [{ |
| 33 rect: rect0, |
| 34 click: function () { |
| 35 this.rect.setAttribute("width", "100"); |
| 36 this.rect.setAttribute("height", "100"); |
| 37 } |
| 38 }, { |
| 39 rect: rect1, |
| 40 click: function () { |
| 41 this.rect.setAttribute("x", "100"); |
| 42 } |
| 43 }, { |
| 44 rect: rect2, |
| 45 click: function () { |
| 46 this.rect.setAttribute("y", "300"); |
| 47 } |
| 48 }, { |
| 49 rect: rect3, |
| 50 click: function () { |
| 51 this.rect.setAttribute("x", "350"); |
| 52 this.rect.setAttribute("y", "270"); |
| 53 } |
| 54 }]; |
| 55 |
| 56 for (var i = 0; i < activeAreas.length; ++i) { |
| 57 var aa = activeAreas[i]; |
| 58 aa.x1 = +aa.rect.getAttribute("x"); |
| 59 aa.y1 = +aa.rect.getAttribute("y"); |
| 60 aa.x2 = aa.x1 + (+aa.rect.getAttribute("width")); |
| 61 aa.y2 = aa.y1 + (+aa.rect.getAttribute("height")); |
| 62 } |
| 63 |
| 64 var bcr = svg.getBoundingClientRect(), |
| 65 x0 = bcr.left << 0, |
| 66 y0 = bcr.top << 0; |
| 67 |
| 68 requestAnimationFrame(function () { |
| 69 document.addEventListener("mousedown", function onMouseDown(event) { |
| 70 var x = event.clientX - x0, |
| 71 y = event.clientY - y0; |
| 72 for (var i = 0; i < activeAreas.length; ++i) { |
| 73 var aa = activeAreas[i]; |
| 74 if (aa.x1 <= x && x <= aa.x2 |
| 75 && aa.y1 <= y && y <= aa.y2) { |
| 76 aa.click(); |
| 77 activeAreas.splice(i, 1); |
| 78 break; |
| 79 } |
| 80 } |
| 81 |
| 82 if (activeAreas.length == 0) { |
| 83 document.removeEventListener("mousedown", onMouseDown, false); |
| 84 |
| 85 result.textContent = "FAIL"; |
| 86 |
| 87 var tests = [ |
| 88 { x: 400, y: 118, expectedElem: svg }, |
| 89 { x: 460, y: 180, expectedElem: rect0 }, |
| 90 |
| 91 { x: 263, y: 83, expectedElem: svg }, |
| 92 { x: 200, y: 62, expectedElem: rect1 }, |
| 93 |
| 94 { x: 235, y: 112, expectedElem: svg }, |
| 95 { x: 160, y: 350, expectedElem: svg }, |
| 96 { x: 233, y: 413, expectedElem: svg }, |
| 97 { x: 160, y: 300, expectedElem: rect2 }, |
| 98 |
| 99 { x: 400, y: 350, expectedElem: svg }, |
| 100 { x: 350, y: 370, expectedElem: rect3 } |
| 101 ]; |
| 102 |
| 103 for (var i = 0; i < tests.length; ++i) { |
| 104 var test = tests[i]; |
| 105 try { |
| 106 var elem = document.elementFromPoint(x0 + test.x, y0 + t
est.y); |
| 107 if (elem !== test.expectedElem) { |
| 108 result.textContent = "FAIL - unexpected element at (
" + test.x + ", " + test.y + ")"; |
| 109 return; |
| 110 } |
| 111 } finally { |
| 112 // Draw a dot and a label at the test point (helps with
identification). |
| 113 svg.insertAdjacentHTML("beforeend", |
| 114 '<circle pointer-events="none" cx
="' + test.x + '" cy="' + test.y + '" r="2"/>' + |
| 115 '<text pointer-events="none" x="'
+ (test.x + 4) + '" y="' + test.y + '">(' + test.x + ', ' + test.y + ')</text>'
); |
| 116 } |
| 117 } |
| 118 |
| 119 if (result.textContent == "FAIL") |
| 120 result.textContent = "PASS"; |
| 121 |
| 122 if (window.testRunner) |
| 123 testRunner.notifyDone(); |
| 124 } |
| 125 }, false); |
| 126 |
| 127 if (window.eventSender) { |
| 128 // The bug would only occur if the shape attributes were modified |
| 129 // within a 'mousedown' handler when the mouse was pressed within |
| 130 // the shape. |
| 131 activeAreas.slice(0).map(function (aa, i, activeAreas) { |
| 132 eventSender.mouseMoveTo((x0 + aa.x1 + (aa.x2 - aa.x1) / 2) << 0,
(y0 + aa.y1 + (aa.y2 - aa.y1) / 2) << 0); |
| 133 eventSender.mouseDown(); |
| 134 eventSender.mouseUp(); |
| 135 }); |
| 136 } |
| 137 }); |
| 138 } |
| 139 </script> |
| 140 </body> |
| 141 </html> |
| OLD | NEW |
|---|
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