Index: LayoutTests/svg/hittest/ellipse-hittest.html |
diff --git a/LayoutTests/svg/hittest/ellipse-hittest.html b/LayoutTests/svg/hittest/ellipse-hittest.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..46474f2e3d411b489fcdaff2d04ac8d56531445e |
--- /dev/null |
+++ b/LayoutTests/svg/hittest/ellipse-hittest.html |
@@ -0,0 +1,113 @@ |
+<!DOCTYPE html> |
+This tests hit testing on ellipses with continuous strokes. If this test passes, you will see "PASS" below. |
+<p id="result">Running test...</p> |
+<style> |
+#ell1:hover, |
+#ell2:hover, |
+#ell3:hover { |
+ stroke: #9f9; |
+} |
+</style> |
+<svg id="svg" width="450" height="300" version="1.1"> |
+ <rect id="border" x="0.5" y="0.5" width="449" height="299" stroke="#000" stroke-width="1" fill="none"/> |
+ |
+ <ellipse id="ell1" cx="130" cy="30" rx="100" ry="15" stroke="#ccf" fill="none" stroke-width="20"/> |
+ <ellipse pointer-events="none" cx="130" cy="30" rx="110" ry="25" stroke="gray" fill="none"/> |
+ <ellipse pointer-events="none" cx="130" cy="30" rx="90" ry="5" stroke="gray" fill="none"/> |
+ |
+ <ellipse id="ell2" cx="130" cy="180" rx="100" ry="100" stroke="#ccf" fill="none" stroke-width="30"/> |
+ <ellipse pointer-events="none" cx="130" cy="180" rx="115" ry="115" stroke="gray" fill="none"/> |
+ <ellipse pointer-events="none" cx="130" cy="180" rx="85" ry="85" stroke="gray" fill="none"/> |
+ |
+ <ellipse id="ell3" cx="340" cy="155" rx="15" ry="100" stroke="#ccf" fill="none" stroke-width="20" transform="rotate(30 340 155)"/> |
+ <ellipse pointer-events="none" cx="340" cy="155" rx="25" ry="110" stroke="gray" fill="none" transform="rotate(30 340 155)"/> |
+ <ellipse pointer-events="none" cx="340" cy="155" rx="5" ry="90" stroke="gray" fill="none" transform="rotate(30 340 155)"/> |
+</svg> |
+<script type="text/javascript"> |
+if (window.testRunner) { |
+ testRunner.dumpAsText(); |
+ testRunner.waitUntilDone(); |
+} |
+ |
+var svg = document.getElementById("svg"); |
+window.onload = function () { |
+ var tests = [ |
+ { x: 27, y: 46, expectedElemId: "svg" }, |
+ { x: 98, y: 33, expectedElemId: "svg" }, |
+ { x: 202, y: 53, expectedElemId: "svg" }, |
+ { x: 98, y: 142, expectedElemId: "svg" }, |
+ { x: 130, y: 180, expectedElemId: "svg" }, |
+ { x: 91, y: 247, expectedElemId: "svg" }, |
+ { x: 27, y: 240, expectedElemId: "svg" }, |
+ { x: 336, y: 166, expectedElemId: "svg" }, |
+ { x: 337, y: 214, expectedElemId: "svg" }, |
+ |
+ { x: 31, y: 18, expectedElemId: "ell1" }, |
+ { x: 209, y: 31, expectedElemId: "ell1" }, |
+ { x: 132, y: 47, expectedElemId: "ell1" }, |
+ { x: 229, y: 43, expectedElemId: "ell1" }, |
+ |
+ { x: 245, y: 180, expectedElemId: "ell2" }, |
+ { x: 45, y: 180, expectedElemId: "ell2" }, |
+ { x: 130, y: 95, expectedElemId: "ell2" }, |
+ { x: 130, y: 295, expectedElemId: "ell2" }, |
+ { x: 212, y: 255, expectedElemId: "ell2" }, |
+ |
+ { x: 280, y: 235, expectedElemId: "ell3" }, |
+ { x: 301, y: 247, expectedElemId: "ell3" }, |
+ { x: 378, y: 88, expectedElemId: "ell3" }, |
+ { x: 335, y: 122, expectedElemId: "ell3" }, |
+ { x: 333, y: 190, expectedElemId: "ell3" }, |
+ { x: 377, y: 66, expectedElemId: "ell3" } |
+ ]; |
+ |
+ var bcr = svg.getBoundingClientRect(), |
+ x0 = bcr.left << 0, |
+ y0 = bcr.top << 0; |
+ |
+ for (var i = 0; i < tests.length; ++i) { |
+ var test = tests[i], |
+ elem = document.elementFromPoint(x0 + test.x, y0 + test.y), |
+ expectedElem = document.getElementById(test.expectedElemId), |
+ success; |
+ if (elem !== 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). |
+ markPoint(test.x, test.y, success); |
+ } |
+ |
+ if (result.textContent == "Running test...") |
+ result.textContent = "PASS"; |
+ |
+ if (window.testRunner) |
+ testRunner.notifyDone(); |
+}; |
+ |
+function markPoint(testX, testY, success) { |
+ var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle"); |
+ dot.setAttribute("pointer-events", "none"); |
+ dot.setAttribute("cx", testX); |
+ dot.setAttribute("cy", testY); |
+ dot.setAttribute("r", "2"); |
+ if (success) |
+ dot.setAttribute("fill", "#0c0"); |
+ else |
+ 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", testX + 4); |
+ label.setAttribute("y", testY); |
+ label.textContent = "(" + testX + ", " + testY + ")"; |
+ if (success) |
+ label.setAttribute("fill", "#0c0"); |
+ else |
+ label.setAttribute("fill", "red"); |
+ svg.appendChild(label); |
+} |
+</script> |