1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/content/tests/chrome/test_menulist.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,254 @@
1.4 +<?xml version="1.0"?>
1.5 +<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
1.6 +<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
1.7 +
1.8 +<window title="Menulist Tests"
1.9 + onload="setTimeout(testtag_menulists, 0);"
1.10 + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
1.11 +
1.12 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
1.14 + <script type="application/javascript" src="xul_selectcontrol.js"></script>
1.15 +
1.16 +<vbox id="scroller" style="overflow: auto" height="60">
1.17 + <menulist id="menulist" onpopupshown="test_menulist_open(this, this.parentNode)"
1.18 + onpopuphidden="$('menulist-in-listbox').open = true;">
1.19 + <menupopup id="menulist-popup"/>
1.20 + </menulist>
1.21 + <button label="Two"/>
1.22 + <button label="Three"/>
1.23 +</vbox>
1.24 +<listbox id="scroller-in-listbox" style="overflow: auto" height="60">
1.25 + <listitem allowevents="true">
1.26 + <menulist id="menulist-in-listbox" onpopupshown="test_menulist_open(this, this.parentNode.parentNode)"
1.27 + onpopuphidden="SimpleTest.executeSoon(checkScrollAndFinish)">
1.28 + <menupopup id="menulist-in-listbox-popup">
1.29 + <menuitem label="One" value="one"/>
1.30 + <menuitem label="Two" value="two"/>
1.31 + </menupopup>
1.32 + </menulist>
1.33 + </listitem>
1.34 + <listitem label="Two"/>
1.35 + <listitem label="Three"/>
1.36 + <listitem label="Four"/>
1.37 + <listitem label="Five"/>
1.38 + <listitem label="Six"/>
1.39 +</listbox>
1.40 +
1.41 +<hbox>
1.42 + <menulist id="menulist-size">
1.43 + <menupopup>
1.44 + <menuitem label="Menuitem Label" width="200"/>
1.45 + </menupopup>
1.46 + </menulist>
1.47 +</hbox>
1.48 +
1.49 +<menulist id="menulist-editable" editable="true">
1.50 + <menupopup id="menulist-popup-editable"/>
1.51 +</menulist>
1.52 +
1.53 +<menulist id="menulist-initwithvalue" value="two">
1.54 + <menupopup>
1.55 + <menuitem label="One" value="one"/>
1.56 + <menuitem label="Two" value="two"/>
1.57 + <menuitem label="Three" value="three"/>
1.58 + </menupopup>
1.59 +</menulist>
1.60 +<menulist id="menulist-initwithselected" value="two">
1.61 + <menupopup>
1.62 + <menuitem label="One" value="one"/>
1.63 + <menuitem label="Two" value="two"/>
1.64 + <menuitem label="Three" value="three" selected="true"/>
1.65 + </menupopup>
1.66 +</menulist>
1.67 +<menulist id="menulist-editable-initwithvalue" editable="true" value="Two">
1.68 + <menupopup>
1.69 + <menuitem label="One" value="one"/>
1.70 + <menuitem label="Two" value="two"/>
1.71 + <menuitem label="Three" value="three"/>
1.72 + </menupopup>
1.73 +</menulist>
1.74 +<menulist id="menulist-editable-initwithselected" editable="true" value="two">
1.75 + <menupopup>
1.76 + <menuitem label="One" value="one"/>
1.77 + <menuitem label="Two" value="two"/>
1.78 + <menuitem label="Three" value="three" selected="true"/>
1.79 + </menupopup>
1.80 +</menulist>
1.81 +
1.82 +<script class="testbody" type="application/javascript">
1.83 +<![CDATA[
1.84 +
1.85 +SimpleTest.waitForExplicitFinish();
1.86 +
1.87 +function testtag_menulists()
1.88 +{
1.89 + testtag_menulist_UI_start($("menulist"), false);
1.90 + testtag_menulist_UI_start($("menulist-editable"), true);
1.91 +
1.92 + // bug 566154, the menulist width should account for vertical scrollbar
1.93 + ok(document.getElementById("menulist-size").getBoundingClientRect().width >= 210,
1.94 + "menulist popup width includes scrollbar width");
1.95 +
1.96 + $("menulist").open = true;
1.97 +}
1.98 +
1.99 +function testtag_menulist_UI_start(element, editable)
1.100 +{
1.101 + var testprefix = editable ? "editable" : "";
1.102 +
1.103 + // check the menupopup property
1.104 + var popup = element.menupopup;
1.105 + ok(popup && popup.localName == "menupopup" &&
1.106 + popup.parentNode == element, testprefix + " menupopup");
1.107 +
1.108 + // test the interfaces that menulist implements
1.109 + test_nsIDOMXULMenuListElement(element, testprefix, editable);
1.110 +
1.111 + element.value = "";
1.112 +
1.113 + test_nsIDOMXULSelectControlElement(element, "menuitem",
1.114 + editable ? "editable" : null);
1.115 +}
1.116 +
1.117 +function test_nsIDOMXULMenuListElement(element, testprefix, editable)
1.118 +{
1.119 + is(element.open, false, testprefix + " open");
1.120 + is(element.editable, editable, testprefix + " editable");
1.121 +
1.122 + if (editable) {
1.123 + var inputField = element.inputField;
1.124 + is(inputField &&
1.125 + inputField instanceof Components.interfaces.nsIDOMHTMLInputElement,
1.126 + true, testprefix + " inputField");
1.127 +
1.128 + // check if the select method works
1.129 + inputField.select();
1.130 + is(inputField.selectionStart, 0, testprefix + " empty select selectionStart");
1.131 + is(inputField.selectionEnd, 0, testprefix + " empty select selectionEnd");
1.132 +
1.133 + element.value = "Some Text";
1.134 + inputField.select();
1.135 + is(inputField.selectionStart, 0, testprefix + " empty select selectionStart");
1.136 + is(inputField.selectionEnd, 9, testprefix + " empty select selectionEnd");
1.137 + }
1.138 + else {
1.139 + is(element.inputField, null , testprefix + " inputField");
1.140 + }
1.141 +
1.142 + element.appendItem("Item One", "one");
1.143 + var seconditem = element.appendItem("Item Two", "two");
1.144 + var thirditem = element.appendItem("Item Three", "three");
1.145 + element.appendItem("Item Four", "four");
1.146 +
1.147 + seconditem.image = "happy.png";
1.148 + seconditem.setAttribute("description", "This is the second description");
1.149 + thirditem.image = "happy.png";
1.150 + thirditem.setAttribute("description", "This is the third description");
1.151 +
1.152 + // check the image and description properties
1.153 + // editable menulists don't use the image or description properties currently
1.154 + if (editable) {
1.155 + element.selectedIndex = 1;
1.156 + is(element.image, "", testprefix + " image set to selected");
1.157 + is(element.description, "", testprefix + " description set to selected");
1.158 + }
1.159 + else {
1.160 + element.selectedIndex = 1;
1.161 + is(element.image, "happy.png", testprefix + " image set to selected");
1.162 + is(element.description, "This is the second description", testprefix + " description set to selected");
1.163 + element.selectedIndex = -1;
1.164 + is(element.image, "", testprefix + " image set when none selected");
1.165 + is(element.description, "", testprefix + " description set when none selected");
1.166 + element.selectedIndex = 2;
1.167 + is(element.image, "happy.png", testprefix + " image set to selected again");
1.168 + is(element.description, "This is the third description", testprefix + " description set to selected again");
1.169 +
1.170 + // check that changing the properties of the selected item changes the menulist's properties
1.171 + thirditem.label = "Item Number Three";
1.172 + is(element.label, "Item Number Three", testprefix + " label modified");
1.173 + thirditem.value = "item-three";
1.174 + is(element.value, "item-three", testprefix + " value modified");
1.175 + thirditem.image = "smile.png";
1.176 + is(element.image, "smile.png", testprefix + " image modified");
1.177 + thirditem.setAttribute("description", "Changed description");
1.178 + is(element.description, "Changed description", testprefix + " description modified");
1.179 + seconditem.label = "Changed Label 2";
1.180 + is(element.label, "Item Number Three", testprefix + " label of another item modified");
1.181 +
1.182 + element.selectedIndex = 0;
1.183 + is(element.image, "", testprefix + " image set to selected with no image");
1.184 + is(element.description, "", testprefix + " description set to selected with no description");
1.185 + }
1.186 +
1.187 + // check the removeAllItems method
1.188 + element.appendItem("An Item", "anitem");
1.189 + element.appendItem("Another Item", "anotheritem");
1.190 + element.removeAllItems();
1.191 + is(element.itemCount, 0, testprefix + " removeAllItems");
1.192 +}
1.193 +
1.194 +function test_menulist_open(element, scroller)
1.195 +{
1.196 + element.appendItem("Scroll Item 1", "scrollitem1");
1.197 + element.appendItem("Scroll Item 2", "scrollitem2");
1.198 + element.focus();
1.199 +
1.200 +/*
1.201 + // bug 530504, mousewheel while menulist is open should not scroll menulist
1.202 + // items or parent
1.203 + var scrolled = false;
1.204 + var mouseScrolled = function (event) { scrolled = true; }
1.205 + window.addEventListener("DOMMouseScroll", mouseScrolled, false);
1.206 + synthesizeWheel(element, 2, 2, { deltaY: 10,
1.207 + deltaMode: WheelEvent.DOM_DELTA_LINE });
1.208 + is(scrolled, true, "mousescroll " + element.id);
1.209 + is(scroller.scrollTop, 0, "scroll position on mousescroll " + element.id);
1.210 + window.removeEventListener("DOMMouseScroll", mouseScrolled, false);
1.211 +*/
1.212 +
1.213 + // bug 543065, hovering the mouse over an item should highlight it and not
1.214 + // scroll the parent
1.215 + var item = element.menupopup.childNodes[1];
1.216 +
1.217 + synthesizeMouse(element.menupopup.childNodes[1], 2, 2, { type: "mousemove" });
1.218 + synthesizeMouse(element.menupopup.childNodes[1], 6, 6, { type: "mousemove" });
1.219 + is(element.menuBoxObject.activeChild, item, "activeChild after menu highlight " + element.id);
1.220 + is(scroller.scrollTop, 0, "scroll position after menu highlight " + element.id);
1.221 +
1.222 + element.open = false;
1.223 +}
1.224 +
1.225 +function checkScrollAndFinish()
1.226 +{
1.227 + is($("scroller").scrollTop, 0, "mousewheel on menulist does not scroll vbox parent");
1.228 + is($("scroller-in-listbox").scrollTop, 0, "mousewheel on menulist does not scroll listbox parent");
1.229 +
1.230 + // bug 561243, outline causes the mouse click to be targeted incorrectly
1.231 + var editableMenulist = $("menulist-editable");
1.232 + editableMenulist.className = "outlined";
1.233 +
1.234 + synthesizeMouse(editableMenulist.inputField, 25, 8, { type: "mousedown" });
1.235 + synthesizeMouse(editableMenulist.inputField, 25, 8, { type: "mouseup" });
1.236 + isnot(editableMenulist.inputField.selectionStart, editableMenulist.inputField.textLength,
1.237 + "mouse event on editable menulist with outline caret position");
1.238 +
1.239 + SimpleTest.finish();
1.240 +}
1.241 +
1.242 +]]>
1.243 +</script>
1.244 +
1.245 +<body xmlns="http://www.w3.org/1999/xhtml">
1.246 +<style>
1.247 +.outlined > .menulist-editable-box { outline: 1px solid black; }
1.248 +</style>
1.249 +<p id="display">
1.250 +</p>
1.251 +<div id="content" style="display: none">
1.252 +</div>
1.253 +<pre id="test">
1.254 +</pre>
1.255 +</body>
1.256 +
1.257 +</window>
