Index: LayoutTests/svg/dynamic-updates/update-rect.html |
diff --git a/LayoutTests/svg/dynamic-updates/update-rect.html b/LayoutTests/svg/dynamic-updates/update-rect.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b18c64b52298e18c92d7de810a20261cbadb06fb |
--- /dev/null |
+++ b/LayoutTests/svg/dynamic-updates/update-rect.html |
@@ -0,0 +1,141 @@ |
+<!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="550" height="500" version="1.1"> |
+ <rect fill="none" stroke="black" x="0.5" y="0.5" width="499" 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 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"/> |
+</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"); |
+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"); |
+ } |
+ }]; |
+ |
+ 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 = "FAIL"; |
+ |
+ 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 } |
+ ]; |
+ |
+ for (var i = 0; i < tests.length; ++i) { |
+ var test = tests[i]; |
+ try { |
+ var elem = document.elementFromPoint(x0 + test.x, y0 + test.y); |
+ if (elem !== test.expectedElem) { |
+ result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")"; |
+ return; |
+ } |
+ } finally { |
+ // Draw a dot and a label at the test point (helps with identification). |
+ svg.insertAdjacentHTML("beforeend", |
+ '<circle pointer-events="none" cx="' + test.x + '" cy="' + test.y + '" r="2"/>' + |
+ '<text pointer-events="none" x="' + (test.x + 4) + '" y="' + test.y + '">(' + test.x + ', ' + test.y + ')</text>'); |
+ } |
+ } |
+ |
+ if (result.textContent == "FAIL") |
+ 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 'mousedown' handler when the mouse was pressed 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> |