blob: c9e89d922f130a1d17bf59289d59fd7768009175 [file] [log] [blame]
<!DOCTYPE html>
<html>
<script>
internals.settings.setViewportEnabled(true);
internals.settings.setViewportMetaEnabled(true);
</script>
<head>
<title>Test that overflow-x: hidden with a large viewport doesn't clip the controls</title>
<meta name='viewport' content='width=800'>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
</head>
<style>
body {
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
</style>
<body>
<video controls width=400></video>
<video controls width=800></video>
<video controls width=1200></video>
<video controls width=600 style='padding: 300px'></video>
</body>
<script>
test(_ => {
const expectedWidth = [
"400px",
"800px",
"800px",
"500px",
];
var videos = document.querySelectorAll('video');
for (var i=0; i < videos.length; ++i) {
videos[i].src = 'content/test.ogv';
}
var forceLayout = document.body.offsetHeight;
for (var i=0; i < videos.length; ++i) {
var controls = mediaControlsButton(videos[i], 'panel');
assert_equals(getComputedStyle(controls).width, expectedWidth[i]);
}
});
</script>
</html>