media-element-focus-tab.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <body id="body">
    <p>This tests that a media element ie: <code>&lt;Audio&gt;</code> or <code>&lt;video&gt;</code>, without tabindex can be selected with keyboard (TAB Key)</p>
    <pre id="console"></pre>

    <input id="WithTabIndexVideo" type=text>
    <br>
    <video id="video1" onfocus="window.mediaFocused = true" controls tabindex="0" src="../media/content/test.mp4"></video>
    <br>

    <input id="WithoutTabIndexVideo" type=text>
    <br>
    <video id="video2" onfocus="window.mediaFocused = true" controls src="../media/content/test.mp4"></video>
    <br>

    <input id="WithoutControlsButWithTabIndexVideo" type=text>
    <br>
    <video id="video3" onfocus="window.mediaFocused = true" tabindex="0" src="../media/content/test.mp4"></video>
    <br>

    <input id="WithoutTabIndexAudio" type=text>
    <br>
    <audio id="audio1" onfocus="window.mediaFocused = true" controls src="../media/content/test.wav"></audio>
    <br>

    <input id="WithoutControlaAndTabIndexAudio" type=text>
    <br>
    <audio id="audio2" onfocus="window.mediaFocused = true" src="../media/content/test.mp4"></audio>
    <br>

    <script>

      if (window.testRunner)
        testRunner.dumpAsText();

      function test(mediaId, fieldId, shoulbefocussed)
      {
        if (!window.eventSender)
          return;

        var mediaFocusedResult, mediaNotFocusedResult;
        if (shoulbefocussed)
        {
           mediaFocusedResult = "SUCCESS";
           mediaNotFocusedResult = "FAIL";
        }
        else
        {
          mediaFocusedResult = "FAIL";
          mediaNotFocusedResult = "SUCCESS";
        }

        window.mediaFocused = false;
        document.getElementById(fieldId).focus();
        eventSender.keyDown('\t');
        if (window.mediaFocused)
          document.getElementById("console").innerHTML += mediaFocusedResult + ": Tab-Key did tab to the Media Element (" + mediaId + "). TEST: " + fieldId + ".\n";
        else
          document.getElementById("console").innerHTML += mediaNotFocusedResult + ": Tab-Key did not tab to the Media Element (" + mediaId + "). TEST: " + fieldId + ".\n";
      }

      test("video1", "WithTabIndexVideo", true);
      test("video2", "WithoutTabIndexVideo", true);
      test("video3", "WithoutControlsButWithTabIndexVideo", true);
      test("audio1", "WithoutTabIndexAudio", "SUCCESS", true);
      test("audio2", "WithoutControlaAndTabIndexAudio", false);

    </script>
  </body>
</html>
chromium/third_party/blink/web_tests/fast/events/media-element-focus-tab.html
