inner-border-radius-hittest.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;
    }
    .roundedBox {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        background-color: red;
        border: 50px solid green;
        display: inline-block;
    }
    .roundedBox:hover {
        border-color: red;
    }
    .roundedBoxChild {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .roundedBoxChild:hover {
        background-color: blue;
    }
    #roundedBoxWithoutScrollbars {
        overflow: auto;
    }
    #roundedBoxWithScrollbars {
        overflow: scroll;
    }
</style>
<p>The inner border radius clip should be respected for hit testing.</p>
<div id="container">
    <div id="roundedBoxWithoutScrollbars" class="roundedBox">
        <div id="roundedBoxChildWithoutScrollbars" class="roundedBoxChild"></div>
    </div>
    <div id="roundedBoxWithScrollbars" class="roundedBox">
        <div id="roundedBoxWithScrollbarsChild" class="roundedBoxChild"></div>
    </div>
</div>
<div id="console"></div>
<script>
test(function(t)
{
    var rectWithoutScrollbars = roundedBoxWithoutScrollbars.getBoundingClientRect();
    var x = rectWithoutScrollbars.left;
    var y = rectWithoutScrollbars.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, "roundedBoxWithoutScrollbars");
    assert_equals(document.elementFromPoint(x + 60, y + 60).id, "roundedBoxWithoutScrollbars");
    // At top-left corner, inside inner border radius.
    assert_equals(document.elementFromPoint(x + 68, y + 68).id, "roundedBoxChildWithoutScrollbars");
    // At top-left corner, fully inside border.
    assert_equals(document.elementFromPoint(x + 80, y + 80).id, "roundedBoxChildWithoutScrollbars");
    // At bottom-right corner, inside inner border radius.
    assert_equals(document.elementFromPoint(x + 230, y + 230).id, "roundedBoxChildWithoutScrollbars");
    // At bottom-right corner, inside inner border radius.
    assert_equals(document.elementFromPoint(x + 240, y + 240).id, "roundedBoxWithoutScrollbars");
    assert_equals(document.elementFromPoint(x + 265, y + 265).id, "roundedBoxWithoutScrollbars");
    // At bottom-right corner, outside the outer border radius.
    assert_equals(document.elementFromPoint(x + 275, y + 275).id, "container");

    var rectWithScrollbars = roundedBoxWithScrollbars.getBoundingClientRect();
    x = rectWithScrollbars.left;
    y = rectWithScrollbars.top;
    // At top-left corner with scrollbars, outside the outer border radius.
    assert_equals(document.elementFromPoint(x + 20, y + 20).id, "container");
    // At top-left corner with scrollbars, inside outer border radius.
    assert_equals(document.elementFromPoint(x + 35, y + 35).id, "roundedBoxWithScrollbars");
    assert_equals(document.elementFromPoint(x + 60, y + 60).id, "roundedBoxWithScrollbars");
    // At top-left corner with scrollbars, inside inner border radius.
    assert_equals(document.elementFromPoint(x + 68, y + 68).id, "roundedBoxWithScrollbarsChild");
    // At top-left corner with scrollbars, fully inside border.
    assert_equals(document.elementFromPoint(x + 80, y + 80).id, "roundedBoxWithScrollbarsChild");
    // At bottom-right corner with scrollbars, inside inner border radius.
    assert_equals(document.elementFromPoint(x + 230, y + 230).id, "roundedBoxWithScrollbarsChild");
    // At bottom-right corner with scrollbars, inside inner border radius.
    assert_equals(document.elementFromPoint(x + 265, y + 265).id, "roundedBoxWithScrollbars");
    // At bottom-right corner with scrollbars, outside the outer border radius.
    assert_equals(document.elementFromPoint(x + 275, y + 275).id, "container");
    // At bottom-center on scrollbar and inside inner border radius.
    assert_equals(document.elementFromPoint(x + 150, y + 240).id, "roundedBoxWithScrollbars");
    // At center-right on scrollbar and inside inner border radius.
    assert_equals(document.elementFromPoint(x + 240, y + 150).id, "roundedBoxWithScrollbars");
}, "The inner border radius clip should be respected for hit testing.");
</script>
chromium/third_party/blink/web_tests/hittesting/inner-border-radius-hittest.html
