invisible-image.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-img-element/invisible-image.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<head>

  <title>Test that below-viewport invisible images that are not marked

         loading=lazy still load, and block the window load event</title>

  <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">

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

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

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

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

</head>

<body>

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

  <img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?1'>

  <img id="visibility_hidden_explicit_eager" style="visibility:hidden;" src='resources/image.png?2'

       loading="eager">

  <img id="display_none" style="display:none;" src='resources/image.png?3'>

  <img id="display_none_explicit_eager" style="display:none;" src='resources/image.png?4'

       loading="eager">

  <img id="attribute_hidden" hidden src='resources/image.png?5'>

  <img id="attribute_hidden_explicit_eager" hidden src='resources/image.png?6'

       loading="eager">

  <img id="js_display_none" src='resources/image.png?7'>

  <img id="js_display_none_explicit_eager" src='resources/image.png?8'

       loading="eager">

  <script>

    document.getElementById("js_display_none").style = 'display:none;';

    const visibility_hidden_element = document.getElementById("visibility_hidden");

    const visibility_hidden_element_explicit_eager =

      document.getElementById("visibility_hidden_explicit_eager");

    const display_none_element = document.getElementById("display_none");

    const display_none_element_explicit_eager =

      document.getElementById("display_none_explicit_eager");

    const attribute_hidden_element = document.getElementById("attribute_hidden");

    const attribute_hidden_element_explicit_eager =

      document.getElementById("attribute_hidden_explicit_eager");

    const js_display_none_element = document.getElementById("js_display_none");

    const js_display_none_element_explicit_eager =

      document.getElementById("js_display_none_explicit_eager");

    let have_images_loaded = false;

    async_test(t => {

      let image_fully_loaded_promise = (element) => {

        return new Promise(resolve => {

          element.addEventListener("load", t.step_func(resolve));

});

      Promise.all([

        image_fully_loaded_promise(visibility_hidden_element),

        image_fully_loaded_promise(visibility_hidden_element_explicit_eager),

        image_fully_loaded_promise(display_none_element),

        image_fully_loaded_promise(display_none_element_explicit_eager),

        image_fully_loaded_promise(attribute_hidden_element),

        image_fully_loaded_promise(attribute_hidden_element_explicit_eager),

        image_fully_loaded_promise(js_display_none_element),

        image_fully_loaded_promise(js_display_none_element_explicit_eager)

      ]).then(t.step_func(() => {

        have_images_loaded = true;

      })).catch(t.unreached_func("All images should load correctly"));

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

        assert_true(have_images_loaded,

                    "The images should block the window load event.");

      }));

    }, "Test that below-viewport invisible images that are not marked " +

       "loading=lazy still load, and block the window load event");

</script>