<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
span {
    background-color: lightgray;
    border-radius: 2em;
    padding: 1em;
    line-height: 4em;
}

label {
    padding: 2em;
    background-color: lightgreen;
    border-radius: 2em;
}

div {
    margin: 2em;
}
</style>
<div>
<span id="A">
Two lines with <br/>a hard line break.
</span>
</div>
<div>
<span id="B">B<label id="C">C</label></span>
</div>
<div>
<span id="D" style="padding: 2em;">D<label id="E" style="padding: 1em;">E</label></span>
</div>
<script>
test(() => {
  const rect = document.getElementById('A').getClientRects()[0];
  const elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
  assert_equals(elementInTopLeftCorner.nodeName, 'DIV');
}, 'Hit test outside round-cornered border of the first line of span#A');

test(() => {
  const rect = document.getElementById('A').getClientRects()[1];
  const elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
  assert_equals(elementInTopLeftCorner.nodeName, 'SPAN');
}, 'Hit test top left corner of the second line of span#A');

test(() => {
  const rect = document.getElementById('B').getBoundingClientRect();
  const elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
  assert_equals(elementInTopLeftCorner.nodeName, 'DIV');
}, 'Hit test outside round-cornered border of span#B');

test(() => {
  const rect = document.getElementById('C').getBoundingClientRect();
  const elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
  assert_equals(elementInTopLeftCorner.nodeName, 'BODY');
}, 'Hit test outside round-cornered border of label#C');

test(() => {
  const rect = document.getElementById('D').getBoundingClientRect();
  const elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
  assert_equals(elementInTopLeftCorner.nodeName, 'BODY');
}, 'Hit test outside round-cornered border of span#D');

test(() => {
  const rect = document.getElementById('E').getBoundingClientRect();
  const elementInTopLeftCorner = document.elementFromPoint(rect.left, rect.top);
  assert_equals(elementInTopLeftCorner.nodeName, 'SPAN');
}, 'Hit test outside round-cornered border of label#E');
</script>