test_capture.html (5229B)
1 <!DOCTYPE HTML> 2 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 3 4 <title>Canvas2D test: CaptureStream()</title> 5 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="captureStream_common.js"></script> 8 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 9 <body> 10 <script> 11 SimpleTest.waitForExplicitFinish(); 12 SimpleTest.requestFlakyTimeout("Ensuring nothing happens until timing out with good margin"); 13 14 // CaptureStreamTestHelper holding utility test functions. 15 const h = new CaptureStreamTestHelper2D(); 16 // Canvas element captured by streams. 17 const c = h.createAndAppendElement('canvas', 'c'); 18 // Video element with captureStream stream in automatic mode. 19 const vauto = h.createAndAppendElement('video', 'vauto'); 20 // Video element with captureStream stream in manual (fps 0) mode. 21 const vmanual = h.createAndAppendElement('video', 'vmanual'); 22 // Video element with captureStream stream with fixed frame rate. 23 const vrate = h.createAndAppendElement('video', 'vrate'); 24 25 async function checkDrawColorInitialRed() { 26 info("Checking that all video elements become red when initiated just after the first drawColor(red)."); 27 28 h.drawColor(c, h.red); 29 30 vauto.srcObject = c.captureStream(); 31 vmanual.srcObject = c.captureStream(0); 32 vrate.srcObject = c.captureStream(10); 33 34 ok(h.isPixel(h.getPixel(vauto), h.blackTransparent, 0), 35 "vauto should not be drawn to before stable state"); 36 ok(h.isPixel(h.getPixel(vrate), h.blackTransparent, 0), 37 "vrate should not be drawn to before stable state"); 38 ok(h.isPixel(h.getPixel(vmanual), h.blackTransparent, 0), 39 "vmanual should not be drawn to before stable state"); 40 41 await h.pixelMustBecome(vauto, h.red, { 42 infoString: "should become red automatically", 43 }); 44 await h.pixelMustBecome(vrate, h.red, { 45 infoString: "should become red automatically", 46 }); 47 await h.pixelMustBecome(vmanual, h.red, { 48 infoString: "should become red when we get to stable state (first frame)", 49 }); 50 } 51 52 async function checkDrawColorGreen() { 53 info("Checking that drawing green propagates properly to video elements."); 54 55 const drawing = h.startDrawing(() => h.drawColor(c, h.green)); 56 57 try { 58 await h.pixelMustBecome(vauto, h.green, { 59 infoString: "should become green automatically", 60 }); 61 await h.pixelMustBecome(vrate, h.green, { 62 infoString: "should become green automatically", 63 }); 64 await h.pixelMustBecome(vmanual, h.red, { 65 infoString: "should still be red", 66 }); 67 h.requestFrame(vmanual); 68 await h.pixelMustBecome(vmanual, h.green, { 69 infoString: "should become green after requstFrame()", 70 }); 71 } 72 catch(err) { 73 ok(false, "checkDrawColorGreen failed: ", err); 74 } 75 drawing.stop(); 76 } 77 78 async function checkRequestFrameOrderGuarantee() { 79 info("Checking that requestFrame() immediately after a drawColor() " + 80 "call results in the expected frame seen in the stream."); 81 82 await h.pixelMustBecome(vmanual, h.green, { 83 infoString: "should still be green", 84 }); 85 h.drawColor(c, h.red); // 1. Draw canvas red 86 h.requestFrame(vmanual); // 2. Immediately request a frame 87 await h.pixelMustBecome(vmanual, h.red, { 88 infoString: "should become red after call order test", 89 }); 90 } 91 92 async function checkDrawImageNotCleanRed() { 93 info("Checking that drawImage with not origin-clean image renders streams useless."); 94 const ctx = c.getContext('2d'); 95 const notCleanRed = new Image(); 96 97 await new Promise((resolve, reject) => { 98 notCleanRed.onload = resolve; 99 notCleanRed.onerror = () => reject(new Error("Failed to load tainted image.")); 100 notCleanRed.src = "http://example.com/tests/dom/canvas/test/image_red_crossorigin_credentials.png"; 101 document.body.appendChild(notCleanRed); 102 }); 103 const drawing = h.startDrawing( 104 () => ctx.drawImage(notCleanRed, 0, 0, c.width, c.height)); 105 h.testNotClean(c); 106 try { 107 await h.pixelMustNotBecome(vauto, h.red, { 108 timeout: 1000, 109 infoString: "should not become red", 110 }); 111 ok(h.isPixelNot(h.getPixel(vrate), h.red, 250), 112 "should not have become red"); 113 await h.pixelMustBecome(vmanual, h.green, { 114 infoString: "should still be green", 115 }); 116 h.requestFrame(vmanual); 117 await h.pixelMustNotBecome(vmanual, h.red, { 118 timeout: 1000, 119 infoString: "should not become red", 120 }); 121 } catch(err) { 122 ok(false, "checkDrawImageNotCleanRed failed: ", err); 123 } 124 drawing.stop(); 125 } 126 127 async function checkEndedOnStop() { 128 const promises = [vauto, vmanual, vrate].map(elem => { 129 elem.srcObject.getTracks()[0].stop(); 130 return new Promise(resolve => 131 elem.addEventListener("ended", function endedListener(event) { 132 ok(true, "Element " + elem.id + " ended."); 133 resolve(); 134 elem.removeEventListener("ended", endedListener); 135 })); 136 }); 137 await Promise.all(promises); 138 } 139 140 function finish() { 141 ok(true, 'Test complete.'); 142 SimpleTest.finish(); 143 } 144 145 (async () => { 146 await checkDrawColorInitialRed(); 147 await checkDrawColorGreen(); 148 await checkRequestFrameOrderGuarantee(); 149 await checkDrawColorGreen(); // Restore video elements to green. 150 await checkDrawImageNotCleanRed(); 151 await checkEndedOnStop(); 152 finish(); 153 })(); 154 </script>