<!DOCTYPE html>
<title>Overflow menu hides when clicking on the page even when propagation is stopped (with iframe).</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<script src="overflow-menu.js"></script>
<body>
</body>
<script>
function whenDataLoaded(video, callback) {
if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA)
return callback();
video.onloadeddata = callback;
}
async_test(function(t) {
var iframe = document.createElement('iframe');
iframe.width = iframe.height = 500;
iframe.src = 'resources/video-stop-propagation.html';
iframe.onload = t.step_func(function() {
var video = iframe.contentDocument.querySelector('video');
whenDataLoaded(video, t.step_func_done(function() {
var overflowList = getOverflowList(video);
var overflowMenu = getOverflowMenuButton(video);
// Clicking on the overflow menu button should make the overflow list visible
var coords = elementCoordinates(overflowMenu);
clickAtCoordinates(coords[0], coords[1]);
setTimeout(function() {
assert_not_equals(getComputedStyle(overflowList).display, "none");
// Click anywhere outside the overflow menu should close overflow list.
var coords = coordinatesOutsideElement(overflowList);
clickAtCoordinates(coords[0], coords[1]);
assert_equals(getComputedStyle(overflowList).display, "none");
});
}));
});
document.body.appendChild(iframe);
});
</script>