hittest-outside-image.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>

<div id='horizontal-container'>
  <img id='img-h1' style='width: 100px; height: 50px'><img id='img-h2' style='width: 100px; height: 100px'>
</div>

<div id='vertical-container' style='writing-mode: vertical-lr'>
  <img id='img-v1' style='width: 50px; height: 100px'><img id='img-v2' style='width: 100px; height: 100px'>
</div>
<script>
// This file tests hit-testing outside image while inside containing line box.

test(() => {
  // Hit test location indicated by '*':
  // *   2222
  //     2222
  // 11112222
  // 11112222
  const container = document.getElementById('horizontal-container');
  const target = document.getElementById('img-h1');
  const x = container.offsetLeft + 25;
  const y = container.offsetTop + 25;
  const result = document.caretRangeFromPoint(x, y);

  assert_true(result instanceof Range);
  assert_equals(result.startContainer, container);
  assert_equals(container.childNodes[result.startOffset], target);
  assert_true(result.collapsed);
}, 'Hit test before half-width of image in horizontal writing mode');

test(() => {
  // Hit test location indicated by '*':
  //    *2222
  //     2222
  // 11112222
  // 11112222
  const container = document.getElementById('horizontal-container');
  const target = document.getElementById('img-h2');
  const x = container.offsetLeft + 75;
  const y = container.offsetTop + 25;
  const result = document.caretRangeFromPoint(x, y);

  assert_true(result instanceof Range);
  assert_equals(result.startContainer, container);
  assert_equals(container.childNodes[result.startOffset], target);
  assert_true(result.collapsed);
}, 'Hit test after half-width of image in horizontal writing mode');

test(() => {
  // Hit test location indicated by '*':
  // * 1111
  //   1111
  // 22222222
  // 22222222
  const container = document.getElementById('vertical-container');
  const target = document.getElementById('img-v1');
  const x = container.offsetLeft + 10;
  const y = container.offsetTop + 25;
  const result = document.caretRangeFromPoint(x, y);

  assert_true(result instanceof Range);
  assert_equals(result.startContainer, container);
  assert_equals(container.childNodes[result.startOffset], target);
  assert_true(result.collapsed);
}, 'Hit test before half-width of image in vertical writing mode');

test(() => {
  // Hit test location indicated by '*':
  //   1111
  // * 1111
  // 22222222
  // 22222222
  const container = document.getElementById('vertical-container');
  const target = document.getElementById('img-v2');
  const x = container.offsetLeft + 10;
  const y = container.offsetTop + 75;
  const result = document.caretRangeFromPoint(x, y);

  assert_true(result instanceof Range);
  assert_equals(result.startContainer, container);
  assert_equals(container.childNodes[result.startOffset], target);
  assert_true(result.collapsed);
}, 'Hit test after half-width of image in vertical writing mode');
</script>
chromium/third_party/blink/web_tests/fast/dom/Document/CaretRangeFromPoint/hittest-outside-image.html
