<!DOCTYPE html>
<script src="../../../../resources/js-test-pre.js"></script>
<meta name="viewport" content="width=400">
<body>
<audio src="../../../content/test.mp3" style="position: absolute; top: 100px; left: 0; width: 400px;" controls></audio>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing that we apply a CSS zoom to ensure controls are always 50 device points tall on iOS for audio and also center the controls vertically.");

const media = document.querySelector("audio");
const shadowRoot = window.internals.shadowRoot(media);

window.requestAnimationFrame(() => {
    shouldBeEqualToString("shadowRoot.querySelector('.media-controls').style.width", "800px");
    shouldBeEqualToString("shadowRoot.querySelector('.media-controls').style.height", "62px");
    shouldBeEqualToString("shadowRoot.querySelector('.media-controls').style.transform", "scale(0.5)");
    shouldBeEqualToString("shadowRoot.querySelector('.media-controls').style.top", "-15.5px");

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

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