2009-12-18 17:01:19 +01:00
module ( "effects" ) ;
2006-11-18 14:37:01 +01:00
2010-10-05 20:28:43 +02:00
test ( "sanity check" , function ( ) {
expect ( 1 ) ;
ok ( jQuery ( "#dl:visible, #main:visible, #foo:visible" ) . length === 3 , "QUnit state is correct for testing effects" ) ;
} ) ;
2009-03-18 22:15:38 +01:00
test ( "show()" , function ( ) {
2010-01-20 00:27:20 +01:00
expect ( 23 ) ;
2009-03-18 22:15:38 +01:00
var pass = true , div = jQuery ( "#main div" ) ;
div . show ( ) . each ( function ( ) {
if ( this . style . display == "none" ) pass = false ;
} ) ;
ok ( pass , "Show" ) ;
2010-01-20 00:27:20 +01:00
var speeds = {
"null speed" : null ,
"undefined speed" : undefined ,
"empty string speed" : "" ,
"false speed" : false
} ;
jQuery . each ( speeds , function ( name , speed ) {
pass = true ;
div . hide ( ) . show ( speed ) . each ( function ( ) {
if ( this . style . display == "none" ) pass = false ;
} ) ;
ok ( pass , "Show with " + name ) ;
} ) ;
jQuery . each ( speeds , function ( name , speed ) {
pass = true ;
div . hide ( ) . show ( speed , function ( ) {
pass = false ;
} ) ;
2010-01-21 16:18:54 +01:00
ok ( pass , "Show with " + name + " does not call animate callback" ) ;
2009-11-13 00:08:33 +01:00
} ) ;
2010-10-05 21:53:35 +02:00
// #show-tests * is set display: none in CSS
2010-10-09 03:29:41 +02:00
jQuery ( "#main" ) . append ( '<div id="show-tests"><div><p><a href="#"></a></p><code></code><pre></pre><span></span></div><table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table><ul><li></li></ul></div><table id="test-table"></table>' ) ;
var old = jQuery ( "#test-table" ) . show ( ) . css ( "display" ) !== "table" ;
jQuery ( "#test-table" ) . remove ( ) ;
2009-03-18 22:15:38 +01:00
var test = {
"div" : "block" ,
"p" : "block" ,
"a" : "inline" ,
"code" : "inline" ,
"pre" : "block" ,
"span" : "inline" ,
"table" : old ? "block" : "table" ,
"thead" : old ? "block" : "table-header-group" ,
"tbody" : old ? "block" : "table-row-group" ,
"tr" : old ? "block" : "table-row" ,
"th" : old ? "block" : "table-cell" ,
"td" : old ? "block" : "table-cell" ,
"ul" : "block" ,
"li" : old ? "block" : "list-item"
} ;
jQuery . each ( test , function ( selector , expected ) {
var elem = jQuery ( selector , "#show-tests" ) . show ( ) ;
equals ( elem . css ( "display" ) , expected , "Show using correct display type for " + selector ) ;
} ) ;
} ) ;
2009-12-06 03:06:14 +01:00
test ( "show(Number) - other displays" , function ( ) {
expect ( 15 ) ;
2010-07-28 17:19:01 +02:00
QUnit . reset ( ) ;
2009-12-06 03:06:14 +01:00
stop ( ) ;
2010-10-05 21:53:35 +02:00
// #show-tests * is set display: none in CSS
2010-10-09 03:29:41 +02:00
jQuery ( "#main" ) . append ( '<div id="show-tests"><div><p><a href="#"></a></p><code></code><pre></pre><span></span></div><table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table><ul><li></li></ul></div><table id="test-table"></table>' ) ;
2009-12-06 03:06:14 +01:00
2010-10-09 03:29:41 +02:00
var old = jQuery ( "#test-table" ) . show ( ) . css ( "display" ) !== "table" ,
2009-12-06 03:06:14 +01:00
num = 0 ;
2010-10-09 03:29:41 +02:00
jQuery ( "#test-table" ) . remove ( ) ;
2009-12-06 03:06:14 +01:00
var test = {
"div" : "block" ,
"p" : "block" ,
"a" : "inline" ,
"code" : "inline" ,
"pre" : "block" ,
"span" : "inline" ,
"table" : old ? "block" : "table" ,
"thead" : old ? "block" : "table-header-group" ,
"tbody" : old ? "block" : "table-row-group" ,
"tr" : old ? "block" : "table-row" ,
"th" : old ? "block" : "table-cell" ,
"td" : old ? "block" : "table-cell" ,
"ul" : "block" ,
"li" : old ? "block" : "list-item"
} ;
jQuery . each ( test , function ( selector , expected ) {
2010-10-09 03:29:41 +02:00
var elem = jQuery ( selector , "#show-tests" ) . show ( 1 , function ( ) {
2009-12-06 03:06:14 +01:00
equals ( elem . css ( "display" ) , expected , "Show using correct display type for " + selector ) ;
if ( ++ num === 15 ) {
start ( ) ;
}
} ) ;
} ) ;
} ) ;
2007-03-25 20:06:18 +02:00
test ( "animate(Hash, Object, Function)" , function ( ) {
2007-12-20 21:40:20 +01:00
expect ( 1 ) ;
2006-11-18 14:37:01 +01:00
stop ( ) ;
var hash = { opacity : 'show' } ;
2008-05-29 01:18:25 +02:00
var hashCopy = jQuery . extend ( { } , hash ) ;
jQuery ( '#foo' ) . animate ( hash , 0 , function ( ) {
2008-05-06 20:56:02 +02:00
equals ( hash . opacity , hashCopy . opacity , 'Check if animate changed the hash parameter' ) ;
2007-12-20 21:40:20 +01:00
start ( ) ;
2007-12-07 02:52:21 +01:00
} ) ;
2007-01-09 18:15:22 +01:00
} ) ;
2009-12-05 06:10:19 +01:00
test ( "animate negative height" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
jQuery ( "#foo" ) . animate ( { height : - 100 } , 100 , function ( ) {
equals ( this . offsetHeight , 0 , "Verify height." ) ;
start ( ) ;
} ) ;
} ) ;
2010-10-05 21:53:35 +02:00
test ( "animate block as inline width/height" , function ( ) {
2010-10-05 20:28:43 +02:00
expect ( 3 ) ;
2010-10-15 03:48:03 +02:00
var span = jQuery ( "<span>" ) . css ( "display" , "inline-block" ) . appendTo ( "body" ) ,
expected = span . css ( "display" ) ;
span . remove ( ) ;
if ( jQuery . support . inlineBlockNeedsLayout || expected === "inline-block" ) {
stop ( ) ;
jQuery ( "#foo" ) . css ( { display : "inline" , width : '' , height : '' } ) . animate ( { width : 42 , height : 42 } , 100 , function ( ) {
equals ( jQuery ( this ) . css ( "display" ) , jQuery . support . inlineBlockNeedsLayout ? "inline" : "inline-block" , "inline-block was set on non-floated inline element when animating width/height" ) ;
equals ( this . offsetWidth , 42 , "width was animated" ) ;
equals ( this . offsetHeight , 42 , "height was animated" ) ;
start ( ) ;
} ) ;
// Browser doesn't support inline-block
} else {
ok ( true , "Browser doesn't support inline-block" ) ;
ok ( true , "Browser doesn't support inline-block" ) ;
ok ( true , "Browser doesn't support inline-block" ) ;
}
2010-10-05 20:28:43 +02:00
} ) ;
2010-10-05 21:53:35 +02:00
test ( "animate native inline width/height" , function ( ) {
expect ( 3 ) ;
2010-10-15 03:48:03 +02:00
var span = jQuery ( "<span>" ) . css ( "display" , "inline-block" ) . appendTo ( "body" ) ,
expected = span . css ( "display" ) ;
span . remove ( ) ;
if ( jQuery . support . inlineBlockNeedsLayout || expected === "inline-block" ) {
stop ( ) ;
jQuery ( "#foo" ) . css ( { display : "" , width : '' , height : '' } )
. append ( '<span>text</span>' )
. children ( 'span' )
. animate ( { width : 42 , height : 42 } , 100 , function ( ) {
equals ( jQuery ( this ) . css ( "display" ) , "inline-block" , "inline-block was set on non-floated inline element when animating width/height" ) ;
equals ( this . offsetWidth , 42 , "width was animated" ) ;
equals ( this . offsetHeight , 42 , "height was animated" ) ;
start ( ) ;
} ) ;
// Browser doesn't support inline-block
} else {
ok ( true , "Browser doesn't support inline-block" ) ;
ok ( true , "Browser doesn't support inline-block" ) ;
ok ( true , "Browser doesn't support inline-block" ) ;
}
2010-10-05 21:53:35 +02:00
} ) ;
2010-10-05 20:28:43 +02:00
test ( "animate block width/height" , function ( ) {
expect ( 3 ) ;
stop ( ) ;
jQuery ( "#foo" ) . css ( { display : "block" , width : 20 , height : 20 } ) . animate ( { width : 42 , height : 42 } , 100 , function ( ) {
equals ( jQuery ( this ) . css ( "display" ) , "block" , "inline-block was not set on block element when animating width/height" ) ;
equals ( this . offsetWidth , 42 , "width was animated" ) ;
equals ( this . offsetHeight , 42 , "height was animated" ) ;
start ( ) ;
} ) ;
} ) ;
test ( "animate table width/height" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
var displayMode = jQuery ( "#table" ) . css ( "display" ) !== "table" ? "block" : "table" ;
jQuery ( "#table" ) . animate ( { width : 42 , height : 42 } , 100 , function ( ) {
equals ( jQuery ( this ) . css ( "display" ) , displayMode , "display mode is correct" ) ;
start ( ) ;
} ) ;
} ) ;
2010-10-05 21:53:35 +02:00
test ( "animate table-row width/height" , function ( ) {
expect ( 3 ) ;
stop ( ) ;
var tr = jQuery ( "#table" )
. attr ( { "cellspacing" : 0 , "cellpadding" : 0 , "border" : 0 } )
. html ( "<tr style='height:42px;'><td style='padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
. find ( "tr" ) ;
// IE<8 uses “block” instead of the correct display type
var displayMode = tr . css ( "display" ) !== "table-row" ? "block" : "table-row" ;
tr . animate ( { width : 10 , height : 10 } , 100 , function ( ) {
equals ( jQuery ( this ) . css ( "display" ) , displayMode , "display mode is correct" ) ;
equals ( this . offsetWidth , 20 , "width animated to shrink wrap point" ) ;
equals ( this . offsetHeight , 20 , "height animated to shrink wrap point" ) ;
start ( ) ;
} ) ;
} ) ;
2010-10-05 20:28:43 +02:00
test ( "animate table-cell width/height" , function ( ) {
expect ( 3 ) ;
stop ( ) ;
var td = jQuery ( "#table" )
. attr ( { "cellspacing" : 0 , "cellpadding" : 0 , "border" : 0 } )
2010-10-05 21:53:35 +02:00
. html ( "<tr><td style='width:42px;height:42px;padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
2010-10-05 20:28:43 +02:00
. find ( "td" ) ;
// IE<8 uses “block” instead of the correct display type
var displayMode = td . css ( "display" ) !== "table-cell" ? "block" : "table-cell" ;
td . animate ( { width : 10 , height : 10 } , 100 , function ( ) {
equals ( jQuery ( this ) . css ( "display" ) , displayMode , "display mode is correct" ) ;
equals ( this . offsetWidth , 20 , "width animated to shrink wrap point" ) ;
equals ( this . offsetHeight , 20 , "height animated to shrink wrap point" ) ;
start ( ) ;
} ) ;
} ) ;
test ( "animate resets overflow-x and overflow-y when finished" , function ( ) {
expect ( 2 ) ;
stop ( ) ;
jQuery ( "#foo" )
. css ( { display : "block" , width : 20 , height : 20 , overflowX : "visible" , overflowY : "auto" } )
. animate ( { width : 42 , height : 42 } , 100 , function ( ) {
equals ( this . style . overflowX , "visible" , "overflow-x is visible" ) ;
equals ( this . style . overflowY , "auto" , "overflow-y is auto" ) ;
start ( ) ;
} ) ;
} ) ;
2009-07-21 22:48:29 +02:00
/* / / This test ends up being flaky depending upon the CPU load
2007-11-16 18:49:12 +01:00
test ( "animate option (queue === false)" , function ( ) {
2007-11-17 00:39:23 +01:00
expect ( 1 ) ;
stop ( ) ;
2007-11-16 18:49:12 +01:00
2007-11-17 00:39:23 +01:00
var order = [ ] ;
2008-05-29 01:18:25 +02:00
var $foo = jQuery ( "#foo" ) ;
2009-07-21 22:16:44 +02:00
$foo . animate ( { width : '100px' } , 3000 , function ( ) {
2007-11-17 00:39:23 +01:00
// should finish after unqueued animation so second
order . push ( 2 ) ;
2009-09-29 21:49:43 +02:00
same ( order , [ 1 , 2 ] , "Animations finished in the correct order" ) ;
2009-07-21 22:16:44 +02:00
start ( ) ;
2007-11-17 00:39:23 +01:00
} ) ;
$foo . animate ( { fontSize : '2em' } , { queue : false , duration : 10 , complete : function ( ) {
// short duration and out of queue so should finish first
order . push ( 1 ) ;
} } ) ;
2007-11-16 18:49:12 +01:00
} ) ;
2009-07-21 22:48:29 +02:00
* /
2007-11-16 18:49:12 +01:00
2009-11-07 17:22:35 +01:00
test ( "animate with no properties" , function ( ) {
2009-12-21 17:11:03 +01:00
expect ( 2 ) ;
2010-10-05 21:53:35 +02:00
2009-11-07 17:22:35 +01:00
var divs = jQuery ( "div" ) , count = 0 ;
divs . animate ( { } , function ( ) {
count ++ ;
} ) ;
equals ( divs . length , count , "Make sure that callback is called for each element in the set." ) ;
2009-12-21 17:11:03 +01:00
stop ( ) ;
var foo = jQuery ( "#foo" ) ;
foo . animate ( { } ) ;
foo . animate ( { top : 10 } , 100 , function ( ) {
ok ( true , "Animation was properly dequeued." ) ;
start ( ) ;
} ) ;
2009-11-07 17:22:35 +01:00
} ) ;
2009-01-15 00:09:52 +01:00
test ( "animate duration 0" , function ( ) {
2009-11-30 20:22:24 +01:00
expect ( 11 ) ;
2010-10-05 21:53:35 +02:00
2009-01-15 00:09:52 +01:00
stop ( ) ;
2010-10-05 21:53:35 +02:00
2009-11-30 20:22:24 +01:00
var $elems = jQuery ( [ { a : 0 } , { a : 0 } ] ) , counter = 0 ;
2010-10-05 21:53:35 +02:00
2009-01-15 00:09:52 +01:00
equals ( jQuery . timers . length , 0 , "Make sure no animation was running from another test" ) ;
2010-10-05 21:53:35 +02:00
2009-11-30 20:22:24 +01:00
$elems . eq ( 0 ) . animate ( { a : 1 } , 0 , function ( ) {
ok ( true , "Animate a simple property." ) ;
counter ++ ;
} ) ;
2010-10-05 21:53:35 +02:00
2009-01-15 00:09:52 +01:00
// Failed until [6115]
equals ( jQuery . timers . length , 0 , "Make sure synchronic animations are not left on jQuery.timers" ) ;
2010-10-05 21:53:35 +02:00
2009-01-15 00:09:52 +01:00
equals ( counter , 1 , "One synchronic animations" ) ;
2010-10-05 21:53:35 +02:00
2009-11-30 20:22:24 +01:00
$elems . animate ( { a : 2 } , 0 , function ( ) {
ok ( true , "Animate a second simple property." ) ;
counter ++ ;
} ) ;
2010-10-05 21:53:35 +02:00
2009-01-15 00:09:52 +01:00
equals ( counter , 3 , "Multiple synchronic animations" ) ;
2010-10-05 21:53:35 +02:00
2009-11-30 20:22:24 +01:00
$elems . eq ( 0 ) . animate ( { a : 3 } , 0 , function ( ) {
ok ( true , "Animate a third simple property." ) ;
counter ++ ;
} ) ;
$elems . eq ( 1 ) . animate ( { a : 3 } , 200 , function ( ) {
counter ++ ;
2009-01-15 00:09:52 +01:00
// Failed until [6115]
equals ( counter , 5 , "One synchronic and one asynchronic" ) ;
start ( ) ;
2009-09-15 02:32:13 +02:00
} ) ;
2010-10-05 21:53:35 +02:00
2009-09-15 02:32:13 +02:00
var $elem = jQuery ( "<div />" ) ;
2010-10-05 21:53:35 +02:00
$elem . show ( 0 , function ( ) {
2009-11-30 20:22:24 +01:00
ok ( true , "Show callback with no duration" ) ;
2009-09-15 02:32:13 +02:00
} ) ;
2010-10-05 21:53:35 +02:00
$elem . hide ( 0 , function ( ) {
2009-11-30 20:22:24 +01:00
ok ( true , "Hide callback with no duration" ) ;
2009-09-15 02:32:13 +02:00
} ) ;
2009-01-15 00:09:52 +01:00
} ) ;
2009-07-25 22:56:15 +02:00
test ( "animate hyphenated properties" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
jQuery ( "#nothiddendiv" )
. css ( "font-size" , 10 )
. animate ( { "font-size" : 20 } , 200 , function ( ) {
equals ( this . style . fontSize , "20px" , "The font-size property was animated." ) ;
start ( ) ;
} ) ;
} ) ;
2009-01-03 00:32:10 +01:00
test ( "animate non-element" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
var obj = { test : 0 } ;
jQuery ( obj ) . animate ( { test : 200 } , 200 , function ( ) {
equals ( obj . test , 200 , "The custom property should be modified." ) ;
start ( ) ;
} ) ;
} ) ;
2007-09-04 02:28:22 +02:00
test ( "stop()" , function ( ) {
expect ( 3 ) ;
stop ( ) ;
2008-05-29 01:18:25 +02:00
var $foo = jQuery ( "#nothiddendiv" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2007-09-04 02:28:22 +02:00
2007-11-30 22:36:49 +01:00
$foo . animate ( { width : 'show' } , 1000 ) ;
2007-09-04 02:28:22 +02:00
setTimeout ( function ( ) {
2007-11-30 22:36:49 +01:00
var nw = $foo . width ( ) ;
2010-09-17 20:30:30 +02:00
notEqual ( nw , w , "An animation occurred " + nw + "px " + w + "px" ) ;
2007-11-30 22:36:49 +01:00
$foo . stop ( ) ;
2007-09-04 02:28:22 +02:00
2007-11-30 22:36:49 +01:00
nw = $foo . width ( ) ;
2010-09-17 20:30:30 +02:00
notEqual ( nw , w , "Stop didn't reset the animation " + nw + "px " + w + "px" ) ;
2007-09-04 02:28:22 +02:00
setTimeout ( function ( ) {
2007-11-30 22:36:49 +01:00
equals ( nw , $foo . width ( ) , "The animation didn't continue" ) ;
start ( ) ;
} , 100 ) ;
} , 100 ) ;
} ) ;
test ( "stop() - several in queue" , function ( ) {
2009-02-19 22:30:25 +01:00
expect ( 3 ) ;
2007-11-30 22:36:49 +01:00
stop ( ) ;
2009-02-17 17:39:33 +01:00
var $foo = jQuery ( "#nothiddendivchild" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
$foo . animate ( { width : 'show' } , 1000 ) ;
$foo . animate ( { width : 'hide' } , 1000 ) ;
$foo . animate ( { width : 'show' } , 1000 ) ;
setTimeout ( function ( ) {
equals ( $foo . queue ( ) . length , 3 , "All 3 still in the queue" ) ;
var nw = $foo . width ( ) ;
2010-09-17 20:30:30 +02:00
notEqual ( nw , w , "An animation occurred " + nw + "px " + w + "px" ) ;
2007-11-30 22:36:49 +01:00
$foo . stop ( ) ;
nw = $foo . width ( ) ;
2010-09-17 20:30:30 +02:00
notEqual ( nw , w , "Stop didn't reset the animation " + nw + "px " + w + "px" ) ;
2007-11-30 22:36:49 +01:00
$foo . stop ( true ) ;
start ( ) ;
} , 100 ) ;
} ) ;
test ( "stop(clearQueue)" , function ( ) {
expect ( 4 ) ;
stop ( ) ;
2008-05-29 01:18:25 +02:00
var $foo = jQuery ( "#nothiddendiv" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
$foo . animate ( { width : 'show' } , 1000 ) ;
$foo . animate ( { width : 'hide' } , 1000 ) ;
$foo . animate ( { width : 'show' } , 1000 ) ;
setTimeout ( function ( ) {
var nw = $foo . width ( ) ;
ok ( nw != w , "An animation occurred " + nw + "px " + w + "px" ) ;
$foo . stop ( true ) ;
nw = $foo . width ( ) ;
ok ( nw != w , "Stop didn't reset the animation " + nw + "px " + w + "px" ) ;
equals ( $foo . queue ( ) . length , 0 , "The animation queue was cleared" ) ;
setTimeout ( function ( ) {
equals ( nw , $foo . width ( ) , "The animation didn't continue" ) ;
start ( ) ;
} , 100 ) ;
} , 100 ) ;
} ) ;
test ( "stop(clearQueue, gotoEnd)" , function ( ) {
2009-02-19 22:30:25 +01:00
expect ( 1 ) ;
2007-11-30 22:36:49 +01:00
stop ( ) ;
2009-02-17 17:39:33 +01:00
var $foo = jQuery ( "#nothiddendivchild" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
$foo . animate ( { width : 'show' } , 1000 ) ;
$foo . animate ( { width : 'hide' } , 1000 ) ;
$foo . animate ( { width : 'show' } , 1000 ) ;
$foo . animate ( { width : 'hide' } , 1000 ) ;
setTimeout ( function ( ) {
var nw = $foo . width ( ) ;
ok ( nw != w , "An animation occurred " + nw + "px " + w + "px" ) ;
$foo . stop ( false , true ) ;
nw = $foo . width ( ) ;
2009-02-19 22:30:25 +01:00
// Disabled, being flaky
//equals( nw, 1, "Stop() reset the animation" );
2007-11-30 22:36:49 +01:00
setTimeout ( function ( ) {
2009-02-19 22:30:25 +01:00
// Disabled, being flaky
//equals( $foo.queue().length, 2, "The next animation continued" );
2007-11-30 22:36:49 +01:00
$foo . stop ( true ) ;
2007-09-04 02:28:22 +02:00
start ( ) ;
} , 100 ) ;
} , 100 ) ;
} ) ;
2007-01-09 18:15:22 +01:00
test ( "toggle()" , function ( ) {
2008-12-25 21:13:42 +01:00
expect ( 6 ) ;
2009-02-17 16:54:27 +01:00
var x = jQuery ( "#nothiddendiv" ) ;
2007-11-30 22:36:49 +01:00
ok ( x . is ( ":visible" ) , "is visible" ) ;
2007-01-09 18:15:22 +01:00
x . toggle ( ) ;
2007-11-30 22:36:49 +01:00
ok ( x . is ( ":hidden" ) , "is hidden" ) ;
2007-01-09 18:15:22 +01:00
x . toggle ( ) ;
2007-11-30 22:36:49 +01:00
ok ( x . is ( ":visible" ) , "is visible again" ) ;
2010-10-05 21:53:35 +02:00
2008-12-25 21:13:42 +01:00
x . toggle ( true ) ;
ok ( x . is ( ":visible" ) , "is visible" ) ;
x . toggle ( false ) ;
ok ( x . is ( ":hidden" ) , "is hidden" ) ;
x . toggle ( true ) ;
ok ( x . is ( ":visible" ) , "is visible again" ) ;
2007-07-29 21:07:21 +02:00
} ) ;
2009-01-10 00:49:18 +01:00
jQuery . checkOverflowDisplay = function ( ) {
2010-10-05 22:20:44 +02:00
var o = jQuery . css ( this , "overflow" ) ;
2009-01-10 00:49:18 +01:00
2010-10-05 22:20:44 +02:00
equals ( o , "visible" , "Overflow should be visible: " + o ) ;
2009-01-10 00:49:18 +01:00
equals ( jQuery . css ( this , "display" ) , "inline" , "Display shouldn't be tampered with." ) ;
start ( ) ;
}
test ( "JS Overflow and Display" , function ( ) {
expect ( 2 ) ;
stop ( ) ;
jQuery . makeTest ( "JS Overflow and Display" )
. addClass ( "widewidth" )
. css ( { overflow : "visible" , display : "inline" } )
. addClass ( "widewidth" )
. text ( "Some sample text." )
. before ( "text before" )
. after ( "text after" )
. animate ( { opacity : 0.5 } , "slow" , jQuery . checkOverflowDisplay ) ;
} ) ;
2010-10-05 21:53:35 +02:00
2009-01-10 00:49:18 +01:00
test ( "CSS Overflow and Display" , function ( ) {
expect ( 2 ) ;
stop ( ) ;
jQuery . makeTest ( "CSS Overflow and Display" )
. addClass ( "overflow inline" )
. addClass ( "widewidth" )
. text ( "Some sample text." )
. before ( "text before" )
. after ( "text after" )
. animate ( { opacity : 0.5 } , "slow" , jQuery . checkOverflowDisplay ) ;
} ) ;
2007-07-29 21:07:21 +02:00
2009-01-10 00:49:18 +01:00
jQuery . each ( {
2007-07-29 21:07:21 +02:00
"CSS Auto" : function ( elem , prop ) {
2008-05-29 01:18:25 +02:00
jQuery ( elem ) . addClass ( "auto" + prop )
2007-07-29 21:07:21 +02:00
. text ( "This is a long string of text." ) ;
2010-09-27 17:51:01 +02:00
return "" ;
2007-07-29 21:07:21 +02:00
} ,
"JS Auto" : function ( elem , prop ) {
2010-09-23 05:28:57 +02:00
jQuery ( elem ) . css ( prop , "" )
2007-07-29 21:07:21 +02:00
. text ( "This is a long string of text." ) ;
2010-09-27 17:51:01 +02:00
return "" ;
2007-07-29 21:07:21 +02:00
} ,
"CSS 100" : function ( elem , prop ) {
2008-05-29 01:18:25 +02:00
jQuery ( elem ) . addClass ( "large" + prop ) ;
2010-09-27 17:51:01 +02:00
return "" ;
2007-07-29 21:07:21 +02:00
} ,
"JS 100" : function ( elem , prop ) {
2008-05-29 01:18:25 +02:00
jQuery ( elem ) . css ( prop , prop == "opacity" ? 1 : "100px" ) ;
2007-07-29 21:07:21 +02:00
return prop == "opacity" ? 1 : 100 ;
} ,
"CSS 50" : function ( elem , prop ) {
2008-05-29 01:18:25 +02:00
jQuery ( elem ) . addClass ( "med" + prop ) ;
2010-09-27 17:51:01 +02:00
return "" ;
2007-07-29 21:07:21 +02:00
} ,
"JS 50" : function ( elem , prop ) {
2008-05-29 01:18:25 +02:00
jQuery ( elem ) . css ( prop , prop == "opacity" ? 0.50 : "50px" ) ;
2007-07-29 21:07:21 +02:00
return prop == "opacity" ? 0.5 : 50 ;
} ,
"CSS 0" : function ( elem , prop ) {
2008-05-29 01:18:25 +02:00
jQuery ( elem ) . addClass ( "no" + prop ) ;
2010-09-27 17:51:01 +02:00
return "" ;
2007-07-29 21:07:21 +02:00
} ,
"JS 0" : function ( elem , prop ) {
2008-05-29 01:18:25 +02:00
jQuery ( elem ) . css ( prop , prop == "opacity" ? 0 : "0px" ) ;
2007-07-29 21:07:21 +02:00
return 0 ;
}
2009-01-10 00:49:18 +01:00
} , function ( fn , f ) {
jQuery . each ( {
"show" : function ( elem , prop ) {
jQuery ( elem ) . hide ( ) . addClass ( "wide" + prop ) ;
return "show" ;
} ,
"hide" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "wide" + prop ) ;
return "hide" ;
} ,
"100" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "wide" + prop ) ;
return prop == "opacity" ? 1 : 100 ;
} ,
"50" : function ( elem , prop ) {
return prop == "opacity" ? 0.50 : 50 ;
} ,
"0" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "noback" ) ;
return 0 ;
}
} , function ( tn , t ) {
2007-07-29 21:07:21 +02:00
test ( fn + " to " + tn , function ( ) {
2009-01-10 00:49:18 +01:00
var elem = jQuery . makeTest ( fn + " to " + tn ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
var t _w = t ( elem , "width" ) ;
var f _w = f ( elem , "width" ) ;
var t _h = t ( elem , "height" ) ;
var f _h = f ( elem , "height" ) ;
var t _o = t ( elem , "opacity" ) ;
var f _o = f ( elem , "opacity" ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
var num = 0 ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _h == "show" ) num ++ ;
if ( t _w == "show" ) num ++ ;
if ( t _w == "hide" || t _w == "show" ) num ++ ;
if ( t _h == "hide" || t _h == "show" ) num ++ ;
if ( t _o == "hide" || t _o == "show" ) num ++ ;
if ( t _w == "hide" ) num ++ ;
if ( t _o . constructor == Number ) num += 2 ;
if ( t _w . constructor == Number ) num += 2 ;
if ( t _h . constructor == Number ) num += 2 ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
expect ( num ) ;
stop ( ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
var anim = { width : t _w , height : t _h , opacity : t _o } ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
elem . animate ( anim , 50 , function ( ) {
if ( t _w == "show" )
2008-05-06 20:56:02 +02:00
equals ( this . style . display , "block" , "Showing, display should block: " + this . style . display ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _w == "hide" || t _w == "show" )
2010-09-17 19:38:13 +02:00
ok ( f _w === "" ? this . style . width === f _w : this . style . width . indexOf ( f _w ) === 0 , "Width must be reset to " + f _w + ": " + this . style . width ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _h == "hide" || t _h == "show" )
2010-09-17 19:38:13 +02:00
ok ( f _h === "" ? this . style . height === f _h : this . style . height . indexOf ( f _h ) === 0 , "Height must be reset to " + f _h + ": " + this . style . height ) ;
2010-10-05 21:53:35 +02:00
2010-09-17 19:38:13 +02:00
var cur _o = jQuery . style ( this , "opacity" ) ;
if ( t _o == "hide" || t _o == "show" )
2008-05-06 20:56:02 +02:00
equals ( cur _o , f _o , "Opacity must be reset to " + f _o + ": " + cur _o ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _w == "hide" )
2008-05-06 20:56:02 +02:00
equals ( this . style . display , "none" , "Hiding, display should be none: " + this . style . display ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _o . constructor == Number ) {
2008-05-06 20:56:02 +02:00
equals ( cur _o , t _o , "Final opacity should be " + t _o + ": " + cur _o ) ;
2010-10-05 21:53:35 +02:00
2010-09-09 21:48:28 +02:00
ok ( jQuery . css ( this , "opacity" ) != "" || cur _o == t _o , "Opacity should be explicitly set to " + t _o + ", is instead: " + cur _o ) ;
2007-07-29 21:07:21 +02:00
}
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _w . constructor == Number ) {
2008-05-06 20:56:02 +02:00
equals ( this . style . width , t _w + "px" , "Final width should be " + t _w + ": " + this . style . width ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
var cur _w = jQuery . css ( this , "width" ) ;
ok ( this . style . width != "" || cur _w == t _w , "Width should be explicitly set to " + t _w + ", is instead: " + cur _w ) ;
}
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _h . constructor == Number ) {
2008-05-06 20:56:02 +02:00
equals ( this . style . height , t _h + "px" , "Final height should be " + t _h + ": " + this . style . height ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
var cur _h = jQuery . css ( this , "height" ) ;
ok ( this . style . height != "" || cur _h == t _h , "Height should be explicitly set to " + t _h + ", is instead: " + cur _w ) ;
}
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _h == "show" ) {
2010-09-16 16:00:56 +02:00
var old _h = jQuery . css ( this , "height" ) ;
2010-09-14 00:00:28 +02:00
jQuery ( this ) . append ( "<br/>Some more text<br/>and some more..." ) ;
2010-09-23 05:43:55 +02:00
if ( /Auto/ . test ( fn ) ) {
notEqual ( jQuery . css ( this , "height" ) , old _h , "Make sure height is auto." ) ;
} else {
equals ( jQuery . css ( this , "height" ) , old _h , "Make sure height is not auto." ) ;
}
2007-07-29 21:07:21 +02:00
}
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
start ( ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2010-10-05 22:20:44 +02:00
jQuery . fn . saveState = function ( hiddenOverflow ) {
2010-10-05 21:53:35 +02:00
var check = [ 'opacity' , 'height' , 'width' , 'display' , 'overflow' ] ;
2009-01-10 01:16:48 +01:00
expect ( check . length ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
stop ( ) ;
return this . each ( function ( ) {
var self = this ;
self . save = { } ;
2009-01-10 01:16:48 +01:00
jQuery . each ( check , function ( i , c ) {
2010-10-05 22:20:44 +02:00
self . save [ c ] = c === "overflow" && hiddenOverflow ? "hidden" : self . style [ c ] || jQuery . css ( self , c ) ;
2007-07-29 21:07:21 +02:00
} ) ;
} ) ;
} ;
2009-01-10 00:49:18 +01:00
jQuery . checkState = function ( ) {
2007-07-29 21:07:21 +02:00
var self = this ;
jQuery . each ( this . save , function ( c , v ) {
2010-09-16 16:00:56 +02:00
var cur = self . style [ c ] || jQuery . css ( self , c ) ;
equals ( cur , v , "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")" ) ;
2007-07-29 21:07:21 +02:00
} ) ;
start ( ) ;
}
// Chaining Tests
test ( "Chain fadeOut fadeIn" , function ( ) {
2009-01-10 00:49:18 +01:00
jQuery ( '#fadein div' ) . saveState ( ) . fadeOut ( 'fast' ) . fadeIn ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain fadeIn fadeOut" , function ( ) {
2009-01-10 00:49:18 +01:00
jQuery ( '#fadeout div' ) . saveState ( ) . fadeIn ( 'fast' ) . fadeOut ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain hide show" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#show div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . hide ( 'fast' ) . show ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain show hide" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#hide div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . show ( 'fast' ) . hide ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
Added full support for easing in all shorthand effects methods (hide, show, toggle, fadeTo, slideUp, etc.). Previously, these methods could only be used with two of the three (speed, easing, callback) arguments, or, in the case of fadeTo, 3 of the 4 (speed, opacity, easing, callback) arguments. Added three more sets of tests to the series of "Chain" tests. Fixes #7014
2010-09-08 22:31:32 +02:00
test ( "Chain show hide with easing and callback" , function ( ) {
jQuery ( '#hide div' ) . saveState ( ) . show ( 'fast' ) . hide ( 'fast' , 'linear' , jQuery . checkState ) ;
} ) ;
2007-07-29 21:07:21 +02:00
test ( "Chain toggle in" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#togglein div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . toggle ( 'fast' ) . toggle ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain toggle out" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#toggleout div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . toggle ( 'fast' ) . toggle ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
Added full support for easing in all shorthand effects methods (hide, show, toggle, fadeTo, slideUp, etc.). Previously, these methods could only be used with two of the three (speed, easing, callback) arguments, or, in the case of fadeTo, 3 of the 4 (speed, opacity, easing, callback) arguments. Added three more sets of tests to the series of "Chain" tests. Fixes #7014
2010-09-08 22:31:32 +02:00
test ( "Chain toggle out with easing and callback" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#toggleout div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . toggle ( 'fast' ) . toggle ( 'fast' , 'linear' , jQuery . checkState ) ;
Added full support for easing in all shorthand effects methods (hide, show, toggle, fadeTo, slideUp, etc.). Previously, these methods could only be used with two of the three (speed, easing, callback) arguments, or, in the case of fadeTo, 3 of the 4 (speed, opacity, easing, callback) arguments. Added three more sets of tests to the series of "Chain" tests. Fixes #7014
2010-09-08 22:31:32 +02:00
} ) ;
2007-07-29 21:07:21 +02:00
test ( "Chain slideDown slideUp" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#slidedown div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideDown ( 'fast' ) . slideUp ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain slideUp slideDown" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#slideup div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideUp ( 'fast' ) . slideDown ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
Added full support for easing in all shorthand effects methods (hide, show, toggle, fadeTo, slideUp, etc.). Previously, these methods could only be used with two of the three (speed, easing, callback) arguments, or, in the case of fadeTo, 3 of the 4 (speed, opacity, easing, callback) arguments. Added three more sets of tests to the series of "Chain" tests. Fixes #7014
2010-09-08 22:31:32 +02:00
test ( "Chain slideUp slideDown with easing and callback" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#slideup div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideUp ( 'fast' ) . slideDown ( 'fast' , 'linear' , jQuery . checkState ) ;
Added full support for easing in all shorthand effects methods (hide, show, toggle, fadeTo, slideUp, etc.). Previously, these methods could only be used with two of the three (speed, easing, callback) arguments, or, in the case of fadeTo, 3 of the 4 (speed, opacity, easing, callback) arguments. Added three more sets of tests to the series of "Chain" tests. Fixes #7014
2010-09-08 22:31:32 +02:00
} ) ;
2007-07-29 21:07:21 +02:00
test ( "Chain slideToggle in" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#slidetogglein div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideToggle ( 'fast' ) . slideToggle ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain slideToggle out" , function ( ) {
2010-10-05 22:20:44 +02:00
jQuery ( '#slidetoggleout div' ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideToggle ( 'fast' ) . slideToggle ( 'fast' , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
2010-10-17 20:26:32 +02:00
test ( "Chain fadeToggle in" , function ( ) {
jQuery ( '#fadetogglein div' ) . saveState ( ) . fadeToggle ( 'fast' ) . fadeToggle ( 'fast' , jQuery . checkState ) ;
} ) ;
test ( "Chain fadeToggle out" , function ( ) {
jQuery ( '#fadetoggleout div' ) . saveState ( ) . fadeToggle ( 'fast' ) . fadeToggle ( 'fast' , jQuery . checkState ) ;
} ) ;
Added full support for easing in all shorthand effects methods (hide, show, toggle, fadeTo, slideUp, etc.). Previously, these methods could only be used with two of the three (speed, easing, callback) arguments, or, in the case of fadeTo, 3 of the 4 (speed, opacity, easing, callback) arguments. Added three more sets of tests to the series of "Chain" tests. Fixes #7014
2010-09-08 22:31:32 +02:00
test ( "Chain fadeTo 0.5 1.0 with easing and callback)" , function ( ) {
jQuery ( '#fadeto div' ) . saveState ( ) . fadeTo ( 'fast' , 0.5 ) . fadeTo ( 'fast' , 1.0 , 'linear' , jQuery . checkState ) ;
} ) ;
2009-01-10 00:49:18 +01:00
jQuery . makeTest = function ( text ) {
2008-05-29 01:18:25 +02:00
var elem = jQuery ( "<div></div>" )
2009-01-10 00:49:18 +01:00
. attr ( "id" , "test" + jQuery . makeTest . id ++ )
2007-07-29 21:07:21 +02:00
. addClass ( "box" ) ;
2008-05-29 01:18:25 +02:00
jQuery ( "<h4></h4>" )
2007-07-29 21:07:21 +02:00
. text ( text )
. appendTo ( "#fx-tests" )
. click ( function ( ) {
2008-05-29 01:18:25 +02:00
jQuery ( this ) . next ( ) . toggle ( ) ;
2007-07-29 21:07:21 +02:00
} )
. after ( elem ) ;
return elem ;
}
2009-01-10 00:49:18 +01:00
jQuery . makeTest . id = 1 ;
2009-12-01 23:34:44 +01:00
test ( "jQuery.show('fast') doesn't clear radio buttons (bug #1095)" , function ( ) {
expect ( 4 ) ;
stop ( ) ;
var $checkedtest = jQuery ( "#checkedtest" ) ;
// IE6 was clearing "checked" in jQuery(elem).show("fast");
$checkedtest . hide ( ) . show ( "fast" , function ( ) {
ok ( ! ! jQuery ( ":radio:first" , $checkedtest ) . attr ( "checked" ) , "Check first radio still checked." ) ;
ok ( ! jQuery ( ":radio:last" , $checkedtest ) . attr ( "checked" ) , "Check last radio still NOT checked." ) ;
ok ( ! ! jQuery ( ":checkbox:first" , $checkedtest ) . attr ( "checked" ) , "Check first checkbox still checked." ) ;
ok ( ! jQuery ( ":checkbox:last" , $checkedtest ) . attr ( "checked" ) , "Check last checkbox still NOT checked." ) ;
start ( ) ;
} ) ;
} ) ;
2009-12-06 17:37:34 +01:00
test ( "animate with per-property easing" , function ( ) {
2010-10-05 21:53:35 +02:00
2009-12-06 17:37:34 +01:00
expect ( 3 ) ;
stop ( ) ;
2010-10-05 21:53:35 +02:00
2009-12-06 17:37:34 +01:00
var _test1 _called = false ;
var _test2 _called = false ;
var _default _test _called = false ;
2010-10-05 21:53:35 +02:00
2009-12-06 17:37:34 +01:00
jQuery . easing [ '_test1' ] = function ( ) {
_test1 _called = true ;
} ;
2010-10-05 21:53:35 +02:00
2009-12-06 17:37:34 +01:00
jQuery . easing [ '_test2' ] = function ( ) {
_test2 _called = true ;
} ;
2010-10-05 21:53:35 +02:00
2009-12-06 17:37:34 +01:00
jQuery . easing [ '_default_test' ] = function ( ) {
_default _test _called = true ;
} ;
2010-10-05 21:53:35 +02:00
2009-12-06 17:37:34 +01:00
jQuery ( { a : 0 , b : 0 , c : 0 } ) . animate ( {
a : [ 100 , '_test1' ] ,
b : [ 100 , '_test2' ] ,
c : 100
} , 400 , '_default_test' , function ( ) {
start ( ) ;
ok ( _test1 _called , "Easing function (1) called" ) ;
ok ( _test2 _called , "Easing function (2) called" ) ;
ok ( _default _test _called , "Easing function (_default) called" ) ;
} ) ;
2010-10-05 21:53:35 +02:00
2009-12-18 17:01:19 +01:00
} ) ;
2010-10-11 22:22:43 +02:00
test ( "hide hidden elements (bug #7141)" , function ( ) {
expect ( 3 ) ;
QUnit . reset ( ) ;
var div = jQuery ( "<div style='display:none'></div>" ) . appendTo ( "#main" ) ;
equals ( div . css ( "display" ) , "none" , "Element is hidden by default" ) ;
div . hide ( ) ;
ok ( ! div . data ( "olddisplay" ) , "olddisplay is undefined after hiding an already-hidden element" ) ;
div . show ( ) ;
equals ( div . css ( "display" ) , "block" , "Show a double-hidden element" ) ;
div . remove ( ) ;
} ) ;
test ( "hide hidden elements, with animation (bug #7141)" , function ( ) {
expect ( 3 ) ;
QUnit . reset ( ) ;
stop ( ) ;
var div = jQuery ( "<div style='display:none'></div>" ) . appendTo ( "#main" ) ;
equals ( div . css ( "display" ) , "none" , "Element is hidden by default" ) ;
div . hide ( 1 , function ( ) {
ok ( ! div . data ( "olddisplay" ) , "olddisplay is undefined after hiding an already-hidden element" ) ;
div . show ( 1 , function ( ) {
equals ( div . css ( "display" ) , "block" , "Show a double-hidden element" ) ;
start ( ) ;
} ) ;
} ) ;
} ) ;