1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/content/tests/chrome/test_tabbox.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,224 @@
1.4 +<?xml version="1.0"?>
1.5 +<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
1.6 +<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
1.7 +<!--
1.8 + XUL Widget Test for tabboxes
1.9 + -->
1.10 +<window title="Tabbox Test" width="500" height="600"
1.11 + onload="setTimeout(test_tabbox, 0);"
1.12 + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
1.13 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.14 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
1.15 + <script type="application/javascript" src="xul_selectcontrol.js"/>
1.16 +
1.17 +<vbox id="tabboxes">
1.18 +
1.19 +<tabbox id="tabbox">
1.20 + <tabs id="tabs">
1.21 + <tab id="tab1" label="Tab 1"/>
1.22 + <tab id="tab2" label="Tab 2"/>
1.23 + </tabs>
1.24 + <tabpanels id="tabpanels">
1.25 + <button id="panel1" label="Panel 1"/>
1.26 + <button id="panel2" label="Panel 2"/>
1.27 + </tabpanels>
1.28 +</tabbox>
1.29 +
1.30 +<tabbox id="tabbox-initwithvalue">
1.31 + <tabs id="tabs-initwithvalue" value="two">
1.32 + <tab label="Tab 1" value="one"/>
1.33 + <tab label="Tab 2" value="two"/>
1.34 + <tab label="Tab 3" value="three"/>
1.35 + </tabs>
1.36 + <tabpanels id="tabpanels-initwithvalue">
1.37 + <button label="Panel 1"/>
1.38 + <button label="Panel 2"/>
1.39 + <button label="Panel 3"/>
1.40 + </tabpanels>
1.41 +</tabbox>
1.42 +
1.43 +<tabbox id="tabbox-initwithselected">
1.44 + <tabs id="tabs-initwithselected" value="two">
1.45 + <tab label="Tab 1" value="one"/>
1.46 + <tab label="Tab 2" value="two"/>
1.47 + <tab label="Tab 3" value="three" selected="true"/>
1.48 + </tabs>
1.49 + <tabpanels id="tabpanels-initwithselected">
1.50 + <button label="Panel 1"/>
1.51 + <button label="Panel 2"/>
1.52 + <button label="Panel 3"/>
1.53 + </tabpanels>
1.54 +</tabbox>
1.55 +
1.56 +</vbox>
1.57 +
1.58 +<tabbox id="tabbox-nofocus">
1.59 + <textbox id="textbox-extra" hidden="true"/>
1.60 + <tabs>
1.61 + <tab label="Tab 1" value="one"/>
1.62 + <tab id="tab-nofocus" label="Tab 2" value="two"/>
1.63 + </tabs>
1.64 + <tabpanels>
1.65 + <tabpanel>
1.66 + <button id="tab-nofocus-button" label="Label"/>
1.67 + </tabpanel>
1.68 + <tabpanel id="tabpanel-nofocusinpaneltab">
1.69 + <label id="tablabel" value="Label"/>
1.70 + </tabpanel>
1.71 + </tabpanels>
1.72 +</tabbox>
1.73 +
1.74 + <!-- test results are displayed in the html:body -->
1.75 + <body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
1.76 +
1.77 + <!-- test code goes here -->
1.78 + <script type="application/javascript"><![CDATA[
1.79 +
1.80 +SimpleTest.waitForExplicitFinish();
1.81 +
1.82 +function test_tabbox()
1.83 +{
1.84 + var tabbox = document.getElementById("tabbox");
1.85 + var tabs = document.getElementById("tabs");
1.86 + var tabpanels = document.getElementById("tabpanels");
1.87 +
1.88 + test_tabbox_State(tabbox, "tabbox initial", 0, tabs.firstChild, tabpanels.firstChild);
1.89 +
1.90 + // check the selectedIndex property
1.91 + tabbox.selectedIndex = 1;
1.92 + test_tabbox_State(tabbox, "tabbox selectedIndex 1", 1, tabs.lastChild, tabpanels.lastChild);
1.93 +
1.94 + tabbox.selectedIndex = 2;
1.95 + test_tabbox_State(tabbox, "tabbox selectedIndex 2", 1, tabs.lastChild, tabpanels.lastChild);
1.96 +
1.97 + // tabbox must have a selection, so setting to -1 should do nothing
1.98 + tabbox.selectedIndex = -1;
1.99 + test_tabbox_State(tabbox, "tabbox selectedIndex -1", 1, tabs.lastChild, tabpanels.lastChild);
1.100 +
1.101 + // check the selectedTab property
1.102 + tabbox.selectedTab = tabs.firstChild;
1.103 + test_tabbox_State(tabbox, "tabbox selected", 0, tabs.firstChild, tabpanels.firstChild);
1.104 +
1.105 + // setting selectedTab to null should not do anything
1.106 + tabbox.selectedTab = null;
1.107 + test_tabbox_State(tabbox, "tabbox selectedTab null", 0, tabs.firstChild, tabpanels.firstChild);
1.108 +
1.109 + // check the selectedPanel property
1.110 + tabbox.selectedPanel = tabpanels.lastChild;
1.111 + test_tabbox_State(tabbox, "tabbox selectedPanel", 0, tabs.firstChild, tabpanels.lastChild);
1.112 +
1.113 + // setting selectedPanel to null should not do anything
1.114 + tabbox.selectedPanel = null;
1.115 + test_tabbox_State(tabbox, "tabbox selectedPanel null", 0, tabs.firstChild, tabpanels.lastChild);
1.116 +
1.117 + tabbox.selectedIndex = 0;
1.118 + test_tabpanels(tabpanels, tabbox);
1.119 +
1.120 + tabs.removeChild(tabs.firstChild);
1.121 + tabs.removeChild(tabs.firstChild);
1.122 +
1.123 + test_tabs(tabs);
1.124 +
1.125 + test_tabbox_focus();
1.126 +}
1.127 +
1.128 +function test_tabpanels(tabpanels, tabbox)
1.129 +{
1.130 + var tab = tabbox.selectedTab;
1.131 +
1.132 + // changing the selection on the tabpanels should not affect the tabbox
1.133 + // or tabs within
1.134 + // check the selectedIndex property
1.135 + tabpanels.selectedIndex = 1;
1.136 + test_tabbox_State(tabbox, "tabpanels tabbox selectedIndex 1", 0, tab, tabpanels.lastChild);
1.137 + test_tabpanels_State(tabpanels, "tabpanels selectedIndex 1", 1, tabpanels.lastChild);
1.138 +
1.139 + tabpanels.selectedIndex = 0;
1.140 + test_tabbox_State(tabbox, "tabpanels tabbox selectedIndex 2", 0, tab, tabpanels.firstChild);
1.141 + test_tabpanels_State(tabpanels, "tabpanels selectedIndex 2", 0, tabpanels.firstChild);
1.142 +
1.143 + // setting selectedIndex to -1 should do nothing
1.144 + tabpanels.selectedIndex = 1;
1.145 + tabpanels.selectedIndex = -1;
1.146 + test_tabbox_State(tabbox, "tabpanels tabbox selectedIndex -1", 0, tab, tabpanels.lastChild);
1.147 + test_tabpanels_State(tabpanels, "tabpanels selectedIndex -1", 1, tabpanels.lastChild);
1.148 +
1.149 + // check the tabpanels.selectedPanel property
1.150 + tabpanels.selectedPanel = tabpanels.lastChild;
1.151 + test_tabbox_State(tabbox, "tabpanels tabbox selectedPanel", 0, tab, tabpanels.lastChild);
1.152 + test_tabpanels_State(tabpanels, "tabpanels selectedPanel", 1, tabpanels.lastChild);
1.153 +
1.154 + // check setting the tabpanels.selectedPanel property to null
1.155 + tabpanels.selectedPanel = null;
1.156 + test_tabbox_State(tabbox, "tabpanels selectedPanel null", 0, tab, tabpanels.lastChild);
1.157 +}
1.158 +
1.159 +function test_tabs(tabs)
1.160 +{
1.161 + test_nsIDOMXULSelectControlElement(tabs, "tab", "tabs");
1.162 + // XXXndeakin would test the UI aspect of tabs, but the mouse
1.163 + // events on tabs are fired in a timeout causing the generic
1.164 + // test_nsIDOMXULSelectControlElement_UI method not to work
1.165 + // test_nsIDOMXULSelectControlElement_UI(tabs, null);
1.166 +}
1.167 +
1.168 +function test_tabbox_State(tabbox, testid, index, tab, panel)
1.169 +{
1.170 + is(tabbox.selectedIndex, index, testid + " selectedIndex");
1.171 + is(tabbox.selectedTab, tab, testid + " selectedTab");
1.172 + is(tabbox.selectedPanel, panel, testid + " selectedPanel");
1.173 +}
1.174 +
1.175 +function test_tabpanels_State(tabpanels, testid, index, panel)
1.176 +{
1.177 + is(tabpanels.selectedIndex, index, testid + " selectedIndex");
1.178 + is(tabpanels.selectedPanel, panel, testid + " selectedPanel");
1.179 +}
1.180 +
1.181 +function test_tabbox_focus()
1.182 +{
1.183 + $("tabboxes").hidden = true;
1.184 + $(document.activeElement).blur();
1.185 +
1.186 + var tabbox = $("tabbox-nofocus");
1.187 + var tab = $("tab-nofocus");
1.188 +
1.189 + when_tab_focused(tab, function () {
1.190 + ok(document.activeElement, tab, "focus in tab with no focusable elements");
1.191 +
1.192 + tabbox.selectedIndex = 0;
1.193 + $("tab-nofocus-button").focus();
1.194 +
1.195 + when_tab_focused(tab, function () {
1.196 + ok(document.activeElement, tab, "focus in tab with no focusable elements, but with something in another tab focused");
1.197 +
1.198 + var textboxExtra = $("textbox-extra");
1.199 + textboxExtra.addEventListener("focus", function () {
1.200 + textboxExtra.removeEventListener("focus", arguments.callee, true);
1.201 + ok(document.activeElement, textboxExtra, "focus in tab with focus currently in textbox that is sibling of tabs");
1.202 +
1.203 + SimpleTest.finish();
1.204 + }, true);
1.205 +
1.206 + tabbox.selectedIndex = 0;
1.207 + textboxExtra.hidden = false;
1.208 + synthesizeMouseAtCenter(tab, { });
1.209 + });
1.210 +
1.211 + synthesizeMouseAtCenter(tab, { });
1.212 + });
1.213 +
1.214 + synthesizeMouseAtCenter(tab, { });
1.215 +}
1.216 +
1.217 +function when_tab_focused(tab, callback) {
1.218 + tab.addEventListener("focus", function onFocused() {
1.219 + tab.removeEventListener("focus", onFocused, true);
1.220 + SimpleTest.executeSoon(callback);
1.221 + }, true);
1.222 +}
1.223 +
1.224 +]]>
1.225 +</script>
1.226 +
1.227 +</window>
