The Tor Browser / file revision

 <?xml version="1.0"?>

 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>

 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>

 <window title="Menulist Tests"

         onload="setTimeout(testtag_menulists, 0);"

         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>      

   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      

   <script type="application/javascript" src="xul_selectcontrol.js"></script>      

 <vbox id="scroller" style="overflow: auto" height="60">

   <menulist id="menulist" onpopupshown="test_menulist_open(this, this.parentNode)"

             onpopuphidden="$('menulist-in-listbox').open = true;">

     <menupopup id="menulist-popup"/>

   </menulist>

   <button label="Two"/>

   <button label="Three"/>

 </vbox>

 <listbox id="scroller-in-listbox" style="overflow: auto" height="60">

   <listitem allowevents="true">

     <menulist id="menulist-in-listbox" onpopupshown="test_menulist_open(this, this.parentNode.parentNode)"

               onpopuphidden="SimpleTest.executeSoon(checkScrollAndFinish)">

       <menupopup id="menulist-in-listbox-popup">

         <menuitem label="One" value="one"/>

         <menuitem label="Two" value="two"/>

       </menupopup>

     </menulist>

   </listitem>

   <listitem label="Two"/>

   <listitem label="Three"/>

   <listitem label="Four"/>

   <listitem label="Five"/>

   <listitem label="Six"/>

 </listbox>

 <hbox>

   <menulist id="menulist-size">

     <menupopup>

       <menuitem label="Menuitem Label" width="200"/>

     </menupopup>

   </menulist>

 </hbox>

 <menulist id="menulist-editable" editable="true">

   <menupopup id="menulist-popup-editable"/>

 </menulist>

 <menulist id="menulist-initwithvalue" value="two">

   <menupopup>

     <menuitem label="One" value="one"/>

     <menuitem label="Two" value="two"/>

     <menuitem label="Three" value="three"/>

   </menupopup>

 </menulist>

 <menulist id="menulist-initwithselected" value="two">

   <menupopup>

     <menuitem label="One" value="one"/>

     <menuitem label="Two" value="two"/>

     <menuitem label="Three" value="three" selected="true"/>

   </menupopup>

 </menulist>

 <menulist id="menulist-editable-initwithvalue" editable="true" value="Two">

   <menupopup>

     <menuitem label="One" value="one"/>

     <menuitem label="Two" value="two"/>

     <menuitem label="Three" value="three"/>

   </menupopup>

 </menulist>

 <menulist id="menulist-editable-initwithselected" editable="true" value="two">

   <menupopup>

     <menuitem label="One" value="one"/>

     <menuitem label="Two" value="two"/>

     <menuitem label="Three" value="three" selected="true"/>

   </menupopup>

 </menulist>

 <script class="testbody" type="application/javascript">

 <![CDATA[

 SimpleTest.waitForExplicitFinish();

 function testtag_menulists()

 {

   testtag_menulist_UI_start($("menulist"), false);

   testtag_menulist_UI_start($("menulist-editable"), true);

   // bug 566154, the menulist width should account for vertical scrollbar

   ok(document.getElementById("menulist-size").getBoundingClientRect().width >= 210,

      "menulist popup width includes scrollbar width");

   $("menulist").open = true;

 }

 function testtag_menulist_UI_start(element, editable)

 {

   var testprefix = editable ? "editable" : "";

   // check the menupopup property

   var popup = element.menupopup;

   ok(popup && popup.localName == "menupopup" &&

               popup.parentNode == element, testprefix + " menupopup");

   // test the interfaces that menulist implements

   test_nsIDOMXULMenuListElement(element, testprefix, editable);

   element.value = "";

   test_nsIDOMXULSelectControlElement(element, "menuitem",

                                      editable ? "editable" : null);

 }

 function test_nsIDOMXULMenuListElement(element, testprefix, editable)

 {

   is(element.open, false, testprefix + " open");

   is(element.editable, editable, testprefix + " editable");

   if (editable) {

     var inputField = element.inputField;

     is(inputField &&

                   inputField instanceof Components.interfaces.nsIDOMHTMLInputElement,

                   true, testprefix + " inputField");

     // check if the select method works

     inputField.select();

     is(inputField.selectionStart, 0, testprefix + " empty select selectionStart");

     is(inputField.selectionEnd, 0, testprefix + " empty select selectionEnd");

     element.value = "Some Text";

     inputField.select();

     is(inputField.selectionStart, 0, testprefix + " empty select selectionStart");

     is(inputField.selectionEnd, 9, testprefix + " empty select selectionEnd");

   }

   else {

     is(element.inputField, null , testprefix + " inputField");

   }

   element.appendItem("Item One", "one");

   var seconditem = element.appendItem("Item Two", "two");

   var thirditem = element.appendItem("Item Three", "three");

   element.appendItem("Item Four", "four");

   seconditem.image = "happy.png";

   seconditem.setAttribute("description", "This is the second description");

   thirditem.image = "happy.png";

   thirditem.setAttribute("description", "This is the third description");

   // check the image and description properties

   // editable menulists don't use the image or description properties currently

   if (editable) {

     element.selectedIndex = 1;

     is(element.image, "", testprefix + " image set to selected");

     is(element.description, "", testprefix + " description set to selected");

   }

   else {

     element.selectedIndex = 1;

     is(element.image, "happy.png", testprefix + " image set to selected");

     is(element.description, "This is the second description", testprefix + " description set to selected");

     element.selectedIndex = -1;

     is(element.image, "", testprefix + " image set when none selected");

     is(element.description, "", testprefix + " description set when none selected");

     element.selectedIndex = 2;

     is(element.image, "happy.png", testprefix + " image set to selected again");

     is(element.description, "This is the third description", testprefix + " description set to selected again");

     // check that changing the properties of the selected item changes the menulist's properties

     thirditem.label = "Item Number Three";

     is(element.label, "Item Number Three", testprefix + " label modified");

     thirditem.value = "item-three";

     is(element.value, "item-three", testprefix + " value modified");

     thirditem.image = "smile.png";

     is(element.image, "smile.png", testprefix + " image modified");

     thirditem.setAttribute("description", "Changed description");

     is(element.description, "Changed description", testprefix + " description modified");

     seconditem.label = "Changed Label 2";

     is(element.label, "Item Number Three", testprefix + " label of another item modified");

     element.selectedIndex = 0;

     is(element.image, "", testprefix + " image set to selected with no image");

     is(element.description, "", testprefix + " description set to selected with no description");

   }

   // check the removeAllItems method

   element.appendItem("An Item", "anitem");

   element.appendItem("Another Item", "anotheritem");

   element.removeAllItems();

   is(element.itemCount, 0, testprefix + " removeAllItems");

 }

 function test_menulist_open(element, scroller)

 {

   element.appendItem("Scroll Item 1", "scrollitem1");

   element.appendItem("Scroll Item 2", "scrollitem2");

   element.focus();

 /*

   // bug 530504, mousewheel while menulist is open should not scroll menulist

   // items or parent

   var scrolled = false;

   var mouseScrolled = function (event) { scrolled = true; }

   window.addEventListener("DOMMouseScroll", mouseScrolled, false);

   synthesizeWheel(element, 2, 2, { deltaY: 10,

                                    deltaMode: WheelEvent.DOM_DELTA_LINE });

   is(scrolled, true, "mousescroll " + element.id);

   is(scroller.scrollTop, 0, "scroll position on mousescroll " + element.id);

   window.removeEventListener("DOMMouseScroll", mouseScrolled, false);

 */

   // bug 543065, hovering the mouse over an item should highlight it and not

   // scroll the parent

   var item = element.menupopup.childNodes[1];

   synthesizeMouse(element.menupopup.childNodes[1], 2, 2, { type: "mousemove" });

   synthesizeMouse(element.menupopup.childNodes[1], 6, 6, { type: "mousemove" });

   is(element.menuBoxObject.activeChild, item, "activeChild after menu highlight " + element.id);

   is(scroller.scrollTop, 0, "scroll position after menu highlight " + element.id);

   element.open = false;

 }

 function checkScrollAndFinish()

 {

   is($("scroller").scrollTop, 0, "mousewheel on menulist does not scroll vbox parent");

   is($("scroller-in-listbox").scrollTop, 0, "mousewheel on menulist does not scroll listbox parent");

   // bug 561243, outline causes the mouse click to be targeted incorrectly

   var editableMenulist = $("menulist-editable");

   editableMenulist.className = "outlined";

   synthesizeMouse(editableMenulist.inputField, 25, 8, { type: "mousedown" });

   synthesizeMouse(editableMenulist.inputField, 25, 8, { type: "mouseup" });

   isnot(editableMenulist.inputField.selectionStart, editableMenulist.inputField.textLength,

         "mouse event on editable menulist with outline caret position");

   SimpleTest.finish();

 }

 ]]>

 </script>

 <body xmlns="http://www.w3.org/1999/xhtml">

 <style>

 .outlined > .menulist-editable-box { outline: 1px solid black; }

 </style>

 <p id="display">

 </p>

 <div id="content" style="display: none">

 </div>

 <pre id="test">

 </pre>

 </body>

 </window>