iframe-with-fixed-position-element.html

<!DOCTYPE html>
<style>
.target {
  position: fixed;
  top: 100px;
  left: 25px;
  width: 100px;
  height: 100px;
  background-color: red;
}
.spacer {
  height: 1000px;
}
</style>
<div class='spacer'></div>
<div id='target' class='target'></div>
<script>
function clientRectToJson(rect) {
  if (!rect)
    return "null";
  return {
    top: rect.top,
    right: rect.right,
    bottom: rect.bottom,
    left: rect.left
  };
}
function entryToJson(entry) {
  return {
    time: entry.time,
    callbackTime: performance.now(),
    boundingClientRect: clientRectToJson(entry.boundingClientRect),
    intersectionRect: clientRectToJson(entry.intersectionRect),
    rootBounds: clientRectToJson(entry.rootBounds),
    target: entry.target.id
  };
}
onload = () => {
  let target = document.getElementById("target");
  let observer = new IntersectionObserver(entries => {
    entries.map(e => { window.parent.postMessage(entryToJson(e), "*") });
  });

  window.addEventListener("message", event => {
    observer.observe(document.getElementById("target"));
  });

};
</script>

chromium/third_party/blink/web_tests/http/tests/intersection-observer/resources/iframe-with-fixed-position-element.html