Add resized video input test for WebRtcMediaRecorderBrowserTest

content/test/data/media/mediarecorder_test.html

Index: content/test/data/media/mediarecorder_test.html
diff --git a/content/test/data/media/mediarecorder_test.html b/content/test/data/media/mediarecorder_test.html
index 95a66894fe68ad1c3b4cb37818b3e779e6130052..1a9c645c4a0fb1deed17ec843431b2aa8fdc2a00 100644
--- a/content/test/data/media/mediarecorder_test.html
+++ b/content/test/data/media/mediarecorder_test.html
@@ -538,6 +538,60 @@ function testTwoChannelAudio() {
       });
 }
 
+
+// Tests that MediaRecorder can handle a mid-stream resize of the video input
+function testResizeVideoInput(mimeType) {
+  const ON_DATA_AVAILABLE_THRESHOLD = 10;
+  const NUMBER_OF_EVENTS_TO_RECORD = 5;
+  
+  var canvas = document.createElement('canvas');
+  canvas.width = canvas.height = 64;
+  var stream = canvas.captureStream();
+  assertTrue(stream, 'Error creating MediaStream');
+  assertEquals(1, stream.getVideoTracks().length);
+  assertEquals(0, stream.getAudioTracks().length);
+  var recordedEvents = 0;
+
+  function drawOnCanvas(canvas) {
+    var ctx = canvas.getContext('2d');
+    ctx.fillStyle = 'green';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    requestAnimationFrame( function() { drawOnCanvas(canvas); });
+  }
+
+  createMediaRecorder(stream, mimeType)
+      .then(function(recorder) {
+        recorder.ondataavailable = function(event) {
+          if (event.data.size > ON_DATA_AVAILABLE_THRESHOLD)
+            ++recordedEvents;
+        };
+        recorder.start(0);
+        drawOnCanvas(canvas);

[mcasas, 2017/03/16 23:15:47]

Could we use stream.requestFrame() instead of 
painting on the canvas every time?  (Doing the
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';   
  ctx.fillRect(0, 0, canvas.width, canvas.height);
only once, after creation of |canvas|.

[emircan, 2017/03/16 23:33:55]

requestFrame() makes sure that the next drawn item on canvas is captured. It
does not force a drawing on canvas. We still need a mechanism to draw and most
common way is rAF().

+      })
+      .then(function() {
+        return waitFor('Make sure the recording has data',
+            function() {
+              return recordedEvents > NUMBER_OF_EVENTS_TO_RECORD;
+            });
+      })
+      .then(function() {
+        canvas.width = canvas.height = 48;
+        recordedEvents = 0;
+      })
+      .then(function() {
+        return waitFor('Make sure the recording has data',
+            function() {
+              return recordedEvents > NUMBER_OF_EVENTS_TO_RECORD;
+            });
+      })
+      .catch(function(err) {
+        return failTest(err.toString());
+      })
+      .then(function() {
+        reportTestSuccess();
+      });
+}
+
 // Tests that MediaRecorder's requestData() throws an exception if |state| is
 // 'inactive'.
 function testIllegalRequestDataThrowsDOMError() {