cobalt/layout_tests/testdata/intersection-observer/multiple-observers-with-different-roots-and-targets.html

<!DOCTYPE html>
<!--
 | This test checks that the intersection ratios are correctly computed when
 | there are multiple intersection observers.
 | The target elements are initially transparent, but if the intersection ratios
 | are computed correctly they turn opaque (become visibly green and yellow).
 |   https://www.w3.org/TR/intersection-observer/
 -->
<html>
<head>
  <style>
    div {
      position: absolute;
    }
    #firstroot {
      background-color: red;
      width: 200px;
      height: 100px;
      margin: 10px;
      margin-left: 25px;
    }
    #secondroot {
      background-color: blue;
      width: 100px;
      height: 200px;
      margin-left: 300px;
    }
    #firsttarget {
      background-color: rgba(0, 128, 0, 0);
      width: 50px;
      height: 75px;
      margin-left: -175px;
    }
    #secondtarget {
      background-color: rgba(255, 255, 0, 0);
      width: 80px;
      height: 50px;
      margin-left: 50px;
    }
  </style>
</head>
<body>
  <div id="firstroot">
    <div id="secondroot">
      <div id="secondtarget">
        <div id="firsttarget">
        </div>
      </div>
    </div>
  </div>

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

    window.addEventListener("load", function() {
      var firstRootElement = document.querySelector('#firstroot');
      var secondRootElement = document.querySelector('#secondroot');
      var firstTargetElement = document.querySelector('#firsttarget');
      var secondTargetElement = document.querySelector('#secondtarget');
      var firstIntersectionRatio = 0.5;
      var secondIntersectionRatio = 0.625;

      function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
          console.log(entry.intersectionRatio);
          if (entry.target == firstTargetElement &&
              entry.intersectionRatio == firstIntersectionRatio) {
            entry.target.style.backgroundColor = "rgba(0, 128, 0, 255)";
          }
          if (entry.target == secondTargetElement &&
              entry.intersectionRatio == secondIntersectionRatio) {
            entry.target.style.backgroundColor = "rgba(255, 255, 0, 255)";
          }
        });
      }

      function createObservers() {
        var observer;

        var firstOptions = {
          root: firstRootElement,
          rootMargin: "0px",
          threshold: 0.0
        };
        var secondOptions = {
          root: secondRootElement,
          rootMargin: "0px",
          threshold: 0.0
        };

        firstObserver = new IntersectionObserver(handleIntersect, firstOptions);
        secondObserver = new IntersectionObserver(handleIntersect, secondOptions);
        firstObserver.observe(firstTargetElement);
        secondObserver.observe(secondTargetElement);
      }

      createObservers();

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

</body>
</html>