blob: be3e258bae26206a64d6d219754e8f7ce08a6fd1 [file] [log] [blame]
<!DOCTYPE html>
<style>
/* Offset body by 50px so that buttons clearly change position when they enter/exit fullscreen. */
body {
position: relative;
left: 50px;
}
</style>
<script src="../resources/js-test.js"></script>
<script src="full-screen-test.js"></script>
<script src="../fast/events/touch/resources/touch-hover-active-tests.js"></script>
<link rel="stylesheet" href="../fast/events/touch/resources/touch-hover-active-tests.css">
<button id="enter" class='touch-interactive' onclick="document.body.webkitRequestFullScreen()">Go full screen</button>
<button id="exit" class='touch-interactive' onclick="document.webkitCancelFullScreen()">Exit full screen</button>
<script>
var enterButton;
var exitButton;
function runTest() {
if (!window.eventSender) {
debug('This test requires DRT.');
return;
}
enterButton = document.getElementById('enter');
exitButton = document.getElementById('exit');
var enterButtonCenter = elementCenter(enterButton);
waitForEventOnce(document, 'webkitfullscreenchange', function() {
shouldBeTrue("document.webkitIsFullScreen")
// After entering fullscreen, the button should lose hover
shouldBeDefault("getHoverActiveState(enterButton)")
waitForEventOnce(document, 'webkitfullscreenchange', function() {
shouldBeFalse("document.webkitIsFullScreen")
// After leaving fullscreen, the button should lose hover
shouldBeDefault("getHoverActiveState(exitButton)")
endTest();
});
var exitButtonCenter = elementCenter(exitButton);
// Hover on and click the "Exit fullscreen" button
eventSender.mouseMoveTo(exitButtonCenter.x, exitButtonCenter.y);
eventSender.mouseDown();
eventSender.mouseUp();
});
// Move mouse over to the "Go fullscreen" button and click
// We move by 50px in the x-direction to account for the relative position.
eventSender.mouseMoveTo(enterButtonCenter.x + 50, enterButtonCenter.y);
eventSender.mouseDown();
eventSender.mouseUp();
}
runTest();
</script>