<!DOCTYPE html>
<title>media controls overlay play button document move</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="../media-controls.js"></script>
<script src="overlay-play-button.js"></script>
<body>
<script>
async_test(function(t) {
// Make sure the overlay play button is turned on, as it's typically off
// unless we're dealing with Android.
enableOverlayPlayButtonForTest(t);
var video = createAndMoveVideo();
video.onloadedmetadata = t.step_func(function() {
// Large-enough video should have an overlay play button.
assertOverlayPlayButtonVisible(video);
// If the width goes under the minimum, the button should be hidden.
video.width = NARROW_VIDEO_WIDTH;
runAfterLayoutAndPaint(t.step_func(function() {
assertOverlayPlayButtonNotVisible(video);
// Re-widening the video should display the button.
video.width = NORMAL_VIDEO_WIDTH;
runAfterLayoutAndPaint(t.step_func(function() {
assertOverlayPlayButtonVisible(video);
// If the height goes under the minimum, the button should be hidden.
video.height = NARROW_VIDEO_HEIGHT;
runAfterLayoutAndPaint(t.step_func(function() {
assertOverlayPlayButtonNotVisible(video);
// Re-heightening the video should display the button.
video.height = NORMAL_VIDEO_HEIGHT;
runAfterLayoutAndPaint(t.step_func_done(function() {
assertOverlayPlayButtonVisible(video);
}));
}));
}));
}));
});
function createAndMoveVideo() {
var doc = document.implementation.createHTMLDocument();
var v = doc.createElement('video');
v.src = '../content/test.ogv';
v.width = NORMAL_VIDEO_WIDTH;
v.height = NORMAL_VIDEO_HEIGHT;
v.controls = true;
doc.body.appendChild(v);
doc.body.removeChild(v);
document.body.appendChild(v);
return v;
}
});
</script>
</body>