The Tor Browser / file comparison
comparison: toolkit/content/tests/chrome/test_tabbox.xul
toolkit/content/tests/chrome/test_tabbox.xul
- branch
- TOR_BUG_3246
- changeset 7
- 129ffea94266
equal
deleted
inserted
replaced
| -1:000000000000 | 0:8dd5cddd3e69 |
|---|---|
| 1 <?xml version="1.0"?> | |
| 2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?> | |
| 3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> | |
| 4 <!-- | |
| 5 XUL Widget Test for tabboxes | |
| 6 --> | |
| 7 <window title="Tabbox Test" width="500" height="600" | |
| 8 onload="setTimeout(test_tabbox, 0);" | |
| 9 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | |
| 10 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> | |
| 11 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> | |
| 12 <script type="application/javascript" src="xul_selectcontrol.js"/> | |
| 13 | |
| 14 <vbox id="tabboxes"> | |
| 15 | |
| 16 <tabbox id="tabbox"> | |
| 17 <tabs id="tabs"> | |
| 18 <tab id="tab1" label="Tab 1"/> | |
| 19 <tab id="tab2" label="Tab 2"/> | |
| 20 </tabs> | |
| 21 <tabpanels id="tabpanels"> | |
| 22 <button id="panel1" label="Panel 1"/> | |
| 23 <button id="panel2" label="Panel 2"/> | |
| 24 </tabpanels> | |
| 25 </tabbox> | |
| 26 | |
| 27 <tabbox id="tabbox-initwithvalue"> | |
| 28 <tabs id="tabs-initwithvalue" value="two"> | |
| 29 <tab label="Tab 1" value="one"/> | |
| 30 <tab label="Tab 2" value="two"/> | |
| 31 <tab label="Tab 3" value="three"/> | |
| 32 </tabs> | |
| 33 <tabpanels id="tabpanels-initwithvalue"> | |
| 34 <button label="Panel 1"/> | |
| 35 <button label="Panel 2"/> | |
| 36 <button label="Panel 3"/> | |
| 37 </tabpanels> | |
| 38 </tabbox> | |
| 39 | |
| 40 <tabbox id="tabbox-initwithselected"> | |
| 41 <tabs id="tabs-initwithselected" value="two"> | |
| 42 <tab label="Tab 1" value="one"/> | |
| 43 <tab label="Tab 2" value="two"/> | |
| 44 <tab label="Tab 3" value="three" selected="true"/> | |
| 45 </tabs> | |
| 46 <tabpanels id="tabpanels-initwithselected"> | |
| 47 <button label="Panel 1"/> | |
| 48 <button label="Panel 2"/> | |
| 49 <button label="Panel 3"/> | |
| 50 </tabpanels> | |
| 51 </tabbox> | |
| 52 | |
| 53 </vbox> | |
| 54 | |
| 55 <tabbox id="tabbox-nofocus"> | |
| 56 <textbox id="textbox-extra" hidden="true"/> | |
| 57 <tabs> | |
| 58 <tab label="Tab 1" value="one"/> | |
| 59 <tab id="tab-nofocus" label="Tab 2" value="two"/> | |
| 60 </tabs> | |
| 61 <tabpanels> | |
| 62 <tabpanel> | |
| 63 <button id="tab-nofocus-button" label="Label"/> | |
| 64 </tabpanel> | |
| 65 <tabpanel id="tabpanel-nofocusinpaneltab"> | |
| 66 <label id="tablabel" value="Label"/> | |
| 67 </tabpanel> | |
| 68 </tabpanels> | |
| 69 </tabbox> | |
| 70 | |
| 71 <!-- test results are displayed in the html:body --> | |
| 72 <body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/> | |
| 73 | |
| 74 <!-- test code goes here --> | |
| 75 <script type="application/javascript"><![CDATA[ | |
| 76 | |
| 77 SimpleTest.waitForExplicitFinish(); | |
| 78 | |
| 79 function test_tabbox() | |
| 80 { | |
| 81 var tabbox = document.getElementById("tabbox"); | |
| 82 var tabs = document.getElementById("tabs"); | |
| 83 var tabpanels = document.getElementById("tabpanels"); | |
| 84 | |
| 85 test_tabbox_State(tabbox, "tabbox initial", 0, tabs.firstChild, tabpanels.firstChild); | |
| 86 | |
| 87 // check the selectedIndex property | |
| 88 tabbox.selectedIndex = 1; | |
| 89 test_tabbox_State(tabbox, "tabbox selectedIndex 1", 1, tabs.lastChild, tabpanels.lastChild); | |
| 90 | |
| 91 tabbox.selectedIndex = 2; | |
| 92 test_tabbox_State(tabbox, "tabbox selectedIndex 2", 1, tabs.lastChild, tabpanels.lastChild); | |
| 93 | |
| 94 // tabbox must have a selection, so setting to -1 should do nothing | |
| 95 tabbox.selectedIndex = -1; | |
| 96 test_tabbox_State(tabbox, "tabbox selectedIndex -1", 1, tabs.lastChild, tabpanels.lastChild); | |
| 97 | |
| 98 // check the selectedTab property | |
| 99 tabbox.selectedTab = tabs.firstChild; | |
| 100 test_tabbox_State(tabbox, "tabbox selected", 0, tabs.firstChild, tabpanels.firstChild); | |
| 101 | |
| 102 // setting selectedTab to null should not do anything | |
| 103 tabbox.selectedTab = null; | |
| 104 test_tabbox_State(tabbox, "tabbox selectedTab null", 0, tabs.firstChild, tabpanels.firstChild); | |
| 105 | |
| 106 // check the selectedPanel property | |
| 107 tabbox.selectedPanel = tabpanels.lastChild; | |
| 108 test_tabbox_State(tabbox, "tabbox selectedPanel", 0, tabs.firstChild, tabpanels.lastChild); | |
| 109 | |
| 110 // setting selectedPanel to null should not do anything | |
| 111 tabbox.selectedPanel = null; | |
| 112 test_tabbox_State(tabbox, "tabbox selectedPanel null", 0, tabs.firstChild, tabpanels.lastChild); | |
| 113 | |
| 114 tabbox.selectedIndex = 0; | |
| 115 test_tabpanels(tabpanels, tabbox); | |
| 116 | |
| 117 tabs.removeChild(tabs.firstChild); | |
| 118 tabs.removeChild(tabs.firstChild); | |
| 119 | |
| 120 test_tabs(tabs); | |
| 121 | |
| 122 test_tabbox_focus(); | |
| 123 } | |
| 124 | |
| 125 function test_tabpanels(tabpanels, tabbox) | |
| 126 { | |
| 127 var tab = tabbox.selectedTab; | |
| 128 | |
| 129 // changing the selection on the tabpanels should not affect the tabbox | |
| 130 // or tabs within | |
| 131 // check the selectedIndex property | |
| 132 tabpanels.selectedIndex = 1; | |
| 133 test_tabbox_State(tabbox, "tabpanels tabbox selectedIndex 1", 0, tab, tabpanels.lastChild); | |
| 134 test_tabpanels_State(tabpanels, "tabpanels selectedIndex 1", 1, tabpanels.lastChild); | |
| 135 | |
| 136 tabpanels.selectedIndex = 0; | |
| 137 test_tabbox_State(tabbox, "tabpanels tabbox selectedIndex 2", 0, tab, tabpanels.firstChild); | |
| 138 test_tabpanels_State(tabpanels, "tabpanels selectedIndex 2", 0, tabpanels.firstChild); | |
| 139 | |
| 140 // setting selectedIndex to -1 should do nothing | |
| 141 tabpanels.selectedIndex = 1; | |
| 142 tabpanels.selectedIndex = -1; | |
| 143 test_tabbox_State(tabbox, "tabpanels tabbox selectedIndex -1", 0, tab, tabpanels.lastChild); | |
| 144 test_tabpanels_State(tabpanels, "tabpanels selectedIndex -1", 1, tabpanels.lastChild); | |
| 145 | |
| 146 // check the tabpanels.selectedPanel property | |
| 147 tabpanels.selectedPanel = tabpanels.lastChild; | |
| 148 test_tabbox_State(tabbox, "tabpanels tabbox selectedPanel", 0, tab, tabpanels.lastChild); | |
| 149 test_tabpanels_State(tabpanels, "tabpanels selectedPanel", 1, tabpanels.lastChild); | |
| 150 | |
| 151 // check setting the tabpanels.selectedPanel property to null | |
| 152 tabpanels.selectedPanel = null; | |
| 153 test_tabbox_State(tabbox, "tabpanels selectedPanel null", 0, tab, tabpanels.lastChild); | |
| 154 } | |
| 155 | |
| 156 function test_tabs(tabs) | |
| 157 { | |
| 158 test_nsIDOMXULSelectControlElement(tabs, "tab", "tabs"); | |
| 159 // XXXndeakin would test the UI aspect of tabs, but the mouse | |
| 160 // events on tabs are fired in a timeout causing the generic | |
| 161 // test_nsIDOMXULSelectControlElement_UI method not to work | |
| 162 // test_nsIDOMXULSelectControlElement_UI(tabs, null); | |
| 163 } | |
| 164 | |
| 165 function test_tabbox_State(tabbox, testid, index, tab, panel) | |
| 166 { | |
| 167 is(tabbox.selectedIndex, index, testid + " selectedIndex"); | |
| 168 is(tabbox.selectedTab, tab, testid + " selectedTab"); | |
| 169 is(tabbox.selectedPanel, panel, testid + " selectedPanel"); | |
| 170 } | |
| 171 | |
| 172 function test_tabpanels_State(tabpanels, testid, index, panel) | |
| 173 { | |
| 174 is(tabpanels.selectedIndex, index, testid + " selectedIndex"); | |
| 175 is(tabpanels.selectedPanel, panel, testid + " selectedPanel"); | |
| 176 } | |
| 177 | |
| 178 function test_tabbox_focus() | |
| 179 { | |
| 180 $("tabboxes").hidden = true; | |
| 181 $(document.activeElement).blur(); | |
| 182 | |
| 183 var tabbox = $("tabbox-nofocus"); | |
| 184 var tab = $("tab-nofocus"); | |
| 185 | |
| 186 when_tab_focused(tab, function () { | |
| 187 ok(document.activeElement, tab, "focus in tab with no focusable elements"); | |
| 188 | |
| 189 tabbox.selectedIndex = 0; | |
| 190 $("tab-nofocus-button").focus(); | |
| 191 | |
| 192 when_tab_focused(tab, function () { | |
| 193 ok(document.activeElement, tab, "focus in tab with no focusable elements, but with something in another tab focused"); | |
| 194 | |
| 195 var textboxExtra = $("textbox-extra"); | |
| 196 textboxExtra.addEventListener("focus", function () { | |
| 197 textboxExtra.removeEventListener("focus", arguments.callee, true); | |
| 198 ok(document.activeElement, textboxExtra, "focus in tab with focus currently in textbox that is sibling of tabs"); | |
| 199 | |
| 200 SimpleTest.finish(); | |
| 201 }, true); | |
| 202 | |
| 203 tabbox.selectedIndex = 0; | |
| 204 textboxExtra.hidden = false; | |
| 205 synthesizeMouseAtCenter(tab, { }); | |
| 206 }); | |
| 207 | |
| 208 synthesizeMouseAtCenter(tab, { }); | |
| 209 }); | |
| 210 | |
| 211 synthesizeMouseAtCenter(tab, { }); | |
| 212 } | |
| 213 | |
| 214 function when_tab_focused(tab, callback) { | |
| 215 tab.addEventListener("focus", function onFocused() { | |
| 216 tab.removeEventListener("focus", onFocused, true); | |
| 217 SimpleTest.executeSoon(callback); | |
| 218 }, true); | |
| 219 } | |
| 220 | |
| 221 ]]> | |
| 222 </script> | |
| 223 | |
| 224 </window> |
