<!DOCTYPE html>
<title>Attaching a media element again to the document, having a child track that failed loading doesn't block video from playing</title>
<script src="/common/media.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<video>
    <track src="resources/no-webvtt.vtt" kind="captions" default>
</video>
<script>
  async_test(function(t) {
    var video = document.querySelector('video');
    video.src = getVideoURI('/media/test');
    video.oncanplaythrough = t.step_func(canplaythrough);

    function canplaythrough() {
      video.oncanplaythrough = null;
      var track = document.querySelector('track');

      // Track should have error as ready state.
      assert_equals(track.readyState, HTMLTrackElement.ERROR);

      // Remove the video element from body.
      document.body.removeChild(video);

      // Reset the video src attribute to re-trigger resource selection for tracks.
      video.src = getVideoURI('/media/test');

      // Append the video element back to the body.
      document.body.appendChild(video);

      assert_equals(track.readyState, HTMLTrackElement.ERROR);

      video.onplaying = t.step_func_done();
      video.play();
      // The video should start playing.
    }
  });
</script>
