broken-image-icon.html (2861B)
1 <!doctype html> 2 <!-- 3 The soft navigation version of the identically named test in 4 /largest-contentful-paint/broken-image-icon.html. 5 Notes: 6 - Awaits trivial soft navigation with same page contents as original test. 7 - Viewport is very small so that the small icon below (16x8) is 8 sufficiently large to trigger a soft navigation. 9 - Original test was awaiting FCP, but we don't support that yet 10 for soft navs; so now we await LCP for the hard navigation, and then 11 LCP and soft nav for the soft navigation, with the promise set up prior 12 to the click. 13 --> 14 <meta name="viewport" content="width=50, height=50, initial-scale=1" /> 15 <title>Broken Image Icon Should Not Be LCP after soft navigation</title> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script src="/resources/testdriver.js"></script> 19 <script src="/resources/testdriver-vendor.js"></script> 20 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 21 <script> 22 function clickHandler() { 23 document.body.innerHTML = ` 24 <img src="../non-existent-image.jpg"> 25 <img src="/css/css-images/support/colors-16x8.png"> 26 `; 27 history.pushState({}, "", "/test"); 28 } 29 </script> 30 <body> 31 <div id="click-target" onclick="clickHandler()">Click!</div> 32 </body> 33 <script> 34 promise_test(async (t) => { 35 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 36 const helper = new SoftNavigationTestHelper(t); 37 const lcpEntries = 38 await helper.getBufferedPerformanceEntriesWithTimeout("largest-contentful-paint"); 39 assert_equals(lcpEntries.length, 1); 40 assert_equals(lcpEntries[0].id, "click-target", "The first entry should be the button"); 41 42 const promise = Promise.all([ 43 SoftNavigationTestHelper.getPerformanceEntries("interaction-contentful-paint"), 44 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"), 45 ]); 46 47 if (test_driver) { 48 test_driver.click(document.getElementById("click-target")); 49 } 50 51 const [softLcpEntries, softNavigationEntries] = await promise; 52 assert_equals(softNavigationEntries.length, 1, "One soft navigation entry."); 53 assert_true( 54 softNavigationEntries[0].name.endsWith("test"), 55 "Soft navigation should be to test page.", 56 ); 57 58 // There should be only 1 LCP entry and it should be the colors-16x8.png though 59 // being smaller than the broken image icon. The broken image icon should not 60 // emit an LCP entry. 61 assert_equals(softLcpEntries.length, 1, "There should be one and only one LCP entry."); 62 assert_true( 63 softLcpEntries[0].url.includes("colors-16x8.png"), 64 "The LCP entry should be the colors-16x8.png", 65 ); 66 }, "The broken image icon should not emit an LCP entry after soft navigation."); 67 </script>