testing/web-platform/tests/loading/lazyload/move-element-and-scroll.tentative.html

   1 <!DOCTYPE html>
   2 <head>
   3   <title>Images with loading='lazy' load being moved to another document
   4          and then scrolled to</title>
   5   <script src="/resources/testharness.js"></script>
   6   <script src="/resources/testharnessreport.js"></script>
   7   <script src="common.js"></script>
   8 </head>
   9
  10 <!--
  11 Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
  12 -->
  13
  14 <body>
  15   <div id="tall_div" style="height:1000vh"></div>
  16   <div id="below_viewport_div"></div>
  17   <img id="below_viewport" src='resources/image.png?below_viewport' loading="lazy">
  18
  19   <script>
  20     const tall_div = document.getElementById("tall_div");
  21     const below_viewport_element = document.getElementById("below_viewport");
  22     const below_viewport_div = document.getElementById("below_viewport_div");
  23
  24     async_test(function(t) {
  25       below_viewport_element.onload =
  26         t.unreached_func("The below viewport image should not load");
  27       t.step_timeout(t.step_func_done(), 1000);
  28       const iframe = document.createElement('iframe');
  29       iframe.setAttribute("style", "display:none");
  30       iframe.srcdoc = "<body></body>";
  31       iframe.onload = () => {
  32         const adopted_img = iframe.contentDocument.adoptNode(below_viewport_element);
  33         iframe.contentDocument.body.appendChild(adopted_img);
  34         below_viewport_div.scrollIntoView();
  35       };
  36       document.body.insertBefore(iframe, tall_div);
  37     }, "Test that <img> below viewport is not loaded when moved to another " +
  38        "document and then scrolled to");
  39 </script>
  40 </body>