<!DOCTYPE html>
<html class="reftest-wait">
<title>Resize Observer: observed elements and ResizeObserver object are in the
  differnt documents</title>
<link rel="match" href="iframe-same-origin-ref.html">
<meta name="assert" content="The resize observer callback should be notified
  when the observed element inside an sub document while the resize observer
  is registed in the outer document">

<script src="/common/reftest-wait.js"></script>

<body>
  <iframe id="container" style="width: 100px; height: 100px;"
    srcdoc="<div style='background: green; height: 30px; width: 50px;'></div">
  </iframe>
  <br>
  Observer callbacks: <span id="callbackReport">0</span>
</body>

<script>
  function load() {
    return new Promise(resolve => {
      container.onload = resolve;
    });
  }

  let target;
  let resolvePromise;
  load().then(() => {
    // Get target after loaded.
    target = container.contentWindow.document.body.firstElementChild;

    let observerCallbacks = 0;
    const resizeObserver = new ResizeObserver(entries => {
      callbackReport.innerText = ++observerCallbacks;
      resolvePromise();
    });
    return new Promise(resolve => {
      resolvePromise = resolve;
      resizeObserver.observe(target);
      // |observerCallbacks| will be increased by one here because we need to
      // trigger notification in the event loop that contains ResizeObserver
      // observe() call even when resize/reflow does not happen.
    });
  }).then(() => {
    return new Promise(resolve => {
      // Use requestAnimationFrame() to make sure we handle the callback in
      // the following event loop. (This makes sure we schedule the
      // ResizeObserver event properly for the following event loop after
      // handling the previous one.)
      window.requestAnimationFrame(() => {
        resolvePromise = resolve;
        target.style.height = "40px";
        target.offsetHeight; // force to reflow the iframe document.
        // |observerCallbacks| is 2 now.
      });
    });
  }).then(() => {
    return new Promise(resolve => {
      window.requestAnimationFrame(() => {
        resolvePromise = resolve;
        target.style.height = "50px";
        target.offsetHeight; // force to reflow the iframe document.
        // |observerCallbacks| is 3 now.
      });
    });
  }).then(() => {
    // This is needed to workaround a Chromium test infrastructure bug.
    // See https://crbug.com/1270820#c8 for details.
    return new Promise((resolve) => window.requestAnimationFrame(resolve));
  }).then(() => {
    document.body.offsetHeight; // force to reflow the outer document.
    takeScreenshot();
  });
</script>
</html>
