offset now uses clientLeft and clientTop instead of calculating html border in IE
[jquery.git] / test / unit / fx.js
1 module("fx");
2
3 test("animate(Hash, Object, Function)", function() {
4         expect(1);
5         stop();
6         var hash = {opacity: 'show'};
7         var hashCopy = $.extend({}, hash);
8         $('#foo').animate(hash, 0, function() {
9                 ok( hash.opacity == hashCopy.opacity, 'Check if animate changed the hash parameter' );
10                 start();
11         });
12 });
13
14 test("animate option (queue === false)", function () {
15         expect(1);
16         stop();
17
18         var order = [];
19
20         var $foo = $("#foo");
21         $foo.animate({width:'100px'}, 200, function () {
22                 // should finish after unqueued animation so second
23                 order.push(2);
24         });
25         $foo.animate({fontSize:'2em'}, {queue:false, duration:10, complete:function () {
26                 // short duration and out of queue so should finish first
27                 order.push(1);
28         }});
29         $foo.animate({height:'100px'}, 10, function() {
30                 // queued behind the first animation so should finish third 
31                 order.push(3);
32                 isSet( order, [ 1, 2, 3], "Animations finished in the correct order" );
33                 start();
34         });
35 });
36
37 test("queue() defaults to 'fx' type", function () {
38         expect(2);
39         stop();
40
41         var $foo = $("#foo");
42         $foo.queue("fx", [ "sample", "array" ]);
43         var arr = $foo.queue();
44         isSet(arr, [ "sample", "array" ], "queue() got an array set with type 'fx'");
45         $foo.queue([ "another", "one" ]);
46         var arr = $foo.queue("fx");
47         isSet(arr, [ "another", "one" ], "queue('fx') got an array set with no type");
48         // clean up after test
49         $foo.queue([]);
50
51         start();
52 });
53
54 test("stop()", function() {
55         expect(3);
56         stop();
57
58         var $foo = $("#nothiddendiv");
59         var w = 0;
60         $foo.hide().width(200).width();
61
62         $foo.animate({ width:'show' }, 1000);
63         setTimeout(function(){
64                 var nw = $foo.width();
65                 ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
66                 $foo.stop();
67
68                 nw = $foo.width();
69                 ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
70                 setTimeout(function(){
71                         equals( nw, $foo.width(), "The animation didn't continue" );
72                         start();
73                 }, 100);
74         }, 100);
75 });
76
77 test("stop() - several in queue", function() {
78         expect(4);
79         stop();
80
81         var $foo = $("#nothiddendiv");
82         var w = 0;
83         $foo.hide().width(200).width();
84
85         $foo.animate({ width:'show' }, 1000);
86         $foo.animate({ width:'hide' }, 1000);
87         $foo.animate({ width:'show' }, 1000);
88         setTimeout(function(){
89                 equals( $foo.queue().length, 3, "All 3 still in the queue" );
90                 var nw = $foo.width();
91                 ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
92                 $foo.stop();
93
94                 nw = $foo.width();
95                 ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
96                 equals( $foo.queue().length, 2, "The next animation continued" );
97                 $foo.stop(true);
98                 start();
99         }, 100);
100 });
101
102 test("stop(clearQueue)", function() {
103         expect(4);
104         stop();
105
106         var $foo = $("#nothiddendiv");
107         var w = 0;
108         $foo.hide().width(200).width();
109
110         $foo.animate({ width:'show' }, 1000);
111         $foo.animate({ width:'hide' }, 1000);
112         $foo.animate({ width:'show' }, 1000);
113         setTimeout(function(){
114                 var nw = $foo.width();
115                 ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
116                 $foo.stop(true);
117
118                 nw = $foo.width();
119                 ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
120
121                 equals( $foo.queue().length, 0, "The animation queue was cleared" );
122                 setTimeout(function(){
123                         equals( nw, $foo.width(), "The animation didn't continue" );
124                         start();
125                 }, 100);
126         }, 100);
127 });
128
129 test("stop(clearQueue, gotoEnd)", function() {
130         expect(3);
131         stop();
132
133         var $foo = $("#nothiddendiv");
134         var w = 0;
135         $foo.hide().width(200).width();
136
137         $foo.animate({ width:'show' }, 1000);
138         $foo.animate({ width:'hide' }, 1000);
139         $foo.animate({ width:'show' }, 1000);
140         $foo.animate({ width:'hide' }, 1000);
141         setTimeout(function(){
142                 var nw = $foo.width();
143                 ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
144                 $foo.stop(false, true);
145
146                 nw = $foo.width();
147                 equals( nw, 200, "Stop() reset the animation" );
148
149                 setTimeout(function(){
150                         equals( $foo.queue().length, 3, "The next animation continued" );
151                         $foo.stop(true);
152                         start();
153                 }, 100);
154         }, 100);
155 });
156
157 test("toggle()", function() {
158         expect(3);
159         var x = $("#foo");
160         ok( x.is(":visible"), "is visible" );
161         x.toggle();
162         ok( x.is(":hidden"), "is hidden" );
163         x.toggle();
164         ok( x.is(":visible"), "is visible again" );
165 });
166
167 var visible = {
168         Normal: function(elem){},
169         "CSS Hidden": function(elem){
170                 $(this).addClass("hidden");
171         },
172         "JS Hidden": function(elem){
173                 $(this).hide();
174         }
175 };
176
177 var from = {
178         "CSS Auto": function(elem,prop){
179                 $(elem).addClass("auto" + prop)
180                         .text("This is a long string of text.");
181                 return "";
182         },
183         "JS Auto": function(elem,prop){
184                 $(elem).css(prop,"auto")
185                         .text("This is a long string of text.");
186                 return "";
187         },
188         "CSS 100": function(elem,prop){
189                 $(elem).addClass("large" + prop);
190                 return "";
191         },
192         "JS 100": function(elem,prop){
193                 $(elem).css(prop,prop == "opacity" ? 1 : "100px");
194                 return prop == "opacity" ? 1 : 100;
195         },
196         "CSS 50": function(elem,prop){
197                 $(elem).addClass("med" + prop);
198                 return "";
199         },
200         "JS 50": function(elem,prop){
201                 $(elem).css(prop,prop == "opacity" ? 0.50 : "50px");
202                 return prop == "opacity" ? 0.5 : 50;
203         },
204         "CSS 0": function(elem,prop){
205                 $(elem).addClass("no" + prop);
206                 return "";
207         },
208         "JS 0": function(elem,prop){
209                 $(elem).css(prop,prop == "opacity" ? 0 : "0px");
210                 return 0;
211         }
212 };
213
214 var to = {
215         "show": function(elem,prop){
216                 $(elem).hide().addClass("wide"+prop);
217                 return "show";
218         },
219         "hide": function(elem,prop){
220                 $(elem).addClass("wide"+prop);
221                 return "hide";
222         },
223         "100": function(elem,prop){
224                 $(elem).addClass("wide"+prop);
225                 return prop == "opacity" ? 1 : 100;
226         },
227         "50": function(elem,prop){
228                 return prop == "opacity" ? 0.50 : 50;
229         },
230         "0": function(elem,prop){
231                 $(elem).addClass("noback");
232                 return 0;
233         }
234 };
235
236 function checkOverflowDisplay(){
237         var o = jQuery.css( this, "overflow" );
238
239         ok(o == "visible", "Overflow should be visible: " + o);
240         ok(jQuery.css( this, "display" ) == "inline", "Display shouldn't be tampered with.");
241
242         start();
243 }
244
245 test("JS Overflow and Display", function() {
246         expect(2);
247         stop();
248         makeTest( "JS Overflow and Display" )
249                 .addClass("widewidth")
250                 .css({ overflow: "visible", display: "inline" })
251                 .addClass("widewidth")
252                 .text("Some sample text.")
253                 .before("text before")
254                 .after("text after")
255                 .animate({ opacity: 0.5 }, "slow", checkOverflowDisplay);
256 });
257                 
258 test("CSS Overflow and Display", function() {
259         expect(2);
260         stop();
261         makeTest( "CSS Overflow and Display" )
262                 .addClass("overflow inline")
263                 .addClass("widewidth")
264                 .text("Some sample text.")
265                 .before("text before")
266                 .after("text after")
267                 .animate({ opacity: 0.5 }, "slow", checkOverflowDisplay);
268 });
269
270 jQuery.each( from, function(fn, f){
271         jQuery.each( to, function(tn, t){
272                 test(fn + " to " + tn, function() {
273                         var elem = makeTest( fn + " to " + tn );
274         
275                         var t_w = t( elem, "width" );
276                         var f_w = f( elem, "width" );
277                         var t_h = t( elem, "height" );
278                         var f_h = f( elem, "height" );
279                         var t_o = t( elem, "opacity" );
280                         var f_o = f( elem, "opacity" );
281                         
282                         var num = 0;
283                         
284                         if ( t_h == "show" ) num++;
285                         if ( t_w == "show" ) num++;
286                         if ( t_w == "hide"||t_w == "show" ) num++;
287                         if ( t_h == "hide"||t_h == "show" ) num++;
288                         if ( t_o == "hide"||t_o == "show" ) num++;
289                         if ( t_w == "hide" ) num++;
290                         if ( t_o.constructor == Number ) num += 2;
291                         if ( t_w.constructor == Number ) num += 2;
292                         if ( t_h.constructor == Number ) num +=2;
293                         
294                         expect(num);
295                         stop();
296         
297                         var anim = { width: t_w, height: t_h, opacity: t_o };
298         
299                         elem.animate(anim, 50, function(){
300                                 if ( t_w == "show" )
301                                         ok( this.style.display == "block", "Showing, display should block: " + this.style.display);
302                                         
303                                 if ( t_w == "hide"||t_w == "show" )
304                                         ok(this.style.width.indexOf(f_w) == 0, "Width must be reset to " + f_w + ": " + this.style.width);
305                                         
306                                 if ( t_h == "hide"||t_h == "show" )
307                                         ok(this.style.height.indexOf(f_h) == 0, "Height must be reset to " + f_h + ": " + this.style.height);
308                                         
309                                 var cur_o = jQuery.attr(this.style, "opacity");
310                                 if ( cur_o !== "" ) cur_o = parseFloat( cur_o );
311         
312                                 if ( t_o == "hide"||t_o == "show" )
313                                         ok(cur_o == f_o, "Opacity must be reset to " + f_o + ": " + cur_o);
314                                         
315                                 if ( t_w == "hide" )
316                                         ok(this.style.display == "none", "Hiding, display should be none: " + this.style.display);
317                                         
318                                 if ( t_o.constructor == Number ) {
319                                         ok(cur_o == t_o, "Final opacity should be " + t_o + ": " + cur_o);
320                                         
321                                         ok(jQuery.curCSS(this, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o);
322                                 }
323                                         
324                                 if ( t_w.constructor == Number ) {
325                                         ok(this.style.width == t_w + "px", "Final width should be " + t_w + ": " + this.style.width);
326                                         
327                                         var cur_w = jQuery.css(this,"width");
328
329                                         ok(this.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w);
330                                 }
331                                         
332                                 if ( t_h.constructor == Number ) {
333                                         ok(this.style.height == t_h + "px", "Final height should be " + t_h + ": " + this.style.height);
334                                         
335                                         var cur_h = jQuery.css(this,"height");
336
337                                         ok(this.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w);
338                                 }
339                                 
340                                 if ( t_h == "show" ) {
341                                         var old_h = jQuery.curCSS(this, "height");
342                                         $(elem).append("<br/>Some more text<br/>and some more...");
343                                         ok(old_h != jQuery.css(this, "height" ), "Make sure height is auto.");
344                                 }
345         
346                                 start();
347                         });
348                 });
349         });
350 });
351
352 var check = ['opacity','height','width','display','overflow'];
353
354 jQuery.fn.saveState = function(){
355         expect(check.length);
356         stop();
357         return this.each(function(){
358                 var self = this;
359                 self.save = {};
360                 jQuery.each(check, function(i,c){
361                         self.save[c] = jQuery.css(self,c);
362                 });
363         });
364 };
365
366 function checkState(){
367         var self = this;
368         jQuery.each(this.save, function(c,v){
369                 var cur = jQuery.css(self,c);
370                 ok( v == cur, "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")");
371         });
372         start();
373 }
374
375 // Chaining Tests
376 test("Chain fadeOut fadeIn", function() {
377         $('#fadein div').saveState().fadeOut('fast').fadeIn('fast',checkState);
378 });
379 test("Chain fadeIn fadeOut", function() {
380         $('#fadeout div').saveState().fadeIn('fast').fadeOut('fast',checkState);
381 });
382
383 test("Chain hide show", function() {
384         $('#show div').saveState().hide('fast').show('fast',checkState);
385 });
386 test("Chain show hide", function() {
387         $('#hide div').saveState().show('fast').hide('fast',checkState);
388 });
389
390 test("Chain toggle in", function() {
391         $('#togglein div').saveState().toggle('fast').toggle('fast',checkState);
392 });
393 test("Chain toggle out", function() {
394         $('#toggleout div').saveState().toggle('fast').toggle('fast',checkState);
395 });
396
397 test("Chain slideDown slideUp", function() {
398         $('#slidedown div').saveState().slideDown('fast').slideUp('fast',checkState);
399 });
400 test("Chain slideUp slideDown", function() {
401         $('#slideup div').saveState().slideUp('fast').slideDown('fast',checkState);
402 });
403
404 test("Chain slideToggle in", function() {
405         $('#slidetogglein div').saveState().slideToggle('fast').slideToggle('fast',checkState);
406 });
407 test("Chain slideToggle out", function() {
408         $('#slidetoggleout div').saveState().slideToggle('fast').slideToggle('fast',checkState);
409 });
410
411 function makeTest( text ){
412         var elem = $("<div></div>")
413                 .attr("id", "test" + makeTest.id++)
414                 .addClass("box");
415
416         $("<h4></h4>")
417                 .text( text )
418                 .appendTo("#fx-tests")
419                 .click(function(){
420                         $(this).next().toggle();
421                 })
422                 .after( elem );
423
424         return elem;
425 }
426
427 makeTest.id = 1;