| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../js/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="../js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
