<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span, div { display: block; }
span {
  -webkit-user-drag: element;
  -webkit-user-select: none;
  background: green;
  padding: 10px;
}
div {
  background: red;
  padding: 50px;
}
</style>
</head>
<body>
<p>This test ensures we clear the drag state at the end of each drag. To test manually, drag the green box below twice.
You should observe the same list of events in the same order twice.</p>
<div>
  <span>Drag me down twice!</span>
</div>
<pre id="log">
</pre>
<script>

function log(event) {
    document.getElementById('log').textContent += event.target.localName + ':' + this.localName + ':' + event.type + '\n';
}

function setLog(log) {
    var value = document.getElementById('log').textContent;
    document.getElementById('log').textContent = log;
    return value;
}

var div = document.querySelector('div');
div.addEventListener('dragover', function (event) { event.preventDefault(); });
div.addEventListener('dragenter', log);
div.addEventListener('dragleave', log);

var span = document.querySelector('span');
span.addEventListener('dragenter', log);
span.addEventListener('dragleave', log);

function dragSpan() {
    var x = span.offsetLeft + span.offsetWidth / 2;
    eventSender.mouseMoveTo(x, span.offsetTop + span.offsetHeight / 2);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(x, span.offsetTop + 2 * span.offsetHeight / 3);
    eventSender.leapForward(200);
    eventSender.mouseMoveTo(x, span.offsetTop + 3 * span.offsetHeight / 2);
    eventSender.leapForward(200);
    eventSender.mouseUp();
}

if (window.eventSender) {
    testRunner.dumpAsText();
    dragSpan();
    var firstLog = setLog('');
    dragSpan();
    var secondLog = setLog('PASS');
    if (firstLog != secondLog)
        setLog('FAIL:\nFirst drag:\n' + firstLog + '\nSecond drag:\n' + secondLog);
}

</script>
</body>
</html>