root-bounds-iframe.html | Explore in Territory

<!DOCTYPE html>
<div style="height:200px;"></div>
<script>
onload = () => {
  let numRecords = 0;
  let popup = window.open("root-bounds-popup.html");
  popup.addEventListener("load", (event) => {
    popup.postMessage("start", "*");
  });
  // The popup will send a "start" message after it has created an
  // IntersectionObserver, and it will send an additional message for each
  // IntersectionObserver notification it receives.
  window.addEventListener("message", event => {
    if (event.data == "start") {
      let target = popup.document.getElementById("target");
      target.remove();
      document.body.appendChild(target);
      requestAnimationFrame(() => {
	document.scrollingElement.scrollTop = 1000;
	// We send a "continue" message here to ensure that the popup window
	// will run a lifecycle update, which is necessary to generate and
	// deliver IntersectionObserver notifications.
	popup.postMessage("continue", "*");
      });
    } else {
      numRecords++;
      // Forward all IntersectionObserver notifications on to the embedding
      // window.
      window.parent.postMessage(event.data, "*");
      if (numRecords > 2)
        window.parent.postMessage("done", "*");
    }
  });
};
</script>

chromium/third_party/blink/web_tests/http/tests/intersection-observer/resources/root-bounds-iframe.html