test_background_video_drawimage_with_suspended_video.html (1957B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Test Background Video Displays Video Frame via drawImage When Suspended</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <script src="manifest.js"></script> 6 <script src="background_video.js"></script> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 8 <style> 9 video, canvas { 10 border: 1px solid black; 11 } 12 </style> 13 <script type="text/javascript"> 14 "use strict"; 15 16 var manager = new MediaTestManager; 17 18 function drawVideoToCanvas(v) { 19 console.log('drawVideoToCanvas'); 20 let c = document.createElement('canvas'); 21 c.width = 4; 22 c.height = 4; 23 c.style.width = 64; 24 c.style.height = 64; 25 document.body.appendChild(c); 26 27 let gfx = c.getContext('2d'); 28 if (!gfx) { 29 throw Error("Unable to obtain context '2d' from canvas"); 30 } 31 32 gfx.drawImage(v, 0, 0, 4, 4); 33 let imageData = gfx.getImageData(0, 0, 4, 4); 34 let pixels = imageData.data; 35 36 // Check that pixels aren't all the same colour. 37 // Implements by checking against rgb of the first pixel. 38 let rr = pixels[0], 39 gg = pixels[1], 40 bb = pixels[2], 41 allSame = true; 42 43 for (let i = 0; i < 4*4; i++) { 44 let r = pixels[4*i+0]; 45 let g = pixels[4*i+1]; 46 let b = pixels[4*i+2]; 47 if (r != rr || g != gg || b != bb) { 48 allSame = false; 49 break; 50 } 51 } 52 53 ok(!allSame, "Pixels aren't all the same color"); 54 } 55 56 startTest({ 57 desc: 'Test Background Video Displays Video Frame via drawImage When Suspended', 58 prefs: [ 59 [ "media.test.video-suspend", true ], 60 [ "media.suspend-background-video.enabled", true ], 61 [ "media.suspend-background-video.delay-ms", 500 ] 62 ], 63 tests: gDecodeSuspendTests, 64 runTest: (test, token) => { 65 let v = appendVideoToDoc(test.name, token); 66 manager.started(token); 67 68 waitUntilPlaying(v) 69 .then(() => testVideoSuspendsWhenHidden(v)) 70 .then(() => { 71 drawVideoToCanvas(v); 72 manager.finished(token); 73 }); 74 } 75 }); 76 </script>