softnav-after-lcp-paint-larger-than-viewport.tentative.html (2639B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/soft-navigation-heuristics/resources/soft-navigation-helper.js"></script> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 </head> 12 <body> 13 <main id=main> 14 <div> 15 <a id=link><img id="initial_image1" src="/images/lcp-256x256.png?1" style="width: 90vw; height: 90vh"> 16 <div id=extra></div> 17 </a> 18 </div> 19 </main> 20 <script> 21 (async () => { 22 // Inject a second image that takes a large part of the viewport. 23 await new Promise(resolve => { 24 requestAnimationFrame(() => requestAnimationFrame(() => { 25 document.getElementById("extra").innerHTML = ` 26 <div style="position: absolute; bottom: 0; right: 0"> 27 <img id="initial_image2" src="/images/lcp-256x256.png?2" style="width: 90vw;height: 90vh"> 28 </div>`; 29 resolve(); 30 })); 31 }); 32 // Wait until the second image is rendered. 33 await new Promise(resolve => { 34 requestAnimationFrame(() => requestAnimationFrame(() => { 35 resolve(); 36 })); 37 }); 38 testSoftNavigation({ 39 testName: "Test that an image LCP followed by a smaller soft navigation LCP" 40 + " properly queues an LCP entry, even when the soft navigation is" 41 + " detected after the LCP, even when initial paints significantly" 42 + " exceed the viewport dimensions.", 43 addContent: async () => { 44 // Remove the initial image, so that the text would be painted on screen. 45 document.getElementById("initial_image1").remove(); 46 document.getElementById("initial_image2").remove(); 47 let lcp_element_painted; 48 const lcp_element_paint_promise = new Promise((r) => { lcp_element_painted = r; }); 49 // Add an LCP element, but have it be small enough to not trigger the 50 // Soft Navigation heuristics. 51 const p = addTextParagraphToMain( 52 "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod", 53 /*element_timing=*/"lcp"); 54 (new PerformanceObserver(list => { 55 // Once the first element is fully painted: 56 lcp_element_painted(); 57 })).observe({type: "element", buffered: true}); 58 await lcp_element_paint_promise; 59 // Add a smaller element that gets us over that threshold. 60 addTextParagraphToMain("dolore magna aliqua."); 61 }, 62 }); 63 })(); 64 </script> 65 </body> 66 </html>