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

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

chromium/third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/scrolling-below-viewport-image-lazy-loading-in-iframe.html