text-overflow-inline-image.html | Explore in Territory

<!DOCTYPE html>
<style>
  #containingBlock {
    height: 200px;
    font-size: 140px;
    position: relative;
    border: 1px solid black;
  }
</style>
<div id="containingBlock">
    <img id="image" src="../paint/invalidation/resources/bluesquare.png">
</div>
<a id="target" href="#">this is a link</a>
<div id="result"></div>
<script>
if (window.testRunner) {
  testRunner.dumpAsText();
  testRunner.waitUntilDone();
}

// Tests
function test() {
  target.onclick = function() {
    var result = document.getElementById("result");
    result.innerHTML += "clicked<br>";
  };
  let x = image.offsetLeft + 10;
  let y = image.offsetTop + image.offsetHeight;

  if (window.eventSender) {
    // No click - still inside containingBlock.
    eventSender.mouseMoveTo(x, y - 10);
    eventSender.mouseDown();
    eventSender.mouseUp();

    // Click - over the link. Still inside the height of the inline
    // image, but outside of containingBlock.
    eventSender.mouseMoveTo(x, y + 15);
    finished = true;
    eventSender.mouseDown();
    eventSender.mouseUp();

    testRunner.notifyDone();
  }
}
window.onload = test;
</script>

chromium/third_party/blink/web_tests/hittesting/text-overflow-inline-image.html