<!DOCTYPE html>
<div style="height: 200px; width: 100px;"></div>
<div id="target" style="background-color: green; width:100px; height:100px"></div>
<div style="height: 200px; width: 100px;"></div>

<script>
var port;
var entries = [];
var target = document.getElementById('target');
var scroller = document.scrollingElement;
var nextStep;
var waiting_for_ack = false;

function clientRectToJson(rect) {
  if (!rect)
    return "null";
  return {
    top: rect.top,
    right: rect.right,
    bottom: rect.bottom,
    left: rect.left
  };
}

function entryToJson(entry) {
  return {
    boundingClientRect: clientRectToJson(entry.boundingClientRect),
    intersectionRect: clientRectToJson(entry.intersectionRect),
    rootBounds: clientRectToJson(entry.rootBounds),
    target: entry.target.id
  };
}

function coordinatesToClientRectJson(top, right, bottom, left) {
  return {
    top: top,
    right: right,
    bottom: bottom,
    left: left
  };
}

// Use a rootMargin here, and verify it does NOT get applied for the cross-origin case.
var observer = new IntersectionObserver(function(changes) {
    entries = entries.concat(changes)
}, { rootMargin: "7px" });
observer.observe(target);

function step0() {
  entries = entries.concat(observer.takeRecords());
  nextStep = step1;
  var expected = [{
    boundingClientRect: coordinatesToClientRectJson(8, 208, 108, 308),
    intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),
    rootBounds: "null",
    target: target.id
  }];
  port.postMessage({
    actual: entries.map(entryToJson),
    expected: expected,
    description: "First rAF"
  }, "*");
  entries = [];
  port.postMessage({scrollTo: 200}, "*");
}

function step1() {
  entries = entries.concat(observer.takeRecords());
  port.postMessage({
    actual: entries.map(entryToJson),
    expected: [],
    description: "topDocument.scrollingElement.scrollTop = 200"
  }, "*");
  entries = [];
  scroller.scrollTop = 250;
  nextStep = step2;
  port.postMessage({}, "*");
}

function step2() {
  entries = entries.concat(observer.takeRecords());
  var expected = [{
    boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
    intersectionRect: coordinatesToClientRectJson(0, 108, 58, 8),
    rootBounds: "null",
    target: target.id
  }];
  port.postMessage({
    actual: entries.map(entryToJson),
    expected: expected,
    description: "iframeDocument.scrollingElement.scrollTop = 250"
  }, "*");
  entries = [];
  nextStep = step3;
  port.postMessage({scrollTo: 100}, "*");
}

function step3() {
  entries = entries.concat(observer.takeRecords());
  var expected = [{
    boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
    intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),
    rootBounds: "null",
    target: target.id
  }];
  port.postMessage({
    actual: entries.map(entryToJson),
    expected: expected,
    description: "topDocument.scrollingElement.scrollTop = 100"
  }, "*");
  port.postMessage({DONE: 1}, "*");
}

function handleMessage(event)
{
  port = event.source;
  // The ACKs serve the purpose to create an extra full postMessage round trip
  // delay before taking IntersectionObserver records. This accounts for a
  // race condition that exists when this is an out-of-process iframe: the
  // postMessage can trigger takeRecords before new intersections have been
  // calculated. requestAnimationFrame() is not available here because of
  // frame throttling in the same-process scenario.
  if (event.data.hasOwnProperty('ACK')) {
    nextStep();
  } else {
    port.postMessage({ ACK: 1 }, "*");
  }
}

nextStep = step0;
window.addEventListener("message", handleMessage);
</script>