<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;
    
    var FORMAT_TYPE = 'text/plain';
    var ALLOWED_EFFECT = 'copy';
    var DROP_EFFECT = 'copy';
    
    window.onload = function()
    {
        dragMe = document.getElementById("dragMe");
        dropTarget = document.getElementById("dropTarget");
        consoleElm = document.getElementById("console");
        
        if (!dragMe || !dropTarget || !consoleElm)
            return;
        
        dragMe.ondragstart = dragStart;
        dragMe.ondragend = dragEnd;
        
        dropTarget.ondragenter = dragEntered;
        dropTarget.ondragover = dragOver;
        dropTarget.ondrop = drop;
        
        runTest();
    }
    
    function dragStart(e)
    {
        event = e;
        e.dataTransfer.effectAllowed = ALLOWED_EFFECT;
        e.dataTransfer.setData(FORMAT_TYPE, e.target.textContent);
    }
    
    function dragEnd(e)
    {
        return;
    }
    
    function dragEntered(e)
    {
        dragEnteredAndUpdated(e);
    }
    
    function dragOver(e)
    {
        dragEnteredAndUpdated(e);
    }
    
    function dragEnteredAndUpdated(e)
    {
        event = e;
        e.dataTransfer.dropEffect = DROP_EFFECT;
        cancelDrag(e);
    }
    
    function drop(e)
    {
        checkFormatType(e);
        cancelDrag(e);
    }
    
    function cancelDrag(e)
    {
        if (e.preventDefault)
            e.preventDefault();
        else {
            // Assume this script is executing within Internet Explorer
            e.returnValue = false;
        }
    }
    
    function checkFormatType(e)
    {
        event = e;
        var formatTypes = e.dataTransfer.types; // This line causes the crash.
        if (event.dataTransfer.types.indexOf(FORMAT_TYPE) == -1)
            testFailed('event.dataTransfer.types should contain format "' + FORMAT_TYPE + '", but it does not.');
        else
            testPassed('event.dataTransfer.types contains format "' + FORMAT_TYPE + '"');

        if (event.dataTransfer.getData(FORMAT_TYPE) != 'Square')
            testFailed('event.dataTransfer.getData("' + FORMAT_TYPE + '") should contain "Square", but it does not.');
        else
            testPassed('event.dataTransfer.getData("' + FORMAT_TYPE + '") contains "Square"');
    }

    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(100);
        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 on a successful drop we can access <code>event.dataTransfer.types</code> without crashing.");
    </script>
</body>
</html>