fcp-document-opacity-text.html (1347B)
1 <!DOCTYPE html> 2 <html class="hide"> 3 <head> 4 <title>Performance Paint Timing Test: Text FCP due to the documentElement's opacity</title> 5 <style> 6 html { 7 will-change: opacity; 8 } 9 .hide { 10 opacity: 0; 11 } 12 </style> 13 </head> 14 <body> 15 <script src="/resources/testharness.js"></script> 16 <script src="/resources/testharnessreport.js"></script> 17 <script src="../resources/utils.js"></script> 18 <div id="main">This is content that is extremely contentful.</div> 19 <script> 20 const change_opacity = () => { 21 document.documentElement.className = ""; 22 } 23 24 promise_test(async t => { 25 assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); 26 await assertNoFirstContentfulPaint(t); 27 change_opacity(); 28 await waitForAnimationFrames(3); 29 const fcp_entries = performance.getEntriesByName('first-contentful-paint'); 30 assert_equals(fcp_entries.length, 1, "Got an FCP entry"); 31 const lcp_entries = await new Promise(resolve => {new PerformanceObserver((list) => resolve(list.getEntries())).observe({type: 'largest-contentful-paint', buffered: true})}); 32 assert_equals(lcp_entries.length, 1, "Got an LCP entry"); 33 assert_less_than_equal(fcp_entries[0].startTime, lcp_entries[0].startTime, "LCP is not smaller than FCP"); 34 }, "Test that FCP after opacity change is not a larger value than LCP"); 35 </script> 36 </body> 37 </html>