<!DOCTYPE html>
<html dir="rtl">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="./resources/intersection-observer-test-utils.js"></script>

  <style>
  pre, #log {
    position: absolute;
    top: 120px;
    left: 0;
  }
  #root {
    width: 350px;
    height: 100px;
    border: 1px solid black;
    /* Cobalt does not support rtl with flex layouts.
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    */
    display: inline-block;
    overflow: auto;
    position: relative;
  }
  #target-start, #target-end {
    width: 100px;
    height: 100px;
    /* flex-shrink: 0; */
    background-color: green;
    text-align: center;
    display: inline-block;
    position: absolute;
  }
  #target-end {
    margin-right: 500px;
    /* Cobalt does not support margin-inline-start.
    margin-inline-start: 500px;
    */
  }
  </style>
</head>

<div id="root">
  <div id="target-start">start</div>
  <div id="target-end">end</div>
</div>

<script>
runTestCycle(function() {
  let io = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("intersecting");
      } else {
        entry.target.classList.remove("intersecting");
      }
    });
    window.testRunner.DoNonMeasuredLayout();
  }, { root: document.getElementById("root") });

  /* Cobalt missing forEach functionality. */
  const divs = document.querySelectorAll("#root > div");
  for (let i = 0; i < divs.length; i++) {
    io.observe(divs[i]);
  };

  runTestCycle(step0, "First rAF");
}, "Explicit rtl root with overflow clipping");
window.testRunner.DoNonMeasuredLayout();
window.testRunner.DoNonMeasuredLayout();

function step0() {
  assert_true(
    document.getElementById("target-start").classList.contains("intersecting"),
    "Target at scroll start is intersecting");
  assert_false(
    document.getElementById("target-end").classList.contains("intersecting"),
    "Target at scroll end is not intersecting");
}
</script>