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
|
<?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"?>
<!--
XUL Widget Test for deck
-->
<window title="Deck Test"
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>
<deck id="deck1" style="padding-top: 5px; padding-bottom: 12px;">
<button id="d1b1" label="Button One"/>
<button id="d1b2" label="Button Two is larger" style="height: 80px; margin: 1px;"/>
</deck>
<deck id="deck2" selectedIndex="1">
<button id="d2b1" label="Button One"/>
<button id="d2b2" label="Button Two"/>
</deck>
<deck id="deck3" selectedIndex="1">
<button id="d3b1" label="Remove me"/>
<button id="d3b2" label="Keep me selected"/>
</deck>
<deck id="deck4" selectedIndex="5">
<button id="d4b1" label="Remove me"/>
<button id="d4b2" label="Remove me"/>
<button id="d4b3" label="Remove me"/>
<button id="d4b4" label="Button 4"/>
<button id="d4b5" label="Button 5"/>
<button id="d4b6" label="Keep me selected"/>
<button id="d4b7" label="Button 7"/>
</deck>
<deck id="deck5" selectedIndex="2">
<button id="d5b1" label="Button 1"/>
<button id="d5b2" label="Button 2"/>
<button id="d5b3" label="Keep me selected"/>
<button id="d5b4" label="Remove me"/>
<button id="d5b5" label="Remove me"/>
<button id="d5b6" label="Remove me"/>
</deck>
<!-- test results are displayed in the html:body -->
<body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
<!-- test code goes here -->
<script type="application/javascript"><![CDATA[
add_task(async function run_tests() {
test_deck();
await test_deck_child_removal();
});
function test_deck()
{
var deck = $("deck1");
is(deck.selectedIndex, 0, "deck one selectedIndex");
// this size is the button height, 80, plus the button padding of 1px on each side,
// plus the deck's 5px top padding and the 12px bottom padding.
var rect = deck.getBoundingClientRect();
is(Math.round(rect.bottom) - Math.round(rect.top), 99, "deck size of largest child");
synthesizeMouseExpectEvent(deck, 12, 12, { }, $("d1b1"), "click", "mouse on deck one");
// change the selected page of the deck and ensure that the mouse click goes
// to the button on that page
deck.selectedIndex = 1;
is(deck.selectedIndex, 1, "deck one selectedIndex after change");
synthesizeMouseExpectEvent(deck, 9, 9, { }, $("d1b2"), "click", "mouse on deck one after change");
deck = $("deck2");
is(deck.selectedIndex, 1, "deck two selectedIndex");
synthesizeMouseExpectEvent(deck, 9, 9, { }, $("d2b2"), "click", "mouse on deck two");
}
async function test_deck_child_removal()
{
// Start with a simple case where we have two child nodes in a deck, with
// the second child (index 1) selected. Removing the first node should
// automatically set the selectedIndex at 0.
let deck = $("deck3");
let child = $("d3b1");
is(deck.selectedIndex, 1, "Should have the deck element at index 1 selected");
// Remove the child at the 0th index. The deck should automatically
// set the selectedIndex to "0".
child.remove();
await Promise.resolve();
is(deck.selectedIndex, 0, "Should have the deck element at index 0 selected");
// Now scale it up by using a deck with 7 child nodes, and remove the
// first three, making sure that the selectedIndex is decremented
// each time.
deck = $("deck4");
let expectedIndex = 5;
is(deck.selectedIndex, expectedIndex,
"Should have the deck element at index " + expectedIndex + " selected");
for (let i = 0; i < 3; ++i) {
deck.firstChild.remove();
expectedIndex--;
await Promise.resolve();
is(deck.selectedIndex, expectedIndex,
"Should have the deck element at index " + expectedIndex + " selected");
}
// Check that removing the currently selected node doesn't change
// behaviour.
deck.childNodes[expectedIndex].remove();
await Promise.resolve();
is(deck.selectedIndex, expectedIndex,
"The selectedIndex should not change when removing the node " +
"at the selected index.");
// Finally, make sure we haven't changed the behaviour when removing
// nodes at indexes greater than the selected node.
deck = $("deck5");
expectedIndex = 2;
await Promise.resolve();
is(deck.selectedIndex, expectedIndex,
"Should have the deck element at index " + expectedIndex + " selected");
// And then remove all of the nodes, starting from last to first, making
// sure that the selectedIndex does not change.
while (deck.lastChild) {
deck.lastChild.remove();
await Promise.resolve();
is(deck.selectedIndex, expectedIndex,
"Should have the deck element at index " + expectedIndex + " selected");
}
}
]]>
</script>
</window>
|
