<!DOCTYPE html>
<!--
 | This test checks that calling "unobserve" on a target that has not been
 | "observed" by a particular observer does not cause a crash.
 | Any observed targets should become green, and any elements that have not
 | been observed should stay yellow.
 |   https://www.w3.org/TR/intersection-observer/
 -->
<html>
<head>
  <style>
    div {
      background-color: yellow;
      width: 50px;
      height: 100px;
      margin: 25px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div id="firsttarget"></div>
  <div id="secondtarget"></div>
  <div id="thirdtarget"></div>
  <div id="fourthtarget"></div>
  <div id="fifthtarget"></div>

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

    window.addEventListener("load", function() {

      function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            entry.target.style.backgroundColor = "green";
          }
        });
      }

      function createObserversAndUnobserveTargets() {
        var firstTargetElement = document.querySelector('#firsttarget');
        var secondTargetElement = document.querySelector('#secondtarget');
        var thirdTargetElement = document.querySelector('#thirdtarget');
        var fourthTargetElement = document.querySelector('#fourthtarget');
        var fifthTargetElement = document.querySelector('#fifthtarget');

        var options = {
          root: null,
          rootMargin: "0px",
          threshold: 0.0
        };

        // Create an observer and observe elements. The elements should become
        // green.
        var observerA = new IntersectionObserver(handleIntersect, options);
        observerA.observe(firstTargetElement);
        observerA.observe(secondTargetElement);
        observerA.observe(thirdTargetElement);

        // Unobserve elements that have never been observed. Nothing should
        // change, and nothing should crash.
        observerA.unobserve(fourthTargetElement);
        observerA.unobserve(fifthTargetElement);

        // Create a different observer and attempt to observe an element that
        // has been observed by another observer.
        // Again, nothing should change or crash.
        var observerB = new IntersectionObserver(handleIntersect, options);
        observerB.unobserve(thirdTargetElement);
      }

      createObserversAndUnobserveTargets();

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

</body>
</html>