<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/js-test.js"></script>
</head>
<body onload="runTest()">
    <p id="description"></p>
    <input type=color id="src" value="#ff0000">
    <input type=color id="dest" value="#000000">
    <div id="console"></div>
</body>
<script>
description('This test verifies that the input and change events fire when changing the value of a color input via drag and drop. To test manually, drag the color input on the left onto the color input on the right.');

jsTestIsAsync = true;

var src = document.getElementById('src');
var dest = document.getElementById('dest');

var changeFired = false;
var inputFired = false;

function tryFinishTest() {
    if (!changeFired || !inputFired) {
        return;
    }

    shouldBeEqualToString("src.value", "#ff0000");
    shouldBeEqualToString("dest.value", "#ff0000");
    finishJSTest();
}

function runTest() {
    if (!window.testRunner)
        return;

    dest.addEventListener("change", function(e) {
        changeFired = true;
        tryFinishTest();
    });

    dest.addEventListener("input", function(e) {
        inputFired = true;
        tryFinishTest();
    });

    eventSender.mouseMoveTo(src.offsetLeft + src.offsetWidth / 2, src.offsetTop + src.offsetHeight / 2);
    eventSender.mouseDown();
    eventSender.leapForward(200);
    eventSender.mouseMoveTo(dest.offsetLeft + dest.offsetWidth / 2, dest.offsetTop + dest.offsetHeight / 2);
    eventSender.mouseUp();
    eventSender.leapForward(200);
}
</script>
</html>