<!DOCTYPE html>
<html>
<body>
<style>
#container > div { width: 100px; height: 50px; margin: 0px; }
</style>
<p id="description"></p>
<div id="container">
<div draggable="true" id="source" style="background: #9cf">Drag this</div>
<div id="passover" style="background: #ff9">Drag over here</div>
<div id="destination" style="background: #fc9">And drop here</div>
</div>
<div id="console"></div>
<script src="../../resources/js-test-pre.js"></script>
<script>

var jsTestIsAsync = true;

source.addEventListener("dragstart", (event) => {
    event.dataTransfer.effectAllowed = 'copy';
    event.dataTransfer.setData('text', 'hello, world');
    dataTransferMap.clear();
    testUniquenessAndAdd(event.dataTransfer, 'source', 'dragstart');
});

const dataTransferMap = new Map;
function testUniquenessAndAdd(dataTransfer, label, eventType) {
    const existingEntry = dataTransferMap.get(dataTransfer);
    if (existingEntry) {
        testFailed(`${eventType} for ${label} had the same dataTransfer object as ${existingEntry.eventType} for ${existingEntry.label}`);
        return;
    }
    testPassed(`${eventType} for ${label} had an unique dataTransfer object`);
    dataTransferMap.set(dataTransfer, {label, eventType});
}

passover.addEventListener("dragenter", (event) => {
    testUniquenessAndAdd(event.dataTransfer, 'passover', 'dragenter');
});
passover.addEventListener("dragleave", (event) => {
    testUniquenessAndAdd(event.dataTransfer, 'passover', 'dragleave');
});
destination.addEventListener("dragenter", (event) => {
    testUniquenessAndAdd(event.dataTransfer, 'destination', 'dragenter');
});
destination.addEventListener("dragleave", (event) => {
    testUniquenessAndAdd(event.dataTransfer, 'destination', 'dragleave');
});
destination.addEventListener("dragover", (event) => {
    testUniquenessAndAdd(event.dataTransfer, 'destination', 'dragover');
    event.preventDefault();
});
destination.addEventListener("drop", (event) => {
    testUniquenessAndAdd(event.dataTransfer, 'destination', 'drop');
    finishJSTest();
});

if (window.eventSender) {
    eventSender.mouseMoveTo(source.offsetLeft + 10, source.offsetTop + 10);
    eventSender.mouseDown();
    eventSender.leapForward(500);
    eventSender.mouseMoveTo(passover.offsetLeft + 10, passover.offsetTop + 10);
    eventSender.leapForward(100);
    eventSender.mouseMoveTo(destination.offsetLeft + 10, destination.offsetTop + 10);
    eventSender.mouseUp();
    document.getElementById('container').remove();
}
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>