blob: bc7e7ac0cccc4f4a206dc30ab80e898b189355a7 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
.movie {
position: absolute;
overflow: hidden;
height: 200px;
width: 110px;
padding: 10px;
background-color: white;
border: 1px solid black;
}
video {
background-color: black;
}
.box {
width: 100px;
height: 100px;
}
.test {
position: relative;
margin-top: -100px;
background-color: green;
}
.indicator {
background-color: red;
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.testRunner)
testRunner.waitUntilDone();
</script>
</head>
<body>
<p>You should see a green box under the video. If you see red, the test failed.</p>
<div class="movie content">
<video height="100" width="100"></video>
<div class="indicator box"></div>
<div class="test box"></div>
</div>
<script type="text/javascript" charset="utf-8">
var video = document.getElementsByTagName('video')[0];
video.src = '../resources/video.' + (video.canPlayType('video/ogg') ? 'ogv' : 'mp4');
video.addEventListener('canplaythrough', function() {
if (window.testRunner)
testRunner.notifyDone();
}, false);
</script>
</body>
</html>