<!DOCTYPE html>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<body>
<button id="fullscreen" style="position: absolute; left: 0; top: 0;">Enter fullscreen</button>
<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing clicking on the volume down button correctly sets the volume to 0.");

const media = document.querySelector("video");
const button = document.querySelector("#fullscreen");

media.volume = 0.5;

function enterFullscreen()
{
    if (!("eventSender" in window)) {
        debug("This test is designed to run in DRT");
        return;
    }

    // Click a button so we may enter fullscreen.
    button.addEventListener("click", event => {
        try {
            media.webkitEnterFullscreen();
        } catch(e) {
            debug("Toggling fullscreen failed");
            finishJSTest();
        }
    });

    pressOnElement(button);
}

let volumeDownButton, volumeSlider;
media.addEventListener("loadedmetadata", () => {
    enterFullscreen();
    shouldBecomeEqual('!!internals.shadowRoot(media).querySelector("button.volume-down")', "true", () => {
        shouldBeTrue("media.webkitDisplayingFullscreen");
        shouldBe("media.volume", "0.5");

        volumeDownButton = internals.shadowRoot(media).querySelector("button.volume-down");
        volumeSlider = internals.shadowRoot(media).querySelector(".slider.volume");

        shouldBecomeEqual('volumeSlider.getBoundingClientRect().left', "196", () => {
            media.addEventListener("volumechange", () => {
                shouldBe("media.volume", "0");
                debug("");
                media.remove();
                button.remove();
                finishJSTest();
            });

            debug("");
            debug("Pressing on the volume down button");
            pressOnElement(volumeDownButton);
        });
    });
});

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