| <!DOCTYPE HTML> |
| <meta charset=utf-8> |
| <title>Largest Contentful Paint: observe element with background image in its first letter</title> |
| <body> |
| <style> |
| #target::first-letter { |
| background-image: url('/images/black-rectangle.png'); |
| } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/largest-contentful-paint-helpers.js"></script> |
| <script> |
| async_test(function (t) { |
| if (!window.LargestContentfulPaint) { |
| assert_unreached("LargestContentfulPaint is not implemented"); |
| } |
| const beforeLoad = performance.now(); |
| const observer = new PerformanceObserver( |
| t.step_func(function(entryList) { |
| entryList.getEntries().forEach(entry => { |
| // If we happen to get a text entry due to text happening before the image, return. |
| if (entry.url === '') |
| return; |
| const url = window.location.origin + '/images/black-rectangle.png'; |
| checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']); |
| t.done(); |
| }) |
| })); |
| observer.observe({entryTypes: ['largest-contentful-paint']}); |
| }, 'Largest Contentful Paint: first-letter is observable.'); |
| </script> |
| <div id='target'>A</div> |
| </body> |
