cross-origin-image.sub.html (2415B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <!-- 4 The soft navigation version of the identically named test in 5 /largest-contentful-paint/cross-origin-image.sub.html. 6 Notes: 7 - Awaits trivial soft navigation with same page contents as original test. 8 - Uses promise_test and slightly revised HTML tags, to make it easy to 9 observe the initial LCP before the soft navigation (the click target) 10 and distinguish it from the interesting LCP after the soft navigation. 11 --> 12 <title> 13 Largest Contentful Paint after soft navigation: observe cross-origin images but without 14 renderTime. 15 </title> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script src="/resources/testdriver.js"></script> 19 <script src="/resources/testdriver-vendor.js"></script> 20 <script src="/soft-navigation-heuristics/resources/soft-navigation-helper.js"></script> 21 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 22 <script> 23 function clickHandler() { 24 document.body.innerHTML = `<img src="http://{{domains[www]}}:{{ports[http][1]}}/images/blue.png" id="image_id" />`; 25 history.pushState({}, "", "/test"); 26 } 27 const beforeLoad = performance.now(); 28 </script> 29 <body> 30 <div id="click-target" onclick="clickHandler()">Click!</div> 31 </body> 32 <script> 33 promise_test(async (t) => { 34 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 35 const helper = new SoftNavigationTestHelper(t); 36 const lcpEntries = 37 await helper.getBufferedPerformanceEntriesWithTimeout("largest-contentful-paint"); 38 assert_equals(lcpEntries.length, 1); 39 assert_equals(lcpEntries[0].id, "click-target", "The first entry should be the button"); 40 const softLcpPromise = 41 SoftNavigationTestHelper.getPerformanceEntries("interaction-contentful-paint"); 42 if (test_driver) { 43 test_driver.click(document.getElementById("click-target")); 44 } 45 const softLcpEntries = await softLcpPromise; 46 assert_equals(softLcpEntries.length, 1); 47 const entry = softLcpEntries[0]; 48 const url = "http://{{domains[www]}}:{{ports[http][1]}}/images/blue.png"; 49 // blue.png is 133 x 106. 50 const size = 133 * 106; 51 checkImage(entry, url, "image_id", size, beforeLoad, ["renderTimeIs0"]); 52 }, "Cross-origin image is observable after soft navigation, with renderTime equal to 0."); 53 </script>