<head>
<script>
var runPixelTests = true;
var init = function() {
    var callback;
    var fullscreenChanged = function(event)
    {
        if (callback)
            callback(event)
    };
    document.onwebkitfullscreenchange = fullscreenChanged;

    var one = document.getElementById('one');
    var two = document.getElementById('two');
    var three = document.getElementById('three');

    var threeEnteredFullScreen = function(event) {
        if (document.webkitCurrentFullScreenElement == three) {
            callback = threeExitedFullScreen;
            one.removeChild(two);
        }
    };

    var threeExitedFullScreen = function(event) {
        if (document.webkitCurrentFullScreenElement == null) {
            callback = null;
            endTest();
        }
    };

    callback = threeEnteredFullScreen;

    function goFullScreen() {
        document.getElementById('three').webkitRequestFullScreen();
    }
    runWithKeyDown(goFullScreen);
};
</script>
<script src="full-screen-test.js"></script>
<style>
#one {
    border: 4px solid darkgreen;
    background-color: green;
    width: 600px;
    height: 400px;
    padding: 4px;
}

#two {
    border: 4px solid darkred;
    background-color: red;
    padding: 4px;
    height: 384px;
}

#three {
    border: 4px solid darkblue;
    background-color: blue;
    padding: 4px;
    height: 368px;
}
:-webkit-full-screen-ancestor {
    background-color: yellow;
}
</style>
</head>
<body onload="init()">

This tests that, if the ancestor of the current full-screen element is removed, full screen mode will exit, and the document will render normally.  At the completion of the test, a green box should be visible. Click <button onclick="goFullScreen()">go full screen</button> to run the test.

<div id="one">
    <div id="two">
        <div id="three"></div>
    </div>
</div>
</body>