1 files changed, 59 insertions, 0 deletions
diff --git a/testing/web-platform/tests/video-rvfc/request-video-frame-callback-dom.html b/testing/web-platform/tests/video-rvfc/request-video-frame-callback-dom.html
new file mode 100644
index 0000000000..c1804b4edd
--- /dev/null
+++ b/testing/web-platform/tests/video-rvfc/request-video-frame-callback-dom.html
@@ -0,0 +1,59 @@
+<!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>