summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/not-rendered-image-loading-lazy.html
blob: 25aaedb2b2eb3f22c753797bc3228734c251cd0c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<head>
  <title>In-viewport loading=lazy not-rendered images should never load</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="../resources/common.js"></script>
</head>

<body>
  <!-- These images must not attempt to load -->
  <img id="display_none" style="display:none;" src="resources/image.png?not-rendered-image-loading-lazy-2" loading="lazy"
       onload="display_none_img.resolve();" onerror="display_none_img.reject();">
  <img id="attribute_hidden" hidden src="resources/image.png?not-rendered-image-loading-lazy-3" loading="lazy"
       onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
  <img id="js_display_none" src="resources/image.png?not-rendered-image-loading-lazy-4" loading="lazy"
       onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
  <script>
    document.getElementById("js_display_none").style = 'display:none;';
  </script>
</body>

<script>
  const display_none_img = new ElementLoadPromise("display_none");
  const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
  const js_display_none_img = new ElementLoadPromise("js_display_none");

  async_test(t => {
    const unreached_not_rendered_img_func =
      t.unreached_func("The not-rendered in-viewport loading=lazy images " +
                       "should not attempt to load.");

    display_none_img.promise
      .then(unreached_not_rendered_img_func)
      .catch(unreached_not_rendered_img_func);

    attribute_hidden_img.promise
      .then(unreached_not_rendered_img_func)
      .catch(unreached_not_rendered_img_func);

    js_display_none_img.promise
      .then(unreached_not_rendered_img_func)
      .catch(unreached_not_rendered_img_func);

    t.step_timeout(t.done, 2000);
  }, "In-viewport loading=lazy not-rendered images should never load");
</script>