iframe-loading-lazy-base-url-2.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-base-url-2.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<head>

  <title>Deferred loading=lazy iframes load relative to the document's base URL

         at parse-time</title>

  <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">

  <link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org">

  <script src="/resources/testharness.js"></script>

  <script src="/resources/testharnessreport.js"></script>

  <script src="../resources/common.js"></script>

</head>

<script>

  const below_viewport_iframe = new ElementLoadPromise("below-viewport");

  let has_window_loaded = false;

  async_test(t => {

    // Change the document's base URL to a bogus one, and scroll the

    // below-viewport iframe into view. When it loads, it should load relative

    // to the old base URL computed at parse-time.

    window.addEventListener("load", t.step_func(() => {

      window.history.pushState(2, document.title,

                               '/invalid-url-where-no-subresources-exist/')

      has_window_loaded = true;

      below_viewport_iframe.element().scrollIntoView();

    }));

    below_viewport_iframe.promise.then(t.step_func_done(() => {

      assert_true(has_window_loaded,

            "Below-viewport loading=lazy iframes do not block the " +

            "window load event");

      assert_true(below_viewport_iframe.element()

                    .contentDocument.body.innerHTML.includes("<p>Subframe</p>"));

    }));

  }, "When a loading=lazy iframe is loaded, it loads relative to the " +

     "document's base URL computed at parse-time.");

</script>

<body>

  <div style="height:1000vh;"></div>

  <script>

    // Change the document's base URL so that the iframe request parses relative

    // to it when it sets up the request at parse-time.

    window.history.pushState(1, document.title, 'resources/')

  </script>

  <iframe id="below-viewport" src="subframe.html" loading="lazy" width="200px"

          height="100px" onload="below_viewport_iframe.resolve()"</iframe>

</body>