image-with-border-radius.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
    #container {
        display: inline-block;
        background-color: black;
    }
    #roundedImage {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        background-color: blue;
        border: 50px solid orange;
        display: block;
    }
    #roundedImage:hover {
        border-color: green;
        background-color: green;
    }
</style>
<body>
    <p>The border radius clip should be respected when hit testing images.</p>
    <div id="container">
        <img id="roundedImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
    </div>
</body>
<script>
test(function(t)
{
    var rect = roundedImage.getBoundingClientRect();
    var x = rect.left;
    var y = rect.top;

    // At top-left corner, outside the outer border radius.
    assert_equals(document.elementFromPoint(x + 20, y + 20).id, "container");

    // At top-left corner, inside outer border radius.
    assert_equals(document.elementFromPoint(x + 35, y + 35).id, "roundedImage");
    assert_equals(document.elementFromPoint(x + 60, y + 60).id, "roundedImage");

    // Fully inside border.
    assert_equals(document.elementFromPoint(x + 68, y + 68).id, "roundedImage");
    assert_equals(document.elementFromPoint(x + 80, y + 80).id, "roundedImage");
    assert_equals(document.elementFromPoint(x + 230, y + 230).id, "roundedImage");

    // At bottom-right corner, insider inner border radius.
    assert_equals(document.elementFromPoint(x + 240, y + 240).id, "roundedImage");
    assert_equals(document.elementFromPoint(x + 265, y + 265).id, "roundedImage");

    // At bottom-right corner, outside the outer border radius.
    assert_equals(document.elementFromPoint(x + 275, y + 275).id, "container");
}, "The border radius clip should be respected when hit testing images.");
</script>
chromium/third_party/blink/web_tests/hittesting/image-with-border-radius.html
