<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<style type="text/css">
.box:hover {background-color: rgb(0, 255, 255);}
.box:active {background-color: rgb(0, 0, 255);}
.box:active:hover {background-color: rgb(255, 255, 0);}

.box{border:2px solid #aaa; width:100px; height:100px; background-color: rgb(0, 0, 0);}
</style>

<body>
<div class="box" draggable="true" id="upbox"></div>
<div class="box" id="downbox"></div>

<script type="text/javascript">
var upbox = document.getElementById("upbox");
var downbox = document.getElementById("downbox");
var targetRect = upbox.getBoundingClientRect();
var offset = 20;
var x1 = targetRect.left + offset;
var y1 = targetRect.top + offset;
targetRect = downbox.getBoundingClientRect();
var x2 = targetRect.left + offset;
var y2 = targetRect.top + offset;


function mouseDownHandler(event) {
    testHover.step(function () {
        assert_equals(event.target.id, "upbox");
        assert_equals(getComputedStyle(event.target).backgroundColor, "rgb(255, 255, 0)");
    });
}

function mouseDragHandler(event) {
    testHover.step(function () {
        assert_equals(getComputedStyle(downbox).backgroundColor, "rgb(0, 0, 0)");
        assert_equals(getComputedStyle(event.target).backgroundColor, "rgb(255, 255, 0)");
    });
}

function mouseDragEndHandler(event) {
    testHover.step(function () {
        assert_equals(getComputedStyle(downbox).backgroundColor, "rgb(0, 255, 255)");
        assert_equals(getComputedStyle(upbox).backgroundColor, "rgb(0, 0, 0)");
    });
    testHover.done();
}

function testHoverMouseDrag() {
    if (window.eventSender) {
        eventSender.mouseMoveTo(x1, y1);
        eventSender.mouseDown();
        eventSender.leapForward(100);
        eventSender.mouseMoveTo(x1, y1+10);
        eventSender.mouseMoveTo(x1, y1+20);
        eventSender.mouseMoveTo(x2, y2);
        eventSender.mouseUp();
    }
}

var testHover = async_test('Tests that we do not update the hover states of any element when we are dragging an element around.');
upbox.addEventListener('drag', mouseDragHandler);
upbox.addEventListener('dragend', mouseDragEndHandler);
upbox.addEventListener('mousedown', mouseDownHandler);
testHoverMouseDrag();

</script>
</body>