Index: LayoutTests/svg/hittest/rect-miterlimit.html |
diff --git a/LayoutTests/svg/hittest/rect-miterlimit.html b/LayoutTests/svg/hittest/rect-miterlimit.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..2e942ae54ec9445e9711e605c9c8bc5f7106f8b7 |
--- /dev/null |
+++ b/LayoutTests/svg/hittest/rect-miterlimit.html |
@@ -0,0 +1,92 @@ |
+<!DOCTYPE html> |
+<html> |
+<body onload="onPageLoad()"> |
+Check that hit testing on a <rect> with various miterlimits around sqrt(2) works properly. If the test passes, you will see "PASS" below. |
+<p id="result">Running test...</p> |
+<svg id="svg" width="100" height="100" version="1.1"> |
+ <rect id="rect" fill="none" stroke="black" stroke-width="20" x="10" y="10" width="80" height="80"/> |
+</svg> |
+<script type="text/javascript"> |
+if (window.testRunner) { |
+ testRunner.dumpAsText(); |
+ testRunner.waitUntilDone(); |
+} |
+ |
+var result = document.getElementById("result"), |
+ svg = document.getElementById("svg"), |
+ rect = document.getElementById("rect"); |
+function onPageLoad() { |
+ // sqrt(2) = 1.414213562373095... |
+ var intervals = [ |
+ ["1.4", "1.5"], |
+ ["1.41", "1.42"], |
+ ["1.414", "1.415"], |
+ ["1.4142", "1.4143"], |
+ ["1.41421", "1.41422"], |
+ ["1.414213", "1.414214"] |
+ //,["1.4142135", "1.4142136"] |
+ ]; |
+ |
+ var bcr = svg.getBoundingClientRect(), |
+ x0 = bcr.left, |
+ y0 = bcr.top; |
+ |
+ var i = 0; |
+ requestAnimationFrame(function nextInterval() { |
+ if (i >= intervals.length) { |
+ if (result.textContent == "Running test...") |
+ result.textContent = "PASS"; |
+ |
+ if (window.testRunner) |
+ testRunner.notifyDone(); |
+ |
+ return; |
+ } |
+ |
+ var interval = intervals[i++]; |
+ |
+ if (!(interval[0] < Math.SQRT2)) |
+ result.textContent += " FAIL - Expecting " + interval[0] + " to be strictly less than sqrt(2)."; |
+ rect.setAttribute("stroke-miterlimit", interval[0]); |
+ var actualMiterlimit = getComputedStyle(rect, null).strokeMiterlimit; |
+ if (!(actualMiterlimit < Math.SQRT2)) |
+ result.textContent += " FAIL - After setting the miterlimit to " + interval[0] + ", expecting the computed miterlimit " + actualMiterlimit + " to be strictly less than sqrt(2)."; |
+ |
+ // Because the miterlimit is less than sqrt(2), the join style should |
+ // switch to "bevel". |
+ // i.e. if we get the element near the bottom right corner, it should be |
+ // the <svg> and not the <rect>. |
+ if (document.elementFromPoint(x0 + 97, y0 + 97) !== svg) { |
+ result.textContent += " FAIL - The element at point (97, 97) should be the <svg> element (miterlimit is actually " + actualMiterlimit + " after setting it to " + interval[0] + ")."; |
+ // If this check fails, stop the test early so we can examine the |
+ // <rect> visually. |
+ if (window.testRunner) |
+ testRunner.notifyDone(); |
+ return; |
+ } |
+ |
+ requestAnimationFrame(function () { |
+ if (!(interval[1] >= Math.SQRT2)) |
+ result.textContent += " FAIL - Expecting " + interval[1] + " to be greater than or equal to sqrt(2)."; |
+ rect.setAttribute("stroke-miterlimit", interval[1]); |
+ var actualMiterlimit = getComputedStyle(rect, null).strokeMiterlimit; |
+ if (!(actualMiterlimit >= Math.SQRT2)) |
+ result.textContent += " FAIL - After setting the miterlimit to " + interval[1] + ", expecting the computed miterlimit " + actualMiterlimit + " to be greater than or equal to sqrt(2)."; |
+ |
+ // The join style should still be "bevel". |
+ if (document.elementFromPoint(x0 + 97, y0 + 97) !== rect) { |
+ result.textContent += " FAIL - The element at point (97, 97) should be the <rect> element (miterlimit is actually " + actualMiterlimit + " after setting it to " + interval[1] + ")."; |
+ // If this check fails, stop the test early so we can examine the |
+ // <rect> visually. |
+ if (window.testRunner) |
+ testRunner.notifyDone(); |
+ return; |
+ } |
+ |
+ requestAnimationFrame(nextInterval); |
+ }); |
+ }); |
+} |
+</script> |
+</body> |
+</html> |