distant-leaf-image.window.js (1884B)
1 // META: script=/resources/testdriver.js 2 // META: script=/resources/testdriver-vendor.js 3 // META: script=../../resources/soft-navigation-test-helper.js 4 5 // This test is very similar to distant-leaf-text.window.js, but the leaf 6 // node is an image instead of text. 7 // 8 // This test is intended to verify that when a distant leaf of a 9 // deeply nested div element is attached to the DOM, its painting can 10 // trigger a soft navigation. 11 // 12 // To show this, we create a button that, when clicked, creates a deeply 13 // nested div element and attaches it to the DOM - only the leaf, an image, 14 // 10 levels below the attachment point actually gets painted. 15 // 16 // An earlier version of this test was based on 17 // https://g-issues.chromium.org/issues/419822831#comment5 18 19 function clickHandler() { 20 let div = document.createElement("div"); 21 const img = new Image(); // The leaf node that gets painted. 22 img.src = "/images/lcp-256x256.png" 23 div.appendChild(img); 24 for (let i = 0; i < 10; i++) { 25 const tmp = document.createElement('div'); 26 tmp.appendChild(div); 27 div = tmp; 28 } 29 document.body.appendChild(div); 30 history.pushState({}, '', '/leaf-image'); 31 } 32 33 const button = document.createElement('div'); 34 button.textContent = 'Click here!'; 35 button.onclick = clickHandler; 36 document.body.appendChild(button); 37 38 promise_test(async (t) => { 39 if (test_driver) { 40 test_driver.click(button); 41 } 42 const helper = new SoftNavigationTestHelper(t); 43 const entries = await helper.getBufferedPerformanceEntriesWithTimeout( 44 /*type=*/ 'soft-navigation', 45 /*minNumEntries=*/ 1, 46 /*timeout=*/ 3000 47 ); 48 assert_equals(entries.length, 1, 'Expected exactly one soft navigation.'); 49 assert_equals( 50 entries[0].name.replace(/.*\//, ''), 51 'leaf-image', 52 'URL ends with \'leaf-image\'.', 53 ); 54 }, 'DOM: Distant leaf (image) satisfies Soft Navigation paint criterion.');