<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
    #dropTarget, #dragMe { text-align: center; display: table-cell; vertical-align: middle }
    #dropTarget {width: 256px; height: 256px; border: 1px dashed}
    #dragMe {-webkit-user-drag: element; -webkit-user-select: none; background: #ff0000; width: 64px; height: 64px; color: white}
</style>
<script>
    var dragMe;
    var dropTarget;
    var consoleElm;
    var event;

    window.onload = function()
    {
        dragMe = document.getElementById("dragMe");
        dropTarget = document.getElementById("dropTarget");
        consoleElm = document.getElementById("console");

        if (!dragMe || !dropTarget || !consoleElm)
            return;

        dropTarget.ondragover = dragOver;
        dropTarget.ondrop = drop;

        runTest();
    }

    function drop(event)
    {
        testPassed("TEST PASSED: square dropped");
        event.preventDefault();
        dragMe.parentNode.removeChild(dragMe);
        event.target.appendChild(dragMe);
    }

    function dragOver(event)
    {
        event.preventDefault();
    }

    function runTest()
    {
        if (!window.eventSender)
            return;

        if (window.testRunner)
            testRunner.dumpAsText();

        var startX = dragMe.offsetLeft + 10;
        var startY = dragMe.offsetTop + dragMe.offsetHeight / 2;
        var endX = dropTarget.offsetLeft + 10;
        var endY = dropTarget.offsetTop + dropTarget.offsetHeight / 2;

        eventSender.mouseMoveTo(startX, startY);
        eventSender.mouseDown();
        eventSender.leapForward(1000);
        eventSender.mouseMoveTo(endX, endY);
        eventSender.mouseUp();

        var testContainer = document.getElementById("test-container");
        if (testContainer)
            document.body.removeChild(testContainer);
        debug('<br /><span class="pass">TEST COMPLETE</span>');
    }
</script>
</head>
<body>
    <p id="description"></p>
    <div id="test-container">
        <div id="dropTarget">Drop the red square onto me.</div>
        <hr/>
        <p>Items that can be dragged to the drop target:</p>
        <div id="dragMe" draggable="true">Square</div>
        <hr/>
    </div>
    <div id="console"></div>
    <script>
        description("This test checks that we drag a draggable element without setting data to transfer");
    </script>
</body>
</html>