blob: e7e6793997d8d41db8caa65eca03b0392e9c4a2f [file] [log] [blame]
<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>
<style type="text/css" media="screen">
.media-controls {
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
window.jsTestIsAsync = true;
const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
let style, bounds;
scheduler.frameDidFire = function()
{
document.body.appendChild(mediaControls.element);
style = window.getComputedStyle(mediaControls.controlsBar.element);
bounds = mediaControls.controlsBar.element.getBoundingClientRect();
shouldBeEqualToString("style.left", "0px");
shouldBeEqualToString("style.bottom", "0px");
shouldBeEqualToString("style.width", "680px");
shouldBeEqualToString("style.height", "50px");
shouldBe("bounds.left", "0");
shouldBe("bounds.top", "250");
shouldBe("bounds.width", "680");
shouldBe("bounds.height", "50");
shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(30, 30, 30, 0.45)");
shouldBeEqualToString("style.webkitBackdropFilter", "saturate(1.8) blur(20px)");
mediaControls.element.remove();
debug();
finishMediaControlsTest();
};
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>