cobalt/layout_tests/testdata/intersection-observer/observers-should-update-when-elements-move-with-threshold.html

<!DOCTYPE html>
<!--
 | This test checks that the observer objects get updated when the elements
 | themselves move around.
 | The color of the target element is blue if the intersection ratio is above
 | the threshold, and green if it is below. In this test, the intersection ratio
 | crosses the threshold when the target element moves; the target element
 | should initially be blue but end up green.
 |   https://www.w3.org/TR/intersection-observer/
 -->
<html>
<head>
  <style>
    div {
      position: absolute;
    }
    #root {
      margin: 100px;
      background-color: red;
      width: 250px;
      height: 150px;
    }
    #target {
      width: 150px;
      height: 50px;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div id="root">
    <div id="target"></div>
  </div>

  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    window.addEventListener("load", function() {
      var rootElement = document.querySelector('#root');
      var targetElement = document.querySelector('#target');

      function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.intersectionRatio > 0.5) {
            entry.target.style.backgroundColor = "blue";
          } else {
            entry.target.style.backgroundColor = "green";
          }
        });
        if (window.testRunner) {
          window.testRunner.DoNonMeasuredLayout();
        }
      }

      var options = {
        root: rootElement,
        rootMargin: "0px",
        threshold: 0.5
      };

      var observer = new IntersectionObserver(handleIntersect, options);
      observer.observe(targetElement);

      if (window.testRunner) {
        window.testRunner.DoNonMeasuredLayout();
      }

      // Without waiting for requestAnimationFrame, only the movement is observed.
      requestAnimationFrame(() => {
        window.setTimeout(() => {
          // Move the target element so that the intersection ratio now crosses
          // the threshold value. An intersection observer update should be
          // triggered and the callback should run.
          targetElement.style.top = "-30px";

          if (window.testRunner) {
            window.testRunner.DoNonMeasuredLayout();
            window.setTimeout(function() { window.testRunner.notifyDone(); }, 0);
          }
        }, 0);
      });

      // Fail after 3 seconds if requestAnimationFrame never triggered.
      window.setTimeout(function() {
        window.testRunner.notifyDone();
      }, 3000);
    });
  </script>

</body>
</html>