background-image-set-image.html (2535B)
1 <!doctype html> 2 <!-- 3 The soft navigation version of the identically named test in 4 /largest-contentful-paint/background-image-set-image.html 5 Notes: 6 - Triggers trivial soft navigation with same page contents as original test. 7 --> 8 <title>Background image-set images should be LCP candidates after soft navigation</title> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 14 <script> 15 function clickHandler() { 16 document.body.innerHTML = ` 17 <style> 18 .background { 19 width: calc(100vw - 40px); 20 height: calc(100vw - 40px); 21 max-width: 100px; 22 max-height: 100px; 23 background: #eee image-set("/images/lcp-100x50.png" type("image/png")) center center no-repeat; 24 background-size: cover; 25 } 26 </style> 27 <div class="background"></div> 28 <p>fallback</p>`; 29 history.pushState({}, "", "/test"); 30 } 31 </script> 32 <body> 33 <div id="click-target" onclick="clickHandler()">Click!</div> 34 </body> 35 <script> 36 promise_test(async (t) => { 37 assert_implements(window.InteractionContentfulPaint, "InteractionContentfulPaint is not implemented"); 38 const helper = new SoftNavigationTestHelper(t); 39 const lcpEntries = 40 await helper.getBufferedPerformanceEntriesWithTimeout("largest-contentful-paint"); 41 assert_equals(lcpEntries.length, 1); 42 assert_equals(lcpEntries[0].id, "click-target", "The first entry should be the button"); 43 44 const softLcpPromise = new Promise((resolve) => { 45 new PerformanceObserver((list) => { 46 for (const entry of list.getEntries()) { 47 if (entry.url.includes("lcp-100x50")) { 48 resolve(entry.url); 49 return; 50 } 51 } 52 }).observe({ 53 type: "interaction-contentful-paint", 54 }); 55 }); 56 if (test_driver) { 57 test_driver.click(document.getElementById("click-target")); 58 } 59 await helper.withTimeoutMessage( 60 softLcpPromise, 61 "Timed out waiting for LCP entry for background image-set image.", 62 /*timeoutMs=*/ 3000, 63 ); 64 assert_equals( 65 1, 66 performance.getEntriesByType("soft-navigation").length, 67 "There should be one soft navigation entry.", 68 ); 69 }, "Background image-set images should be eligible for LCP candidates after soft navigation."); 70 </script>