<!DOCTYPE html>
<style>
#drag {
  color: blue;
}
#drag:hover {
  color: green;
}
#drag:active {
  color: red;
}
</style>
<script src="../../resources/js-test.js"></script>
<script>
function verify(expectedColor)
{
    shouldBeEqualToString('window.getComputedStyle(document.getElementById("drag")).color', expectedColor);
}

function runTest()
{
    if (!window.eventSender)
        return false;

    verify('rgb(0, 0, 255)');
    var draggedElement = document.getElementById('drag');
    var x = draggedElement.offsetLeft + draggedElement.offsetWidth / 2;
    var y = draggedElement.offsetTop + draggedElement.offsetHeight / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.leapForward(200);
    eventSender.mouseMoveTo(x, y + 200);
    verify('rgb(255, 0, 0)');
    eventSender.mouseUp();

    eventSender.mouseMoveTo(x, y);
    verify('rgb(0, 128, 0)');
}
</script>
<body onload="runTest()">
<p>Test that mouse state is correctly reset after a drag. To run this test, use a mouse to drag the link "Drag me" around. It should change from blue to red while being dragged, and red to green once the drag ends by releasing the mouse button.</p>
<div draggable="true" id="drag" href="#">Drag me</div>
<div id="console"></div>
</body>