image-loading-lazy-different-crossorigin.html (3253B)
1 <!doctype html> 2 <html> 3 <title>Lazyload images cannot load immediately from the list of available images if their tuple doesn't match other images in that list</title> 4 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 5 <link rel="author" title="Przemyslaw Gorszkowski" href="mailto:pgorszkowski@igalia.com"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attribute"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <!-- A `loading=lazy` image will be placed below this div so that it is below 12 the viewport --> 13 <div id="img-container"></div> 14 <div style="height: 1000vh;"></div> 15 <div id="below-viewport-img-container"></div> 16 17 <script> 18 const image_path = 'resources/image.png?image-lazy-loading-lazy-different-crossorigin-' + Math.random(); 19 20 promise_test(async t => { 21 await new Promise((resolve, reject) => { 22 const img = new Image(); 23 img.onload = resolve; 24 img.onerror = e => { reject(new Error("The img should not fail to load")) }; 25 document.querySelector('#img-container').append(img); 26 img.src = image_path; 27 }); 28 29 30 // At this point, the image fetched eagerly above exists in the "list of 31 // available images". As per the spec's #updating-the-image-data algorithm [1] 32 // step 6, the "list of avalable images" is consulted before we take any 33 // lazyload-specific action. This means that lazyload images can load eagerly 34 // if they target a resource in the list of available images (includes cors 35 // settings attribute matching [2]). The image from "img-container" does not 36 // have "crossorigin" attribute and the lazyload image has crossorigin="anonymous". 37 // This means that lazyload image cannot be loaded eagerly from the list of available images. 38 // [1]: https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data 39 // [2]: https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attribute 40 const lazyload_image_promise = new Promise((resolve, reject) => { 41 const img = new Image(); 42 img.loading = 'lazy'; 43 img.crossOrigin = "anonymous"; 44 img.onload = e => { 45 reject("The img should not be loaded from the list of available images because of different 'crossorigin'") }; 46 img.onerror = e => { reject("The img should not fail to load") }; 47 48 document.querySelector('#below-viewport-img-container').append(img); 49 img.src = image_path; 50 }); 51 const timeout_promise = new Promise((resolve, reject) => { 52 t.step_timeout(() => { 53 resolve("The `loading=lazy` image should not load immediately from " + 54 "the list of available images because of different 'crossorigin'"); 55 }, 2000); 56 }); 57 58 // The `timeout_promise` should resolve first because lazyload image is not 59 // able to eagerly use resource from the "list of available images" if there 60 // is a difference in 'crossorigin'. 61 await Promise.race([lazyload_image_promise, timeout_promise]); 62 }, "Lazyload images cannot load immediately from the list of available images if their tuple doesn't match other images in that list"); 63 </script>