Update a bunch of tests to wait for video frame presentation

All of these tests are currently flaky because they sometimes render without a video frame. Utilize the requestVideoFrameCallback() API to wait for a video frame callback before deciding that the tests are done. Where needed, make sure that test and ref use the same condition for when the test (and ref) should be considered completed. This appears to reduce the rate at which these tests flake, but not completely eliminate the flakiness. Bug: 988248 Change-Id: Ib999646942ec2b1247da6ec61bd4a80a2e8bfbf1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2208866Reviewed-by: srirama chandra sekhar <srirama.m@samsung.com> Reviewed-by: Thomas Guilbert <tguilbert@chromium.org> Commit-Queue: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/master@{#770711}

Update a bunch of tests to wait for video frame presentation
All of these tests are currently flaky because they sometimes render without a video frame. Utilize the requestVideoFrameCallback() API to wait for a video frame callback before deciding that the tests are done. Where needed, make sure that test and ref use the same condition for when the test (and ref) should be considered completed. This appears to reduce the rate at which these tests flake, but not completely eliminate the flakiness. Bug: 988248 Change-Id: Ib999646942ec2b1247da6ec61bd4a80a2e8bfbf1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2208866Reviewed-by: srirama chandra sekhar <srirama.m@samsung.com> Reviewed-by: Thomas Guilbert <tguilbert@chromium.org> Commit-Queue: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/master@{#770711}
75ff450d · Fredrik Söderqvist · Commit Bot · 6e6a0b6c · 75ff450d · 75ff450d
Commit 75ff450d authored May 20, 2020 by Fredrik Söderqvist Committed by Commit Bot May 20, 2020
13 changed files
--- a/third_party/blink/web_tests/media/controls/captions-menu-always-visible-expected.html
+++ b/third_party/blink/web_tests/media/controls/captions-menu-always-visible-expected.html
 <!DOCTYPE html>
 <title>Captions menu always visible - expected</title>
 <script src="../media-controls.js"></script>
+<script src="../../resources/run-after-layout-and-paint.js"></script>
 <style>
  video {
    position: relative;
@@ -10,6 +11,11 @@
 </style>
 <video controls muted controlslist=nofullscreen></video>
 <script>
+  function waitForVideoPresentation(video) {
+    return new Promise(resolve => {
+      video.requestVideoFrameCallback(resolve);
+    });
+  }
  if (window.testRunner)
    testRunner.waitUntilDone();

@@ -18,6 +24,7 @@
  video.src = '../content/test.ogv';
  video.addTextTrack('captions', 'foo');
  video.addTextTrack('captions', 'bar');
+  let videoPresentation = waitForVideoPresentation(video);

  video.addEventListener('loadedmetadata', () => {
    var coords =
@@ -28,7 +35,10 @@
    // :hover sometimes applying.
    textTrackMenu(video).style = 'pointer-events: none;';

-    if (window.testRunner)
-      testRunner.notifyDone();
+    videoPresentation.then(() => {
+      runAfterLayoutAndPaint(() => {
+        testRunner.notifyDone();
+      });
+    });
  });
 </script>
--- a/third_party/blink/web_tests/media/controls/captions-menu-always-visible.html
+++ b/third_party/blink/web_tests/media/controls/captions-menu-always-visible.html
@@ -14,6 +14,11 @@
 </style>
 <video preload="auto" controls muted controlslist=nofullscreen></video>
 <script>
+  function waitForVideoPresentation(video) {
+    return new Promise(resolve => {
+      video.requestVideoFrameCallback(resolve);
+    });
+  }
  if (window.testRunner)
    testRunner.waitUntilDone();

@@ -22,6 +27,7 @@
  video.src = '../content/test.ogv';
  video.addTextTrack('captions', 'foo');
  video.addTextTrack('captions', 'bar');
+  let videoPresentation = waitForVideoPresentation(video);

  video.addEventListener('loadedmetadata', () => {
    var coords =
@@ -32,8 +38,10 @@
    // :hover sometimes applying.
    textTrackMenu(video).style = 'pointer-events: none;';

-    runAfterLayoutAndPaint(() => {
-      testRunner.notifyDone();
+    videoPresentation.then(() => {
+      runAfterLayoutAndPaint(() => {
+        testRunner.notifyDone();
+      });
    });
  });
 </script>
--- a/third_party/blink/web_tests/media/controls/overflow-menu-always-visible-expected.html
+++ b/third_party/blink/web_tests/media/controls/overflow-menu-always-visible-expected.html
 <!DOCTYPE html>
 <title>Overflow menu always visible - expected</title>
+<script src="../../resources/run-after-layout-and-paint.js"></script>
 <script src="../media-controls.js"></script>
 <style>
  video {
@@ -10,11 +11,20 @@
 </style>
 <video controls muted></video>
 <script>
+  function waitForVideoPresentation(video) {
+    return new Promise(resolve => {
+      video.requestVideoFrameCallback(resolve);
+    });
+  }
+  if (window.testRunner)
+    testRunner.waitUntilDone();
+
  var video = document.querySelector('video');
  enableTestMode(video);
  video.src = '../content/test.ogv';
  video.addTextTrack('captions', 'foo');
  video.addTextTrack('captions', 'bar');
+  let videoPresentation = waitForVideoPresentation(video);

  video.addEventListener('loadedmetadata', () => {
    var coords = elementCoordinates(overflowButton(video));
@@ -23,5 +33,11 @@
    // Disabling pointer events on the overflow menu to avoid a flakyness with
    // :hover sometimes applying.
    overflowMenu(video).style = 'pointer-events: none;';
+
+    videoPresentation.then(() => {
+      runAfterLayoutAndPaint(() => {
+        testRunner.notifyDone();
+      });
+    });
  });
 </script>
--- a/third_party/blink/web_tests/media/controls/overflow-menu-always-visible.html
+++ b/third_party/blink/web_tests/media/controls/overflow-menu-always-visible.html
@@ -14,6 +14,11 @@
 </style>
 <video controls muted preload="auto"></video>
 <script>
+  function waitForVideoPresentation(video) {
+    return new Promise(resolve => {
+      video.requestVideoFrameCallback(resolve);
+    });
+  }
  if (window.testRunner)
    testRunner.waitUntilDone();

@@ -22,6 +27,7 @@
  video.src = '../content/test.ogv';
  video.addTextTrack('captions', 'foo');
  video.addTextTrack('captions', 'bar');
+  let videoPresentation = waitForVideoPresentation(video);

  video.addEventListener('loadedmetadata', () => {
    var coords = elementCoordinates(overflowButton(video));
@@ -31,8 +37,10 @@
    // :hover sometimes applying.
    overflowMenu(video).style = 'pointer-events: none;';

-    runAfterLayoutAndPaint(() => {
-      testRunner.notifyDone();
+    videoPresentation.then(() => {
+      runAfterLayoutAndPaint(() => {
+        testRunner.notifyDone();
+      });
    });
  });
 </script>
--- a/third_party/blink/web_tests/media/controls/volumechange-muted-attribute-expected.html
+++ b/third_party/blink/web_tests/media/controls/volumechange-muted-attribute-expected.html
@@ -13,5 +13,12 @@
  enableTestMode(video);
  video.src = '../content/test.ogv';
  video.muted = true;
+
+  if (window.testRunner) {
+    testRunner.waitUntilDone();
+    video.requestVideoFrameCallback(() => {
+      testRunner.notifyDone();
+    });
+  }
 </script>
 </html>
--- a/third_party/blink/web_tests/media/controls/volumechange-muted-attribute.html
+++ b/third_party/blink/web_tests/media/controls/volumechange-muted-attribute.html
@@ -12,5 +12,12 @@
  var video = document.querySelector('video');
  enableTestMode(video);
  video.src = '../content/test.ogv';
+
+  if (window.testRunner) {
+    testRunner.waitUntilDone();
+    video.requestVideoFrameCallback(() => {
+      testRunner.notifyDone();
+    });
+  }
 </script>
 </html>
--- a/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto-expected.html
+++ b/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto-expected.html
 <!DOCTYPE html>
 <script>
-var mediaFile = '../content/test.ogv';
+if (window.testRunner)
+  testRunner.waitUntilDone();
+
+function waitForVideoPresentation(video) {
+  return new Promise(resolve => {
+    video.requestVideoFrameCallback(resolve);
+  });
+}
+function loadAndQueueVideoPresentation(video) {
+  video.src = '../content/test.ogv';
+  videoPresentations.push(waitForVideoPresentation(video));
+}
+let videoPresentations = [];
 </script>
 <style>
 .container {
@@ -34,14 +46,31 @@ var mediaFile = '../content/test.ogv';
 }
 </style>
 <div class="container">
-  <video preload="auto"><script>document.currentScript.parentNode.src = mediaFile;</script></video>
+  <video preload="auto">
+    <script>
+      loadAndQueueVideoPresentation(document.currentScript.parentNode);
+    </script>
+  </video>
  <div class=video><div class="cue start"><span>XXX</span></div></div>
 </div>
 <div class="container">
-  <video preload="auto"><script>document.currentScript.parentNode.src = mediaFile;</script></video>
+  <video preload="auto">
+    <script>
+      loadAndQueueVideoPresentation(document.currentScript.parentNode);
+    </script>
+  </video>
  <div class=video><div class="cue middle"><span>XXX</span></div></div>
 </div>
 <div class="container">
-  <video preload="auto"><script>document.currentScript.parentNode.src = mediaFile;</script></video>
+  <video preload="auto">
+    <script>
+      loadAndQueueVideoPresentation(document.currentScript.parentNode);
+    </script>
+  </video>
  <div class=video><div class="cue end"><span>XXX</span></div></div>
 </div>
+<script>
+  Promise.all(videoPresentations).then(() => {
+    testRunner.notifyDone();
+  });
+</script>
--- a/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto-rtl-expected.html
+++ b/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto-rtl-expected.html
 <!DOCTYPE html>
 <script>
-var mediaFile = '../content/test.ogv';
+if (window.testRunner)
+  testRunner.waitUntilDone();
+
+function waitForVideoPresentation(video) {
+  return new Promise(resolve => {
+    video.requestVideoFrameCallback(resolve);
+  });
+}
+function loadAndQueueVideoPresentation(video) {
+  video.src = '../content/test.ogv';
+  videoPresentations.push(waitForVideoPresentation(video));
+}
+let videoPresentations = [];
 </script>
 <style>
 .container {
@@ -36,14 +48,25 @@ var mediaFile = '../content/test.ogv';
 }
 </style>
 <div class="container">
-  <video preload="auto"><script>document.currentScript.parentNode.src = mediaFile;</script></video>
+  <video preload="auto">
+    <script>loadAndQueueVideoPresentation(document.currentScript.parentNode);</script>
+  </video>
  <div class=video><div class="cue start"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
 </div>
 <div class="container">
-  <video preload="auto"><script>document.currentScript.parentNode.src = mediaFile;</script></video>
+  <video preload="auto">
+    <script>loadAndQueueVideoPresentation(document.currentScript.parentNode);</script>
+  </video>
  <div class=video><div class="cue middle"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
 </div>
 <div class="container">
-  <video preload="auto"><script>document.currentScript.parentNode.src = mediaFile;</script></video>
+  <video preload="auto">
+    <script>loadAndQueueVideoPresentation(document.currentScript.parentNode);</script>
+  </video>
  <div class=video><div class="cue end"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
 </div>
+<script>
+  Promise.all(videoPresentations).then(() => {
+    testRunner.notifyDone();
+  });
+</script>
--- a/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto-rtl.html
+++ b/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto-rtl.html
 <!DOCTYPE html>
 <script>
-var mediaFile = '../content/test.ogv';
+if (window.testRunner)
+  testRunner.waitUntilDone();
+
+function waitForVideoPresentation(video) {
+  return new Promise(resolve => {
+    video.requestVideoFrameCallback(resolve);
+  });
+}
+function loadAndQueueVideoPresentation(video) {
+  video.src = '../content/test.ogv';
+  videoPresentations.push(waitForVideoPresentation(video));
+}
+let videoPresentations = [];

 function addTrackWithRtlCueData(video, cueData) {
  var track = video.addTextTrack('subtitles');
@@ -22,20 +34,25 @@ video::cue {
  <script>
  var video = document.currentScript.parentNode;
  addTrackWithRtlCueData(video, { align: 'start', size: 50, line: 0 });
-  video.src = mediaFile;
+  loadAndQueueVideoPresentation(video);
  </script>
 </video>
 <video preload="auto">
  <script>
  var video = document.currentScript.parentNode;
  addTrackWithRtlCueData(video, { align: 'center', size: 50, line: 0 });
-  video.src = mediaFile;
+  loadAndQueueVideoPresentation(video);
  </script>
 </video>
 <video preload="auto">
  <script>
  var video = document.currentScript.parentNode;
  addTrackWithRtlCueData(video, { align: 'end', size: 50, line: 0 });
-  video.src = mediaFile;
+  loadAndQueueVideoPresentation(video);
  </script>
 </video>
+<script>
+  Promise.all(videoPresentations).then(() => {
+    testRunner.notifyDone();
+  });
+</script>
--- a/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto.html
+++ b/third_party/blink/web_tests/media/track/track-cue-rendering-position-auto.html
 <!DOCTYPE html>
 <script>
-var mediaFile = '../content/test.ogv';
+if (window.testRunner)
+  testRunner.waitUntilDone();
+
+function waitForVideoPresentation(video) {
+  return new Promise(resolve => {
+    video.requestVideoFrameCallback(resolve);
+  });
+}
+function loadAndQueueVideoPresentation(video) {
+  video.src = '../content/test.ogv';
+  videoPresentations.push(waitForVideoPresentation(video));
+}
+let videoPresentations = [];

 function addTrackWithCueData(video, cueData) {
  var track = video.addTextTrack('subtitles');
@@ -22,20 +34,25 @@ video::cue {
  <script>
  var video = document.currentScript.parentNode;
  addTrackWithCueData(video, { align: 'start', line: 0 });
-  video.src = mediaFile;
+  loadAndQueueVideoPresentation(video);
  </script>
 </video>
 <video preload="auto">
  <script>
  var video = document.currentScript.parentNode;
  addTrackWithCueData(video, { align: 'center', line: 0 });
-  video.src = mediaFile;
+  loadAndQueueVideoPresentation(video);
  </script>
 </video>
 <video preload="auto">
  <script>
  var video = document.currentScript.parentNode;
  addTrackWithCueData(video, { align: 'end', line: 0 });
-  video.src = mediaFile;
+  loadAndQueueVideoPresentation(video);
  </script>
 </video>
+<script>
+  Promise.all(videoPresentations).then(() => {
+    testRunner.notifyDone();
+  });
+</script>
--- a/third_party/blink/web_tests/media/video-persistence-expected.html
+++ b/third_party/blink/web_tests/media/video-persistence-expected.html
@@ -36,8 +36,14 @@
 </div>
 <div id='fs'>fullscreen</div>
 <script>
+  function waitForVideoPresentation(video) {
+    return new Promise(resolve => {
+      video.requestVideoFrameCallback(resolve);
+    });
+  }
  var video = document.querySelector('video');
  video.src = 'content/test.ogv';
+  let videoPresentation = waitForVideoPresentation(video);

  document.querySelector('#fs').addEventListener('click', e => {
    document.querySelector('#player').webkitRequestFullscreen();
@@ -55,7 +61,9 @@
    });

    document.addEventListener('webkitfullscreenchange', e => {
-      testRunner.notifyDone();
+      videoPresentation.then(() => {
+        testRunner.notifyDone();
+      });
    });
  }
 </script>

--- a/third_party/blink/web_tests/media/video-persistence.html
+++ b/third_party/blink/web_tests/media/video-persistence.html
@@ -30,8 +30,14 @@
 </div>
 <div id='fs'>fullscreen</div>
 <script>
+  function waitForVideoPresentation(video) {
+    return new Promise(resolve => {
+      video.requestVideoFrameCallback(resolve);
+    });
+  }
  var video = document.querySelector('video');
  video.src = 'content/test.ogv';
+  let videoPresentation = waitForVideoPresentation(video);

  document.querySelector('#fs').addEventListener('click', e => {
    document.querySelector('#player').webkitRequestFullscreen();
@@ -50,7 +56,9 @@

    document.addEventListener('webkitfullscreenchange', e => {
      internals.setPersistent(video, true);
-      testRunner.notifyDone();
+      videoPresentation.then(() => {
+        testRunner.notifyDone();
+      });
    });
  }
 </script>

--- a/third_party/blink/web_tests/media/video-zoom.html
+++ b/third_party/blink/web_tests/media/video-zoom.html
@@ -3,27 +3,25 @@
    <style> video { zoom: 150%; border: 3px solid red; } </style>
    <script src=media-file.js></script>
    <script>
+        function waitForVideoPresentation(video) {
+            return new Promise(resolve => {
+                video.requestVideoFrameCallback(resolve);
+            });
+        }
+
        function init()
        {
            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);
+            if (!window.testRunner)
+                return;
+            testRunner.waitUntilDone();

-            if (window.testRunner) {
-                testRunner.waitUntilDone();
-                setTimeout(function() {
-                    document.body.appendChild(document.createTextNode('FAIL'));
-                    if (window.testRunner)
-                        testRunner.notifyDone();
-                }, 1500);
-            }
+            let videos = Array.from(document.getElementsByTagName('video'));
+            Promise.all(videos.map(
+                video => waitForVideoPresentation(video))).then(() => {
+                    testRunner.notifyDone();
+                });
        }
    </script>