repeated-image.html (1739B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: repeated image.</title> 4 <style> 5 #image_id { 6 width: 10px; 7 height: 10px; 8 } 9 </style> 10 <body> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="resources/largest-contentful-paint-helpers.js"></script> 14 <script> 15 setup({"hide_test_state": true}); 16 async_test(function (t) { 17 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 18 let beforeLoad = performance.now(); 19 let firstCallback = true; 20 const url = window.location.origin + '/images/black-rectangle.png'; 21 const observer = new PerformanceObserver( 22 t.step_func(entryList => { 23 assert_equals(entryList.getEntries().length, 1); 24 const entry = entryList.getEntries()[0]; 25 26 // First image is shrunk to be 10 x 10. The second image is added at its natural size: 100 x 50. 27 const size = firstCallback ? 10 * 10 : 100 * 50; 28 const id = firstCallback ? 'image_id' : 'second_id'; 29 checkImage(entry, url, id, size, beforeLoad); 30 if (firstCallback) { 31 const img = document.createElement('img'); 32 img.src = '/images/black-rectangle.png'; 33 img.id = 'second_id'; 34 beforeLoad = performance.now(); 35 document.getElementById('image_div').appendChild(img); 36 firstCallback = false; 37 return; 38 } else { 39 t.done(); 40 } 41 }) 42 ); 43 observer.observe({type: 'largest-contentful-paint', buffered: true}); 44 }, 'Repeated image produces different timestamps.'); 45 </script> 46 <img src='/images/black-rectangle.png' id='image_id'/> 47 <div id='image_div'></div> 48 </body>