image-loading-lazy-base-url-2.html (2026B)
1 <!DOCTYPE html> 2 <head> 3 <title>Deferred loading=lazy images load relative to the document's base URL 4 at parse-time</title> 5 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 6 <link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="../resources/common.js"></script> 10 </head> 11 12 <script> 13 const below_viewport_img = new ElementLoadPromise("below-viewport"); 14 15 let has_window_loaded = false; 16 17 async_test(t => { 18 // Change the document's base URL to a bogus one, and scroll the 19 // below-viewport img into view. When it loads, it should load relative 20 // to the old base URL computed at parse-time. 21 window.addEventListener("load", t.step_func(() => { 22 window.history.pushState(2, document.title, 23 '/invalid-url-where-no-subresources-exist/') 24 has_window_loaded = true; 25 below_viewport_img.element().scrollIntoView(); 26 })); 27 28 below_viewport_img.promise.then(t.step_func_done(() => { 29 assert_true(has_window_loaded, 30 "Below-viewport loading=lazy images do not block the " + 31 "window load event"); 32 })); 33 34 below_viewport_img.promise.catch( 35 t.unreached_func("The image request should not load relative to the " + 36 "current (incorrect) base URL.") 37 ); 38 }, "When a loading=lazy image is loaded, it loads relative to the " + 39 "document's base URL computed at parse-time."); 40 </script> 41 42 <body> 43 <div style="height:1000vh;"></div> 44 <script> 45 // Change the document's base URL so that the img request parses relative 46 // to it when it sets up the request at parse-time. 47 window.history.pushState(1, document.title, 'resources/') 48 </script> 49 <img id="below-viewport" src="image.png?base-url-2" loading="lazy" 50 onload="below_viewport_img.resolve()" 51 onerror="below_viewport_img.reject()"> 52 </body>