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

   1 <!DOCTYPE html>
   2 <head>
   3   <title>Images with loading='lazy' load when in the viewport</title>
   4   <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
   5   <link rel="help" href="https://github.com/scott-little/lazyload">
   6   <script src="/resources/testharness.js"></script>
   7   <script src="/resources/testharnessreport.js"></script>
   8 </head>
   9
  10 <script>
  11   const t = async_test("Test that images with loading='lazy' under multicol load once they enter the viewport.");
  12
  13   let has_in_viewport_loaded = false;
  14   let has_window_loaded = false;
  15
  16   const in_viewport_img_onload = t.step_func(function() {
  17     assert_false(has_in_viewport_loaded, "The in_viewport element should load only once.");
  18     has_in_viewport_loaded = true;
  19   });
  20
  21   window.addEventListener("load", t.step_func_done(function() {
  22     assert_true(has_in_viewport_loaded, "The in_viewport element should have loaded before window.load().");
  23     assert_false(has_window_loaded, "The window.load() event should only fire once.");
  24     has_window_loaded = true;
  25   }));
  26
  27 </script>
  28
  29 <div class=texty style="column-count: 2; height: 300px">
  30   <div style="border: 1px solid black">
  31     <h2 style="column-span: all"></h2>
  32     <img loading="lazy" src="resources/image.png?first" width="160" height="120"
  33         onload="in_viewport_img_onload()">
  34   </div>
  35 </div>
  36
  37   <!--
  38     This async script loads very slowly in order to ensure that, if the
  39     below_viewport element has started loading, it has a chance to finish
  40     loading before window.load() happens, so that the test will dependably fail
  41     in that case instead of potentially passing depending on how long different
  42     resource fetches take.
  43   -->
  44   <script async src="/common/slow.py"></script>