first-paint-equals-lcp-text.html (3332B)
1 <!doctype html> 2 <!-- 3 The soft navigation version of the identically named test in 4 /largest-contentful-paint/first-paint-equals-lcp-text.html. 5 Notes: 6 - Awaits trivial soft navigation with same page contents as original test. 7 - Since FCP is not implemented for soft navigations, this test actually 8 compares the element timing of the text node to the LCP. 9 --> 10 <meta charset="utf-8" /> 11 <title> 12 LargestContentfulPaint after soft navigation compared with FirstPaint and FirstContentfulPaint on 13 single text page. 14 </title> 15 <script src="/resources/testharness.js"></script> 16 <script src="/resources/testharnessreport.js"></script> 17 <script src="/resources/testdriver.js"></script> 18 <script src="/resources/testdriver-vendor.js"></script> 19 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 20 <script> 21 function clickHandler() { 22 document.body.innerHTML = `<p elementtiming=text>Text</p>`; 23 history.pushState({}, "", "/test"); 24 } 25 </script> 26 <body> 27 <div id="click-target" onclick="clickHandler()">Click!</div> 28 </body> 29 <script> 30 setup({ hide_test_state: true }); 31 promise_test(async (t) => { 32 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 33 34 const helper = new SoftNavigationTestHelper(t); 35 const lcpEntries = 36 await helper.getBufferedPerformanceEntriesWithTimeout("largest-contentful-paint"); 37 assert_equals(lcpEntries.length, 1); 38 assert_equals(lcpEntries[0].id, "click-target", "The first entry should be the button"); 39 const beforeLoad = performance.now(); 40 const promise = Promise.all([ 41 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"), 42 SoftNavigationTestHelper.getPerformanceEntries("element"), 43 SoftNavigationTestHelper.getPerformanceEntries("interaction-contentful-paint"), 44 ]); 45 if (test_driver) { 46 test_driver.click(document.getElementById("click-target")); 47 } 48 const [softNavigationEntries, elementEntries, softLcpEntries] = await helper.withTimeoutMessage( 49 promise, 50 "Failed to get performance entries.", 51 ); 52 53 assert_equals(1, softNavigationEntries.length, "There should be one soft navigation entry."); 54 assert_equals(1, elementEntries.length, "There should be one element entry."); 55 assert_equals(1, softLcpEntries.length, "There should be one soft LCP entry."); 56 57 assert_less_than_equal( 58 softNavigationEntries[0].startTime, 59 softLcpEntries[0].startTime, 60 "Soft LCP should be after soft navigation.", 61 ); 62 assert_equals( 63 softLcpEntries[0].startTime, 64 elementEntries[0].startTime, 65 "Soft LCP and element entry should be at the same time.", 66 ); 67 68 assert_not_equals( 69 lcpEntries[0].navigationId, 70 softNavigationEntries[0].navigationId, 71 "Initial LCP and soft navigation have different navigation ID.", 72 ); 73 assert_equals( 74 softNavigationEntries[0].navigationId, 75 softLcpEntries[0].navigationId, 76 "Soft navigation and soft LCP have the same navigation ID.", 77 ); 78 assert_equals( 79 softLcpEntries[0].navigationId, 80 elementEntries[0].navigationId, 81 "Soft LCP and element entry have the same navigation ID.", 82 ); 83 }, "FCP and LCP after soft navigation are the same when there is a single text element in the page."); 84 </script>