testing/web-platform/tests/largest-contentful-paint/larger-image.html

   1 <!DOCTYPE HTML>
   2 <meta charset=utf-8>
   3 <title>Largest Contentful Paint: largest image is reported.</title>
   4 <body>
   5 <script src="/resources/testharness.js"></script>
   6 <script src="/resources/testharnessreport.js"></script>
   7 <script src="resources/largest-contentful-paint-helpers.js"></script>
   8 <!-- There is some text and some images. We care about blue.png being reported, as it is the largest. -->
   9 <p>This is some text! :)</p>
  10 <img src='/images/red.png' id='red'/>
  11 <img src='/images/blue.png' id='blue'/>
  12 <img src='/images/black-rectangle.png' id='black'/>
  13 <p>More text!</p>
  14 <script>
  15   async_test(function (t) {
  16     assert_precondition(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
  17     const beforeLoad = performance.now();
  18     const observer = new PerformanceObserver(
  19       t.step_func(entryList => {
  20         entryList.getEntries().forEach(entry => {
  21           // The text or other image could be reported as LCP if it is rendered before the blue image.
  22           if (entry.id !== 'blue')
  23             return;
  24
  25           const url = window.location.origin + '/images/blue.png';
  26           // blue.png is 133 by 106.
  27           const size = 133 * 106;
  28           checkImage(entry, url, 'blue', size, beforeLoad);
  29           t.done();
  30         })
  31       })
  32     );
  33     observer.observe({type: 'largest-contentful-paint', buffered: true});
  34   }, 'Largest Contentful Paint: largest image is reported.');
  35 </script>
  36 </body>