<!DOCTYPE html>
<html>
<head>
<style>
#drag {
    border: 1px solid black;
    height: 200px;
    width: 200px;
}
#drop {
    border: 1px solid black;
    height: 200px;
    width: 200px;
}
</style>
<script>
function assertEq(left, right)
{
    if (left === right)
        log('PASS: ' + left + " === " + right);
    else
        log('FAIL: ' + left + "(of type " + (typeof left) + ") !== " + right + "(of type " + (typeof right) + ")");
}
function log(str)
{
    var result = document.getElementById('result');
    result.appendChild(document.createTextNode(str));
    result.appendChild(document.createElement('br'));
}

function legacyDragStart(dataTransfer)
{
    dataTransfer.setData('text', 'sample');
    dataTransfer.setData('url', 'http://www.google.com/');
    dataTransfer.setData('text/html', '<em>Markup</em>');
    dataTransfer.setData('custom-data', 'hello world');
}

function itemListDragStart(dataTransfer)
{
    dataTransfer.items.add('sample', 'text/plain');
    dataTransfer.items.add('http://www.google.com/', 'text/uri-list');
    dataTransfer.items.add('<em>Markup</em>', 'text/html');
    dataTransfer.items.add('hello world', 'custom-data');
}

function dragstart(event)
{
    var dragMethod = document.getElementById('dragMethod');
    if (dragMethod.selectedIndex == 0)
        legacyDragStart(event.dataTransfer);
    else if (dragMethod.selectedIndex == 1)
        itemListDragStart(event.dataTransfer);
}

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

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

function legacyDrop(dataTransfer)
{
    assertEq(4, dataTransfer.types.length);
    if (dataTransfer.types.indexOf('text/plain') < 0)
        log('FAIL: types array did not contain "text"');
    if (dataTransfer.types.indexOf('text/uri-list') < 0)
        log('FAIL: types array did not contain "text/uri-list"');
    if (dataTransfer.types.indexOf('text/html') < 0)
        log('FAIL: types array did not contain "text/html"');
    if (dataTransfer.types.indexOf('custom-data') < 0)
        log('FAIL: types array did not contain "custom-data"');
    assertEq('sample', dataTransfer.getData('text'));
    assertEq('http://www.google.com/', dataTransfer.getData('url'));
    assertEq('<em>Markup</em>', dataTransfer.getData('text/html'));
    assertEq('hello world', dataTransfer.getData('custom-data'));
    runNext();
}

var outstandingRequests;
function itemListDrop(dataTransfer)
{
    outstandingRequests = 0;
    assertEq(4, dataTransfer.items.length);
    var types = [];
    for (var i = 0; i < dataTransfer.items.length; ++i) {
        types.push({kind: dataTransfer.items[i].kind, type: dataTransfer.items[i].type});
    }
    types.sort(function (a, b) { return a.type.localeCompare(b.type); });
    var expectedTypes = [
        { kind: 'string', type: 'custom-data'},
        { kind: 'string', type: 'text/html'},
        { kind: 'string', type: 'text/plain'},
        { kind: 'string', type: 'text/uri-list'},
    ];
    assertEq(JSON.stringify(expectedTypes), JSON.stringify(types));
    var expectedResults = {
        'custom-data': 'hello world',
        'text/html': '<em>Markup</em>',
        'text/plain': 'sample',
        'text/uri-list': 'http://www.google.com/',
    }
    function makeClosure(expectedData)
    {
        ++outstandingRequests;
        return function (data) {
            assertEq(expectedData, data);
            if (--outstandingRequests == 0)
                window.setTimeout(runNext, 0);
        }
    }
    // We use this funky loop to make sure we always print out results in the same order.
    for (var i = 0; i < types.length; ++i) {
        for (var j = 0; j < dataTransfer.items.length; ++j) {
            if (types[i].type == dataTransfer.items[j].type) {
                dataTransfer.items[j].getAsString(makeClosure(expectedResults[types[i].type]));
                break;
            }
        }
    }
}

function drop(event)
{
    var dropMethod = document.getElementById('dropMethod');
    if (dropMethod.selectedIndex == 0)
        legacyDrop(event.dataTransfer);
    else if (dropMethod.selectedIndex == 1)
        itemListDrop(event.dataTransfer);
    event.preventDefault();
}

function runTest(dragMethodIndex, dropMethodIndex)
{
    var dragMethod = document.getElementById('dragMethod');
    var dropMethod = document.getElementById('dropMethod');
    dragMethod.selectedIndex = dragMethodIndex;
    dropMethod.selectedIndex = dropMethodIndex;
    log('Running test with ' + dragMethod.value + ' drag handler and ' + dropMethod.value + ' drop handler');

    var dragElement = document.getElementById('drag');
    eventSender.mouseMoveTo(dragElement.offsetLeft + dragElement.offsetWidth / 2,
                            dragElement.offsetTop + dragElement.offsetHeight / 2);
    eventSender.mouseDown();
    eventSender.leapForward(100);
    var dropElement = document.getElementById('drop');
    eventSender.mouseMoveTo(dropElement.offsetLeft + dropElement.offsetWidth / 2,
                            dropElement.offsetTop + dropElement.offsetHeight / 2);
    eventSender.mouseUp();
}

var testCases = [
    [0, 0],
    [0, 1],
    [1, 0],
    [1, 1],
];
function runNext()
{
    if (!window.testRunner)
        return;
    var testCase = testCases.shift();
    if (testCase)
        runTest.apply(null, testCase);
    else
        testRunner.notifyDone();
}

window.onload = function()
{
    if (!window.testRunner)
        return;
    testRunner.dumpAsText();
    testRunner.waitUntilDone();

    runNext();
}
</script>
</head>
<body>
<p>To manually test, drag 'Drag Me' to 'Drop Here' and drop.  Several lines that say 'PASS' should appear below.
<div draggable="true" id="drag" ondragstart="dragstart(event)">Drag Me</div>
<div id="drop" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">Drop Here</div>
</div>
<div>Drag handler: <select id="dragMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
<div>Drop handler: <select id="dropMethod"><option>Legacy</option><option>DataTransferItemList</option></select></div>
<div id="result"></div>
</body>
</html>