<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<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 effectAllowedElem;
var dropEffectElem;
var consoleElm;
var event;

window.onload = function()
{
    dragMe = document.getElementById("dragMe");
    dropTarget = document.getElementById("dropTarget");
    effectAllowedElem = document.getElementById("effectAllowed");
    dropEffectElem = document.getElementById("dropEffect");
    consoleElm = document.getElementById("console");
    
    if (!dragMe || !dropTarget || !effectAllowedElem || !dropEffectElem || !consoleElm)
        return;
    
    dropEffectElem.onclick = changeDropZone;
    dragMe.ondragstart = dragStart;
    dropTarget.ondrop = drop;
    
    runTest();
}

function changeDropZone()
{
    dropTarget.setAttribute("webkitdropzone", dropEffectElem.options[dropEffectElem.selectedIndex].value + " string:text/plain");
}

function dragStart(e)
{
    event = e;
    if (effectAllowedElem.options[effectAllowedElem.selectedIndex].value != "undefined")
        e.dataTransfer.effectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
    e.dataTransfer.setData('text/plain', e.target.textContent);
}

function printDropEvent(e)
{
    chosenDropEffect = dropEffectElem.options[dropEffectElem.selectedIndex].value;
    chosenEffectAllowed = effectAllowedElem.options[effectAllowedElem.selectedIndex].value;
    debug("Received drop event for allowedEffect " + chosenEffectAllowed + " and chosenDropEffect " + chosenDropEffect);
}

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;
    
    var numEffectAllowed = effectAllowedElem.options.length;
    var numEffects = dropEffectElem.options.length;
    
    for (var i = 0; i < numEffectAllowed; ++i) {
        effectAllowedElem.options[i].selected = true;
        debug('<br />When effectAllowed == "' + effectAllowedElem.options[i].value + '"<br />');
        for (var j = 0; j < numEffects; ++j) {
            dropEffectElem.options[j].selected = true;
            changeDropZone();
            
            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>
<script src="resources/dropzone.js"></script>
</head>
<body>
<p id="description"></p>
<div id="test-container">
<label for="effectAllowed">effectAllowed</label> <select id="effectAllowed">
<option value="uninitialized">Uninitialized</option>
<option value="undefined">Undefined</option>
<option value="none">None</option>
<option value="all">All</option>
<option value="copy">Copy</option>
<option value="move">Move</option>
<option value="link">Link</option>
<option value="copyMove">CopyMove</option>
<option value="copyLink">CopyLink</option>
<option value="linkMove">LinkMove</option>
<option value="dummy">Nonexistent (Dummy) Effect</option>
</select>
<br/><br/>
<div id="dropTarget">Drop the red square onto me.<br/><br/>
<label for="dropEffect">Expects dropEffect</label> <select id="dropEffect">
<option value="none">None</option>
<option value="copy">Copy</option>
<option value="move">Move</option>
<option value="link">Link</option>
<option value="dummy">Nonexistent (Dummy) Effect</option>
</select>
</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 drag-and-drop support works and conforms to the HTML 5 specification.<br/>" +
    "For each effectAllowed, iterates through the possible dropEffects: none, copy, move, link, dummy.");
</script>
</body>
</html>