<!DOCTYPE HTML>
<script src="../resources/js-test.js"></script>
<script src="../resources/ahem.js"></script>
<script>
    var referenceClipPathRect, shapeClipPathRect;

    function test() {
        // Check that a reference clip path affects hit testing for inlines.
        // (25,75) is outside the triangular clip path, (75,25) is inside it.
        referenceClipPathRect = referenceClipPath.getBoundingClientRect();
        shouldNotBe("document.elementFromPoint(referenceClipPathRect.left + 25, referenceClipPathRect.top + 75).id", "'referenceClipPath'");
        shouldBe("document.elementFromPoint(referenceClipPathRect.left + 75, referenceClipPathRect.top + 25).id", "'referenceClipPath'");

        // Check that a shape clip path affects hit testing for inlines.
        // (25,75) is outside the triangular clip path, (75,25) is inside it.
        shapeClipPathRect = shapeClipPath.getBoundingClientRect();
        shouldNotBe("document.elementFromPoint(shapeClipPathRect.left + 25, shapeClipPathRect.top + 75).id", "'shapeClipPath'");
        shouldBe("document.elementFromPoint(shapeClipPathRect.left + 75, shapeClipPathRect.top + 25).id", "'shapeClipPath'");
    }
</script>
<style>
    #referenceClipPath {
        -webkit-clip-path: url(#referenceClipPathTopLeft);
        clip-path: url(#referenceClipPathTopLeft);
        font-size: 100px;
        font-family: Ahem;
        color: blue;
    }
    #referenceClipPath:hover {
        color: green;
    }
    #shapeClipPath {
        -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
        clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
        font-size: 100px;
        font-family: Ahem;
        color: purple;
    }
    #shapeClipPath:hover {
        color: orange;
    }
</style>
<body onload="test()">
    <p>Inline hit testing should not include clipped-out regions.</p>
    <svg width="0" height="0">
        <defs>
            <clipPath id="referenceClipPathTopLeft" clipPathUnits="objectBoundingBox">
                <path id="path" d="M 0 0 L 100 100 L 100 0Z" />
            </clipPath>
        </defs>
    </svg>
    <span id="referenceClipPath">a</span>
    <span id="shapeClipPath">a</span>
    <div id="console"></div>
</body>