| <!DOCTYPE HTML> |
| <meta charset=utf-8> |
| <title>LargestContentfulPaint compared with FirstPaint and FirstContentfulPaint on single text page.</title> |
| <body> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| async_test(function (t) { |
| assert_implements(window.PerformancePaintTiming, "PerformancePaintTiming is not implemented"); |
| assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); |
| let firstPaintTime = 0; |
| let firstContentfulPaintTime = 0; |
| let largestContentfulPaintTime = 0; |
| const observer = new PerformanceObserver( |
| t.step_func(function(entryList) { |
| entryList.getEntries().forEach(entry => { |
| if (entry.name === 'first-paint') { |
| assert_equals(firstPaintTime, 0, 'Only one first-paint entry.'); |
| assert_equals(entry.entryType, 'paint'); |
| firstPaintTime = entry.startTime; |
| } else if (entry.name === 'first-contentful-paint') { |
| assert_equals(firstContentfulPaintTime, 0, 'Only one first-contentful-paint entry.'); |
| assert_equals(entry.entryType, 'paint'); |
| firstContentfulPaintTime = entry.startTime; |
| } else { |
| assert_equals(largestContentfulPaintTime, 0, 'Only one largest-contentful-paint entry.'); |
| assert_equals(entry.entryType, 'largest-contentful-paint'); |
| largestContentfulPaintTime = entry.renderTime; |
| } |
| if (firstPaintTime && firstContentfulPaintTime && largestContentfulPaintTime) { |
| assert_less_than_equal(firstPaintTime, firstContentfulPaintTime, 'FP should be less than or equal to FCP.'); |
| assert_equals(firstContentfulPaintTime, largestContentfulPaintTime, 'FCP should equal LCP.'); |
| t.done(); |
| } |
| }); |
| }) |
| ); |
| observer.observe({type: 'largest-contentful-paint', buffered: true}); |
| observer.observe({type: 'paint', buffered: true}); |
| }, 'FCP and LCP are the same when there is a single text element in the page.'); |
| </script> |
| <p>Text</p> |
| </body> |