request-video-frame-callback-dom.html (1601B)
1 <!DOCTYPE html> 2 <html> 3 <title>Test the video.requestVideoFrameCallback() API for non visible video elements.</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/common/media.js"></script> 7 <body> 8 </body> 9 <script> 10 var testVideo = { 11 url: getVideoURI('/media/movie_5'), 12 height: 240, 13 width: 320, 14 } 15 16 promise_test(async function(t) { 17 let done; 18 const promise = new Promise(resolve => done = resolve); 19 20 let video = document.createElement('video'); 21 video.muted = true; 22 23 video.requestVideoFrameCallback(done); 24 video.src = testVideo.url; 25 await video.play(); 26 27 return promise; 28 }, 'Test a video outside of the DOM can still use video.rVFC.'); 29 30 function rvfcStyleTest(applyStyle, description) { 31 promise_test(async function(t) { 32 let done; 33 const promise = new Promise(resolve => done = resolve); 34 35 let video = document.createElement('video'); 36 video.muted = true; 37 document.body.appendChild(video); 38 applyStyle(video); 39 40 video.requestVideoFrameCallback( 41 t.step_func( _ => { 42 // Make sure we can receive more than one callback. 43 video.requestVideoFrameCallback(done); 44 }) 45 ); 46 47 video.src = testVideo.url; 48 await video.play(); 49 50 return promise; 51 }, description); 52 } 53 54 rvfcStyleTest((video) => { video.style.display = "none"}, 55 'Test video.rVFC works with "display:none".'); 56 57 rvfcStyleTest((video) => { video.style.visibility = "hidden"}, 58 'Test video.rVFC works with "visibility:hidden".'); 59 60 </script> 61 </html>