enter-exit-full-screen-hover.html | Explore in Territory

<!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="../resources/run-after-layout-and-paint.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()">Enter fullscreen</button>
<button id="exit" class='touch-interactive' onclick="document.webkitCancelFullScreen()">Exit fullscreen</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);

    // After entering fullscreen + layout, the button should lose hover.
    waitForEventOnce(document, 'webkitfullscreenchange', function() {
        shouldBeTrue("document.webkitIsFullScreen");
        runAfterLayoutAndPaint(function() {
            shouldBeDefault("getHoverActiveState(enterButton)");

            // After exiting fullscreen + layout, the button should lose hover.
            waitForEventOnce(document, 'webkitfullscreenchange', function() {
                shouldBeFalse("document.webkitIsFullScreen");
                runAfterLayoutAndPaint(function() {
                    shouldBeDefault("getHoverActiveState(exitButton)");
                    endTest();
                });
            });

            var exitButtonCenter = elementCenter(exitButton);
            // Hover and click the "Exit fullscreen" button.
            eventSender.mouseMoveTo(exitButtonCenter.x, exitButtonCenter.y);
            eventSender.mouseDown();
            eventSender.mouseUp();
            shouldBeOnlyHovered("getHoverActiveState(exitButton)");
        });
    });

    // Hover and click the "Enter fullscreen" button.
    // 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();
    shouldBeOnlyHovered("getHoverActiveState(enterButton)");
}

window.onload = () => runTest();
</script>
chromium/third_party/blink/web_tests/fullscreen/enter-exit-full-screen-hover.html
