contracted-image.html (2903B)
1 <!doctype html> 2 <!-- 3 The soft navigation version of the identically named 4 test in /largest-contentful-paint/contracted-image.html. 5 Notes: 6 - Sets viewport size to 400x400 to reduce flakiness. 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 <meta viewport="width=400, height=400" /> 13 <meta charset="utf-8" /> 14 <title> 15 Largest Contentful Paint: contracted image bounded by display size after soft navigation. 16 </title> 17 <style type="text/css"> 18 #image_id { 19 width: 50px; 20 height: 50px; 21 } 22 </style> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/resources/testdriver.js"></script> 26 <script src="/resources/testdriver-vendor.js"></script> 27 <script src="/soft-navigation-heuristics/resources/soft-navigation-helper.js"></script> 28 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 29 <script> 30 function clickHandler() { 31 document.body.innerHTML = `<img src="/images/black-rectangle.png" id="image_id" />`; 32 history.pushState({}, "", "/test"); 33 } 34 </script> 35 <body> 36 <div id="click-target" onclick="clickHandler()">Click!</div> 37 </body> 38 <script> 39 promise_test(async (t) => { 40 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 41 const helper = new SoftNavigationTestHelper(t); 42 const lcpEntries = 43 await helper.getBufferedPerformanceEntriesWithTimeout("largest-contentful-paint"); 44 assert_equals(lcpEntries.length, 1); 45 assert_equals(lcpEntries[0].id, "click-target", "The first entry should be the button"); 46 47 const promises = Promise.all([ 48 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"), 49 SoftNavigationTestHelper.getPerformanceEntries("interaction-contentful-paint"), 50 ]); 51 const beforeLoad = performance.now(); 52 if (test_driver) { 53 test_driver.click(document.getElementById("click-target")); 54 } 55 const [softNavEntries, icpEntries] = await helper.withTimeoutMessage( 56 promises, 57 "Soft navigation and interaction contentful paint entries should be available.", 58 ); 59 assert_equals(softNavEntries.length, 1); 60 assert_equals(icpEntries.length, 1); 61 const entry = icpEntries[0]; 62 const url = window.location.origin + "/images/black-rectangle.png"; 63 // black-rectangle.png is 100 x 50. It occupies 50 x 50 so size will be bounded by the displayed size. 64 const size = 50 * 50; 65 checkImage(entry, url, "image_id", size, beforeLoad); 66 }, "Largest Contentful Paint: |size| attribute is bounded by display size after soft navigation."); 67 68 </script>