Fix MediaRecorder-pause-resume.html to avoid start() ambiguities.

The spec allows for MediaRecorder.start() to hold the "start" event until it
has collected some actual data. This means "pause" and "resume" events can occur
before "start", on the contrary of this testcase.

This patch avoids this ambiguity by:
1) Drawing a frame to the canvas so that the track contains some real data.
2) Wait for "start" before pause()ing, to ensure "start" comes first.

Note that without 1), 2) could wait indefinitely, resulting in a timeout.

Differential Revision: https://phabricator.services.mozilla.com/D46470

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1582407
gecko-commit: d7ab956c296257c99630aa0d4e91d41434c55137
gecko-integration-branch: autoland
gecko-reviewers: jib

Author: Pehrsons

mediacapture-record/MediaRecorder-pause-resume.html

@@ -11,8 +11,10 @@
 </canvas>
 <script>
     function createVideoStream() {
-        let canvas = document.getElementById("canvas");
-        canvas.getContext('2d');
+        const canvas = document.getElementById("canvas");
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = 'green';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
         return canvas.captureStream();
     }
 
@@ -32,6 +34,7 @@
 
         recorder.start();
         assert_equals(recorder.state, "recording", "MediaRecorder has been started successfully");
+        await new Promise(r => recorder.onstart = r);
 
         recorder.pause();
         assert_equals(recorder.state, "paused", "MediaRecorder should be paused immediately following pause()");