<html>
    <head>
        <style>
            audio { background-color: blue; }
        </style>
        <script src=media-file.js></script>
        <script src=media-controls.js></script>
        <script>
            function test()
            {
                var audios = document.querySelectorAll("audio");
                audios.forEach(audio => {
                  enableTestMode(audio);
                });
                setSrcByTagName("audio", "content/test.oga");

                if (window.testRunner) {
                    testRunner.waitUntilDone();
                    setTimeout(function() {
                        document.body.appendChild(document.createTextNode('FAIL'));
                        if (window.testRunner)
                                testRunner.notifyDone();
                    } , 8000);
                }
                var count = document.getElementsByTagName('audio').length;
                document.addEventListener("canplaythrough", function () {
                    if (!--count) {
                        document.body.offsetLeft;
                        if (window.testRunner)
                            testRunner.notifyDone();
                    }
                }, true);
            }
        </script>
    </head>
    <body onload="test()">
        <p>Test controls placement. </p>
        <audio controls></audio><br><br>
        <audio controls style="width: 320px;"></audio><br><br>
        <audio controls style="position: absolute; width: 320px; height: 100px;"></audio><br>
    </body>
</html>