rect-miterlimit.html | Explore in Territory

<!DOCTYPE html>
<html>
<body onload="onPageLoad()">
Check that hit testing on a &lt;rect&gt; 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.414220"]
        //,["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>
chromium/third_party/blink/web_tests/svg/hittest/rect-miterlimit.html
