| 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>
|
|
|