node-with-image-pseudo-element.html (2272B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 8 9 <style> 10 .content::before { 11 content: ""; 12 display: block; 13 width: 256px; 14 height: 256px; 15 background-image: url(/images/lcp-256x256.png); 16 background-size: contain; 17 background-repeat: no-repeat; 18 background-position: center; 19 } 20 </style> 21 22 <button id="navigateButton">Click here!</button> 23 <div id="container"></div> 24 25 <script> 26 promise_test(async t => { 27 const url = 'soft-nav-1'; 28 29 navigateButton.addEventListener('click', async () => { 30 container.innerHTML = `<div><div id="content">Text</div></div>`; 31 history.pushState({}, '', url); 32 }, {once: true}); 33 34 // Set up the PerformanceObservers before clicking to avoid races, 35 // and use unbuffered here so we don't get duplicate entries. 36 const softNavPromise = 37 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"); 38 const icpPromise = 39 SoftNavigationTestHelper.getPerformanceEntries("interaction-contentful-paint"); 40 41 if (test_driver) { 42 test_driver.click(navigateButton); 43 } 44 45 const helper = new SoftNavigationTestHelper(t); 46 47 // Check if we detected a soft nav. 48 const softNavs = await helper.withTimeoutMessage( 49 softNavPromise, "Soft navigation not detected.", /*timeout=*/ 3000); 50 assert_equals(softNavs.length, 1, 'Expected exactly one soft navigation.'); 51 assert_true( 52 softNavs[0].name.endsWith(url), 53 `Unexpected Soft Navigation URL. Expected url to end with ${url} but got ${softNavs[0].name}`); 54 55 // Check that we only get one ICP entry, and that it's for the expected node. 56 const icps = await helper.withTimeoutMessage( 57 icpPromise, 'ICP not detected.', /*timeout=*/ 3000); 58 assert_equals(icps.length, 1, 'Expected exactly one ICP entry.'); 59 assert_equals(icps[0].id, 'content', 'Expected ICP candidate to be "content"'); 60 }, 'Soft Navigation Detection supports adding nodes with image pseudo elements') 61 </script>