border-radius-hittest.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
    #container {
        width: 200px;
        height: 200px;
        background-color: lightgray;
    }
    #roundedBox {
        width: 200px;
        height: 200px;
        border-radius: 50px;
        background-color: lightgreen;
    }
</style>
<p>This test checks that div block should not get events on clicking outside the rounded border but within the bounding box of the block.</p>
<div id="container">
    <div id="roundedBox"></div>
</div>
<script>
test(function(t) {
    var innerBox = document.getElementById('roundedBox');
    var rect = innerBox.getBoundingClientRect();
    var x = rect.left;
    var y = rect.top;
    // At top-left corner.
    assert_equals(document.elementFromPoint(x + 5, y + 5).id, "container");
    // At top-right corner.
    assert_equals(document.elementFromPoint(x + 195, y + 5).id, "container");
    // At bottom-left corner.
    assert_equals(document.elementFromPoint(x + 5, y + 195).id, "container");
    // At bottom-right corner.
    assert_equals(document.elementFromPoint(x + 195, y + 195).id, "container");
    // At the center.
    assert_equals(document.elementFromPoint(x + 100, y + 100).id, "roundedBox");
}, "Test that a block with border radius should not get events on clicking outside the rounded border but within the bounding box of the block.");
</script>
chromium/third_party/blink/web_tests/hittesting/border-radius-hittest.html
