<html>
<head>
<script src=media-file.js></script>
<script src="media-controls.js"></script>
<script>
function toggleDisplay()
{
var video = document.getElementById('vid');
if (video.style.display == "none") {
video.style.display = "inline-block";
video.addEventListener("seeked", done);
video.currentTime = 0; // so the snapshot always has the same frame
} else
video.style.display = "none";
}
function test()
{
if (window.testRunner)
testRunner.waitUntilDone();
setSrcById('vid', 'content/test.ogv');
var video = document.getElementById('vid');
enableTestMode(video);
video.addEventListener("canplaythrough", test2);
video.load();
}
function test2()
{
toggleDisplay();
toggleDisplay();
}
function done()
{
// Wait for one rAF to ensure the thumbnail is onscreen, which
// helps reduce flaky failures.
if (window.testRunner)
requestAnimationFrame(_ => testRunner.notifyDone());
}
</script>
</head>
<body onload="test()">
This tests that toggling the display property won't make the controls disappear.<br>
<video id="vid" controls></video>
</body>
</html>