<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test-pre.js"></script>
<script>
window.jsTestIsAsync = true;

function test() {
    if (window.eventSender) {
        var selectObject = document.getElementById("selectId");

        var optionHeight =  selectObject.offsetHeight / selectObject.size;
        var x = selectObject.offsetLeft + selectObject.offsetWidth / 2;
        var y = selectObject.offsetTop + optionHeight / 2;

        eventSender.dragMode = false;
        eventSender.mouseMoveTo(x, y);
        eventSender.mouseDown();
        eventSender.mouseMoveTo(x, y + (optionHeight * 3));

        setTimeout(testSelection, 100);
    } else {
        debug("Test manually if options are getting selected by dragging on the select element.");
    }
}

function testSelection()
{
    eventSender.mouseUp();

    for (var i = 0; i < 4; i++) {
        shouldBeTrue("document.getElementById(\"selectId\").options[" + i + "].selected");
    }

    finishJSTest();
}
successfullyParsed = true;
</script>
<title></title>
</head>
<body onload="test()">
<p>Select multiple option with mouse drag</p>

<select multiple="multiple" size="4" id="selectId">
    <option value="P1">P1</option>
    <option value="P2">P2</option>
    <option value="P3">P3</option>
    <option value="P4">P4</option>
    <option value="P5">P5</option>
    <option value="P6">P6</option>
    <option value="P7">P7</option>
</select>

<div id="console"></div>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>