<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<script type="text/javascript">

description("Testing the <code>Slider</code> computed style.");

window.jsTestIsAsync = true;

const slider = new Slider;
slider.width = 200;
slider.height = 25;

let containerStyle, fillStyle, inputStyle;
scheduler.frameDidFire = function()
{
    document.body.appendChild(slider.element);

    containerStyle = window.getComputedStyle(slider.element);
    shouldBeEqualToString("containerStyle.position", "relative");

    containerStyle = window.getComputedStyle(slider.children[0].element);
    shouldBeEqualToString("containerStyle.position", "absolute");
    shouldBeEqualToString("containerStyle.top", "5.5px");
    shouldBeEqualToString("containerStyle.left", "0px");
    shouldBeEqualToString("containerStyle.width", "200px");
    shouldBeEqualToString("containerStyle.height", "5px");
    shouldBeEqualToString("containerStyle.pointerEvents", "none");

    inputStyle = window.getComputedStyle(slider.children[1].element);
    shouldBeEqualToString("inputStyle.position", "absolute");
    shouldBeEqualToString("inputStyle.top", "0px");
    shouldBeEqualToString("inputStyle.left", "0px");
    shouldBeEqualToString("inputStyle.width", "200px");
    shouldBeEqualToString("inputStyle.height", "25px");
    shouldBeEqualToString("inputStyle.margin", "0px");
    shouldBeEqualToString("inputStyle.webkitAppearance", "none");
    shouldBeEqualToString("inputStyle.backgroundColor", "rgba(0, 0, 0, 0)");

    finishMediaControlsTest();
}

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