paint-timing-mixin.html (1606B)
1 <!DOCTYPE html> 2 <head> 3 <title>Performance Paint Timing: Check that paintTime/presentationTime are available</title> 4 </head> 5 <body> 6 <script src="resources/utils.js"></script> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script> 10 setup({"hide_test_state": true}); 11 promise_test(async t => { 12 assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); 13 assert_implements("paintTime" in window.PerformancePaintTiming.prototype, "Paint Timing doesn't expose `paintTime`"); 14 await new Promise(r => window.addEventListener('load', r)); 15 await assertNoFirstContentfulPaint(t); 16 const img = document.createElement('img'); 17 img.src = 'resources/circles.png'; 18 document.body.append(img); 19 const reference_time = performance.now(); 20 const performance_entry_promise = new Promise(resolve => { 21 new PerformanceObserver(entries => { 22 const [entry] = entries.getEntriesByName("first-contentful-paint"); 23 if (entry) 24 resolve(entry); 25 }).observe({type: "paint"}); 26 }); 27 const entry = await performance_entry_promise; 28 assert_greater_than(entry.paintTime, reference_time); 29 if ("presentationTime" in entry && entry.presentationTime !== null) { 30 assert_greater_than(entry.presentationTime, entry.paintTime); 31 assert_equals(entry.presentationTime, entry.startTime); 32 } else { 33 assert_equals(entry.paintTime, entry.startTime); 34 } 35 }, "Paint timing entries should expose paintTime and presentationTime"); 36 </script> 37 </body> 38 </html>