softnav-after-lcp-paint.tentative.html (1522B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Detect simple soft navigation.</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="resources/soft-navigation-helper.js"></script> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 </head> 13 <body> 14 <main id=main> 15 <div> 16 <a id=link><img src="/images/lcp-256x256.png"></a> 17 </div> 18 </main> 19 <script> 20 testSoftNavigation({ 21 testName: "Test that an image LCP followed by a smaller soft navigation LCP" 22 + " properly queues an LCP entry, even when the soft navigation is" 23 + " detected after the LCP.", 24 addContent: async () => { 25 let lcp_element_painted; 26 const lcp_element_paint_promise = new Promise((r) => { lcp_element_painted = r; }); 27 // Add an LCP element, but have it be small enough to not trigger the 28 // Soft Navigation heuristics. 29 const p = addTextParagraphToMain("Lorem Ipsu", /*element_timing=*/"lcp"); 30 (new PerformanceObserver(list => { 31 // Once the first element is fully painted: 32 lcp_element_painted(); 33 })).observe({type: "element", buffered: true}); 34 await lcp_element_paint_promise; 35 // Add a smaller element that gets us over that threshold. 36 addTextParagraphToMain("m"); 37 }, 38 }); 39 </script> 40 </body> 41 </html>