| <!DOCTYPE html> |
| <head> |
| <title>loading='lazy' image with srcset</title> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data"> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#will-lazy-load-image-steps"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <div style="height:1000vh;"></div> |
| <img srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC" loading="lazy"> |
| <img loading="lazy" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"> |
| <script> |
| promise_test(async t => { |
| let loaded_images = 0; |
| const imgs = document.querySelectorAll("img"); |
| imgs.forEach(img => { |
| img.addEventListener("load", () => { loaded_images++; }, { once: true }); |
| }); |
| |
| await new Promise(resolve => window.addEventListener("load", resolve)); |
| |
| assert_equals(loaded_images, 0, |
| "lazy-load images with srcset shouldn't be loaded yet"); |
| |
| const promises = [ |
| new Promise(resolve => imgs[0].addEventListener("load", resolve)), |
| new Promise(resolve => imgs[1].addEventListener("load", resolve)), |
| ]; |
| |
| imgs[1].scrollIntoView(); |
| await Promise.all(promises); |
| |
| imgs.forEach(img => { |
| assert_true(img.complete, |
| "Now the lazy-load image with srcset should be loaded"); |
| }); |
| }); |
| </script> |
