cobalt/layout_tests/testdata/intersection-observer/containing-block-has-rotate-transform.html

<!DOCTYPE html>
<!--
 | This test checks that the intersection is correctly computed when an element
 | in the containing block chain undergoes a transform. One side of the border
 | box of the containing block is disproportionately large to check that the
 | rotations are being calculated relative to the border box and not any other
 | others (i.e. padding).
 | The containing block element turns yellow only if the intersection between
 | the target and the viewport is correctly computed to be 0.5.
 |   https://www.w3.org/TR/intersection-observer/
 -->
<html>
<head>
  <style>
    #moving {
      border-left-width: 100px;
      border-style: solid;
      background-color: red;
      width: 100px;
      height: 100px;
      left: 0px;
      top: 0px;
      position: absolute;
    }
    #target {
      background-color: green;
      width: 100px;
      height: 100px;
      left: -100px;
      top: 0px;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="moving">
    <div id="target">
    </div>
  </div>

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

    window.addEventListener("load", function() {
      var movingElement = document.querySelector('#moving');
      var targetElement = document.querySelector('#target');
      var expectedRatio = 0.5;
      // leave room for some rounding differences due to rotation calculations
      var epsilon = 0.02;

      function buildThresholdsList() {
        var thresholds = []
        var numSteps = 100;
        for (var i = 0; i < numSteps; i++) {
          thresholds.push(i / numSteps);
        }
        return thresholds;
      }

      function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
          console.log(entry.intersectionRatio);
          if (Math.abs(entry.intersectionRatio - expectedRatio) < epsilon) {
            movingElement.style.backgroundColor = "yellow";
          }
        });
      }

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

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

      createObserver();

      movingElement.style.transform = "rotate(90deg)";

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

</body>
</html>