summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/scrolling-below-viewport-image-lazy-loading-in-iframe.html
blob: 3c26323426391a60cfe9dd0feee2bab496ce69e3 (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
<!DOCTYPE html>
<title>Scrolling a lazy loaded image into view in an iframe</title>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<iframe onload="async_test(this.contentWindow.run)" srcdoc="
<!DOCTYPE html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='../resources/common.js'></script>

<h1>Scroll down...</h1>
<p>Scroll down...</p>
<p>Scroll down...</p>
<img id='below_iframe_viewport_img' src='resources/image.png' loading='lazy'
   onload='below_iframe_viewport_img.resolve();' onerror='below_iframe_viewport_img.reject();'>

<script>
  const scroll_trigger_img = new ElementLoadPromise('visible');
  const below_iframe_viewport_img = new ElementLoadPromise('below_iframe_viewport_img');

  function run(t) {
    below_iframe_viewport_img.element().scrollIntoView();
    below_iframe_viewport_img.promise
      .then(t.step_func(() => {
        assert_not_equals(below_iframe_viewport_img.element().width, 0, 'width should be greater than zero after scrolling');
        assert_not_equals(below_iframe_viewport_img.element().height, 0, 'height should be greater than zero after scrolling');
        t.done();
    }))
    .catch(t.unreached_func('The below_iframe_viewport image should load'));
  };
</script>
"></iframe>