third_party/WebKit/LayoutTests/fast/forms/select-multiple-elements-with-mouse-drag-with-options-less-than-size.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../resources/js-test.js"></script>
   6 <title></title>
   7 </head>
   8 <body>
   9 <p>Select multiple options with mouse drag with no. of options less than the size attribute</p>
  10 <p>Also test mouse drag on select element without multiple attribute select only the option under mouse</p>
  11
  12 <select multiple="multiple" size="7" id="selectId">
  13     <option value="P1">P1</option>
  14     <option value="P2">P2</option>
  15     <option value="P3">P3</option>
  16     <option value="P4">P4</option>
  17     <option value="P5">P5</option>
  18 </select>
  19
  20 <select size="7" id="nonmultiple">
  21     <option value="P1">P1</option>
  22     <option value="P2">P2</option>
  23     <option value="P3">P3</option>
  24     <option value="P4">P4</option>
  25     <option value="P5">P5</option>
  26 </select>
  27
  28 <div id="console"></div>
  29 <script>
  30 if (window.eventSender) {
  31     debug("Test for select element with multiple attribute");
  32     var selectObject = document.getElementById("selectId");
  33
  34     var optionHeight =  selectObject.offsetHeight / selectObject.size;
  35     var x = selectObject.offsetLeft + selectObject.offsetWidth / 2;
  36     var y = selectObject.offsetTop + optionHeight / 2;
  37
  38     eventSender.dragMode = false;
  39     eventSender.mouseMoveTo(x, y);
  40     eventSender.mouseDown();
  41
  42     debug("Dragging down");
  43     eventSender.mouseDown();
  44     eventSender.mouseMoveTo(x, y + (optionHeight * 3));
  45     eventSender.mouseUp();
  46     testOptionSelection(0, 4, "true", "selectId");
  47
  48     debug("Dragging up");
  49     eventSender.mouseDown();
  50     eventSender.mouseMoveTo(x, y);
  51     eventSender.mouseUp();
  52     testOptionSelection(0, 4, "true", "selectId");
  53
  54     debug("Dragging with addSelectionKey")
  55     eventSender.mouseDown();
  56     eventSender.mouseUp();
  57     eventSender.mouseMoveTo(x, y + (optionHeight * 2));
  58     eventSender.mouseDown(0, ["addSelectionKey"]);
  59     eventSender.mouseMoveTo(x, y + (optionHeight * 4));
  60     eventSender.mouseUp(0, ["addSelectionKey"]);
  61     testOptionSelection(0, 1, "true", "selectId");
  62     testOptionSelection(2, 5, "true", "selectId");
  63
  64     debug("Dragging with rangeSelectionKey");
  65     eventSender.mouseDown();
  66     eventSender.mouseUp();
  67     eventSender.mouseMoveTo(x, y + (optionHeight * 2));
  68     eventSender.mouseDown(0, ["rangeSelectionKey"]);
  69     eventSender.mouseMoveTo(x, y);
  70     eventSender.mouseUp(0, ["rangeSelectionKey"]);
  71     testOptionSelection(0, 4, "true", "selectId");
  72
  73     debug("Test for select element without multiple attribute");
  74     var nonMultipleObject = document.getElementById("nonmultiple");
  75     var optionHeight =  nonMultipleObject.offsetHeight / nonMultipleObject.size;
  76     x = nonMultipleObject.offsetLeft + nonMultipleObject.offsetWidth / 2;
  77     y = nonMultipleObject.offsetTop + optionHeight / 2;
  78
  79     eventSender.dragMode = false;
  80     eventSender.mouseMoveTo(x, y);
  81     eventSender.mouseDown();
  82
  83     debug("Dragging down");
  84     eventSender.mouseDown();
  85     eventSender.mouseMoveTo(x, y + (optionHeight * 3));
  86     eventSender.mouseUp();
  87     testOptionSelection(0, 3, "false", "nonmultiple");
  88     testOptionSelection(3, 4, "true", "nonmultiple");
  89
  90     debug("Dragging up");
  91     eventSender.mouseDown();
  92     eventSender.mouseMoveTo(x, y);
  93     eventSender.mouseUp();
  94     testOptionSelection(0, 1, "true", "nonmultiple");
  95     testOptionSelection(1, 4, "false", "nonmultiple");
  96
  97     debug("Dragging with addSelectionKey")
  98     eventSender.mouseDown();
  99     eventSender.mouseDown(0, "addSelectionKey");
 100     eventSender.mouseMoveTo(x, y + (optionHeight * 3));
 101     eventSender.mouseUp(0, "addSelectionKey");
 102     testOptionSelection(0, 3, "false", "nonmultiple");
 103     testOptionSelection(3, 4, "true", "nonmultiple");
 104
 105     debug("Dragging with rangeSelectionKey");
 106     eventSender.mouseDown();
 107     eventSender.mouseDown(0, "rangeSelectionKey");
 108     eventSender.mouseMoveTo(x, y);
 109     eventSender.mouseUp(0, "rangeSelectionKey");
 110     testOptionSelection(0, 1, "true", "nonmultiple");
 111     testOptionSelection(1, 4, "false", "nonmultiple");
 112
 113 } else {
 114     debug("Test manually if options are getting selected by dragging on the select element.");
 115 }
 116
 117 function testOptionSelection(start, end, criteria, element) {
 118     for (var i = start; i < end; i++) {
 119         shouldBe("document.getElementById(\"" + element + "\").options[" + i + "].selected", criteria);
 120     }
 121 }
 122
 123 successfullyParsed = true;
 124 </script>
 125 </body>
 126 </html>