[BreakoutBox] Update MediaStreamTrackGenerator-video.https.html WPT

For a video element test, wait for the loadstart event to detect
the connection between the video element and the generator.
Also use the timeupdate event to detect the playout of the generated
frame.

Fixed: 1230283
Change-Id: Ib8e9914db97d2940db90184cc1a0c479cdd75e0b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3034650
Reviewed-by: Tony Herre <toprice@chromium.org>
Commit-Queue: Guido Urdaneta <guidou@chromium.org>
Cr-Commit-Position: refs/heads/master@{#903050}
diff --git a/mediacapture-insertable-streams/MediaStreamTrackGenerator-video.https.html b/mediacapture-insertable-streams/MediaStreamTrackGenerator-video.https.html
index a1289b6..3042f03 100644
--- a/mediacapture-insertable-streams/MediaStreamTrackGenerator-video.https.html
+++ b/mediacapture-insertable-streams/MediaStreamTrackGenerator-video.https.html
@@ -84,25 +84,25 @@
       video.srcObject = new MediaStream([generator]);
       video.play();
 
-      // Allow async setup of the track generator and stream.
-      await new Promise(r => t.step_timeout(r, 1));
+      // Wait for the video element to be connected to the generator and
+      // generate the frame.
+      video.onloadstart = () => generator.writable.getWriter().write(videoFrame);
 
-      await generator.writable.getWriter().write(videoFrame);
-
-      await t.step_wait(() => video.currentTime > 0, "video has played");
-
-
-      const canvas = document.createElement("canvas");
-      canvas.width = originalWidth;
-      canvas.height = originalHeight;
-      const context = canvas.getContext('2d');
-      context.drawImage(video, 0, 0);
-      // Pick a pixel in the centre of the video and check that it has the colour of the frame provided.
-      const pixel = context.getImageData(videoFrame.displayWidth/2, videoFrame.displayHeight/2, 1, 1);
-      assertPixel(t, pixel.data, pixelColour);
+      return new Promise((resolve)=> {
+        video.ontimeupdate = t.step_func(() => {
+          const canvas = document.createElement("canvas");
+          canvas.width = originalWidth;
+          canvas.height = originalHeight;
+          const context = canvas.getContext('2d');
+          context.drawImage(video, 0, 0);
+          // Pick a pixel in the centre of the video and check that it has the colour of the frame provided.
+          const pixel = context.getImageData(videoFrame.displayWidth/2, videoFrame.displayHeight/2, 1, 1);
+          assertPixel(t, pixel.data, pixelColour);
+          resolve();
+        });
+      });
     }, 'Tests that frames are actually rendered correctly in a stream used for a video element.');
 
-
     promise_test(async t => {
       const generator = new MediaStreamTrackGenerator("video");
       t.add_cleanup(() => generator.stop());