<!DOCTYPE HTML> <meta charset=utf-8> <title>Largest Contentful Paint:dynamically appended image with different dimensions but same src triggers new entry.</title> <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="resources/largest-contentful-paint-helpers.js"></script> <img src='/images/black-rectangle.png' id='image_id' width="50" /> <script> async_test(function (t) { assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); let beforeLoad = performance.now(); let beforeSecondImageLoad = performance.now(); let firstCallback = true; // black-rectangle.png is 50 x 25. const original_rect_size = 50 * 25; // The bigger black rectangle is 100 x 50, but defined with width="50". const bigger_rect_size = 100 * 50; const observer = new PerformanceObserver( t.step_func(function (entryList) { assert_equals(entryList.getEntries().length, 1); const entry = entryList.getEntries()[0]; const url = window.location.origin + '/images/black-rectangle.png'; if (firstCallback) { // Checks the original black rectangle. // TODO(https://crbug.com/1411616): we're testing approximated values. checkImage(entry, url, 'image_id', original_rect_size, beforeLoad, ["approximateSize"]); // Creates a new bigger black rectangle. const img = document.createElement('img'); img.id = 'new_image_id'; img.src = url; img.width = 100; beforeSecondImageLoad = performance.now(); firstCallback = false; document.body.appendChild(img); } else { // Checks the new black rectangle. checkImage(entry, url, 'new_image_id', bigger_rect_size, beforeSecondImageLoad); t.done(); } }) ); observer.observe({ type: 'largest-contentful-paint', buffered: true }); }, 'Largest Contentful Paint:dynamically appended image with different ' + 'dimensions but same src triggers new entry.'); </script> </body>