Deflake video tests

This CL makes sure all videos have produced a video frame before
proceeding to the next step of the test, by using the
requestVideoFrameCallback API.

video-object-fit-change.html still has a risk of flaking, since we
cannot use rVFC to be notified on object fits.

Bug: 963141
Change-Id: I17903cb9914977d113c8ba3093e2eb298328141a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2556497
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Auto-Submit: Thomas Guilbert <tguilbert@chromium.org>
Cr-Commit-Position: refs/heads/master@{#831022}

third_party/blink/web_tests/TestExpectations

@@ -5033,11 +5033,6 @@ crbug.com/865432 [ Linux ] external/wpt/workers/modules/dedicated-worker-import-
 crbug.com/867532 [ Linux ] external/wpt/workers/modules/dedicated-worker-import-data-url.any.worker.html [ Timeout Pass ]
 crbug.com/867532 [ Linux ] external/wpt/workers/modules/dedicated-worker-import.any.worker.html [ Timeout Pass ]
 
-# These video tests seem to take a screenshot too early.
-crbug.com/963141 media/video-object-fit.html [ Pass Failure ]
-crbug.com/963141 media/video-object-fit-change.html [ Pass Failure ]
-crbug.com/963141 media/video-aspect-ratio.html [ Pass Failure ]
-
 # Updated by sheriff 2020-06-01: this one seem flaky on all platforms now.
 # See also: crbug.com/1083564
 crbug.com/963141 media/controls/video-overlay-cast-light-rendering.html [ Pass Failure ]

third_party/blink/web_tests/media/media-file.js

@@ -39,6 +39,17 @@ function setSrcByTagName(tagName, src) {
     }
 }
 
+function videoPresentationPromise(video) {
+    return new Promise(resolve => video.requestVideoFrameCallback(resolve));
+}
+
+// This function should be called before setting video.src to guarantee that we
+// catch all new frames.
+function allVideosPresentedPromise() {
+    let videos = Array.from(document.getElementsByTagName('video'));
+    return Promise.all(videos.map(video => videoPresentationPromise(video)));
+}
+
 function setSrcById(id, src) {
     var element = document.getElementById(id);
     if (element)

third_party/blink/web_tests/media/video-object-fit-change.html

@@ -18,14 +18,10 @@
 
         function init()
         {
+            var videosPresented = allVideosPresentedPromise();
             setSrcByTagName("video", "content/test.ogv");
 
-            var totalCount = document.getElementsByTagName('video').length;
-            var count = totalCount;
-            document.addEventListener("canplaythrough", function () {
-                if (!--count)
-                    setTimeout(function() { changeStyle(); }, 500);
-            }, true);
+            videosPresented.then(changeStyle);
         }
 
         function changeStyle()

third_party/blink/web_tests/media/video-object-fit.html

@@ -18,16 +18,10 @@
 
         function init()
         {
+            var videosPresented = allVideosPresentedPromise();
             setSrcByTagName("video", "content/test.ogv");
 
-            var totalCount = document.getElementsByTagName('video').length;
-            var count = totalCount;
-            document.addEventListener("canplaythrough", function () {
-                if (!--count) {
-                    if (window.testRunner)
-                        setTimeout(function() { testRunner.notifyDone(); }, totalCount * 150);
-                }
-            }, true);
+            videosPresented.then(() => testRunner.notifyDone());
         }
     </script>