expanded-image.html (2429B)
1 <!doctype html> 2 <!-- 3 The soft navigation version of the identically named test in 4 /largest-contentful-paint/expanded-image.html 5 Notes: 6 - Triggers trivial soft navigation with same page contents as original test. 7 --> 8 <meta charset="utf-8" /> 9 <title> 10 Largest Contentful Paint after soft navigation: expanded image bounded by intrinsic size. 11 </title> 12 <style type="text/css"> 13 #image_id { 14 width: 300px; 15 height: 300px; 16 } 17 </style> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script src="/resources/testdriver.js"></script> 21 <script src="/resources/testdriver-vendor.js"></script> 22 <script src="/soft-navigation-heuristics/resources/soft-navigation-helper.js"></script> 23 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 24 <script> 25 function clickHandler() { 26 document.body.innerHTML = `<img src='/images/black-rectangle.png' id='image_id'/>`; 27 history.pushState({}, "", "/test"); 28 } 29 </script> 30 <body> 31 <div id="click-target" onclick="clickHandler()">Click!</div> 32 </body> 33 <script> 34 setup({ hide_test_state: true }); 35 promise_test(async (t) => { 36 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 37 const helper = new SoftNavigationTestHelper(t); 38 const lcpEntries = 39 await helper.getBufferedPerformanceEntriesWithTimeout("largest-contentful-paint"); 40 assert_equals(lcpEntries.length, 1); 41 assert_equals(lcpEntries[0].id, "click-target", "The first entry should be the button"); 42 const beforeLoad = performance.now(); 43 const promise = Promise.all([ 44 SoftNavigationTestHelper.getPerformanceEntries("interaction-contentful-paint"), 45 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"), 46 ]); 47 if (test_driver) { 48 test_driver.click(document.getElementById("click-target")); 49 } 50 const [softLcpEntries, softNavigationEntries] = await promise; 51 assert_equals(softLcpEntries.length, 1); 52 const entry = softLcpEntries[0]; 53 const url = window.location.origin + "/images/black-rectangle.png"; 54 // black-rectangle.png is 100 x 50. It occupies 300 x 300 so size will be bounded by the intrinsic size. 55 const size = 100 * 50; 56 checkImage(entry, url, "image_id", size, beforeLoad); 57 }, "Largest Contentful Paint after soft navigation: |size| attribute is bounded by intrinsic size."); 58 </script>