iframe-loading-lazy-base-url-3.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-3.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<head>

  <title>Deferred iframes with loading='lazy' changed to eager later

         use the document's base URL computed at parse-time</title>

  <link rel="author" title="Oliver Medhurst" href="mailto:omedhurst@mozilla.com">

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

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

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

  <base href='/html/semantics/embedded-content/the-iframe-element/resources/'>

</head>

<script>

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

  let has_window_loaded = false;

  async_test(t => {

    // Change the base URL and scroll down to load the deferred iframe.

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

      const base = document.querySelector('base');

      base.href = '/invalid-url-where-no-subresources-exist/';

      has_window_loaded = true;

      below_viewport_iframe.element().loading = 'eager';

    }));

    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>"),

                    "The loading=lazy iframe's content is accessible upon loading");

    }));

  }, "When a loading=lazy iframe is changed to eager later before loading, it loads relative to the " +

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

</script>

<body>

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

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

          width="200px" height="100px" onload="below_viewport_iframe.resolve()">

  </iframe>

</body>