<!DOCTYPE html>

<title>Makes sure that the ad iframe loading are defered</title>
<script src="../../../../../resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script>
<script src="../../../../../http/tests/resources/get-host-info.js"></script>

<body>
  <div id="atf_div"></div>
  <div style="height:1000vh;"></div>
  <div id="btf_div"></div>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const waitUntilIdle = () => {
        return new Promise(resolve => {
          window.requestIdleCallback(() => resolve());
        });
      };
      const loaded_ids = [];
      const appendAdFrame = (id, elm) => {
        const frame = document.createElement('iframe');
        frame.width = 300;
        frame.height = 300;
        frame.id = id;

        elm.appendChild(frame);
        internals.setIsAdSubframe(frame);

        // Simulate 3P domain
        const third_pary_origin = get_host_info().HTTPS_REMOTE_ORIGIN;
        frame.src = `${third_pary_origin}/resources/dummy.html`;

        frame.onload = () => {
          loaded_ids.push(id)
        };
      };
      const isElementLoaded = (id) => loaded_ids.includes(id);
      const waitForElementLoad = (id) => {
        return new Promise((resolve, reject) => {
          const elm = document.getElementById(id)
          if (isElementLoaded(id)) {
            resolve(true);
          } else {
            elm.addEventListener('load', () => {
              resolve(true);
            });
          }
        });
      };

      promise_test(async t => {
        const atf = document.querySelector('#atf_div');
        const btf = document.querySelector('#btf_div');
        appendAdFrame('atf', atf);
        appendAdFrame('btf', btf);

        let result;
        result = await waitForElementLoad('atf');
        assert_true(result, 'iframe above the fold is successfully loaded');
        // To detect the frame src is not loaded, wait until idle
        result = await waitUntilIdle().then(() => isElementLoaded('btf'));
        assert_false(result, "iframe below the fold is not loaded on navigation");

        // Then scroll to below the fold.
        btf.scrollIntoView();

        // If viewport is close to the frame, then start loading.
        result = await waitForElementLoad("btf");
        assert_true(result, "iframe below the fold is loaded when close to the element");
      }, "Ad frame lazy loading");
    })
  </script>
</body>
