cobalt/layout_tests/testdata/intersection-observer/target-undergoes-transition.html

<!DOCTYPE html>
<!--
 | This test checks that intersection observer events get fired when
 | intersection information changes as the result of the target undergoing a
 | transition.
 | The target element is initially green when it intersects completely with the
 | viewport, but when it moves partially offscreen (as it should after the
 | transition) it should turn yellow.
 |   https://www.w3.org/TR/intersection-observer/
 -->
<html>
<head>
  <style>
    div {
      margin: 50px;
    }
    #static1 {
      background-color: red;
      width: 200px;
      height: 200px;
      position: absolute;
    }
    #static2 {
      background-color: blue;
      width: 200px;
      height: 200px;
      position: absolute;
    }
    #moving {
      background-color: green;
      width: 200px;
      height: 200px;
      transition: transform 1s linear;
    }
  </style>
</head>
<body>
  <div id="static1">
    <div id="static2">
      <div id="moving">
      </div>
    </div>
  </div>

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

    window.addEventListener("load", function() {
      var firstStaticElement = document.querySelector('#static1');
      var secondStaticElement = document.querySelector('#static2');
      var movingElement = document.querySelector('#moving');

      function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
          console.log(entry.intersectionRatio);
          if (entry.intersectionRatio < 1) {
            entry.target.style.backgroundColor = "yellow";
          }
        });
      }

      function createObserver() {
        var options = {
          root: null,
          rootMargin: "0px",
          threshold: 1
        };

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

      createObserver();

      movingElement.style.transform = "translate(-200px, 0)";

      if (window.testRunner) {
        window.testRunner.DoNonMeasuredLayout();
        window.testRunner.AdvanceClockByMs(1000);
        window.testRunner.DoNonMeasuredLayout();
        window.setTimeout(function() { window.testRunner.notifyDone(); }, 0);
      }
    });
  </script>

</body>
</html>