<!doctype html>
<html>
    <head>
        <title>media controls mute button with MediaController</title>
        <script src="media-file.js"></script>
        <script src="media-controls.js"></script>
    </head>
    <body>
        <video controls mediagroup="x"></video>
        <script>
            if (window.testRunner)
                testRunner.waitUntilDone();

            var video = document.querySelector("video");
            video.src = findMediaFile("video", "content/test");
            video.addEventListener("loadeddata", function()
            {
                if (window.eventSender) {
                    // click the mute button
                    var coords = mediaControlsButtonCoordinates(video, "mute-button");
                    eventSender.mouseMoveTo(coords[0], coords[1]);
                    eventSender.mouseDown();
                    eventSender.mouseUp();

                    // wait for the volumechange event
                    video.addEventListener("volumechange", function()
                    {
                        if (window.testRunner)
                            testRunner.notifyDone();
                    });
                }
            });
        </script>
    </body>
</html>