<!DOCTYPE html>
<html lang="en-US">
<title>Media Controls: loading panel accessibility tests</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../../media-resources/media-controls.js"></script>
<script src="../../media-resources/media-file.js"></script>
<video controls></video>
<script>
async_test(t => {
  var video = document.querySelector('video');
  var loading_panel = loadingPanelElement(video);

  video.addEventListener("loadstart", t.step_func_done(_ => {
    // As we are loading, we will see the loading panel.
    assert_true(isControlVisible(loading_panel));
    assert_equals(loading_panel.getAttribute('aria-label'), 'buffering');
  }));

  video.addEventListener("loadedmetadata", t.step_func(function() {
    // If the panel is hidden, we won't hear the aria-label.
    assert_false(isControlVisible(loading_panel));
    assert_equals(loading_panel.getAttribute('aria-label'), 'buffering');

    // Play video
    video.play();
  }));

  video.addEventListener("playing", t.step_func(function() {
    // Check that on playback we don't see the panel.
    assert_false(isControlVisible(loading_panel));

    // Seek ahead to cause more buffering
    video.currentTime = video.duration - 0.5;
  }));

  video.addEventListener("seeked", t.step_func(function() {
    // We should be buffering
    assert_true(isControlVisible(loading_panel));
    assert_equals(loading_panel.getAttribute('aria-label'), 'buffering');
  }));


  var mediaFile = "../../../content/test.oga";
  var type = mimeTypeForExtension(mediaFile.split(".").pop());
  video.src = "http://127.0.0.1:8000/media/video-throttled-load.cgi?name=" + mediaFile + "&throttle=5000&nph=1&type=" + type;
});
</script>
</html>