imported the whole jquery-ui package, refreshed with 1.10.2
[myslice.git] / third-party / jquery-ui-1.10.2 / tests / unit / tabs / tabs_options.js
1 (function( $ ) {
2
3 var disabled = TestHelpers.tabs.disabled,
4         equalHeight = TestHelpers.tabs.equalHeight,
5         state = TestHelpers.tabs.state;
6
7 module( "tabs: options" );
8
9 test( "{ active: default }", function() {
10         expect( 6 );
11
12         var element = $( "#tabs1" ).tabs();
13         equal( element.tabs( "option", "active" ), 0, "should be 0 by default" );
14         state( element, 1, 0, 0 );
15         element.tabs( "destroy" );
16
17         location.hash = "#fragment-3";
18         element = $( "#tabs1" ).tabs();
19         equal( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
20         state( element, 0, 0, 1 );
21         element.tabs( "destroy" );
22
23         location.hash = "#custom-id";
24         element = $( "#tabs2" ).tabs();
25         equal( element.tabs( "option", "active" ), 3, "should be 3 based on URL" );
26         state( element, 0, 0, 0, 1, 0 );
27         element.tabs( "destroy" );
28         location.hash = "#";
29 });
30
31 test( "{ active: false }", function() {
32         expect( 7 );
33
34         var element = $( "#tabs1" ).tabs({
35                 active: false,
36                 collapsible: true
37         });
38         state( element, 0, 0, 0 );
39         equal( element.find( ".ui-tabs-nav .ui-state-active" ).length, 0, "no tabs selected" );
40         strictEqual( element.tabs( "option", "active" ), false );
41
42         element.tabs( "option", "collapsible", false );
43         state( element, 1, 0, 0 );
44         equal( element.tabs( "option", "active" ), 0 );
45
46         element.tabs( "destroy" );
47         element.tabs({
48                 active: false
49         });
50         state( element, 1, 0, 0 );
51         strictEqual( element.tabs( "option", "active" ), 0 );
52 });
53
54 test( "{ active: Number }", function() {
55         expect( 8 );
56
57         var element = $( "#tabs1" ).tabs({
58                 active: 2
59         });
60         equal( element.tabs( "option", "active" ), 2 );
61         state( element, 0, 0, 1 );
62
63         element.tabs( "option", "active", 0 );
64         equal( element.tabs( "option", "active" ), 0 );
65         state( element, 1, 0, 0 );
66
67         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click();
68         equal( element.tabs( "option", "active" ), 1 );
69         state( element, 0, 1, 0 );
70
71         element.tabs( "option", "active", 10 );
72         equal( element.tabs( "option", "active" ), 1 );
73         state( element, 0, 1, 0 );
74 });
75
76 test( "{ active: -Number }", function() {
77         expect( 8 );
78
79         var element = $( "#tabs1" ).tabs({
80                 active: -1
81         });
82         equal( element.tabs( "option", "active" ), 2 );
83         state( element, 0, 0, 1 );
84
85         element.tabs( "option", "active", -2 );
86         equal( element.tabs( "option", "active" ), 1 );
87         state( element, 0, 1, 0 );
88
89         element.tabs( "option", "active", -10 );
90         equal( element.tabs( "option", "active" ), 1 );
91         state( element, 0, 1, 0 );
92
93         element.tabs( "option", "active", -3 );
94         equal( element.tabs( "option", "active" ), 0 );
95         state( element, 1, 0, 0 );
96 });
97
98 test( "active - mismatched tab/panel order", function() {
99         expect( 3 );
100
101         location.hash = "#tabs7-2";
102         var element = $( "#tabs7" ).tabs();
103         equal( element.tabs( "option", "active" ), 1, "should be 1 based on URL" );
104         state( element, 0, 1 );
105         element.tabs( "option", "active", 0 );
106         state( element, 1, 0 );
107         location.hash = "#";
108 });
109
110 test( "{ collapsible: false }", function() {
111         expect( 4 );
112
113         var element = $( "#tabs1" ).tabs({
114                 active: 1
115         });
116         element.tabs( "option", "active", false );
117         equal( element.tabs( "option", "active" ), 1 );
118         state( element, 0, 1, 0 );
119
120         element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click();
121         equal( element.tabs( "option", "active" ), 1 );
122         state( element, 0, 1, 0 );
123 });
124
125 test( "{ collapsible: true }", function() {
126         expect( 6 );
127
128         var element = $( "#tabs1" ).tabs({
129                 active: 1,
130                 collapsible: true
131         });
132
133         element.tabs( "option", "active", false );
134         equal( element.tabs( "option", "active" ), false );
135         state( element, 0, 0, 0 );
136
137         element.tabs( "option", "active", 1 );
138         equal( element.tabs( "option", "active" ), 1 );
139         state( element, 0, 1, 0 );
140
141         element.find( ".ui-state-active .ui-tabs-anchor" ).click();
142         equal( element.tabs( "option", "active" ), false );
143         state( element, 0, 0, 0 );
144 });
145
146 test( "disabled", function() {
147         expect( 10 );
148
149         // fully enabled by default
150         var element = $( "#tabs1" ).tabs();
151         disabled( element, false );
152
153         // disable single tab
154         element.tabs( "option", "disabled", [ 1 ] );
155         disabled( element, [ 1 ] );
156
157         // disabled active tab
158         element.tabs( "option", "disabled", [ 0, 1 ] );
159         disabled( element, [ 0, 1 ] );
160
161         // disable all tabs
162         element.tabs( "option", "disabled", [ 0, 1, 2 ] );
163         disabled( element, true );
164
165         // enable all tabs
166         element.tabs( "option", "disabled", [] );
167         disabled( element, false );
168 });
169
170 test( "{ event: null }", function() {
171         expect( 5 );
172
173         var element = $( "#tabs1" ).tabs({
174                 event: null
175         });
176         state( element, 1, 0, 0 );
177
178         element.tabs( "option", "active", 1 );
179         equal( element.tabs( "option", "active" ), 1 );
180         state( element, 0, 1, 0 );
181
182         // ensure default click handler isn't bound
183         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).click();
184         equal( element.tabs( "option", "active" ), 1 );
185         state( element, 0, 1, 0 );
186 });
187
188 test( "{ event: custom }", function() {
189         expect( 11 );
190
191         var element = $( "#tabs1" ).tabs({
192                 event: "custom1 custom2"
193         });
194         state( element, 1, 0, 0 );
195
196         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
197         equal( element.tabs( "option", "active" ), 1 );
198         state( element, 0, 1, 0 );
199
200         // ensure default click handler isn't bound
201         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" );
202         equal( element.tabs( "option", "active" ), 1 );
203         state( element, 0, 1, 0 );
204
205         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "custom2" );
206         equal( element.tabs( "option", "active" ), 2 );
207         state( element, 0, 0, 1 );
208
209         element.tabs( "option", "event", "custom3" );
210
211         // ensure old event handlers are unbound
212         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" );
213         equal( element.tabs( "option", "active" ), 2 );
214         state( element, 0, 0, 1 );
215
216         element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom3" );
217         equal( element.tabs( "option", "active" ), 1 );
218         state( element, 0, 1, 0 );
219 });
220
221 test( "{ heightStyle: 'auto' }", function() {
222         expect( 2 );
223         var element = $( "#tabs8" ).tabs({ heightStyle: "auto" });
224         equalHeight( element, 45 );
225 });
226
227 test( "{ heightStyle: 'content' }", function() {
228         expect( 2 );
229         var element = $( "#tabs8" ).tabs({ heightStyle: "content" }),
230                 sizes = element.find( ".ui-tabs-panel" ).map(function() {
231                         return $( this ).height();
232                 }).get();
233         equal( sizes[ 0 ], 45 );
234         equal( sizes[ 1 ], 15 );
235 });
236
237 test( "{ heightStyle: 'fill' }", function() {
238         expect( 4 );
239         $( "#tabs8Wrapper" ).height( 500 );
240         var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
241         equalHeight( element, 485 );
242         element.tabs( "destroy" );
243
244         element = $( "#tabs8" ).css({
245                 "border": "1px solid black",
246                 "padding": "1px 0"
247         });
248         element.tabs({ heightStyle: "fill" });
249         equalHeight( element, 481 );
250 });
251
252 test( "{ heightStyle: 'fill' } with sibling", function() {
253         expect( 2 );
254         $( "#tabs8Wrapper" ).height( 500 );
255         $( "<p>Lorem Ipsum</p>" )
256                 .css({
257                         height: 50,
258                         marginTop: 20,
259                         marginBottom: 30
260                 })
261                 .prependTo( "#tabs8Wrapper" );
262         var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
263         equalHeight( element, 385 );
264 });
265
266 test( "{ heightStyle: 'fill' } with multiple siblings", function() {
267         expect( 2 );
268         $( "#tabs8Wrapper" ).height( 500 );
269         $( "<p>Lorem Ipsum</p>" )
270                 .css({
271                         height: 50,
272                         marginTop: 20,
273                         marginBottom: 30
274                 })
275                 .prependTo( "#tabs8Wrapper" );
276         $( "<p>Lorem Ipsum</p>" )
277                 .css({
278                         height: 50,
279                         marginTop: 20,
280                         marginBottom: 30,
281                         position: "absolute"
282                 })
283                 .prependTo( "#tabs8Wrapper" );
284         $( "<p>Lorem Ipsum</p>" )
285                 .css({
286                         height: 25,
287                         marginTop: 10,
288                         marginBottom: 15
289                 })
290                 .prependTo( "#tabs8Wrapper" );
291         var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
292         equalHeight( element, 335 );
293 });
294
295 test( "hide and show: false", function() {
296         expect( 3 );
297         var element = $( "#tabs1" ).tabs({
298                         show: false,
299                         hide: false
300                 }),
301                 widget = element.data( "ui-tabs" ),
302                 panels = element.find( ".ui-tabs-panel" );
303         widget._show = function() {
304                 ok( false, "_show() called" );
305         };
306         widget._hide = function() {
307                 ok( false, "_hide() called" );
308         };
309
310         ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
311         element.tabs( "option", "active", 1 );
312         ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" );
313         ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" );
314 });
315
316 asyncTest( "hide and show - animation", function() {
317         expect( 5 );
318         var element = $( "#tabs1" ).tabs({
319                         show: "drop",
320                         hide: 2000
321                 }),
322                 widget = element.data( "ui-tabs" ),
323                 panels = element.find( ".ui-tabs-panel" );
324         widget._show = function( element, options, callback ) {
325                 strictEqual( element[ 0 ], panels[ 1 ], "correct element in _show()" );
326                 equal( options, "drop", "correct options in _show()" );
327                 setTimeout(function() {
328                         callback();
329                 }, 1 );
330         };
331         widget._hide = function( element, options, callback ) {
332                 strictEqual( element[ 0 ], panels[ 0 ], "correct element in _hide()" );
333                 equal( options, 2000, "correct options in _hide()" );
334                 setTimeout(function() {
335                         callback();
336                         start();
337                 }, 1 );
338         };
339
340         ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" );
341         element.tabs( "option", "active", 1 );
342 });
343
344
345 }( jQuery ) );