<body>
    <p>This tests that the video element's controls are draggable in full screen.  Press any key to continue.</p>
    <video id="video" width="300"></video>
    <script src="full-screen-test.js"></script>
    <script src="../media/media-controls.js"></script>
    <script>
        var video = document.getElementById('video');
        var panel;
        var startBox;
        var endBox;

        waitForEvent(document, 'webkitfullscreenchange', function() {
            if (window.internals) {

                // Force a relayout to ensure that the controls in the shadow DOM have been 
                // positioned correctly.
                document.body.offsetTop;

                panel = mediaControlsElement(internals.shadowRoot(video).firstChild, '-webkit-media-controls-panel');
                startBox = internals.boundingBox(panel);

                consoleWrite("First drag.");

                eventSender.mouseMoveTo(startBox.left + 5, startBox.top + 5);
                eventSender.mouseDown();

                eventSender.mouseMoveTo(startBox.left + 20, startBox.top + 20);
                eventSender.mouseUp();

                endBox = internals.boundingBox(panel);

                testExpected("endBox.left - startBox.left", 15);
                testExpected("endBox.top - startBox.top", 15);

                consoleWrite("Second drag.");

                eventSender.mouseDown();
                eventSender.mouseMoveTo(startBox.left + 10, startBox.top + 10);
                eventSender.mouseUp();

                endBox = internals.boundingBox(panel);

                testExpected("endBox.left - startBox.left", 5);
                testExpected("endBox.top - startBox.top", 5);

                endTest();
            }
            else
                logResult(false, "window.internals == undefined");
        });

        runWithKeyDown(function(){video.webkitRequestFullScreen()});
    </script>
</body>