<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/js-test-pre.js"></script>
<title></title>
</head>
<body>
<p>Select multiple options with mouse drag with no. of options less than the size attribute</p>
<p>Also test mouse drag on select element without multiple attribute select only the option under mouse</p>

<select multiple="multiple" size="7" 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>
</select>

<select size="7" id="nonmultiple">
    <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>
</select>

<div id="console"></div>
<script>
if (window.eventSender) {
    debug("Test for select element with multiple attribute");
    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();

    debug("Dragging down");
    eventSender.mouseDown();
    eventSender.mouseMoveTo(x, y + (optionHeight * 3));
    eventSender.mouseUp();
    testOptionSelection(0, 4, "true", "selectId");

    debug("Dragging up");
    eventSender.mouseDown();
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseUp();
    testOptionSelection(0, 4, "true", "selectId");

    debug("Dragging with addSelectionKey")
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.mouseMoveTo(x, y + (optionHeight * 2));
    eventSender.mouseDown(0, ["addSelectionKey"]);
    eventSender.mouseMoveTo(x, y + (optionHeight * 4));
    eventSender.mouseUp(0, ["addSelectionKey"]);
    testOptionSelection(0, 1, "true", "selectId");
    testOptionSelection(2, 5, "true", "selectId");

    debug("Dragging with rangeSelectionKey");
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.mouseMoveTo(x, y + (optionHeight * 2));
    eventSender.mouseDown(0, ["rangeSelectionKey"]);
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseUp(0, ["rangeSelectionKey"]);
    testOptionSelection(0, 4, "true", "selectId");

    debug("Test for select element without multiple attribute");
    var nonMultipleObject = document.getElementById("nonmultiple");
    var optionHeight =  nonMultipleObject.offsetHeight / nonMultipleObject.size;
    x = nonMultipleObject.offsetLeft + nonMultipleObject.offsetWidth / 2;
    y = nonMultipleObject.offsetTop + optionHeight / 2;

    eventSender.dragMode = false;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();

    debug("Dragging down");
    eventSender.mouseDown();
    eventSender.mouseMoveTo(x, y + (optionHeight * 3));
    eventSender.mouseUp();
    testOptionSelection(0, 3, "false", "nonmultiple");
    testOptionSelection(3, 4, "true", "nonmultiple");

    debug("Dragging up");
    eventSender.mouseDown();
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseUp();
    testOptionSelection(0, 1, "true", "nonmultiple");
    testOptionSelection(1, 4, "false", "nonmultiple");

    debug("Dragging with addSelectionKey")
    eventSender.mouseDown();
    eventSender.mouseDown(0, "addSelectionKey");
    eventSender.mouseMoveTo(x, y + (optionHeight * 3));
    eventSender.mouseUp(0, "addSelectionKey");
    testOptionSelection(0, 3, "false", "nonmultiple");
    testOptionSelection(3, 4, "true", "nonmultiple");

    debug("Dragging with rangeSelectionKey");
    eventSender.mouseDown();
    eventSender.mouseDown(0, "rangeSelectionKey");
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseUp(0, "rangeSelectionKey");
    testOptionSelection(0, 1, "true", "nonmultiple");
    testOptionSelection(1, 4, "false", "nonmultiple");

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

function testOptionSelection(start, end, criteria, element) {
    for (var i = start; i < end; i++) {
        shouldBe("document.getElementById(\"" + element + "\").options[" + i + "].selected", criteria);
    }
}

successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>