<!doctype html>
<title>Verify VP9+Alpha video playback and canvas interact correctly.</title>
<style>
  body { background: white; }
  video, canvas { background: pink; }
</style>
<script>
  if (window.testRunner)
    testRunner.waitUntilDone();

  function startTest() {
    var video = document.querySelector('video');

    video.oncanplaythrough = function() {
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');

      // This will squish the video a bit, but it doesn't matter for this test.
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      // Wait for request animation frame to ensure the video frame is drawn.
      if (window.testRunner)
        window.requestAnimationFrame(_ => { testRunner.notifyDone(); });
    }

    video.src = "resources/white-square-vp9a.webm";
  }
</script>
<body onload="startTest();">
  <video width="320" height="240"></video>
  <canvas width="320" height="240"></canvas>
</body>