components/test/data/surface_embed/intersection_observer_target.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#target {
  height: 100%;
  width: 100%;
}
</style>
<div id="target"></div>
<script>
function observeViewport() {
  return new Promise(resolve => {
    const observer = new IntersectionObserver(([entry]) => {
      observer.disconnect();
      resolve(entry.isIntersecting);
    });
    observer.observe(document.querySelector('#target'));
  });
}

function observeViewportIntersectionRatio() {
  return new Promise(resolve => {
    const observer = new IntersectionObserver(([entry]) => {
      observer.disconnect();
      resolve(entry.intersectionRatio);
    });
    observer.observe(document.querySelector('#target'));
  });
}
</script>