blob: 639c0289614ff162435e397585814cbcde97e489 [file] [log] [blame]
<!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>