summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/chrome/test_hiddenpaging.xul
blob: 37b10971831d69287aa2da0a47619cbe520efc69 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<?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"?>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=317422
-->
<window title="Mozilla Bug 317422"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>

  <style xmlns="http://www.w3.org/1999/xhtml">
    /* This makes the richlistbox about 4.5 rows high */
    richlistitem {
      height: 30px;
    }
    richlistbox {
      height: 135px;
    }
  </style>
  
  <!-- test results are displayed in the html:body -->
  <body xmlns="http://www.w3.org/1999/xhtml">
  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=317422"
     target="_blank">Mozilla Bug 317422</a>
  </body>

  <richlistbox id="richlistbox" seltype="multiple">
    <richlistitem id="richlistbox_item1"><label value="Item 1"/></richlistitem>
    <richlistitem id="richlistbox_item2"><label value="Item 2"/></richlistitem>
    <richlistitem id="richlistbox_item3" hidden="true"><label value="Item 3"/></richlistitem>
    <richlistitem id="richlistbox_item4"><label value="Item 4"/></richlistitem>
    <richlistitem id="richlistbox_item5" collapsed="true"><label value="Item 5"/></richlistitem>
    <richlistitem id="richlistbox_item6"><label value="Item 6"/></richlistitem>
    <richlistitem id="richlistbox_item7"><label value="Item 7"/></richlistitem>
    <richlistitem id="richlistbox_item8"><label value="Item 8"/></richlistitem>
    <richlistitem id="richlistbox_item9"><label value="Item 9"/></richlistitem>
    <richlistitem id="richlistbox_item10"><label value="Item 10"/></richlistitem>
    <richlistitem id="richlistbox_item11"><label value="Item 11"/></richlistitem>
    <richlistitem id="richlistbox_item12"><label value="Item 12"/></richlistitem>
    <richlistitem id="richlistbox_item13"><label value="Item 13"/></richlistitem>
    <richlistitem id="richlistbox_item14"><label value="Item 14"/></richlistitem>
    <richlistitem id="richlistbox_item15" hidden="true"><label value="Item 15"/></richlistitem>
  </richlistbox>
  
  <listbox id="listbox" seltype="multiple" rows="5">
    <listitem id="listbox_item1" label="Item 1"/>
    <listitem id="listbox_item2" label="Item 2"/>
    <listitem id="listbox_item3" label="Item 3" hidden="true"/>
    <listitem id="listbox_item4" label="Item 4"/>
    <listitem id="listbox_item5" label="Item 5" hidden="true"/>
    <listitem id="listbox_item6" label="Item 6"/>
    <listitem id="listbox_item7" label="Item 7"/>
    <listitem id="listbox_item8" label="Item 8"/>
    <listitem id="listbox_item9" label="Item 9"/>
    <listitem id="listbox_item10" label="Item 10"/>
    <listitem id="listbox_item11" label="Item 11"/>
    <listitem id="listbox_item12" label="Item 12"/>
    <listitem id="listbox_item13" label="Item 13"/>
    <listitem id="listbox_item14" label="Item 14"/>
    <listitem id="listbox_item15" label="Item 15" hidden="true"/>
  </listbox>
  
  <!-- test code goes here -->
  <script type="application/javascript"><![CDATA[

/** Test for Bug 317422 **/
SimpleTest.waitForExplicitFinish();

function testRichlistbox()
{
  var id = "richlistbox";
  var listbox = document.getElementById(id);
  listbox.focus();
  listbox.selectedIndex = 0;
  sendKey("PAGE_DOWN");
  is(listbox.selectedItem.id, id + "_item7", id + ": Page down should go to the item one visible page away");
  is(listbox.getIndexOfFirstVisibleRow(), 6, id + ": Page down should have scrolled down a visible page");
  sendKey("PAGE_DOWN");
  is(listbox.selectedItem.id, id + "_item11", id + ": Second page down should go to the item two visible pages away");
  is(listbox.getIndexOfFirstVisibleRow(), 9, id + ": Second page down should not scroll beyond the end");
  sendKey("PAGE_DOWN");
  is(listbox.selectedItem.id, id + "_item14", id + ": Third page down should go to the last visible item");
  is(listbox.getIndexOfFirstVisibleRow(), 9, id + ": Third page down should not have scrolled at all");
  sendKey("PAGE_UP");
  is(listbox.selectedItem.id, id + "_item10", id + ": Page up should go to the item one visible page away");
  is(listbox.getIndexOfFirstVisibleRow(), 5, id + ": Page up should scroll up a visible page");
  sendKey("PAGE_UP");
  is(listbox.selectedItem.id, id + "_item6", id + ": Second page up should go to the item two visible pages away");
  is(listbox.getIndexOfFirstVisibleRow(), 0, id + ": Second page up should not scroll beyond the start");
  sendKey("PAGE_UP");
  is(listbox.selectedItem.id, id + "_item1", id + ": Third page up should return to the first visible item");
  is(listbox.getIndexOfFirstVisibleRow(), 0, id + ": Third page up should not have scrolled at all");
}

function testListbox()
{
  var id = "listbox";
  var listbox = document.getElementById(id);

  if (!window.matchMedia("(-moz-overlay-scrollbars)").matches) {
   // Check that a scrollbar is visible by comparing the width of the listitem
   // with the width of the listbox. This is a simple way to do this without
   // checking the anonymous content.
   ok(listbox.firstChild.getBoundingClientRect().width < listbox.getBoundingClientRect().width - 10,
      id + ": Scrollbar visible");
 }

  var rowHeight = listbox.firstChild.getBoundingClientRect().height;

  listbox.focus();
  listbox.selectedIndex = 0;
  sendKey("PAGE_DOWN");
  is(listbox.selectedItem.id, id + "_item8", id + ": Page down should go to the item one visible page away");
  is(listbox.getIndexOfFirstVisibleRow(), 7, id + ": Page down should have scrolled down a visible page");
  sendKey("PAGE_DOWN");
  is(listbox.selectedItem.id, id + "_item13", id + ": Second page down should go to the item two visible pages away");
  is(listbox.getIndexOfFirstVisibleRow(), 9, id + ": Second page down should not scroll beyond the end");
  sendKey("PAGE_DOWN");
  is(listbox.selectedItem.id, id + "_item14", id + ": Third page down should go to the last visible item");
  is(listbox.getIndexOfFirstVisibleRow(), 9, id + ": Third page down should not have scrolled at all");
  sendKey("PAGE_UP");
  is(listbox.selectedItem.id, id + "_item9", id + ": Page up should go to the item one visible page away");
  // the listScrollbox seems to go haywire when scrolling up with hidden listitems
  todo_is(listbox.getIndexOfFirstVisibleRow(), 3, id + ": Page up should scroll up a visible page");
  sendKey("PAGE_UP");
  is(listbox.selectedItem.id, id + "_item2", id + ": Second page up should go to the item two visible pages away");
  is(listbox.getIndexOfFirstVisibleRow(), 0, id + ": Second page up should not scroll beyond the start");
  sendKey("PAGE_UP");
  is(listbox.selectedItem.id, id + "_item1", id + ": Third page up should return to the first visible item");
  is(listbox.getIndexOfFirstVisibleRow(), 0, id + ": Third page up should not have scrolled at all");

  var scrollHeight = document.getAnonymousNodes(listbox)[1].lastChild.scrollHeight;
  is(scrollHeight, rowHeight * 15, id + ": scrollHeight when rows set");

  listbox.minHeight = 50;
  scrollHeight = document.getAnonymousNodes(listbox)[1].lastChild.scrollHeight;
  is(scrollHeight, rowHeight * 15, id + ": scrollHeight when rows and minimium height set");

  listbox.removeAttribute("rows");

  var availHeight = document.getAnonymousNodes(listbox)[1].lastChild.getBoundingClientRect().height;
  // The listbox layout adds this extra height in GetPrefSize. Not sure what it's for though.
  var e = (rowHeight * 15 - availHeight) % rowHeight;
  var extraHeight = (e == 0) ? 0 : rowHeight - e;

  scrollHeight = document.getAnonymousNodes(listbox)[1].lastChild.scrollHeight;
  is(scrollHeight, rowHeight * 15 + extraHeight, id + ": scrollHeight when minimium height set");

  listbox.removeAttribute("minheight");
  scrollHeight = document.getAnonymousNodes(listbox)[1].lastChild.scrollHeight;
  is(scrollHeight, rowHeight * 15 + extraHeight, id + ": scrollHeight");
}

window.onload = function runTests() {
  testRichlistbox();
  testListbox();
  SimpleTest.finish();
};
  ]]></script>
</window>