| <!DOCTYPE html> |
| <html> |
| <body onload="onPageLoad()"> |
| Regression test for <a href="http://crbug.com/436214">http://crbug.com/436214</a>. This tests updating SVG <rect> elements having various stroke styles. If this test passes, you will see "PASS" below. |
| <p id="result">WAITING - click within each of the rectangular areas for results</p> |
| <svg id="svg" width="820" height="500" version="1.1"> |
| <rect fill="none" stroke="black" x="0.5" y="0.5" width="819" height="499"/> |
| |
| |
| |
| <rect pointer-events="none" stroke-width="10px" stroke="#aaa" stroke-opacity="0.2" fill="none" x="360" y="80" width="40" height="40"/> |
| <rect pointer-events="none" stroke-width="20px" stroke="#f0a000" stroke-dasharray="30, 10" stroke-opacity="0.2" fill="none" x="60" y="60" width="200" height="50"/> |
| <rect pointer-events="none" stroke-width="40px" stroke="#d000d0" stroke-linejoin="bevel" stroke-opacity="0.2" fill="none" x="80" y="350" width="140" height="100"/> |
| <rect pointer-events="none" stroke-width="20px" stroke="#d00000" stroke-opacity="0.2" fill="none" x="400" y="340" width="80" height="140"/> |
| <rect pointer-events="none" stroke-width="20px" stroke="#f39" stroke-opacity="0.2" stroke-miterlimit="0" fill="none" x="130" y="180" width="130" height="50"/> |
| |
| <rect id="rect0" cursor="move" stroke-width="10px" stroke="#aaa" stroke-linecap="square" fill="none" x="360" y="80" width="40" height="40"/> |
| <rect id="rect1" cursor="move" stroke-width="20px" stroke="#f0a000" stroke-dasharray="30, 10" fill="none" x="60" y="60" width="200" height="50"/> |
| <rect id="rect2" cursor="move" stroke-width="40px" stroke="#d000d0" stroke-linejoin="bevel" fill="none" x="80" y="350" width="140" height="100"/> |
| <rect id="rect3" cursor="move" stroke-width="20px" stroke="#d00000" stroke-linecap="round" fill="none" x="400" y="340" width="80" height="140"/> |
| <rect id="rect4" cursor="move" stroke-width="20px" stroke="#f39" stroke-miterlimit="0" fill="none" x="130" y="180" width="130" height="50"/> |
| |
| |
| |
| <rect pointer-events="none" stroke-width="20px" stroke="#0c0" stroke-opacity="0.2" fill="none" x="545" y="70" width="160" height="60"/> |
| <rect pointer-events="none" stroke-width="20px" stroke="#090" stroke-opacity="0.2" fill="none" x="545" y="170" width="160" height="60"/> |
| <rect pointer-events="none" stroke-width="20px" stroke="#060" stroke-opacity="0.2" fill="none" x="545" y="270" width="160" height="60"/> |
| <rect pointer-events="none" stroke-width="20px" stroke="#030" stroke-opacity="0.2" fill="none" x="545" y="370" width="160" height="60"/> |
| |
| <rect id="rect10" cursor="move" stroke-width="20px" stroke="#0c0" fill="none" x="545" y="70" width="160" height="60"/> |
| <rect id="rect11" cursor="move" stroke-width="20px" stroke="#090" fill="none" x="545" y="170" width="160" height="60"/> |
| <rect id="rect12" cursor="move" stroke-width="20px" stroke="#060" fill="none" x="545" y="270" width="160" height="60"/> |
| <rect id="rect13" cursor="move" stroke-width="20px" stroke="#030" fill="none" x="545" y="370" width="160" height="60"/> |
| </svg> |
| <script type="text/javascript"> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var result = document.getElementById("result"), |
| svg = document.getElementById("svg"), |
| rect0 = document.getElementById("rect0"), |
| rect1 = document.getElementById("rect1"), |
| rect2 = document.getElementById("rect2"), |
| rect3 = document.getElementById("rect3"), |
| rect4 = document.getElementById("rect4"), |
| rect10 = document.getElementById("rect10"), |
| rect11 = document.getElementById("rect11"), |
| rect12 = document.getElementById("rect12"), |
| rect13 = document.getElementById("rect13"); |
| function onPageLoad() { |
| var activeAreas = [{ |
| rect: rect0, |
| click: function () { |
| this.rect.setAttribute("width", "100"); |
| this.rect.setAttribute("height", "100"); |
| } |
| }, { |
| rect: rect1, |
| click: function () { |
| this.rect.setAttribute("x", "100"); |
| } |
| }, { |
| rect: rect2, |
| click: function () { |
| this.rect.setAttribute("y", "300"); |
| } |
| }, { |
| rect: rect3, |
| click: function () { |
| this.rect.setAttribute("x", "350"); |
| this.rect.setAttribute("y", "270"); |
| } |
| }, { |
| rect: rect4, |
| click: function () { |
| this.rect.setAttribute("width", "170"); |
| this.rect.setAttribute("height", "80"); |
| } |
| }, { |
| rect: rect10, |
| click: function () { |
| this.rect.setAttribute("stroke-dasharray", "30, 10"); |
| } |
| }, { |
| rect: rect11, |
| click: function () { |
| this.rect.setAttribute("stroke-miterlimit", "0"); |
| } |
| }, { |
| rect: rect12, |
| click: function () { |
| this.rect.setAttribute("stroke-linejoin", "bevel"); |
| } |
| }, { |
| rect: rect13, |
| click: function () { |
| this.rect.setAttribute("x", "575"); |
| this.rect.setAttribute("y", "400"); |
| this.rect.setAttribute("stroke-linecap", "square"); |
| } |
| }]; |
| |
| for (var i = 0; i < activeAreas.length; ++i) { |
| var aa = activeAreas[i]; |
| aa.x1 = +aa.rect.getAttribute("x"); |
| aa.y1 = +aa.rect.getAttribute("y"); |
| aa.x2 = aa.x1 + (+aa.rect.getAttribute("width")); |
| aa.y2 = aa.y1 + (+aa.rect.getAttribute("height")); |
| } |
| |
| var bcr = svg.getBoundingClientRect(), |
| x0 = bcr.left << 0, |
| y0 = bcr.top << 0; |
| |
| requestAnimationFrame(function () { |
| document.addEventListener("mousedown", function onMouseDown(event) { |
| var x = event.clientX - x0, |
| y = event.clientY - y0; |
| for (var i = 0; i < activeAreas.length; ++i) { |
| var aa = activeAreas[i]; |
| if (aa.x1 <= x && x <= aa.x2 |
| && aa.y1 <= y && y <= aa.y2) { |
| aa.click(); |
| activeAreas.splice(i, 1); |
| break; |
| } |
| } |
| |
| if (activeAreas.length == 0) { |
| document.removeEventListener("mousedown", onMouseDown, false); |
| |
| result.textContent = "Running tests..."; |
| |
| var tests = [ |
| { x: 400, y: 118, expectedElem: svg }, |
| { x: 460, y: 180, expectedElem: rect0 }, |
| |
| { x: 263, y: 83, expectedElem: svg }, |
| { x: 200, y: 62, expectedElem: rect1 }, |
| |
| { x: 235, y: 112, expectedElem: svg }, |
| { x: 160, y: 350, expectedElem: svg }, |
| { x: 233, y: 413, expectedElem: svg }, |
| { x: 160, y: 300, expectedElem: rect2 }, |
| |
| { x: 400, y: 350, expectedElem: svg }, |
| { x: 350, y: 370, expectedElem: rect3 }, |
| |
| { x: 200, y: 230, expectedElem: svg }, |
| { x: 267, y: 236, expectedElem: svg }, |
| { x: 304, y: 218, expectedElem: rect4 }, |
| { x: 307, y: 266, expectedElem: svg }, |
| |
| { x: 707, y: 65, expectedElem: svg }, |
| { x: 710, y: 130, expectedElem: rect10 }, |
| |
| { x: 712, y: 164, expectedElem: svg }, |
| { x: 712, y: 216, expectedElem: rect11 }, |
| |
| { x: 712, y: 264, expectedElem: svg }, |
| { x: 712, y: 316, expectedElem: rect12 }, |
| |
| { x: 610, y: 425, expectedElem: svg }, |
| { x: 739, y: 394, expectedElem: rect13 } |
| ]; |
| |
| for (var i = 0; i < tests.length; ++i) { |
| var test = tests[i], |
| elem = document.elementFromPoint(x0 + test.x, y0 + test.y), |
| success; |
| if (elem !== test.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). |
| var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle"); |
| dot.setAttribute("pointer-events", "none"); |
| dot.setAttribute("cx", test.x); |
| dot.setAttribute("cy", test.y); |
| dot.setAttribute("r", "2"); |
| if (!success) 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", test.x + 4); |
| label.setAttribute("y", test.y); |
| label.textContent = "(" + test.x + ", " + test.y + ")"; |
| if (!success) label.setAttribute("fill", "red"); |
| svg.appendChild(label); |
| } |
| |
| if (result.textContent == "Running tests...") |
| result.textContent = "PASS"; |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| }, false); |
| |
| if (window.eventSender) { |
| // The bug would only occur if the shape attributes were modified |
| // within a mouse event handler when the mouse cursor was within |
| // the shape. |
| activeAreas.slice(0).map(function (aa, i, activeAreas) { |
| eventSender.mouseMoveTo((x0 + aa.x1 + (aa.x2 - aa.x1) / 2) << 0, (y0 + aa.y1 + (aa.y2 - aa.y1) / 2) << 0); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| }); |
| } |
| }); |
| } |
| </script> |
| </body> |
| </html> |
