fcp-document-opacity-image.html (1969B)
1 <!DOCTYPE html> 2 <html class="hide"> 3 <head> 4 <title>Performance Paint Timing Test: Image 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"></div> 19 <script> 20 // Load the image, add it to the DOM and make sure it's decoded. 21 const load_image = () => { 22 const img = document.createElement("img"); 23 img.src = "../resources/circles.png"; 24 document.body.appendChild(img); 25 return img.decode(); 26 }; 27 28 const change_opacity = () => { 29 document.documentElement.className = ""; 30 } 31 32 promise_test(async t => { 33 assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); 34 await load_image(); 35 await assertNoFirstContentfulPaint(t); 36 change_opacity(); 37 await waitForAnimationFrames(3); 38 const fcp_entries = performance.getEntriesByName('first-contentful-paint'); 39 assert_equals(fcp_entries.length, 1, "Got an FCP entry"); 40 const lcp_entries = await new Promise(resolve => {new PerformanceObserver((list) => resolve(list.getEntries())).observe({type: 'largest-contentful-paint', buffered: true})}); 41 assert_equals(lcp_entries.length, 1, "Got an LCP entry"); 42 // TODO: Rewrite this assertion after the FCP and LCP precision alignment CL is landed. Currently FCP start time has a higher precision than that of LCP. That means, even if the two are intrinsically the same, FCP.startTime will be larger as it has more fractional digits. 43 isLess = fcp_entries[0].startTime < lcp_entries[0].startTime; 44 isEqualToMicrosecond = Math.abs(fcp_entries[0].startTime - lcp_entries[0].startTime) < 0.001; 45 assert_true(isLess || isEqualToMicrosecond, "FCP should be smaller than FCP."); 46 }, "Test that FCP after opacity change is not a larger value than LCP"); 47 </script> 48 </body> 49 </html>