LayoutTests/fast/events/fire-mousedown-while-pressing-mouse-button.html

   1 <html>
   2 <head>
   3 <script src="../js/resources/js-test-pre.js"></script>
   4 <style>
   5 #square {
   6     display: table-cell;
   7     vertical-align: middle;
   8     background: blue;
   9     width: 128px;
  10     height: 128px;
  11     color: white;
  12     text-align: center;
  13     padding: 10px;
  14     cursor: default;
  15     -webkit-user-drag: none;
  16     -webkit-user-select: none;
  17 }
  18 </style>
  19 <script>
  20 var didFireMousedownForFirstMouseButton;
  21 var didFireMousedownForSecondMouseButton;
  22 var firstMouseButtonElem;
  23 var previouslyChosenFirstMouseButton = 0;
  24 var secondMouseButtonElem;
  25 var square;
  26
  27 // Extracted from the DOM Level 3 Events Mouse Event Types section <http://www.w3.org/TR/DOM-Level-3-Events/#events-MouseEvent-button>.
  28 var LeftMouseButton = 0;
  29 var MiddleMouseButton = 1;
  30 var RightMouseButton = 2;
  31
  32 window.onload = function()
  33 {
  34     firstMouseButtonElem = document.getElementById("firstMouseButton");
  35     secondMouseButtonElem = document.getElementById("secondMouseButton");
  36     firstMouseButtonElem.onchange = function() {
  37             disableIllogicalSecondMouseButtonOptions();
  38             resetTest();
  39     }
  40     secondMouseButtonElem.onchange = resetTest;
  41
  42     square = document.getElementById("square");
  43     square.onmousedown = checkIfDoneOnMouseDown;
  44     square.onmouseup = checkIfDoneOnMouseUp;
  45     square.oncontextmenu = cancelContextMenu;
  46     resetTest();
  47     runTest();
  48 }
  49
  50 function toIEMouseButton(w3cButton)
  51 {
  52     switch (w3cButton) {
  53     case LeftMouseButton:
  54         return 1;
  55     case MiddleMouseButton:
  56         return 4;
  57     case RightMouseButton:
  58         return 2;
  59     }
  60     return; // We shouldn't get here.
  61 }
  62
  63 function shortMouseButtonName(w3cButton)
  64 {
  65     switch (w3cButton) {
  66     case LeftMouseButton:
  67         return "left";
  68     case MiddleMouseButton:
  69         return "middle";
  70     case RightMouseButton:
  71         return "right";
  72     }
  73     return; // We shouldn't get here.
  74 }
  75
  76 function mouseButtonName(w3cButton)
  77 {
  78     return shortMouseButtonName(w3cButton) + " mouse button";
  79 }
  80
  81 function cancelContextMenu(event)
  82 {
  83     event = event || window.event;
  84     if (event.preventDefault)
  85         event.preventDefault();
  86     else {
  87         // Assume this script is executing within Internet Explorer.
  88         event.returnValue = false;
  89     }
  90 }
  91
  92 function checkIfDoneOnMouseDown(event)
  93 {
  94     var pressedButtons; // A bitmask that represents the combination of buttons that are currently being pressed.
  95     if (event && event.buttons)
  96         pressedButtons = event.buttons; // DOM Level 3 Events (Working Draft 07 September 2010).
  97     else if (event) {
  98         // For browsers than don't support event.buttons (or IE's window.event.button) we convert event.button to
  99         // the corresponding bitmask to simplify the logic below.
 100         pressedButtons = toIEMouseButton(event.button);
 101     } else {
 102         // Assume this script is running within Internet Explorer.
 103         pressedButtons = window.event.button;
 104     }
 105
 106     var chosenFirstMouseButton = firstMouseButtonElem.selectedIndex;
 107     var chosenSecondMouseButton = secondMouseButtonElem.selectedIndex;
 108     if (!didFireMousedownForFirstMouseButton && (pressedButtons & toIEMouseButton(chosenFirstMouseButton)) == toIEMouseButton(chosenFirstMouseButton)) {
 109         didFireMousedownForFirstMouseButton = true;
 110         square.innerHTML = "Now, " + shortMouseButtonName(chosenSecondMouseButton) + " click";
 111     } else if (didFireMousedownForFirstMouseButton && (pressedButtons & toIEMouseButton(chosenSecondMouseButton)) == toIEMouseButton(chosenSecondMouseButton))
 112         didFireMousedownForSecondMouseButton = true;
 113     if (didFireMousedownForFirstMouseButton && didFireMousedownForSecondMouseButton) {
 114         testPassed("received mousedown for the " + mouseButtonName(chosenSecondMouseButton) + " while pressing the " + mouseButtonName(chosenFirstMouseButton) + ".");
 115         resetTest();
 116     }
 117 }
 118
 119 function checkIfDoneOnMouseUp()
 120 {
 121     if (didFireMousedownForFirstMouseButton && !didFireMousedownForSecondMouseButton) {
 122         // Without loss of generality, either the mousedown for the right button button wasn't
 123         // dispatched or the user didn't press the right mouse button while pressing left mouse button.
 124         var chosenFirstMouseButton = firstMouseButtonElem.selectedIndex;
 125         var chosenSecondMouseButton = secondMouseButtonElem.selectedIndex;
 126         testFailed("didn't receive mousedown for the " + mouseButtonName(chosenSecondMouseButton) + " while pressing the " + mouseButtonName(chosenFirstMouseButton) + ".");
 127         resetTest();
 128     }
 129 }
 130
 131 function resetTest()
 132 {
 133     didFireMousedownForFirstMouseButton = false;
 134     didFireMousedownForSecondMouseButton = false;
 135     square.innerHTML = "Press and hold the " + mouseButtonName(firstMouseButtonElem.selectedIndex) + " on me";
 136 }
 137
 138 function disableIllogicalSecondMouseButtonOptions()
 139 {
 140     secondMouseButtonElem.options[previouslyChosenFirstMouseButton].disabled = false;
 141     if (firstMouseButtonElem.selectedIndex === secondMouseButtonElem.selectedIndex)
 142         secondMouseButtonElem.options[(secondMouseButtonElem.selectedIndex + 1) % secondMouseButtonElem.length].selected = true;
 143     secondMouseButtonElem.options[firstMouseButtonElem.selectedIndex].disabled = true;
 144     previouslyChosenFirstMouseButton = firstMouseButtonElem.selectedIndex;
 145 }
 146
 147 function runTest()
 148 {
 149     if (!window.eventSender)
 150         return;
 151
 152     var numFirstMouseButtonOptions = firstMouseButtonElem.options.length;
 153     var numSecondMouseButtonOptions = secondMouseButtonElem.options.length;
 154     eventSender.mouseMoveTo(square.offsetLeft + 10, square.offsetTop + 10);
 155     var firstMouseButton = 0;
 156     var secondMouseButton = 0;
 157     while (firstMouseButton < numFirstMouseButtonOptions) {
 158         if (firstMouseButton === secondMouseButton)
 159             ++secondMouseButton;
 160         if (secondMouseButton >= numSecondMouseButtonOptions) {
 161             ++firstMouseButton;
 162             secondMouseButton = 0;
 163         }
 164         if (firstMouseButton >= numFirstMouseButtonOptions)
 165             break;
 166
 167         firstMouseButtonElem.options[firstMouseButton].selected = true;
 168         secondMouseButtonElem.options[secondMouseButton].selected = true;
 169         if (secondMouseButton % numSecondMouseButtonOptions === 0)
 170             debug('<br />When pressing and holding the "' + mouseButtonName(firstMouseButton) + '"<br />');
 171         eventSender.mouseDown(firstMouseButton);
 172         eventSender.leapForward(100);
 173         eventSender.mouseDown(secondMouseButton);
 174         eventSender.mouseUp(secondMouseButton);
 175         eventSender.mouseUp(firstMouseButton);
 176         eventSender.leapForward(100);
 177         ++secondMouseButton;
 178         resetTest(); // We reset the test here in case neither a mousedown nor mouseup event was fired.
 179     }
 180     document.body.removeChild(document.getElementById("test-container"));
 181     debug('<br /><span class="pass">TEST COMPLETE</span>');
 182 }
 183 </script>
 184 </head>
 185 <body>
 186 <p id="description"></p>
 187 <div id="test-container">
 188     <p>Note: Ensure mouse gestures are disabled when running this test in Opera. In Opera 11.10 you can disable gestures by selecting Opera > Preferences > Advanced > Shortcuts. Then uncheck Enable mouse gestures. Also, to test &quot;pressing-and-holding the right mouse button then clicking the left mouse&quot; (*) ensure that Enable Mouse Flips is disabled. To disable it open <a href="opera:config" target="_blank">opera:config</a> then search for &quot;Enable Mouse Flips&quot; and uncheck it. As of 04/15/2011, for some reason (*) neither <span class="pass">PASS</span>es nor <span class="fail">FAIL</span>s.</p>
 189     <!-- The <option>s in these <select>s are explicitly ordered to match the DOM Level 3 Events mouse button values for Left, Middle, and Right mouse buttons. -->
 190     <label for="firstMouseButton">Will press and hold</label> <select id="firstMouseButton">
 191         <option>Left mouse button</option>
 192         <option>Middle mouse button</option>
 193         <option>Right mouse button</option>
 194     </select>
 195     <span>on blue square then</span>
 196     <label for="secondMouseButton">click</label> <select id="secondMouseButton">
 197         <option disabled>Left mouse button</option>
 198         <option selected>Middle mouse button</option>
 199         <option>Right mouse button</option>
 200     </select>
 201     <br/><br/>
 202     <div id="square"></div>
 203 </div>
 204 <hr/>
 205 <div id="console"></div>
 206 <script>
 207     description("This test verifies that we fire a mousedown event whenever pressing and holding a mouse button A while simultaneously " +
 208                 "clicking with mouse button B, where A != B.<br/>" +
 209                 "For each mouse button that is pressed and held, iterates through the possible second mouse buttons that can be clicked.");
 210 </script>
 211 </body>
 212 </html>