video-play-after-poster.html (1917B)
1 <!doctype html> 2 <html> 3 <title>This test verifies a video element only triggers a single LCP entry</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <body> 8 <video muted src="/images/pattern.webm" poster="/images/lcp-16x16.png" width="600"></video> 9 <script> 10 const lcp_entries = []; 11 let unread_lcp_index = 0; 12 let lcp_resolver = null; 13 14 new PerformanceObserver((list, observer) => { 15 for (const entry of list.getEntries()) { 16 lcp_entries.push(entry); 17 } 18 // If we're currently waiting for an LCP entry, consume it now. 19 if (lcp_resolver) { 20 lcp_resolver(); 21 } 22 }).observe({ type: "largest-contentful-paint", buffered: true }); 23 24 get_lcp_entry = async () => { 25 // If there are no unread LCP entries, wait for one to show up. 26 if (unread_lcp_index == lcp_entries.length) { 27 await new Promise((resolve) => { lcp_resolver = resolve; }); 28 lcp_resolver = null; 29 } 30 // Return the next unread entry. 31 unread_lcp_index++; 32 return lcp_entries[unread_lcp_index-1]; 33 }; 34 35 promise_test(async t => { 36 // Ensure that the first LCP is the poster image. 37 lcpEntry = await get_lcp_entry(); 38 assert_true(lcpEntry.url.endsWith('lcp-16x16.png'), "LCP Entry should be poster, but we got " + lcpEntry.url); 39 40 // Start the video. 41 document.querySelector('video').play(); 42 43 // Race a task to get a second LCP entry with a 500ms timeout. 44 const second_lcpEntry = await Promise.race([ 45 new Promise(resolve => { t.step_timeout(() => resolve('TIMEOUT'), 500); }), 46 get_lcp_entry() 47 ]); 48 assert_equals(second_lcpEntry, 'TIMEOUT', "There should be no further LCP entry, but we got " + second_lcpEntry.url); 49 }, "Video with poster should not emit a second LCP entry after playing.") 50 </script> 51 </body> 52 53 </html>