| <!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> |
