<script src="../../../resources/js-test-pre.js"></script>
<body>
<video src="../../content/test.mp4" style="background-color: blue; border: 50px solid red; padding: 100px; width: 320px;" controls></video>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing media controls are sized correctly when borders and padding are set on the media element.");

const media = document.querySelector("video");
const mediaControls = window.internals.shadowRoot(media).lastElementChild.lastElementChild;

shouldBecomeEqualToString("mediaControls.style.width", "320px", () => {
    debug("");
    media.remove();
    finishJSTest();
});

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