node-with-image-pseudo-element-and-text.html (3111B)
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 const firstIcpPromise = 31 SoftNavigationTestHelper.getPerformanceEntries('interaction-contentful-paint'); 32 33 container.innerHTML = `<div><div id="content">Text</div></div>`; 34 history.pushState({}, '', url); 35 36 // After the ICP entry for the text is produced, add the 'content' class 37 // to cause an image paint for the same node. We expect an ICP entry for 38 // this as well. 39 await (new SoftNavigationTestHelper(t)).withTimeoutMessage( 40 firstIcpPromise, 'Timed out waiting for initial ICP', /*timeout=*/ 3000); 41 content.classList.add('content'); 42 }, {once: true}); 43 44 // Set up the PerformanceObservers before clicking to avoid races, 45 // and use unbuffered here so we don't get duplicate entries. 46 const softNavPromise = 47 SoftNavigationTestHelper.getPerformanceEntries('soft-navigation'); 48 const icpPromise = SoftNavigationTestHelper.getPerformanceEntries( 49 'interaction-contentful-paint', 50 /* minNumEntries= */ 2); 51 52 if (test_driver) { 53 test_driver.click(navigateButton); 54 } 55 56 const helper = new SoftNavigationTestHelper(t); 57 58 // Check if we detected a soft nav. 59 const softNavs = await helper.withTimeoutMessage( 60 softNavPromise, "Soft navigation not detected.", /*timeout=*/ 3000); 61 assert_equals(softNavs.length, 1, 'Expected exactly one soft navigation.'); 62 assert_true( 63 softNavs[0].name.endsWith(url), 64 `Unexpected Soft Navigation URL. Expected url to end with ${url} but got ${softNavs[0].name}`); 65 66 // Check that we get two ICP entries, one for the text and one for the image. 67 const icps = await helper.withTimeoutMessage( 68 icpPromise, 'ICPs not detected.', /*timeout=*/ 3000); 69 assert_equals(icps.length, 2, 'Expected exactly two ICP entries.'); 70 71 assert_equals(icps[0].id, 'content', 'Expected first ICP candidate to be "content"'); 72 assert_equals(icps[0].url, '', 'Expected first ICP url to be empty'); 73 74 assert_equals(icps[1].id, 'content', 'Expected second ICP candidate to be "content"'); 75 assert_true( 76 icps[1].url.endsWith('/images/lcp-256x256.png'), 77 'Expected second ICP url to be the image url'); 78 }, 'Soft Navigation Detection supports adding nodes with image pseudo elements and text') 79 </script>