testing/web-platform/tests/largest-contentful-paint/loadTime-after-appendChild.html

   1 <!DOCTYPE HTML>
   2 <meta charset=utf-8>
   3 <title>Largest Contentful Paint: delayed appended image.</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 <script>
   9   async_test(function (t) {
  10     assert_precondition(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
  11     let beforeLoad;
  12     const observer = new PerformanceObserver(
  13       t.step_func_done(entryList => {
  14         assert_equals(entryList.getEntries().length, 1);
  15         const entry = entryList.getEntries()[0];
  16         const url = window.location.origin + '/images/black-rectangle.png';
  17         // blue.png is 100 by 50.
  18         const size = 100 * 50;
  19         checkImage(entry, url, 'image_id', size, beforeLoad);
  20       })
  21     );
  22     observer.observe({type: 'largest-contentful-paint', buffered: true});
  23     const img = document.createElement('img');
  24     img.src = '/images/black-rectangle.png';
  25     img.id = 'image_id';
  26     t.step_timeout(() => {
  27       beforeLoad = performance.now();
  28       document.getElementById('image_div').appendChild(img);
  29     }, 200)
  30   }, 'Image loadTime occurs after appendChild is called.');
  31 </script>
  32 <div id='image_div'></div>
  33 </body>