test_seamless_looping_video.html (2263B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Seamless looping video canvas test</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 7 <script type="text/javascript" src="manifest.js"></script> 8 </head> 9 <canvas id="canvas"></canvas> 10 <video id="v"></video> 11 <script type="application/javascript"> 12 13 /** 14 * This test aims to check if the video is seamless looping by capturing the 15 * image when loop happens. We use a video contains only white frames, so the 16 * captured frame should always be a white frame. If looping is not seamless, 17 * the captured frame would become a black frame. 18 */ 19 const WIDTH = 10, HEIGHT = 10; 20 21 add_task(async function testSeamlessLoopingVideoCanvas() { 22 await SpecialPowers.pushPrefEnv({ 23 set: [ 24 ["media.seamless-looping-video", true], 25 ], 26 }); 27 28 info(`load video which only contains white frames`); 29 let video = document.getElementById("v"); 30 video.loop = true; 31 video.src = "white-short.webm"; 32 video.width = WIDTH; 33 video.height = HEIGHT; 34 await video.play(); 35 36 info(`setup canvas`); 37 const cvs = document.getElementById("canvas"); 38 cvs.width = WIDTH; 39 cvs.height = HEIGHT; 40 41 info(`test seamless looping multiples times`); 42 let MAX_LOOPING_COUNT = 10; 43 for (let count = 0; count < MAX_LOOPING_COUNT; count++) { 44 await once(video, "seeking"); 45 assertPaintedFrameIsWhiteFrame(); 46 await once(video, "seeked"); 47 ok(true, `the round ${count} of the seamless looping succeeds`); 48 } 49 }); 50 51 function assertPaintedFrameIsWhiteFrame() { 52 info(`catpure image from video`); 53 const cvs = document.getElementById("canvas"); 54 let context = cvs.getContext('2d'); 55 if (!context) { 56 ok(false, "can't get 2d context"); 57 } 58 59 context.drawImage(document.getElementById("v"), 0, 0, WIDTH, HEIGHT); 60 let imageData = context.getImageData(0, 0, WIDTH, HEIGHT); 61 for (let idx = 0; idx < WIDTH * HEIGHT; idx++) { 62 let pixelCount = 4 * idx; // RGBA 63 let data = imageData.data; 64 // White frame's RGB value should be [255,255,255] 65 is(data[pixelCount + 0], 255, `R should be 255`); 66 is(data[pixelCount + 1], 255, `G should be 255`); 67 is(data[pixelCount + 2], 255, `B should be 255`); 68 } 69 } 70 </script> 71 <body> 72 </body> 73 </html>