<!DOCTYPE html>
<html>
<head>
    <script src="full-screen-test.js"></script>
    <script>
    var one;
    var two;

    function runTest() {
        one = document.getElementById('one');
        two = document.getElementById('two');

        var callback;
        var fullscreenChanged = function(event) {
            if (callback)
                callback(event)
        };
        waitForEvent(document, 'webkitfullscreenchange', fullscreenChanged);

        var oneEnteredFullscreen = function() {
            testExpected("document.webkitFullscreenElement.id", "one");
            callback = twoEnteredFullscreen;
            if (window.layoutTestController)
                runWithKeyDown(function() { two.webkitRequestFullscreen(); });
        };

        var twoEnteredFullscreen = function() {
            testExpected("document.webkitFullscreenElement.id", "two");
            callback = twoExitedFullscreen;
            if (window.layoutTestController)
                document.webkitExitFullscreen();
        };

        var twoExitedFullscreen = function() { 
            testExpected("document.webkitFullscreenElement.id", "one");
            endTest();
        };

        callback = oneEnteredFullscreen;
        if (window.layoutTestController)
            runWithKeyDown(function() { one.webkitRequestFullscreen(); });
    }
    </script>
</head>
<body onload="runTest()">
    <p>Test for <a href="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#fullscreen-element-stack">W3C Fullscreen element stack</a>.</p>
    <p>To test manually, click the "Go full screen" button - the page should enter full screen mode.</p>
    <div>
        <button onclick="one.webkitRequestFullscreen()">Go full screen (one)</button>
    </div>
    <div id=one>
        <button onclick="two.webkitRequestFullscreen()">Go full screen (two)</button>
        <div id=two>
            <button onclick="document.webkitExitFullscreen()">Exit full screen (two)</button>
        </div>
    </div>
</body>