1 files changed, 133 insertions, 0 deletions
diff --git a/toolkit/content/tests/chrome/test_deck.xhtml b/toolkit/content/tests/chrome/test_deck.xhtml
new file mode 100644
index 0000000000..d6f824b357
--- /dev/null
+++ b/toolkit/content/tests/chrome/test_deck.xhtml
@@ -0,0 +1,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>