<!DOCTYPE html>
<style>
body {
    margin: 0px;
}
.percent100 {
    width: 100%;
    height: 100%;
}
</style>
<script src="full-screen-test.js"></script>
<script src=../media/media-file.js></script>

<div style="display: flex; flex-direction: column;">
    <div style="position: absolute; background: green;">
        <video id="video" class="percent100" controls></video>
    </div>
</div>

<script>
// Bail out early if the full screen API is not enabled or is missing:
if (Element.prototype.webkitRequestFullScreen == undefined) {
    logResult(false, "Element.prototype.webkitRequestFullScreen == undefined");
    endTest();
} else {
    var video = document.getElementById('video');
    video.addEventListener("loadeddata", function(ev) {
        waitForEventOnce(document, 'webkitfullscreenchange', function() {
            // First check that the video went fullscreen.
            test("video.clientWidth == document.body.clientWidth");
            waitForEventOnce(document, 'webkitfullscreenchange', function() {
                // Then check that the original video size is properly restored.
                testExpected(video.clientWidth, 320);
                testExpected(video.clientHeight, 240);
                endTest();
            });
            document.webkitCancelFullScreen();
        });

        runWithKeyDown(function() {
            video.webkitRequestFullScreen();
        });
    });
    setSrcById("video", findMediaFile("video", "../media/content/test"));
}
</script>