image-loading-lazy-move-document.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<head>

<title>Moving loading='lazy' image into another top level document</title>

<link rel="help" href="https://github.com/scott-little/lazyload">

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

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

</head>

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

<img loading="lazy"

     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC">

<script>

promise_test(async t => {

  let image_loaded = false;

  const img = document.querySelector("img");

  img.addEventListener("load", () => { image_loaded = true; });

  await new Promise(resolve => window.addEventListener("load", resolve));

  assert_false(image_loaded,

               "lazy-load image shouldn't be loaded yet");

  const anotherWin = window.open("resources/newwindow.html");

  await new Promise(resolve => anotherWin.addEventListener("load", resolve));

  anotherWin.document.body.appendChild(img);

  assert_false(image_loaded,

               "lazy-load image shouldn't be loaded yet");

  img.scrollIntoView();

  await new Promise(resolve => img.addEventListener("load", resolve));

  assert_true(img.complete,

              "Now the lazy-load image should be loaded");

});

</script>