<!DOCTYPE html>
<title>Hide the overlay play button on play, show it on tap</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<script src="overlay-play-button.js"></script>
<body>
<script>
async_test((t) => {
// This test is only valid when the overlay play button is enabled.
enableOverlayPlayButtonForTest(t);
const video = document.createElement('video');
video.width = 400;
video.controls = true;
video.preload = 'metadata'
document.body.appendChild(video);
const button = mediaControlsOverlayPlayButtonInternal(video);
const controls = mediaControls(video);
const overlay = mediaControlsOverlayPlayButton(video);
let call_count = 0;
// Make sure the overlay button is not hidden.
assert_false(overlay.classList.contains('hidden'));
overlay.addEventListener('transitionend', t.step_func(() => {
call_count++;
if (call_count == 1) {
// Now tap anywhere on the controls and make sure the button
// unhides itself.
assert_true(overlay.classList.contains('hidden'));
singleTapOnControl(controls);
} else if(call_count == 2) {
// The second time a transition ends, it must be the controls becoming
// visible.
assert_false(overlay.classList.contains('hidden'));
t.done();
} else {
assert_unreached("Unexpected transitionend event");
}
}));
// Wait until we have loaded the video and tap on the button. This will
// transition the button to visible.
video.addEventListener('canplay', t.step_func(() => {
singleTapOnControl(button);
}), { once: true });
video.src = '../content/test.webm';
});
</script>