intersection-observer/root-is-table-with-overflow-scroll.html

<!DOCTYPE html>
<title>IntersectionObserver observing table with border and overflow scroll</title>
<link rel="author" href="mailto:steven.novaryo@gmail.com" title="Steven Novaryo">
<link rel="help" href="https://w3c.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle">
<link rel="help" href="https://drafts.csswg.org/css-tables/#global-style-overrides">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/intersection-observer-test-utils.js"></script>

<style>
  #root {
    box-sizing: border-box;
    overflow: scroll;
    border: 50px solid black;
    will-change: transform;
  }
  #target {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 300px;
    left: 300px;
    background-color: green;
  }
</style>
<table id="root">
  <tr>
    <td>
      <span id="target"></span>
    </td>
  </tr>
</table>
<script>
var entries = [];
var rootRect = root.getBoundingClientRect();

runTestCycle(function() {
  assert_true(!!target, "target exists");
  var observer = new IntersectionObserver(function(changes) {
    entries = entries.concat(changes)
  }, { root: root });
  observer.observe(target);
  entries = entries.concat(observer.takeRecords());
  assert_equals(entries.length, 0, "No initial notifications.");
  runTestCycle(step0, "First rAF.");
}, "IntersectionObserver observing an element inside a root table.");

function step0() {
  // To reduce the inconsistencies of the layout within different UAs we are calculating the offset dynamically.
  var targetRect = target.getBoundingClientRect();
  target.style.top = `${300 - (targetRect.top - rootRect.bottom + 50)}px`;
  target.style.left = `${300 - (targetRect.left - rootRect.right + 50)}px`;
  runTestCycle(step1, "Moving the target to the right bottom corner of the table.");
  checkLastEntry(entries, 0, [
    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,
    0, 0, 0, 0,
    rootRect.left, rootRect.right, rootRect.top, rootRect.bottom,
    false
  ]);
}

function step1() {
  var targetRect = target.getBoundingClientRect();
  checkLastEntry(entries, 1, [
    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,
    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,
    rootRect.left, rootRect.right, rootRect.top, rootRect.bottom,
    true
  ]);
}

</script>