<!DOCTYPE html>
<html>
<head>
<title>media controls adjust for zoom when filling the bar</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<script src=media-file.js></script>
<style>
body { zoom: 500%; }
</style>
</head>
<body onload="async_test(testTimelineVisible)">
<video id="video" width="300px" controls></video>
<script>
var element = document.getElementById("video");
element.src = "content/counting.ogv";
function testTimelineVisible(test) {
// Check that the timeline is shown. If zoom is not accounted for,
// then it will be considered 500% bigger, and will be dropped.
var timeline = mediaControlsButton(element, "timeline");
assert_true(getComputedStyle(timeline).display != "none",
"timeline should not be hidden while zoomed");
test.done();
}
</script>
</video>
</body>
</html>