test_streams_firstframe.html (1988B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test that a non-autoplaying, non-playing element with a MediaStream source triggers canplay and shows a first frame</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="manifest.js"></script> 7 <script src="/tests/dom/canvas/test/captureStream_common.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 9 </head> 10 <body> 11 <pre id="test"> 12 <script class="testbody" type="text/javascript"> 13 14 async function runTest() { 15 const canvas = document.createElement("canvas"); 16 canvas.getContext("2d"); 17 const helper = new CaptureStreamTestHelper2D(100, 100); 18 19 const video = document.createElement("video"); 20 document.body.appendChild(video); 21 22 video.srcObject = canvas.captureStream(); 23 helper.drawColor(canvas, helper.red); 24 25 await Promise.race([ 26 new Promise(r => video.oncanplay = r), 27 new Promise(r => setTimeout(r, 30000)) 28 .then(() => Promise.reject(new Error("Canplay timeout"))), 29 ]); 30 31 ok(true, "Got \"canplay\""); 32 is(video.readyState, video.HAVE_ENOUGH_DATA, "Expected readyState"); 33 ok(helper.isPixel(helper.getPixel(video), helper.red), 34 "First frame is rendered before playing"); 35 36 helper.drawColor(canvas, helper.green); 37 await helper.pixelMustNotBecome(video, helper.green, { 38 time: 1000, 39 infoString: "Rendered first frame doesn't change on new frame from source" 40 }); 41 ok(helper.isPixel(helper.getPixel(video), helper.red), 42 "First frame is still rendered"); 43 44 video.play(); 45 helper.drawColor(canvas, helper.blue); 46 await helper.pixelMustBecome(video, helper.blue, { 47 infoString: "New frame gets rendered when playing" 48 }); 49 50 video.srcObject.getTracks().forEach(t => t.stop()); 51 } 52 53 (async function() { 54 SimpleTest.waitForExplicitFinish(); 55 SimpleTest.requestFlakyTimeout("Explicit timeout reasons"); 56 try { 57 await runTest(); 58 } catch(e) { 59 ok(false, e); 60 } 61 SimpleTest.finish(); 62 })(); 63 64 </script> 65 </pre> 66 </body> 67 </html>