testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-move-document.html

   1 <!DOCTYPE html>
   2 <head>
   3 <title>Moving loading='lazy' image into another top level document</title>
   4 <link rel="help" href="https://github.com/scott-little/lazyload">
   5 <script src="/resources/testharness.js"></script>
   6 <script src="/resources/testharnessreport.js"></script>
   7 </head>
   8
   9 <div style="height:1000vh;"></div>
  10 <img loading="lazy"
  11      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC">
  12 <script>
  13 promise_test(async t => {
  14   let image_loaded = false;
  15   const img = document.querySelector("img");
  16   img.addEventListener("load", () => { image_loaded = true; });
  17
  18   await new Promise(resolve => window.addEventListener("load", resolve));
  19
  20   assert_false(image_loaded,
  21                "lazy-load image shouldn't be loaded yet");
  22
  23   const anotherWin = window.open("resources/newwindow.html");
  24
  25   await new Promise(resolve => anotherWin.addEventListener("load", resolve));
  26
  27   anotherWin.document.body.appendChild(img);
  28
  29   assert_false(image_loaded,
  30                "lazy-load image shouldn't be loaded yet");
  31
  32   img.scrollIntoView();
  33
  34   await new Promise(resolve => img.addEventListener("load", resolve));
  35   assert_true(img.complete,
  36               "Now the lazy-load image should be loaded");
  37 });
  38 </script>