<!DOCTYPE html>
<script src="../../../resources/js-test-pre.js"></script>
<body>
<video src="../../content/test.wav" style="width: 800px; height: 240px;" controls autoplay data-auto-hide-delay="100"></video>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing that we only show appropriate controls for a video element with only audio tracks.");

const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
let mediaControls;

media.addEventListener("play", event => {
    mediaControls = shadowRoot.lastElementChild.lastElementChild;

    // We should not show the fullscreen button if we have a <video> with no audio tracks.
    window.requestAnimationFrame(() => shouldBeNull("mediaControls.querySelector('button.fullscreen')"));

    setTimeout(() => {
        // Controls should not auto-hide if we have a <video> with no audio tracks.
        shouldBeFalse("mediaControls.querySelector('.controls-bar').classList.contains('faded')");

        debug("");
        media.remove();
        finishJSTest();
    }, 250);
});

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>