video-canvas.html | Explore in Territory

<!DOCTYPE html>
<title>Test "video" as a source for "canvas".</title>
<video style="display: none"></video>
<canvas width="160" height="120"></canvas>
<canvas width="160" height="120"></canvas>
<canvas width="160" height="120"></canvas><br/>

<canvas width="160" height="120"></canvas>
<canvas width="160" height="120"></canvas>
<canvas width="160" height="120"></canvas><br/>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();

window.onload = _ => {
  var index = 0;
  var canvii = document.querySelectorAll('canvas');
  var testTimes = [0, 2, 4, 6, 8, 10];
  if (testTimes.length != canvii.length) {
    testRunner.fail('Unpexected number of canvas or test times.');
    return;
  }

  var video = document.querySelector("video");
  video.requestVideoFrameCallback(_ => {
    let width = video.videoWidth / 2;
    let height = video.videoHeight / 2;

    function drawNext() {
      let ctx = canvii[index++].getContext("2d");
      ctx.fillStyle = "yellow";
      ctx.fillRect(0, 0, width, height);
      ctx.drawImage(video, 0, 0, width, height);

      if (index < testTimes.length) {
        video.requestVideoFrameCallback(drawNext);
        video.currentTime = testTimes[index];
      } else if (window.testRunner) {
        testRunner.notifyDone();
      }
    }

    drawNext();
  });

  video.src = "content/counting.webm";
};
</script>
chromium/third_party/blink/web_tests/media/video-canvas.html
