~testplan-team/testplan/source-collection

« back to all changes in this revision

Viewing changes to htmlunit-2.6/src/test/resources/jquery/1.2.6/test/unit/fx.js

  • Committer: edA-qa mort-ora-y
  • Date: 2010-04-07 10:54:57 UTC
  • Revision ID: eda-qa@disemia.com-20100407105457-g46bvbsrjqtjujab
updating hmltunit src

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
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
                equals( 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
        equals(o, "visible", "Overflow should be visible: " + o);
 
240
        equals(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
                                        equals( this.style.display, "block", "Showing, display should block: " + this.style.display);
 
302
                                        
 
303
                                if ( t_w == "hide"||t_w == "show" )
 
304
                                        equals(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
                                        equals(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
                                        equals(cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o);
 
314
                                        
 
315
                                if ( t_w == "hide" )
 
316
                                        equals(this.style.display, "none", "Hiding, display should be none: " + this.style.display);
 
317
                                        
 
318
                                if ( t_o.constructor == Number ) {
 
319
                                        equals(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
                                        equals(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
                                        equals(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
                equals( 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;