test_menulist_paging.xhtml

Enable keyboard shortcuts

<?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(runTest, 0);"

        onpopupshown="menulistShown()" onpopuphidden="runTest()"

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

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

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

<menulist id="menulist1">

  <menupopup id="menulist-popup1">

    <menuitem label="One"/>

    <menuitem label="Two"/>

    <menuitem label="Three"/>

    <menuitem label="Four"/>

    <menuitem label="Five"/>

    <menuitem label="Six"/>

    <menuitem label="Seven"/>

    <menuitem label="Eight"/>

    <menuitem label="Nine"/>

    <menuitem label="Ten"/>

  </menupopup>

</menulist>

<menulist id="menulist2">

  <menupopup id="menulist-popup2">

    <menuitem label="One" disabled="true"/>

    <menuitem label="Two" selected="true"/>

    <menuitem label="Three"/>

    <menuitem label="Four"/>

    <menuitem label="Five"/>

    <menuitem label="Six"/>

    <menuitem label="Seven"/>

    <menuitem label="Eight"/>

    <menuitem label="Nine"/>

    <menuitem label="Ten" disabled="true"/>

  </menupopup>

</menulist>

<menulist id="menulist3">

  <menupopup id="menulist-popup3">

    <label value="One"/>

    <menuitem label="Two" selected="true"/>

    <menuitem label="Three"/>

    <menuitem label="Four"/>

    <menuitem label="Five" disabled="true"/>

    <menuitem label="Six" disabled="true"/>

    <menuitem label="Seven"/>

    <menuitem label="Eight"/>

    <menuitem label="Nine"/>

    <label value="Ten"/>

  </menupopup>

</menulist>

<menulist id="menulist4">

  <menupopup id="menulist-popup4">

    <label value="One"/>

    <menuitem label="Two"/>

    <menuitem label="Three"/>

    <menuitem label="Four"/>

    <menuitem label="Five"/>

    <menuitem label="Six" selected="true"/>

    <menuitem label="Seven"/>

    <menuitem label="Eight"/>

    <menuitem label="Nine"/>

    <label value="Ten"/>

  </menupopup>

</menulist>

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

<![CDATA[

SimpleTest.waitForExplicitFinish();

let test;

// Fields:

//  list - menulist id

//  initial - initial selected index

//  scroll - index of item at top of the visible scrolled area, -1 to skip this test

//  downs - array of indicies that will be selected when pressing down in sequence

//  ups - array of indicies that will be selected when pressing up in sequence

let tests = [

  { list: "menulist1", initial: 0, scroll: 0, downs: [3, 6, 9, 9],

                                   ups: [6, 3, 0, 0] },

  { list: "menulist2", initial: 1, scroll: 0, downs: [4, 7, 8, 8],

                                   ups: [5, 2, 1] },

  { list: "menulist3", initial: 1, scroll: -1, downs: [3, 6, 8, 8],

                                   ups: [6, 3, 1] },

  { list: "menulist4", initial: 5, scroll: 2, downs: [], ups: [] }

];

let gMeasured = false;

function measureMenuItemHeightIfNeeded() {

  if (gMeasured) {

    return;

  gMeasured = true;

  let popup = document.getElementById("menulist-popup1");

  let menuitemHeight = popup.firstChild.getBoundingClientRect().height;

  let cs = window.getComputedStyle(popup);

  let csArrow = window.getComputedStyle(popup.scrollBox);

  let bpmTop = parseFloat(cs.paddingTop) + parseFloat(cs.borderTopWidth) +

              parseFloat(csArrow.paddingTop) + parseFloat(csArrow.borderTopWidth) +

              parseFloat(csArrow.marginTop);

  let bpmBottom = parseFloat(cs.paddingBottom) + parseFloat(cs.borderBottomWidth) +

                 parseFloat(csArrow.paddingBottom) + parseFloat(csArrow.borderBottomWidth) +

                 parseFloat(csArrow.marginBottom);

  // First, set the height of each popup to the height of four menuitems plus

  // any padding / border / margin on the menupopup.

  let height = menuitemHeight * 4 + bpmTop + bpmBottom;

  popup.style.height = height + "px";

  document.getElementById("menulist-popup2").style.height = height + "px";

  document.getElementById("menulist-popup3").style.height = height + "px";

  document.getElementById("menulist-popup4").style.height = height + "px";

function runTest() {

  if (!tests.length) {

    SimpleTest.finish();

    return;

  test = tests.shift();

  document.getElementById(test.list).open = true;

function menulistShown()

  measureMenuItemHeightIfNeeded();

  let menulist = document.getElementById(test.list);

  is(menulist.activeChild.label, menulist.getItemAtIndex(test.initial).label, test.list + " initial selection");

  let cs = window.getComputedStyle(menulist.menupopup);

  let csArrow = window.getComputedStyle(menulist.menupopup.scrollBox);

  let bpmTop = parseFloat(cs.paddingTop) + parseFloat(cs.borderTopWidth) +

              parseFloat(csArrow.paddingTop) + parseFloat(csArrow.borderTopWidth) +

              parseFloat(csArrow.marginTop);

  // Skip menulist3 as it has a label that scrolling doesn't need normally deal with.

  if (test.scroll >= 0) {

    is(menulist.menupopup.childNodes[test.scroll].getBoundingClientRect().top,

       menulist.menupopup.getBoundingClientRect().top + bpmTop,

       "Popup scroll at correct position");

  for (let i = 0; i < test.downs.length; i++) {

    sendKey("PAGE_DOWN");

    is(menulist.activeChild.label, menulist.getItemAtIndex(test.downs[i]).label, test.list + " page down " + i);

  for (let i = 0; i < test.ups.length; i++) {

    sendKey("PAGE_UP");

    is(menulist.activeChild.label, menulist.getItemAtIndex(test.ups[i]).label, test.list + " page up " + i);

  menulist.open = false;

]]>

</script>

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

<p id="display">

</p>

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

</div>

<pre id="test">

</pre>

</body>

</window>