<!doctype html>
<html>
 <head>
  <title>{audio,video} events - canplay, then playing</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/common/media.js"></script>
 </head>
 <body>
  <p><a href="https://html.spec.whatwg.org/multipage/#mediaevents">spec reference</a></p>
  <audio id="a" autoplay controls>
  </audio>
  <video id="v" autoplay controls>
  </video>
  <div id="log"></div>
  <script>
test(function() {
  var t = async_test("setting src attribute on autoplay audio should trigger canplay then playing event", {timeout:5000});
  var a = document.getElementById("a");
  var found_canplay = false;
  a.addEventListener("canplay", function() {
    found_canplay = true;
  });
  a.addEventListener("playing", function() {
    t.step(function() {
     assert_true(found_canplay);
    });
    t.done();
    a.pause();
  }, false);
  a.src = getAudioURI("/media/sound_5") + "?" + new Date() + Math.random();
}, "audio events - canplay, then playing");

test(function() {
  var t = async_test("setting src attribute on autoplay video should trigger canplay then playing event", {timeout:5000});
  var v = document.getElementById("v");
  var found_canplay = false;
  v.addEventListener("canplay", function() {
    found_canplay = true;
  });
  v.addEventListener("playing", function() {
    t.step(function() {
     assert_true(found_canplay);
    });
    t.done();
    v.pause();
  }, false);
  v.src = getVideoURI("/media/movie_5") + "?" + new Date() + Math.random();
}, "video events - canplay, then playing");
  </script>
 </body>
</html>