| <!DOCTYPE html> |
| <html> |
| <title>Test the video.requestVideoFrameCallback() API for non visible video elements.</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/common/media.js"></script> |
| <body> |
| </body> |
| <script> |
| var testVideo = { |
| url: getVideoURI('/media/movie_5'), |
| height: 240, |
| width: 320, |
| } |
| |
| promise_test(async function(t) { |
| let done; |
| const promise = new Promise(resolve => done = resolve); |
| |
| let video = document.createElement('video'); |
| |
| video.requestVideoFrameCallback(done); |
| video.src = testVideo.url; |
| await video.play(); |
| |
| return promise; |
| }, 'Test a video outside of the DOM can still use video.rVFC.'); |
| |
| function rvfcStyleTest(applyStyle, description) { |
| promise_test(async function(t) { |
| let done; |
| const promise = new Promise(resolve => done = resolve); |
| |
| let video = document.createElement('video'); |
| document.body.appendChild(video); |
| applyStyle(video); |
| |
| video.requestVideoFrameCallback( |
| t.step_func( _ => { |
| // Make sure we can receive more than one callback. |
| video.requestVideoFrameCallback(done); |
| }) |
| ); |
| |
| video.src = testVideo.url; |
| await video.play(); |
| |
| return promise; |
| }, description); |
| } |
| |
| rvfcStyleTest((video) => { video.style.display = "none"}, |
| 'Test video.rVFC works with "display:none".'); |
| |
| rvfcStyleTest((video) => { video.style.visibility = "hidden"}, |
| 'Test video.rVFC works with "visibility:hidden".'); |
| |
| </script> |
| </html> |