Fix canvas-drawimage-live-video flake

This CL tentatively fixes the canvas-drawimage-live-video.html test
flakiness. It uses uses video.requestAnimationFrame to makes sure we
have new videos frames before drawing them, and making sure that the two
drawn images are different.

Bug: 816914
Change-Id: I430bedcd4089321eaafe76c10d808820c7726755
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2136204
Commit-Queue: Dale Curtis <dalecurtis@chromium.org>
Auto-Submit: Thomas Guilbert <tguilbert@chromium.org>
Reviewed-by: Dale Curtis <dalecurtis@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756773}

third_party/blink/web_tests/TestExpectations

@@ -1797,9 +1797,6 @@ crbug.com/891427 fast/overflow/transformed-frame-scrollIntoView.html [ Crash ]
 crbug.com/891427 animations/responsive/viewport-unit-transform-responsive.html [ Pass Failure Timeout Crash ]
 crbug.com/891427 animations/responsive/viewport-unit-translate-responsive.html [ Pass Failure Timeout Crash ]
 crbug.com/891427 virtual/android/rootscroller/rootscroller-during-fullscreen.html [ Pass Failure Timeout Crash ]
-# Next 2 here: https://ci.chromium.org/buildbot/tryserver.blink/win7-blink-rel/1183
-crbug.com/891427 fast/canvas/canvas-drawImage-live-video.html [ Pass Failure Timeout Crash ]
-crbug.com/816914 virtual/gpu/fast/canvas/canvas-drawImage-live-video.html [ Pass Failure Timeout Crash ]
 # Next 1 here: https://ci.chromium.org/buildbot/tryserver.blink/win7-blink-rel/1180
 # Next 2 here: https://ci.chromium.org/p/chromium/builders/luci.chromium.try/linux-blink-rel/1541
 crbug.com/891427 virtual/android/rootscroller/gesture-scroll-document-not-root-scroller.html [ Pass Failure Timeout Crash ]

third_party/blink/web_tests/fast/canvas/canvas-drawImage-live-video.html

@@ -26,38 +26,29 @@ async_test(t => {
     function drawFirstFrame() {
       video.removeEventListener("canplaythrough", drawFirstFrame, true);
       ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      video.addEventListener("timeupdate", updateVideo, true);
+      video.requestAnimationFrame(t.step_func(processFirstFrame));
       video.play();
     }
 
     var referenceImageData;
-    var processedFirstFrame = false;
-    var imagesAreTheSame;
 
-    function updateVideo() {
-      t.step(function() {
-          if (!processedFirstFrame) {
-            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            referenceImageData = ctx.getImageData(
-                0, 0, canvas.width, canvas.height);
-            processedFirstFrame = true;
-          } else {
-            if (video.currentTime == 0)
-              return;
-            video.removeEventListener("timeupdate", updateVideo, true);
-            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-            imagesAreTheSame = true;
-            for(var i = 0; i < imageData.data.length; ++i) {
-              if (imageData.data[i] != referenceImageData.data[i]) {
-                imagesAreTheSame = false;
-                break;
-              }
-            }
-            assert_false(imagesAreTheSame);
-            t.done();
-          }
-      });
+    function processFirstFrame() {
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      referenceImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      video.requestAnimationFrame(t.step_func_done(processSecondFrame));
+    }
+
+    function processSecondFrame() {
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      var imagesAreTheSame = true;
+      for(var i = 0; i < imageData.data.length; ++i) {
+        if (imageData.data[i] != referenceImageData.data[i]) {
+          imagesAreTheSame = false;
+          break;
+        }
+      }
+      assert_false(imagesAreTheSame);
     }
 }, 'Verify that consecutive drawImage from a live video correctly propagates frame updates.');
 </script>