1 files changed, 73 insertions, 0 deletions
diff --git a/dom/media/test/test_seamless_looping_video.html b/dom/media/test/test_seamless_looping_video.html
new file mode 100644
index 0000000000..3bf99b0a62
--- /dev/null
+++ b/dom/media/test/test_seamless_looping_video.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Seamless looping video canvas test</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+<script type="text/javascript" src="manifest.js"></script>
+</head>
+<canvas id="canvas"></canvas>
+<video id="v"></video>
+<script type="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.
+ */
+const WIDTH = 10, HEIGHT = 10;
+
+add_task(async function testSeamlessLoopingVideoCanvas() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["media.seamless-looping-video", true],
+    ],
+  });
+
+  info(`load video which only contains white frames`);
+  let video = document.getElementById("v");
+  video.loop = true;
+  video.src = "white-short.webm";
+  video.width = WIDTH;
+  video.height = HEIGHT;
+  await video.play();
+
+  info(`setup canvas`);
+  const cvs = document.getElementById("canvas");
+  cvs.width = WIDTH;
+  cvs.height = HEIGHT;
+
+  info(`test seamless looping multiples times`);
+  let MAX_LOOPING_COUNT = 10;
+  for (let count = 0; count < MAX_LOOPING_COUNT; count++) {
+    await once(video, "seeking");
+    assertPaintedFrameIsWhiteFrame();
+    await once(video, "seeked");
+    ok(true, `the round ${count} of the seamless looping succeeds`);
+  }
+});
+
+function assertPaintedFrameIsWhiteFrame() {
+  info(`catpure image from video`);
+  const cvs = document.getElementById("canvas");
+  let context = cvs.getContext('2d');
+  if (!context) {
+    ok(false, "can't get 2d context");
+  }
+
+  context.drawImage(document.getElementById("v"), 0, 0, WIDTH, HEIGHT);
+  let imageData = context.getImageData(0, 0, WIDTH, HEIGHT);
+  for (let idx = 0; idx < WIDTH * HEIGHT; idx++) {
+    let pixelCount = 4 * idx; // RGBA
+    let data = 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>