/toolkit/content/tests/chrome/test_menulist_keynav.xul

  1<?xml version="1.0"?>
  2<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
  3<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
  4
  5<window title="Menulist Key Navigation Tests"
  6        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7
  8  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>      
  9  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      
 10
 11<button id="button1" label="One"/>
 12<menulist id="list">
 13  <menupopup id="popup" onpopupshowing="return gShowPopup;">
 14    <menuitem id="i1" label="One"/>
 15    <menuitem id="i2" label="Two"/>
 16    <menuitem id="i2b" disabled="true" label="Two and a Half"/>
 17    <menuitem id="i3" label="Three"/>
 18    <menuitem id="i4" label="Four"/>
 19  </menupopup>
 20</menulist>
 21<button id="button2" label="Two"/>
 22
 23<script class="testbody" type="application/javascript">
 24<![CDATA[
 25
 26SimpleTest.waitForExplicitFinish();
 27
 28var gShowPopup = false;
 29var gModifiers = 0;
 30
 31var iswin = (navigator.platform.indexOf("Win") == 0);
 32
 33function runTests()
 34{
 35  var list = $("list");
 36  list.focus();
 37  // on Mac, up and cursor keys open the menu, but on other platforms, the
 38  // cursor keys navigate between items without opening the menu
 39  if (navigator.platform.indexOf("Mac") == -1) {
 40    keyCheck(list, "VK_DOWN", 2, "cursor down");
 41    keyCheck(list, "VK_DOWN", iswin ? "2b" : 3, "cursor down skip disabled");
 42    keyCheck(list, "VK_UP", 2, "cursor up skip disabled");
 43    keyCheck(list, "VK_UP", 1, "cursor up");
 44    keyCheck(list, "VK_UP", 4, "cursor up wrap");
 45    keyCheck(list, "VK_DOWN", 1, "cursor down wrap");
 46  }
 47
 48  // check that attempting to open the menulist does not change the selection
 49  synthesizeKey("VK_DOWN", { altKey: navigator.platform.indexOf("Mac") == -1 });
 50  is(list.selectedItem, $("i1"), "open menulist down selectedItem");
 51  synthesizeKey("VK_UP", { altKey: navigator.platform.indexOf("Mac") == -1 });
 52  is(list.selectedItem, $("i1"), "open menulist up selectedItem");
 53
 54  synthesizeKey("G", { });
 55  is(list.selectedItem, $("i1"), "letter pressed not found selectedItem");
 56
 57  keyCheck(list, "T", 2, "letter pressed");
 58  keyCheck(list, "T", 2, "letter pressed");
 59  setTimeout(pressedAgain, 1200); 
 60}
 61
 62function pressedAgain()
 63{
 64  var list = $("list");
 65  keyCheck(list, "T", iswin ? "2b" : 3, "letter pressed again");
 66  keyCheck(list, "W", 2, "second letter pressed");
 67  setTimeout(differentPressed, 1200); 
 68}
 69
 70function differentPressed()
 71{
 72  var list = $("list");
 73  keyCheck(list, "O", 1, "different letter pressed");
 74
 75  if (navigator.platform.indexOf("Mac") == -1) {
 76    $("button1").focus();
 77    synthesizeKeyExpectEvent("VK_TAB", { }, list, "focus", "focus to menulist");
 78    synthesizeKeyExpectEvent("VK_TAB", { }, $("button2"), "focus", "focus to button");
 79    is(document.activeElement, $("button2"), "tab from menulist focused button");
 80  }
 81
 82  // now make sure that using a key scrolls the menu correctly
 83  gShowPopup = true;
 84
 85  for (let i = 0; i < 65; i++) {
 86    list.appendItem("Item" + i, "item" + i);
 87  }
 88  list.open = true;
 89  is(list.getBoundingClientRect().width, list.firstChild.getBoundingClientRect().width,
 90     "menu and popup width match");
 91  ok(list.getBoundingClientRect().width > list.getItemAtIndex(0).getBoundingClientRect().width + 2,
 92     "menuitem width accounts for scrollbar");
 93  list.open = false;
 94
 95  list.menupopup.maxHeight = 100;
 96  list.open = true;
 97
 98  var rowdiff = list.getItemAtIndex(1).getBoundingClientRect().top -
 99                list.getItemAtIndex(0).getBoundingClientRect().top;
100
101  var item = list.getItemAtIndex(10);
102  var originalPosition = item.getBoundingClientRect().top;
103
104  list.menuBoxObject.activeChild = item;
105  ok(item.getBoundingClientRect().top < originalPosition,
106    "position of item 1: " + item.getBoundingClientRect().top + " -> " + originalPosition);
107
108  originalPosition = item.getBoundingClientRect().top;
109
110  synthesizeKey("VK_DOWN", { });
111  is(item.getBoundingClientRect().top, originalPosition - rowdiff, "position of item 10");
112
113  list.open = false;
114
115  checkEnter();
116}
117
118function keyCheck(list, key, index, testname)
119{
120  var item = $("i" + index);
121  synthesizeKeyExpectEvent(key, { }, item, "command", testname);
122  is(list.selectedItem, item, testname + " selectedItem");
123}
124
125function checkModifiers(event)
126{
127  var expectedModifiers = (gModifiers == 1);
128  is(event.shiftKey, expectedModifiers, "shift key pressed");
129  is(event.ctrlKey, expectedModifiers, "ctrl key pressed");
130  is(event.altKey, expectedModifiers, "alt key pressed");
131  is(event.metaKey, expectedModifiers, "meta key pressed");
132  gModifiers++;
133}
134
135function checkEnter()
136{
137  var list = $("list");
138  list.addEventListener("popuphidden", checkEnterWithModifiers, false);
139  list.addEventListener("command", checkModifiers, false);
140  list.open = true;
141  synthesizeKey("VK_ENTER", { });
142}
143
144function checkEnterWithModifiers()
145{
146  is(gModifiers, 1, "modifiers checked when not set");
147
148  var list = $("list");
149  ok(!list.open, "list closed on enter press");
150  list.removeEventListener("popuphidden", checkEnterWithModifiers, false);
151
152  list.addEventListener("popuphidden", done, false);
153  list.open = true;
154
155  synthesizeKey("VK_ENTER", { shiftKey: true, ctrlKey: true, altKey: true, metaKey: true });
156}
157
158function done()
159{
160  is(gModifiers, 2, "modifiers checked when set");
161
162  var list = $("list");
163  ok(!list.open, "list closed on enter press with modifiers");
164  list.removeEventListener("popuphidden", done, false);
165
166  SimpleTest.finish();
167}
168
169SimpleTest.waitForFocus(runTests);
170
171]]>
172</script>
173
174<body xmlns="http://www.w3.org/1999/xhtml">
175<p id="display">
176</p>
177<div id="content" style="display: none">
178</div>
179<pre id="test">
180</pre>
181</body>
182
183</window>