testing/web-platform/tests/largest-contentful-paint/observe-text.html

   1 <!DOCTYPE HTML>
   2 <meta charset=utf-8>
   3 <title>Largest Contentful Paint: observe text.</title>
   4 <body>
   5 <script src="/resources/testharness.js"></script>
   6 <script src="/resources/testharnessreport.js"></script>
   7 <style>
   8 p {
   9   font-size: 12px;
  10 }
  11 </style>
  12 <script>
  13   let beforeRender;
  14   async_test(function (t) {
  15     if (!window.LargestContentfulPaint) {
  16       assert_unreached("LargestContentfulPaint is not implemented");
  17     }
  18     const observer = new PerformanceObserver(
  19       t.step_func_done(function(entryList) {
  20         assert_equals(entryList.getEntries().length, 1);
  21         const entry = entryList.getEntries()[0];
  22         assert_equals(entry.entryType, 'largestContentfulPaint');
  23         assert_greater_than_equal(entry.startTime, beforeRender);
  24         assert_greater_than_equal(performance.now(), entry.startTime);
  25         assert_equals(entry.duration, 0);
  26         // Some lower bound: height of at least 12 px.
  27         // Width of at least 100 px.
  28         // TODO: find a good way to bound text width.
  29         assert_greater_than_equal(entry.size, 1200);
  30       })
  31     );
  32     observer.observe({type: 'largestContentfulPaint', buffered: true});
  33     beforeRender = performance.now();
  34   }, 'Element with elementtiming attribute is observable.');
  35 </script>
  36
  37 <p>This is important text! :)</p>
  38 </body>