<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="./intersection-observer-test-utils.js"></script>

<style>
#root {
  width: 200px;
  height: 200px;
}
#scroller {
  width: 160px;
  height: 200px;
  overflow-y: scroll;
}
#target {
  width: 100px;
  height: 100px;
  background-color: green;
}
.spacer {
  height: 300px;
}
</style>

<div id="root">
  <div id="scroller">
    <div class="spacer"></div>
    <div id="target"></div>
    <div class="spacer"></div>
  </div>
</div>

<script>
setup({message_events: [], output_document: window.parent.document});

var entries = [];
var root, scroller, target;

runTestCycle(function() {
  root = document.getElementById("root");
  assert_true(!!root, "Root element exists.");
  scroller = document.getElementById("scroller");
  assert_true(!!scroller, "Scroller element exists.");
  target = document.getElementById("target");
  assert_true(!!target, "Target element exists.");
  var observer = new IntersectionObserver(function(changes) {
    entries = entries.concat(changes)
  }, {root: root});
  observer.observe(target);
  entries = entries.concat(observer.takeRecords());
  assert_equals(entries.length, 0, "No initial notifications.")
  runTestCycle(step1, "First rAF.");
}, "IntersectionObserver in iframe with explicit root.");

function step1() {
  scroller.scrollTop = 250;
  runTestCycle(step2, "scroller.scrollTop = 250");
  checkLastEntry(entries, 0, [8, 108, 308, 408, 0, 0, 0, 0, 8, 208, 8, 208, false]);
}

function step2() {
  checkLastEntry(entries, 1, [8, 108, 58, 158, 8, 108, 58, 158, 8, 208, 8, 208, true]);
}
</script>