Fix missing finalizeFrame barriers in WebGL animations

third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-capture-out-of-DOM-element.html

Index: third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-capture-out-of-DOM-element.html
diff --git a/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-capture-out-of-DOM-element.html b/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-capture-out-of-DOM-element.html
index bed039a28cf412c59deeaba48e5f5da2e7409104..aef33f312772d9c6f5e201e779dd80c1b170426e 100644
--- a/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-capture-out-of-DOM-element.html
+++ b/third_party/WebKit/LayoutTests/fast/mediacapturefromelement/CanvasCaptureMediaStream-capture-out-of-DOM-element.html
@@ -5,35 +5,51 @@
 
 async_test(t => {
   var canvas = document.createElement('canvas');
-
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'green';
   var recorder = new MediaRecorder(canvas.captureStream());
+  var frameCount = 0;
+
   recorder.ondataavailable = function() {
-    t.step_func_done(function() {
+    t.step(function() {
       assert_true(event.data.size > 0, 'Recorded data size should be > 0');
-    })();
-    recorder.stop();
+    });
+
+    frameCount = frameCount + 1;
+    if (frameCount > 3) {
+      recorder.stop();
+      t.done();
+    } else {
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
   }
-  recorder.start(0);
 
-  var ctx = canvas.getContext('2d');
-  ctx.fillStyle = 'green';
+  recorder.start(0);
   ctx.fillRect(0, 0, canvas.width, canvas.height);
-}, "Verify that drawing to a 2D canvas that is not attached to the DOM dispatches a frame to an attached MediaRecorder." );
+}, "Verify that drawing to a 2D canvas that is not attached to the DOM dispatches frames to an attached MediaRecorder." );
 
 async_test(t => {
   var canvas = document.createElement('canvas');
-
+  var gl = canvas.getContext('webgl');
+  gl.clearColor(0, 1, 0, 1);
   var recorder = new MediaRecorder(canvas.captureStream());
+  var frameCount = 0;
+
   recorder.ondataavailable = function() {
-    t.step_func_done(function() {
+    t.step(function() {
       assert_true(event.data.size > 0, 'Recorded data size should be > 0');
-    })();
-    recorder.stop();
+    });
+
+    frameCount = frameCount + 1;
+    if (frameCount > 3) {
+      recorder.stop();
+      t.done();
+    } else {
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    }
   }
   recorder.start(0);
 
-  var gl = canvas.getContext('webgl');
-  gl.clearColor(0, 1, 0, 1);
   gl.clear(gl.COLOR_BUFFER_BIT);
-}, "Verify that drawing to a webgl canvas that is not attached to the DOM dispatches a frame to an attached MediaRecorder." );
+}, "Verify that drawing to a webgl canvas that is not attached to the DOM dispatches frames to an attached MediaRecorder." );
 </script>