| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Detect simple soft navigation.</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="resources/soft-navigation-helper.js"></script> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| </head> |
| <body> |
| <main id=main> |
| <div> |
| <a id=link><img src="/images/lcp-256x256.png"></a> |
| </div> |
| </main> |
| <script> |
| const link = document.getElementById("link"); |
| testSoftNavigation({ |
| addContent: async () => { |
| // Add an LCP element, large enough to trigger the Soft Navigation |
| // heuristics. |
| const p = addTextParagraphToMain("Lorem Ipsum", /*element_timing=*/"lcp"); |
| p.id = "first_lcp"; |
| // Once the first element is fully painted. |
| const observer = new PerformanceObserver(list => { |
| // Add a larger element to be the new LCP. |
| window.lcp_observer_promise = new Promise(resolve => { |
| (new PerformanceObserver(resolve)).observe({type: "element"}); |
| }); |
| const p2 = addTextParagraphToMain("LOREM IPSUMER", "real_lcp"); |
| p2.id = "real_lcp"; |
| observer.disconnect(); |
| }); |
| observer.observe({type: "element", buffered: true}); |
| }, |
| link: link, |
| validate: async () => { |
| await window.lcp_observer_promise; |
| const lcps = await getLcpEntries(); |
| assert_greater_than_equal(lcps.length, 3, "Got at least 3 LCP entries"); |
| assert_equals(lcps[lcps.length - 2].id, "first_lcp", "Got the first LCP"); |
| assert_equals(lcps[lcps.length - 1].id, "real_lcp", "Got the real LCP"); |
| }, |
| test: "Test that an image LCP followed by 2 smaller soft navigation LCPs" |
| + " properly queues both LCP entries, even when the soft navigation" |
| + " is detected in between them."}); |
| </script> |
| </body> |
| </html> |