[dart:html] Play videos in draw_image_video_element_test

draw_image_video_element_test creates VideoElements, which the current
frame is taken from when drawing to a CanvasElement. The test was
waiting on the onCanPlay event of the VideoElement before drawing,
although this might mean the video won't actually start playing. This
fixes that issue by enabling autoplay and then awaiting the play Event.

Change-Id: I100a552a1eb8e88b6b368d88e499f62f2db8e831
Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/143621
Reviewed-by: Nicholas Shahan <nshahan@google.com>
Reviewed-by: Sigmund Cherem <sigmund@google.com>
Commit-Queue: Srujan Gaddam <srujzs@google.com>

Author: srujzs

tests/lib/html/canvasrendering/draw_image_video_element_test.dart

@@ -72,7 +72,6 @@ var webmVideoDataUrl =
 Future testWithThreeParams() async {
   setupFunc();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -86,7 +85,13 @@ Future testWithThreeParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  // Without user interaction, playing the video requires autoplay to be enabled
+  // and autoplay can only be enabled if muted. We loop the video so there is
+  // always an active frame that can be drawn.
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImage(video, 50, 50);
 
   expectPixelFilled(50, 50);
@@ -101,7 +106,6 @@ Future testWithThreeParams() async {
 Future testWithFiveParams() async {
   setupFunc();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -117,7 +121,10 @@ Future testWithFiveParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImageToRect(video, new Rectangle(50, 50, 20, 20));
 
   expectPixelFilled(50, 50);
@@ -134,7 +141,6 @@ Future testWithFiveParams() async {
 Future testWithNineParams() async {
   setupFunc();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -150,7 +156,10 @@ Future testWithNineParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImageToRect(video, new Rectangle(50, 50, 20, 20),
       sourceRect: new Rectangle(2, 2, 6, 6));
 
@@ -171,7 +180,6 @@ Future testDataUrlWithNineParams() async {
   video = new VideoElement();
   canvas = new CanvasElement();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -187,7 +195,10 @@ Future testDataUrlWithNineParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImageToRect(video, new Rectangle(50, 50, 20, 20),
       sourceRect: new Rectangle(2, 2, 6, 6));
 

tests/lib_2/html/canvasrendering/draw_image_video_element_test.dart

@@ -72,7 +72,6 @@ var webmVideoDataUrl =
 Future testWithThreeParams() async {
   setupFunc();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -86,7 +85,13 @@ Future testWithThreeParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  // Without user interaction, playing the video requires autoplay to be enabled
+  // and autoplay can only be enabled if muted. We loop the video so there is
+  // always an active frame that can be drawn.
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImage(video, 50, 50);
 
   expectPixelFilled(50, 50);
@@ -101,7 +106,6 @@ Future testWithThreeParams() async {
 Future testWithFiveParams() async {
   setupFunc();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -117,7 +121,10 @@ Future testWithFiveParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImageToRect(video, new Rectangle(50, 50, 20, 20));
 
   expectPixelFilled(50, 50);
@@ -134,7 +141,6 @@ Future testWithFiveParams() async {
 Future testWithNineParams() async {
   setupFunc();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -150,7 +156,10 @@ Future testWithNineParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImageToRect(video, new Rectangle(50, 50, 20, 20),
       sourceRect: new Rectangle(2, 2, 6, 6));
 
@@ -171,7 +180,6 @@ Future testDataUrlWithNineParams() async {
   video = new VideoElement();
   canvas = new CanvasElement();
 
-  var playFuture = video.onCanPlay.first;
   video.onError.listen((_) {
     throw ('URL failed to load.');
   });
@@ -187,7 +195,10 @@ Future testDataUrlWithNineParams() async {
     window.console.log('Video is not supported on this system.');
   }
 
-  await playFuture;
+  video.loop = true;
+  video.muted = true;
+  video.autoplay = true;
+  await video.play();
   context.drawImageToRect(video, new Rectangle(50, 50, 20, 20),
       sourceRect: new Rectangle(2, 2, 6, 6));