<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>