Index: LayoutTests/svg/dynamic-updates/update-ellipse.html |
diff --git a/LayoutTests/svg/dynamic-updates/update-ellipse.html b/LayoutTests/svg/dynamic-updates/update-ellipse.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..046f31aa75b087cf15ffd69fbcabdc71776da171 |
--- /dev/null |
+++ b/LayoutTests/svg/dynamic-updates/update-ellipse.html |
@@ -0,0 +1,149 @@ |
+<!DOCTYPE html> |
fs
2014/12/03 15:56:06
Put the tests in svg/hittest/ instead?
|
+<html> |
+<body onload="onPageLoad()"> |
+Regression test for <a href="http://crbug.com/436214">http://crbug.com/436214</a>. This tests updating SVG <circle> and <ellipse> elements having various stroke styles. If this test passes, you will see "PASS" below. |
+<p id="result">WAITING - click within each of the elliptical 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"/> |
+ |
+ <circle pointer-events="none" stroke-width="10px" stroke="#888" stroke-opacity="0.2" fill="none" cx="380" cy="100" r="20"/> |
+ <ellipse pointer-events="none" stroke-width="20px" stroke="#00a0f0" stroke-dasharray="30, 10" stroke-opacity="0.2" fill="none" cx="130" cy="110" rx="100" ry="50"/> |
+ <ellipse pointer-events="none" stroke-width="30px" stroke="#9000f0" stroke-linejoin="bevel" stroke-opacity="0.2" fill="none" cx="150" cy="400" rx="70" ry="50"/> |
+ <ellipse pointer-events="none" stroke-width="20px" stroke="#0000f0" stroke-opacity="0.2" fill="none" cx="400" cy="370" rx="40" ry="70"/> |
+ |
+ <circle id="ell0" cursor="move" stroke-width="10px" stroke="#888" stroke-linecap="square" fill="none" cx="380" cy="100" r="20"/> |
+ <ellipse id="ell1" cursor="move" stroke-width="20px" stroke="#00a0f0" stroke-dasharray="30, 10" fill="none" cx="130" cy="110" rx="100" ry="50"/> |
+ <ellipse id="ell2" cursor="move" stroke-width="30px" stroke="#9000f0" stroke-linejoin="bevel" fill="none" cx="150" cy="400" rx="70" ry="50"/> |
+ <ellipse id="ell3" cursor="move" stroke-width="20px" stroke="#0000f0" stroke-linecap="round" fill="none" cx="400" cy="370" rx="40" ry="70"/> |
+</svg> |
+<script type="text/javascript"> |
+if (window.testRunner) { |
+ testRunner.dumpAsText(); |
+ testRunner.waitUntilDone(); |
+} |
+ |
+function withinEllipse(x, y, cx, cy, rx, ry) { |
+ var t1 = (x - cx) / rx, |
+ t2 = (y - cy) / ry; |
+ return t1 * t1 + t2 * t2 <= 1; |
+} |
+ |
+var result = document.getElementById("result"), |
+ svg = document.getElementById("svg"), |
+ ell0 = document.getElementById("ell0"), |
+ ell1 = document.getElementById("ell1"), |
+ ell2 = document.getElementById("ell2"), |
+ ell3 = document.getElementById("ell3"); |
+function onPageLoad() { |
+ var activeAreas = [{ |
+ ellipse: ell0, |
+ click: function () { |
+ this.ellipse.setAttribute("r", "50"); |
+ } |
+ }, { |
+ ellipse: ell1, |
+ click: function () { |
+ this.ellipse.setAttribute("cx", "170"); |
+ } |
+ }, { |
+ ellipse: ell2, |
+ click: function () { |
+ this.ellipse.setAttribute("cy", "350"); |
+ } |
+ }, { |
+ ellipse: ell3, |
+ click: function () { |
+ this.ellipse.setAttribute("cx", "390"); |
+ this.ellipse.setAttribute("cy", "340"); |
+ } |
+ }]; |
+ |
+ for (var i = 0; i < activeAreas.length; ++i) { |
+ var aa = activeAreas[i]; |
+ aa.cx = +aa.ellipse.getAttribute("cx"); |
+ aa.cy = +aa.ellipse.getAttribute("cy"); |
+ if (aa.ellipse.localName == "circle") { |
+ aa.rx = aa.ry = +aa.ellipse.getAttribute("r"); |
+ } else { |
+ aa.rx = +aa.ellipse.getAttribute("rx"); |
+ aa.ry = +aa.ellipse.getAttribute("ry"); |
+ } |
+ } |
+ |
+ 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 (withinEllipse(x, y, aa.cx, aa.cy, aa.rx, aa.ry)) { |
+ aa.click(); |
+ activeAreas.splice(i, 1); |
+ break; |
+ } |
+ } |
+ |
+ if (activeAreas.length == 0) { |
+ document.removeEventListener("mousedown", onMouseDown, false); |
+ |
+ result.textContent = "FAIL"; |
+ |
+ var tests = [ |
+ { x: 383, y: 120, expectedElem: svg }, |
+ { x: 429, y: 103, expectedElem: ell0 }, |
+ |
+ { x: 225, y: 116, expectedElem: svg }, |
+ { x: 263, y: 87, expectedElem: ell1 }, |
+ |
+ { x: 119, y: 355, expectedElem: svg }, |
+ { x: 150, y: 455, expectedElem: svg }, |
+ { x: 223, y: 392, expectedElem: svg }, |
+ { x: 201, y: 309, expectedElem: ell2 }, |
+ |
+ { x: 364, y: 345, expectedElem: svg }, |
+ { x: 402, y: 269, expectedElem: ell3 } |
+ ]; |
+ |
+ 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") |
fs
2014/12/03 15:56:06
This looks a bit odd... =) Could you make the "def
|
+ 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.cx) << 0, (y0 + aa.cy) << 0); |
+ eventSender.mouseDown(); |
+ eventSender.mouseUp(); |
+ }); |
+ } |
+ }); |
+} |
+</script> |
+</body> |
+</html> |