scrolling-below-viewport-image-lazy-loading-in-iframe.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-img-element/scrolling-below-viewport-image-lazy-loading-in-iframe.html - WPT Dashboard Interop Dashboard

<!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>