<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body onload="run()">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <path id="p1" d="M-100 -100L100 -100 L100 100 L-100 100 z"/>
    <path id="p2" d="M-1 0 L 200 0"/>
    <path id="p3" d="M-1 0 L 200 0" stroke="black"/>
    <path id="p4" d="M0 0 L 200 0" stroke="black" stroke-width="20" stroke-dashoffset="20" stroke-dasharray="20 20"/>
    <path id="p5" d="M20 0 L 200 0" stroke="black" stroke-width="20" stroke-linecap="round"/>
    <path id="p6" d="M20 0 L 200 0" stroke="black" stroke-width="20" stroke-linecap="square"/>
    <path id="p7" d="M20 0 L 200 0" stroke="black" stroke-width="20" stroke-linecap="butt"/>
    <path id="p8" d="M0 0 L20 60 L40 0" stroke="black" stroke-width="20" stroke-linejoin="miter" stroke-miterlimit="30"/>
    <path id="p9" d="M0 0 L20 60 L40 0" stroke="black" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="30"/>
    <path id="p10" d="M0 0 L20 60 L40 0" stroke="black" stroke-width="20" stroke-linejoin="bevel" stroke-miterlimit="30"/>
    <path id="p11" d="M-1 0 L 200 0" stroke="black" stroke-width="20" transform="translate(-200, -200)"/>
    <path id="p12" d="M-1 0 L 200 0" stroke="black" stroke-width="20" display="none"/>
    <path id="p13" d="M-1 0 L 200 0" stroke="black" stroke-width="20" visibility="hidden"/>
    <path id="p14" d="M-1 0 L 200 0" stroke="black" stroke-width="20" opacity="0"/>
    <g transform="scale(20)">
        <path id="p15" d="M0 0 L 200 0" stroke="black" stroke-width="20" vector-effect="non-scaling-stroke"/>
    </g>
</svg>
<p id="description"></p>
<div id="console"></div>
<script type="text/javascript">
<![CDATA[
window.enablePixelTesting = false;
window.jsTestIsAsync = true;
var svg = document.getElementById("svg");
var p1 = document.getElementById("p1"),
    p2 = document.getElementById("p2"),
    p3 = document.getElementById("p3"),
    p4 = document.getElementById("p4"),
    p5 = document.getElementById("p5"),
    p6 = document.getElementById("p6"),
    p7 = document.getElementById("p7"),
    p8 = document.getElementById("p8"),
    p9 = document.getElementById("p9"),
    p10 = document.getElementById("p10"),
    p11 = document.getElementById("p11"),
    p12 = document.getElementById("p12"),
    p13 = document.getElementById("p13"),
    p14 = document.getElementById("p14"),
    p15 = document.getElementById("p15");
var svgPoint = svg.createSVGPoint();

function run() {
    description("Test isPointInStroke() on path.");

    debug("");
    debug("Test that fill area does not contribute to stroke area");
    shouldBe("p1.isPointInStroke()", "false");
    shouldBe("p1.isPointInStroke({})", "false");

    debug("");
    debug("Test disabled stroke");
    shouldBe("p2.isPointInStroke({x: 1, y: 0})", "false");

    debug("");
    debug("Test general functionality");
    shouldBe("p3.isPointInStroke()", "true");
    shouldBe("p3.isPointInStroke({})", "true");
    shouldBe("p3.isPointInStroke(new DOMPoint())", "true");
    shouldBe("p3.isPointInStroke(new DOMPoint(1, 0))", "true");
    shouldBe("p3.isPointInStroke(new DOMPoint(-200, -200))", "false");
    shouldBe("p3.isPointInStroke(new DOMPointReadOnly())", "true");
    shouldBe("p3.isPointInStroke(new DOMPointReadOnly(-200, -200))", "false");
    shouldBe("p3.isPointInStroke(svgPoint)", "true");
    svgPoint.x = -200;
    svgPoint.y = -200;
    shouldBe("p3.isPointInStroke(svgPoint)", "false");
    shouldBe("p3.isPointInStroke(new DOMPoint(NaN))", "false");
    shouldBe("p3.isPointInStroke(new DOMPoint(Infinity))", "false");
    shouldThrow("p3.isPointInStroke('string')");

    debug("");
    debug("Test CSS properties that shall not affect isPointInStroke");
    shouldBe("p11.isPointInStroke()", "true");
    shouldBe("p12.isPointInStroke()", "true");
    shouldBe("p13.isPointInStroke()", "true");
    shouldBe("p14.isPointInStroke()", "true");

    debug("");
    debug("Test different stroke properties");
    shouldBe("p4.isPointInStroke()", "false");
    shouldBe("p4.isPointInStroke({x: 19})", "false");
    shouldBe("p4.isPointInStroke({x: 20})", "true");
    shouldBe("p4.isPointInStroke({x: 30})", "true");
    shouldBe("p4.isPointInStroke({x: 40})", "true");
    shouldBe("p4.isPointInStroke({x: 41})", "false");
    shouldBe("p4.isPointInStroke({x: 50})", "false");
    shouldBe("p4.isPointInStroke({x: 59})", "false");
    shouldBe("p4.isPointInStroke({x: 60})", "true");
    shouldBe("p4.isPointInStroke({x: 20, y: 10})", "true");
    shouldBe("p4.isPointInStroke({x: 20, y: 11})", "false");
    shouldBe("p4.isPointInStroke({x: 20, y: -10})", "true");
    shouldBe("p4.isPointInStroke({x: 20, y: -11})", "false");

    debug("");
    debug("Test different linecaps");
    shouldBe("p5.isPointInStroke({x: 18})", "true");
    shouldBe("p6.isPointInStroke({x: 18})", "true");
    shouldBe("p7.isPointInStroke({x: 18})", "false");

    debug("");
    debug("Test different linejoins");
    shouldBe("p8.isPointInStroke({x: 20, y: 60})", "true");
    shouldBe("p8.isPointInStroke({x: 20, y: 75})", "true");
    shouldBe("p8.isPointInStroke({x: 20, y: 90})", "true");
    shouldBe("p9.isPointInStroke({x: 20, y: 60})", "true");
    shouldBe("p9.isPointInStroke({x: 20, y: 70})", "true");
    shouldBe("p9.isPointInStroke({x: 20, y: 90})", "false");
    shouldBe("p10.isPointInStroke({x: 20, y: 60})", "true");
    shouldBe("p10.isPointInStroke({x: 20, y: 70})", "false");
    shouldBe("p10.isPointInStroke({x: 20, y: 90})", "false");

    debug("");
    debug("Test non-scaling-stroke");
    shouldBe("p15.isPointInStroke({})", "true");
    shouldBe("p15.isPointInStroke({y: 1})", "true");
    shouldBe("p15.isPointInStroke({y: 11})", "false");
    finishJSTest();
}
]]>
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>