dom/media/test/test_seamless_looping_video.html
author Andy Leiserson <aleiserson@mozilla.com>
Sat, 19 Jul 2025 16:44:54 +0000 (11 hours ago)
changeset 797257 246e16bb06c941d6f64d807d43c807bfba04ae86
parent 640871 b1d058dde129f838668f7cdc4e04cf79b3037e3b
permissions -rw-r--r--
Bug 1976958 - Update wgpu to b83c9cf (2025-07-10) r=webgpu-reviewers,supply-chain-reviewers,teoxoy Differential Revision: https://phabricator.services.mozilla.com/D257047
<!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>