<!DOCTYPE HTML><html><head><title>Seamless looping video canvas test</title><scriptsrc="/tests/SimpleTest/SimpleTest.js"></script><linkrel="stylesheet"type="text/css"href="/tests/SimpleTest/test.css"/><scripttype="text/javascript"src="manifest.js"></script></head><canvasid="canvas"></canvas><videoid="v"></video><scripttype="application/javascript">/** * This test aims to check if the video is seamless looping by capturing the * image when loop happens. We use a video contains only white frames, so the * captured frame should always be a white frame. If looping is not seamless, * the captured frame would become a black frame. */constWIDTH=10,HEIGHT=10;add_task(asyncfunctiontestSeamlessLoopingVideoCanvas(){awaitSpecialPowers.pushPrefEnv({set:[["media.seamless-looping-video",true],],});info(`load video which only contains white frames`);letvideo=document.getElementById("v");video.loop=true;video.src="white-short.webm";video.width=WIDTH;video.height=HEIGHT;awaitvideo.play();info(`setup canvas`);constcvs=document.getElementById("canvas");cvs.width=WIDTH;cvs.height=HEIGHT;info(`test seamless looping multiples times`);letMAX_LOOPING_COUNT=10;for(letcount=0;count<MAX_LOOPING_COUNT;count++){awaitonce(video,"seeking");assertPaintedFrameIsWhiteFrame();awaitonce(video,"seeked");ok(true,`the round ${count} of the seamless looping succeeds`);}});functionassertPaintedFrameIsWhiteFrame(){info(`catpure image from video`);constcvs=document.getElementById("canvas");letcontext=cvs.getContext('2d');if(!context){ok(false,"can't get 2d context");}context.drawImage(document.getElementById("v"),0,0,WIDTH,HEIGHT);letimageData=context.getImageData(0,0,WIDTH,HEIGHT);for(letidx=0;idx<WIDTH*HEIGHT;idx++){letpixelCount=4*idx;// RGBAletdata=imageData.data;// White frame's RGB value should be [255,255,255]is(data[pixelCount+0],255,`R should be 255`);is(data[pixelCount+1],255,`G should be 255`);is(data[pixelCount+2],255,`B should be 255`);}}</script><body></body></html>