first-paint-equals-lcp-text.html (2372B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>LargestContentfulPaint compared with FirstPaint and FirstContentfulPaint on single text page.</title> 4 <body> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script> 8 setup({"hide_test_state": true}); 9 async_test(function (t) { 10 assert_implements(window.PerformancePaintTiming, "PerformancePaintTiming is not implemented"); 11 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 12 let firstPaintTime = 0; 13 let firstContentfulPaintTime = 0; 14 let largestContentfulPaintTime = 0; 15 const observer = new PerformanceObserver( 16 t.step_func(function(entryList) { 17 entryList.getEntries().forEach(entry => { 18 if (entry.name === 'first-paint') { 19 assert_equals(firstPaintTime, 0, 'Only one first-paint entry.'); 20 assert_equals(entry.entryType, 'paint'); 21 firstPaintTime = entry.startTime; 22 } else if (entry.name === 'first-contentful-paint') { 23 assert_equals(firstContentfulPaintTime, 0, 'Only one first-contentful-paint entry.'); 24 assert_equals(entry.entryType, 'paint'); 25 firstContentfulPaintTime = entry.startTime; 26 } else { 27 assert_equals(largestContentfulPaintTime, 0, 'Only one largest-contentful-paint entry.'); 28 assert_equals(entry.entryType, 'largest-contentful-paint'); 29 largestContentfulPaintTime = entry.renderTime; 30 } 31 // LCP fires necessarily after first-paint and first-contentful-paint. 32 if (largestContentfulPaintTime) { 33 assert_equals(firstContentfulPaintTime, largestContentfulPaintTime, 'FCP should equal LCP.'); 34 // In PaintTiming spec, first-paint isn't a hard requirement, browsers can support 35 // first-contentful-paint only. 36 if (firstPaintTime) { 37 assert_less_than_equal(firstPaintTime, firstContentfulPaintTime, 'FP should be less than or equal to FCP.'); 38 } 39 t.done(); 40 } 41 }); 42 }) 43 ); 44 observer.observe({type: 'largest-contentful-paint', buffered: true}); 45 observer.observe({type: 'paint', buffered: true}); 46 }, 'FCP and LCP are the same when there is a single text element in the page.'); 47 </script> 48 <p>Text</p> 49 </body>