2012-05-29 02:25:04 +00:00
if ( jQuery . fx ) {
2011-01-09 21:58:47 +00:00
module ( "effects" , { teardown : moduleTeardown } ) ;
2006-11-18 13:37:01 +00:00
2010-10-05 18:28:43 +00:00
test ( "sanity check" , function ( ) {
expect ( 1 ) ;
2011-04-17 06:43:57 +00:00
ok ( jQuery ( "#dl:visible, #qunit-fixture:visible, #foo:visible" ) . length === 3 , "QUnit state is correct for testing effects" ) ;
2010-10-05 18:28:43 +00:00
} ) ;
2009-03-18 21:15:38 +00:00
test ( "show()" , function ( ) {
2012-05-29 02:25:04 +00:00
expect ( 26 ) ;
2010-10-26 21:37:44 +00:00
var hiddendiv = jQuery ( "div.hidden" ) ;
2010-10-27 18:35:26 +00:00
hiddendiv . hide ( ) . show ( ) ;
2011-11-06 20:27:42 +00:00
equal ( hiddendiv . css ( "display" ) , "block" , "Make sure a pre-hidden div is visible." ) ;
2010-10-27 18:35:26 +00:00
2011-04-17 06:43:57 +00:00
var div = jQuery ( "<div>" ) . hide ( ) . appendTo ( "#qunit-fixture" ) . show ( ) ;
2010-11-03 22:59:55 +00:00
equal ( div . css ( "display" ) , "block" , "Make sure pre-hidden divs show" ) ;
2010-10-27 18:35:26 +00:00
QUnit . reset ( ) ;
hiddendiv = jQuery ( "div.hidden" ) ;
2010-10-26 21:37:44 +00:00
equal ( jQuery . css ( hiddendiv [ 0 ] , "display" ) , "none" , "hiddendiv is display: none" ) ;
hiddendiv . css ( "display" , "block" ) ;
equal ( jQuery . css ( hiddendiv [ 0 ] , "display" ) , "block" , "hiddendiv is display: block" ) ;
hiddendiv . show ( ) ;
equal ( jQuery . css ( hiddendiv [ 0 ] , "display" ) , "block" , "hiddendiv is display: block" ) ;
hiddendiv . css ( "display" , "" ) ;
2011-05-07 23:18:52 +00:00
var pass = true ;
div = jQuery ( "#qunit-fixture div" ) ;
2009-03-18 21:15:38 +00:00
div . show ( ) . each ( function ( ) {
if ( this . style . display == "none" ) pass = false ;
} ) ;
ok ( pass , "Show" ) ;
2010-01-19 23:27:20 +00:00
var speeds = {
2011-02-13 22:02:14 +00:00
"null speed" : null ,
"undefined speed" : undefined ,
"false speed" : false
2010-01-19 23:27:20 +00:00
} ;
jQuery . each ( speeds , function ( name , speed ) {
2011-02-13 22:02:14 +00:00
pass = true ;
div . hide ( ) . show ( speed ) . each ( function ( ) {
if ( this . style . display == "none" ) pass = false ;
} ) ;
ok ( pass , "Show with " + name ) ;
} ) ;
2010-01-19 23:27:20 +00:00
jQuery . each ( speeds , function ( name , speed ) {
2011-02-13 22:02:14 +00:00
pass = true ;
div . hide ( ) . show ( speed , function ( ) {
2010-01-19 23:27:20 +00:00
pass = false ;
} ) ;
2010-01-21 15:18:54 +00:00
ok ( pass , "Show with " + name + " does not call animate callback" ) ;
2009-11-12 23:08:33 +00:00
} ) ;
2010-10-05 19:53:35 +00:00
// #show-tests * is set display: none in CSS
2011-04-17 06:43:57 +00:00
jQuery ( "#qunit-fixture" ) . 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>" ) ;
2010-12-30 06:34:48 +00:00
2010-10-09 01:29:41 +00:00
var old = jQuery ( "#test-table" ) . show ( ) . css ( "display" ) !== "table" ;
jQuery ( "#test-table" ) . remove ( ) ;
2009-03-18 21:15:38 +00: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 ( ) ;
2011-11-06 20:27:42 +00:00
equal ( elem . css ( "display" ) , expected , "Show using correct display type for " + selector ) ;
2009-03-18 21:15:38 +00:00
} ) ;
2011-04-17 18:07:42 +00:00
// Make sure that showing or hiding a text node doesn't cause an error
jQuery ( "<div>test</div> text <span>test</span>" ) . show ( ) . remove ( ) ;
jQuery ( "<div>test</div> text <span>test</span>" ) . hide ( ) . remove ( ) ;
2009-03-18 21:15:38 +00:00
} ) ;
2009-12-06 02:06:14 +00:00
test ( "show(Number) - other displays" , function ( ) {
expect ( 15 ) ;
2010-07-28 15:19:01 +00:00
QUnit . reset ( ) ;
2009-12-06 02:06:14 +00:00
stop ( ) ;
2010-10-05 19:53:35 +00:00
// #show-tests * is set display: none in CSS
2011-04-17 06:43:57 +00:00
jQuery ( "#qunit-fixture" ) . 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 02:06:14 +00:00
2010-10-09 01:29:41 +00:00
var old = jQuery ( "#test-table" ) . show ( ) . css ( "display" ) !== "table" ,
2009-12-06 02:06:14 +00:00
num = 0 ;
2010-10-09 01:29:41 +00:00
jQuery ( "#test-table" ) . remove ( ) ;
2009-12-06 02:06:14 +00: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 01:29:41 +00:00
var elem = jQuery ( selector , "#show-tests" ) . show ( 1 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( elem . css ( "display" ) , expected , "Show using correct display type for " + selector ) ;
2009-12-06 02:06:14 +00:00
if ( ++ num === 15 ) {
start ( ) ;
}
} ) ;
} ) ;
} ) ;
2010-11-09 23:06:33 +00:00
2011-02-13 22:02:14 +00:00
// Supports #7397
2010-11-09 23:06:33 +00:00
test ( "Persist correct display value" , function ( ) {
2011-02-13 22:02:14 +00:00
expect ( 3 ) ;
2010-11-09 23:06:33 +00:00
QUnit . reset ( ) ;
stop ( ) ;
// #show-tests * is set display: none in CSS
2011-04-17 06:43:57 +00:00
jQuery ( "#qunit-fixture" ) . append ( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" ) ;
2010-12-30 06:34:48 +00:00
var $span = jQuery ( "#show-tests span" ) ,
2011-02-13 22:02:14 +00:00
displayNone = $span . css ( "display" ) ,
2011-04-12 08:47:46 +00:00
display = "" , num = 0 ;
2010-11-09 23:06:33 +00:00
2011-02-13 22:02:14 +00:00
$span . show ( ) ;
2010-12-30 06:34:48 +00:00
2011-02-13 22:02:14 +00:00
display = $span . css ( "display" ) ;
2010-12-30 06:34:48 +00:00
2011-02-13 22:02:14 +00:00
$span . hide ( ) ;
2010-12-30 06:34:48 +00:00
2011-02-13 22:02:14 +00:00
$span . fadeIn ( 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( $span . css ( "display" ) , display , "Expecting display: " + display ) ;
2011-02-13 22:02:14 +00:00
$span . fadeOut ( 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( $span . css ( "display" ) , displayNone , "Expecting display: " + displayNone ) ;
2011-02-13 22:02:14 +00:00
$span . fadeIn ( 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( $span . css ( "display" ) , display , "Expecting display: " + display ) ;
2011-02-13 22:02:14 +00:00
start ( ) ;
} ) ;
} ) ;
} ) ;
2010-11-09 23:06:33 +00:00
} ) ;
2011-04-12 15:48:07 +00:00
2007-03-25 18:06:18 +00:00
test ( "animate(Hash, Object, Function)" , function ( ) {
2007-12-20 20:40:20 +00:00
expect ( 1 ) ;
2006-11-18 13:37:01 +00:00
stop ( ) ;
2011-04-12 08:47:46 +00:00
var hash = { opacity : "show" } ;
2008-05-28 23:18:25 +00:00
var hashCopy = jQuery . extend ( { } , hash ) ;
2011-04-12 08:47:46 +00:00
jQuery ( "#foo" ) . animate ( hash , 0 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( hash . opacity , hashCopy . opacity , "Check if animate changed the hash parameter" ) ;
2007-12-20 20:40:20 +00:00
start ( ) ;
2007-12-07 01:52:21 +00:00
} ) ;
2007-01-09 17:15:22 +00:00
} ) ;
2009-12-05 05:10:19 +00:00
test ( "animate negative height" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
jQuery ( "#foo" ) . animate ( { height : - 100 } , 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( this . offsetHeight , 0 , "Verify height." ) ;
2009-12-05 05:10:19 +00:00
start ( ) ;
} ) ;
} ) ;
2012-04-05 03:30:13 +00:00
test ( "animate negative margin" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
jQuery ( "#foo" ) . animate ( { marginTop : - 100 } , 100 , function ( ) {
equal ( jQuery ( this ) . css ( "marginTop" ) , "-100px" , "Verify margin." ) ;
start ( ) ;
} ) ;
} ) ;
2012-03-02 03:31:17 +00:00
test ( "animate negative padding" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
jQuery ( "#foo" ) . animate ( { paddingBottom : - 100 } , 100 , function ( ) {
equal ( jQuery ( this ) . css ( "paddingBottom" ) , "0px" , "Verify paddingBottom." ) ;
start ( ) ;
} ) ;
} ) ;
2010-10-05 19:53:35 +00:00
test ( "animate block as inline width/height" , function ( ) {
2010-10-05 18:28:43 +00:00
expect ( 3 ) ;
2010-10-15 01:48:03 +00:00
var span = jQuery ( "<span>" ) . css ( "display" , "inline-block" ) . appendTo ( "body" ) ,
expected = span . css ( "display" ) ;
2010-12-30 06:34:48 +00:00
2010-10-15 01:48:03 +00:00
span . remove ( ) ;
if ( jQuery . support . inlineBlockNeedsLayout || expected === "inline-block" ) {
stop ( ) ;
2011-04-12 08:47:46 +00:00
jQuery ( "#foo" ) . css ( { display : "inline" , width : "" , height : "" } ) . animate ( { width : 42 , height : 42 } , 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( jQuery ( this ) . css ( "display" ) , jQuery . support . inlineBlockNeedsLayout ? "inline" : "inline-block" , "inline-block was set on non-floated inline element when animating width/height" ) ;
equal ( this . offsetWidth , 42 , "width was animated" ) ;
equal ( this . offsetHeight , 42 , "height was animated" ) ;
2010-10-15 01:48:03 +00:00
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 18:28:43 +00:00
} ) ;
2010-10-05 19:53:35 +00:00
test ( "animate native inline width/height" , function ( ) {
expect ( 3 ) ;
2010-10-15 01:48:03 +00:00
var span = jQuery ( "<span>" ) . css ( "display" , "inline-block" ) . appendTo ( "body" ) ,
expected = span . css ( "display" ) ;
2010-12-30 06:34:48 +00:00
2010-10-15 01:48:03 +00:00
span . remove ( ) ;
if ( jQuery . support . inlineBlockNeedsLayout || expected === "inline-block" ) {
stop ( ) ;
2011-04-12 08:47:46 +00:00
jQuery ( "#foo" ) . css ( { display : "" , width : "" , height : "" } )
. append ( "<span>text</span>" )
. children ( "span" )
2010-10-15 01:48:03 +00:00
. animate ( { width : 42 , height : 42 } , 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( jQuery ( this ) . css ( "display" ) , "inline-block" , "inline-block was set on non-floated inline element when animating width/height" ) ;
equal ( this . offsetWidth , 42 , "width was animated" ) ;
equal ( this . offsetHeight , 42 , "height was animated" ) ;
2010-10-15 01:48:03 +00:00
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 19:53:35 +00:00
} ) ;
2010-10-05 18:28:43 +00: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 ( ) {
2011-11-06 20:27:42 +00:00
equal ( jQuery ( this ) . css ( "display" ) , "block" , "inline-block was not set on block element when animating width/height" ) ;
equal ( this . offsetWidth , 42 , "width was animated" ) ;
equal ( this . offsetHeight , 42 , "height was animated" ) ;
2010-10-05 18:28:43 +00:00
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 ( ) {
2011-11-06 20:27:42 +00:00
equal ( jQuery ( this ) . css ( "display" ) , displayMode , "display mode is correct" ) ;
2010-10-05 18:28:43 +00:00
start ( ) ;
} ) ;
} ) ;
2010-10-05 19:53:35 +00: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" ) ;
2011-11-06 20:27:42 +00:00
// IE<8 uses "block" instead of the correct display type
2010-10-05 19:53:35 +00:00
var displayMode = tr . css ( "display" ) !== "table-row" ? "block" : "table-row" ;
tr . animate ( { width : 10 , height : 10 } , 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( jQuery ( this ) . css ( "display" ) , displayMode , "display mode is correct" ) ;
equal ( this . offsetWidth , 20 , "width animated to shrink wrap point" ) ;
equal ( this . offsetHeight , 20 , "height animated to shrink wrap point" ) ;
2010-10-05 19:53:35 +00:00
start ( ) ;
} ) ;
} ) ;
2010-10-05 18:28:43 +00: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 19:53:35 +00:00
. html ( "<tr><td style='width:42px;height:42px;padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
2010-10-05 18:28:43 +00:00
. find ( "td" ) ;
2011-11-06 20:27:42 +00:00
// IE<8 uses "block" instead of the correct display type
2010-10-05 18:28:43 +00:00
var displayMode = td . css ( "display" ) !== "table-cell" ? "block" : "table-cell" ;
td . animate ( { width : 10 , height : 10 } , 100 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( jQuery ( this ) . css ( "display" ) , displayMode , "display mode is correct" ) ;
equal ( this . offsetWidth , 20 , "width animated to shrink wrap point" ) ;
equal ( this . offsetHeight , 20 , "height animated to shrink wrap point" ) ;
2010-10-05 18:28:43 +00:00
start ( ) ;
} ) ;
} ) ;
2011-11-07 15:46:46 +00:00
test ( "animate percentage(%) on width/height" , function ( ) {
expect ( 2 ) ;
var $div = jQuery ( "<div style='position:absolute;top:-999px;left:-999px;width:60px;height:60px;'><div style='width:50%;height:50%;'></div></div>" )
. appendTo ( "#qunit-fixture" ) . children ( "div" ) ;
stop ( ) ;
$div . animate ( { width : "25%" , height : "25%" } , 13 , function ( ) {
var $this = jQuery ( this ) ;
equal ( $this . width ( ) , 15 , "Width was animated to 15px rather than 25px" ) ;
equal ( $this . height ( ) , 15 , "Height was animated to 15px rather than 25px" ) ;
start ( ) ;
} ) ;
} ) ;
2010-10-05 18:28:43 +00:00
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 ( ) {
2011-11-06 20:27:42 +00:00
equal ( this . style . overflowX , "visible" , "overflow-x is visible" ) ;
equal ( this . style . overflowY , "auto" , "overflow-y is auto" ) ;
2010-10-05 18:28:43 +00:00
start ( ) ;
} ) ;
} ) ;
2009-07-21 20:48:29 +00:00
/* / / This test ends up being flaky depending upon the CPU load
2007-11-16 17:49:12 +00:00
test ( "animate option (queue === false)" , function ( ) {
2007-11-16 23:39:23 +00:00
expect ( 1 ) ;
stop ( ) ;
2007-11-16 17:49:12 +00:00
2007-11-16 23:39:23 +00:00
var order = [ ] ;
2008-05-28 23:18:25 +00:00
var $foo = jQuery ( "#foo" ) ;
2011-04-12 08:47:46 +00:00
$foo . animate ( { width : "100px" } , 3000 , function ( ) {
2007-11-16 23:39:23 +00:00
// should finish after unqueued animation so second
order . push ( 2 ) ;
2011-11-06 20:27:42 +00:00
deepEqual ( order , [ 1 , 2 ] , "Animations finished in the correct order" ) ;
2009-07-21 20:16:44 +00:00
start ( ) ;
2007-11-16 23:39:23 +00:00
} ) ;
2011-04-12 08:47:46 +00:00
$foo . animate ( { fontSize : "2em" } , { queue : false , duration : 10 , complete : function ( ) {
2007-11-16 23:39:23 +00:00
// short duration and out of queue so should finish first
order . push ( 1 ) ;
} } ) ;
2007-11-16 17:49:12 +00:00
} ) ;
2009-07-21 20:48:29 +00:00
* /
2007-11-16 17:49:12 +00:00
2011-09-28 15:55:29 +00:00
asyncTest ( "animate option { queue: false }" , function ( ) {
expect ( 2 ) ;
var foo = jQuery ( "#foo" ) ;
foo . animate ( {
fontSize : "2em"
} , {
queue : false ,
duration : 10 ,
complete : function ( ) {
ok ( true , "Animation Completed" ) ;
start ( ) ;
}
} ) ;
2011-11-06 20:27:42 +00:00
equal ( foo . queue ( ) . length , 0 , "Queue is empty" ) ;
2011-09-28 15:55:29 +00:00
} ) ;
2011-10-07 15:16:38 +00:00
asyncTest ( "animate option { queue: true }" , function ( ) {
expect ( 2 ) ;
var foo = jQuery ( "#foo" ) ;
foo . animate ( {
fontSize : "2em"
} , {
queue : true ,
duration : 10 ,
complete : function ( ) {
ok ( true , "Animation Completed" ) ;
start ( ) ;
}
} ) ;
notEqual ( foo . queue ( ) . length , 0 , "Default queue is not empty" ) ;
} ) ;
2011-09-19 20:08:00 +00:00
asyncTest ( "animate option { queue: 'name' }" , function ( ) {
expect ( 5 ) ;
var foo = jQuery ( "#foo" ) ,
origWidth = foo . width ( ) ,
order = [ ] ;
foo . animate ( { width : origWidth + 100 } , {
queue : 'name' ,
duration : 1 ,
complete : function ( ) {
// second callback function
order . push ( 2 ) ;
2011-11-06 20:27:42 +00:00
equal ( foo . width ( ) , origWidth + 100 , "Animation ended" ) ;
equal ( foo . queue ( "name" ) . length , 1 , "Queue length of 'name' queue" ) ;
2011-09-19 20:08:00 +00:00
}
} ) . queue ( "name" , function ( next ) {
// last callback function
deepEqual ( order , [ 1 , 2 ] , "Callbacks in expected order" ) ;
start ( ) ;
} ) ;
setTimeout ( function ( ) {
// this is the first callback function that should be called
order . push ( 1 ) ;
2011-11-06 20:27:42 +00:00
equal ( foo . width ( ) , origWidth , "Animation does not start on its own." ) ;
equal ( foo . queue ( "name" ) . length , 2 , "Queue length of 'name' queue" ) ;
2011-09-19 20:08:00 +00:00
foo . dequeue ( "name" ) ;
} , 100 ) ;
} ) ;
2009-11-07 16:22:35 +00:00
test ( "animate with no properties" , function ( ) {
2009-12-21 16:11:03 +00:00
expect ( 2 ) ;
2010-10-05 19:53:35 +00:00
2009-11-07 16:22:35 +00:00
var divs = jQuery ( "div" ) , count = 0 ;
divs . animate ( { } , function ( ) {
count ++ ;
} ) ;
2011-11-06 20:27:42 +00:00
equal ( divs . length , count , "Make sure that callback is called for each element in the set." ) ;
2009-12-21 16:11:03 +00:00
stop ( ) ;
var foo = jQuery ( "#foo" ) ;
foo . animate ( { } ) ;
foo . animate ( { top : 10 } , 100 , function ( ) {
ok ( true , "Animation was properly dequeued." ) ;
start ( ) ;
} ) ;
2009-11-07 16:22:35 +00:00
} ) ;
2009-01-14 23:09:52 +00:00
test ( "animate duration 0" , function ( ) {
2009-11-30 19:22:24 +00:00
expect ( 11 ) ;
2010-10-05 19:53:35 +00:00
2009-01-14 23:09:52 +00:00
stop ( ) ;
2010-10-05 19:53:35 +00:00
2009-11-30 19:22:24 +00:00
var $elems = jQuery ( [ { a : 0 } , { a : 0 } ] ) , counter = 0 ;
2010-10-05 19:53:35 +00:00
2011-11-06 20:27:42 +00:00
equal ( jQuery . timers . length , 0 , "Make sure no animation was running from another test" ) ;
2010-10-05 19:53:35 +00:00
2009-11-30 19:22:24 +00:00
$elems . eq ( 0 ) . animate ( { a : 1 } , 0 , function ( ) {
ok ( true , "Animate a simple property." ) ;
counter ++ ;
} ) ;
2010-10-05 19:53:35 +00:00
2009-01-14 23:09:52 +00:00
// Failed until [6115]
2011-11-06 20:27:42 +00:00
equal ( jQuery . timers . length , 0 , "Make sure synchronic animations are not left on jQuery.timers" ) ;
2010-10-05 19:53:35 +00:00
2011-11-06 20:27:42 +00:00
equal ( counter , 1 , "One synchronic animations" ) ;
2010-10-05 19:53:35 +00:00
2009-11-30 19:22:24 +00:00
$elems . animate ( { a : 2 } , 0 , function ( ) {
ok ( true , "Animate a second simple property." ) ;
counter ++ ;
} ) ;
2010-10-05 19:53:35 +00:00
2011-11-06 20:27:42 +00:00
equal ( counter , 3 , "Multiple synchronic animations" ) ;
2010-10-05 19:53:35 +00:00
2009-11-30 19:22:24 +00: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-14 23:09:52 +00:00
// Failed until [6115]
2011-11-06 20:27:42 +00:00
equal ( counter , 5 , "One synchronic and one asynchronic" ) ;
2009-01-14 23:09:52 +00:00
start ( ) ;
2009-09-15 00:32:13 +00:00
} ) ;
2010-10-05 19:53:35 +00:00
2009-09-15 00:32:13 +00:00
var $elem = jQuery ( "<div />" ) ;
2010-10-05 19:53:35 +00:00
$elem . show ( 0 , function ( ) {
2009-11-30 19:22:24 +00:00
ok ( true , "Show callback with no duration" ) ;
2009-09-15 00:32:13 +00:00
} ) ;
2010-10-05 19:53:35 +00:00
$elem . hide ( 0 , function ( ) {
2009-11-30 19:22:24 +00:00
ok ( true , "Hide callback with no duration" ) ;
2009-09-15 00:32:13 +00:00
} ) ;
2011-01-09 21:58:47 +00:00
// manually clean up detached elements
$elem . remove ( ) ;
2009-01-14 23:09:52 +00:00
} ) ;
2011-09-12 23:48:44 +00:00
test ( "animate hyphenated properties" , function ( ) {
2009-07-25 20:56:15 +00:00
expect ( 1 ) ;
stop ( ) ;
2011-01-09 21:58:47 +00:00
jQuery ( "#foo" )
2009-07-25 20:56:15 +00:00
. css ( "font-size" , 10 )
2011-09-12 23:48:44 +00:00
. animate ( { "font-size" : 20 } , 200 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( this . style . fontSize , "20px" , "The font-size property was animated." ) ;
2009-07-25 20:56:15 +00:00
start ( ) ;
} ) ;
} ) ;
2011-09-12 23:48:44 +00:00
test ( "animate non-element" , function ( ) {
2009-01-02 23:32:10 +00:00
expect ( 1 ) ;
stop ( ) ;
var obj = { test : 0 } ;
jQuery ( obj ) . animate ( { test : 200 } , 200 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( obj . test , 200 , "The custom property should be modified." ) ;
2009-01-02 23:32:10 +00:00
start ( ) ;
} ) ;
} ) ;
2007-09-04 00:28:22 +00:00
test ( "stop()" , function ( ) {
2011-09-12 23:48:44 +00:00
expect ( 4 ) ;
2007-09-04 00:28:22 +00:00
stop ( ) ;
2011-01-09 21:58:47 +00:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 21:36:49 +00:00
var w = 0 ;
2007-09-04 00:28:22 +00:00
2011-09-12 23:48:44 +00:00
$foo . hide ( ) . width ( 200 )
. animate ( { width : "show" } , 1000 ) ;
setTimeout ( function ( ) {
2007-11-30 21:36:49 +00:00
var nw = $foo . width ( ) ;
2010-09-17 18:30:30 +00:00
notEqual ( nw , w , "An animation occurred " + nw + "px " + w + "px" ) ;
2007-11-30 21:36:49 +00:00
$foo . stop ( ) ;
2007-09-04 00:28:22 +00:00
2007-11-30 21:36:49 +00:00
nw = $foo . width ( ) ;
2010-09-17 18:30:30 +00:00
notEqual ( nw , w , "Stop didn't reset the animation " + nw + "px " + w + "px" ) ;
2011-09-12 23:48:44 +00:00
setTimeout ( function ( ) {
2011-01-09 21:58:47 +00:00
$foo . removeData ( ) ;
$foo . removeData ( undefined , true ) ;
2011-11-06 20:27:42 +00:00
equal ( nw , $foo . width ( ) , "The animation didn't continue" ) ;
2007-11-30 21:36:49 +00:00
start ( ) ;
} , 100 ) ;
} , 100 ) ;
2011-09-12 23:48:44 +00:00
var $one = jQuery ( "#fadein" ) ;
var $two = jQuery ( "#show" ) ;
$one . fadeTo ( 100 , 0 , function ( ) {
$one . stop ( ) ;
} ) ;
setTimeout ( function ( ) {
$two . fadeTo ( 100 , 0 , function ( ) {
equal ( $two . css ( "opacity" ) , "0" , "Stop does not interfere with animations on other elements (#6641)" ) ;
// Reset styles
$one . add ( $two ) . css ( "opacity" , "" ) ;
} ) ;
} , 50 ) ;
2007-11-30 21:36:49 +00:00
} ) ;
test ( "stop() - several in queue" , function ( ) {
2009-02-19 21:30:25 +00:00
expect ( 3 ) ;
2007-11-30 21:36:49 +00:00
stop ( ) ;
2011-01-09 21:58:47 +00:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 21:36:49 +00:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2011-04-12 08:47:46 +00:00
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
$foo . animate ( { width : "show" } , 1000 ) ;
2007-11-30 21:36:49 +00:00
setTimeout ( function ( ) {
2011-11-06 20:27:42 +00:00
equal ( $foo . queue ( ) . length , 3 , "All 3 still in the queue" ) ;
2007-11-30 21:36:49 +00:00
var nw = $foo . width ( ) ;
2010-09-17 18:30:30 +00:00
notEqual ( nw , w , "An animation occurred " + nw + "px " + w + "px" ) ;
2007-11-30 21:36:49 +00:00
$foo . stop ( ) ;
nw = $foo . width ( ) ;
2010-09-17 18:30:30 +00:00
notEqual ( nw , w , "Stop didn't reset the animation " + nw + "px " + w + "px" ) ;
2007-11-30 21:36:49 +00:00
$foo . stop ( true ) ;
start ( ) ;
} , 100 ) ;
} ) ;
test ( "stop(clearQueue)" , function ( ) {
expect ( 4 ) ;
stop ( ) ;
2011-01-09 21:58:47 +00:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 21:36:49 +00:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2011-04-12 08:47:46 +00:00
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
$foo . animate ( { width : "show" } , 1000 ) ;
2007-11-30 21:36:49 +00:00
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" ) ;
2011-11-06 20:27:42 +00:00
equal ( $foo . queue ( ) . length , 0 , "The animation queue was cleared" ) ;
2007-11-30 21:36:49 +00:00
setTimeout ( function ( ) {
2011-11-06 20:27:42 +00:00
equal ( nw , $foo . width ( ) , "The animation didn't continue" ) ;
2007-11-30 21:36:49 +00:00
start ( ) ;
} , 100 ) ;
} , 100 ) ;
} ) ;
test ( "stop(clearQueue, gotoEnd)" , function ( ) {
2009-02-19 21:30:25 +00:00
expect ( 1 ) ;
2007-11-30 21:36:49 +00:00
stop ( ) ;
2011-01-09 21:58:47 +00:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 21:36:49 +00:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2011-04-12 08:47:46 +00:00
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
2007-11-30 21:36:49 +00:00
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 21:30:25 +00:00
// Disabled, being flaky
2011-11-06 20:27:42 +00:00
//equal( nw, 1, "Stop() reset the animation" );
2007-11-30 21:36:49 +00:00
setTimeout ( function ( ) {
2009-02-19 21:30:25 +00:00
// Disabled, being flaky
2011-11-06 20:27:42 +00:00
//equal( $foo.queue().length, 2, "The next animation continued" );
2007-11-30 21:36:49 +00:00
$foo . stop ( true ) ;
2007-09-04 00:28:22 +00:00
start ( ) ;
} , 100 ) ;
} , 100 ) ;
} ) ;
2011-10-12 01:21:59 +00:00
asyncTest ( "stop( queue, ..., ... ) - Stop single queues" , function ( ) {
2011-09-28 15:55:29 +00:00
expect ( 3 ) ;
var foo = jQuery ( "#foo" ) ,
saved ;
foo . width ( 200 ) . height ( 200 ) ;
foo . animate ( {
width : 400
} , {
duration : 1000 ,
complete : function ( ) {
2011-11-06 20:27:42 +00:00
equal ( foo . width ( ) , 400 , "Animation completed for standard queue" ) ;
equal ( foo . height ( ) , saved , "Height was not changed after the second stop" ) ;
2011-09-28 15:55:29 +00:00
start ( ) ;
}
} ) ;
foo . animate ( {
height : 400
} , {
duration : 1000 ,
queue : "height"
2011-10-12 01:21:59 +00:00
} ) . dequeue ( "height" ) . stop ( "height" , false , true ) ;
2011-09-28 15:55:29 +00:00
2011-11-06 20:27:42 +00:00
equal ( foo . height ( ) , 400 , "Height was stopped with gotoEnd" ) ;
2011-09-28 15:55:29 +00:00
foo . animate ( {
height : 200
} , {
duration : 1000 ,
queue : "height"
2011-10-12 01:21:59 +00:00
} ) . dequeue ( "height" ) . stop ( "height" , false , false ) ;
2011-09-28 15:55:29 +00:00
saved = foo . height ( ) ;
2011-10-07 15:16:38 +00:00
} ) ;
2011-09-28 15:55:29 +00:00
2007-01-09 17:15:22 +00:00
test ( "toggle()" , function ( ) {
2008-12-25 20:13:42 +00:00
expect ( 6 ) ;
2011-01-09 21:58:47 +00:00
var x = jQuery ( "#foo" ) ;
2007-11-30 21:36:49 +00:00
ok ( x . is ( ":visible" ) , "is visible" ) ;
2007-01-09 17:15:22 +00:00
x . toggle ( ) ;
2007-11-30 21:36:49 +00:00
ok ( x . is ( ":hidden" ) , "is hidden" ) ;
2007-01-09 17:15:22 +00:00
x . toggle ( ) ;
2007-11-30 21:36:49 +00:00
ok ( x . is ( ":visible" ) , "is visible again" ) ;
2010-10-05 19:53:35 +00:00
2008-12-25 20:13:42 +00: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 19:07:21 +00:00
} ) ;
2009-01-09 23:49:18 +00:00
jQuery . checkOverflowDisplay = function ( ) {
2010-10-05 20:20:44 +00:00
var o = jQuery . css ( this , "overflow" ) ;
2009-01-09 23:49:18 +00:00
2011-11-06 20:27:42 +00:00
equal ( o , "visible" , "Overflow should be visible: " + o ) ;
equal ( jQuery . css ( this , "display" ) , "inline" , "Display shouldn't be tampered with." ) ;
2009-01-09 23:49:18 +00:00
start ( ) ;
2011-05-07 23:18:52 +00:00
} ;
2009-01-09 23:49:18 +00:00
2012-04-23 19:05:12 +00:00
test ( "jQuery.fx.prototype.cur() - <1.8 Back Compat" , 7 , function ( ) {
2011-04-17 06:43:57 +00:00
var div = jQuery ( "<div></div>" ) . appendTo ( "#qunit-fixture" ) . css ( {
2011-02-17 18:12:57 +00:00
color : "#ABC" ,
border : "5px solid black" ,
left : "auto" ,
marginBottom : "-11000px"
2011-02-17 16:26:23 +00:00
} ) [ 0 ] ;
2011-11-06 20:27:42 +00:00
equal (
2011-02-17 18:12:57 +00:00
( new jQuery . fx ( div , { } , "color" ) ) . cur ( ) ,
jQuery . css ( div , "color" ) ,
2011-02-17 16:26:23 +00:00
"Return the same value as jQuery.css for complex properties (bug #7912)"
) ;
strictEqual (
2011-02-17 18:12:57 +00:00
( new jQuery . fx ( div , { } , "borderLeftWidth" ) ) . cur ( ) ,
2011-02-17 16:26:23 +00:00
5 ,
"Return simple values parsed as Float"
) ;
2011-02-17 18:12:57 +00:00
// backgroundPosition actually returns 0% 0% in most browser
// this fakes a "" return
2012-04-23 19:05:12 +00:00
// hook now gets called twice because Tween will grab the current
// value as it is being newed
2011-02-17 18:12:57 +00:00
jQuery . cssHooks . backgroundPosition = {
get : function ( ) {
ok ( true , "hook used" ) ;
return "" ;
}
} ;
2011-02-17 16:26:23 +00:00
strictEqual (
2011-02-17 18:12:57 +00:00
( new jQuery . fx ( div , { } , "backgroundPosition" ) ) . cur ( ) ,
2011-02-17 16:26:23 +00:00
0 ,
2011-02-17 18:12:57 +00:00
"Return 0 when jQuery.css returns an empty string"
2011-02-17 16:26:23 +00:00
) ;
2011-02-17 18:12:57 +00:00
delete jQuery . cssHooks . backgroundPosition ;
2011-02-17 16:26:23 +00:00
strictEqual (
2011-02-17 18:12:57 +00:00
( new jQuery . fx ( div , { } , "left" ) ) . cur ( ) ,
2011-02-17 16:26:23 +00:00
0 ,
2011-02-17 18:12:57 +00:00
"Return 0 when jQuery.css returns 'auto'"
2011-02-17 16:26:23 +00:00
) ;
2011-11-06 20:27:42 +00:00
equal (
2011-02-17 18:12:57 +00:00
( new jQuery . fx ( div , { } , "marginBottom" ) ) . cur ( ) ,
- 11000 ,
2011-02-17 16:26:23 +00:00
"support negative values < -10000 (bug #7193)"
) ;
2010-12-30 07:16:39 +00:00
} ) ;
2009-01-09 23:49:18 +00:00
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 19:53:35 +00:00
2009-01-09 23:49:18 +00: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 19:07:21 +00:00
2011-09-12 23:48:44 +00:00
jQuery . each ( {
"CSS Auto" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "auto" + prop )
. text ( "This is a long string of text." ) ;
2010-09-27 15:51:01 +00:00
return "" ;
2007-07-29 19:07:21 +00:00
} ,
2011-09-12 23:48:44 +00:00
"JS Auto" : function ( elem , prop ) {
jQuery ( elem ) . css ( prop , "" )
. text ( "This is a long string of text." ) ;
2010-09-27 15:51:01 +00:00
return "" ;
2007-07-29 19:07:21 +00:00
} ,
2011-09-12 23:48:44 +00:00
"CSS 100" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "large" + prop ) ;
2010-09-27 15:51:01 +00:00
return "" ;
2007-07-29 19:07:21 +00:00
} ,
2011-09-12 23:48:44 +00:00
"JS 100" : function ( elem , prop ) {
jQuery ( elem ) . css ( prop , prop === "opacity" ? 1 : "100px" ) ;
return prop === "opacity" ? 1 : 100 ;
2007-07-29 19:07:21 +00:00
} ,
2011-09-12 23:48:44 +00:00
"CSS 50" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "med" + prop ) ;
2010-09-27 15:51:01 +00:00
return "" ;
2007-07-29 19:07:21 +00:00
} ,
2011-09-12 23:48:44 +00:00
"JS 50" : function ( elem , prop ) {
jQuery ( elem ) . css ( prop , prop === "opacity" ? 0.50 : "50px" ) ;
return prop === "opacity" ? 0.5 : 50 ;
2007-07-29 19:07:21 +00:00
} ,
2011-09-12 23:48:44 +00:00
"CSS 0" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "no" + prop ) ;
2010-09-27 15:51:01 +00:00
return "" ;
2007-07-29 19:07:21 +00:00
} ,
2011-09-12 23:48:44 +00:00
"JS 0" : function ( elem , prop ) {
jQuery ( elem ) . css ( prop , prop === "opacity" ? 0 : "0px" ) ;
2007-07-29 19:07:21 +00:00
return 0 ;
}
2011-05-08 00:46:38 +00:00
} , function ( fn , f ) {
jQuery . each ( {
2011-09-12 23:48:44 +00:00
"show" : function ( elem , prop ) {
jQuery ( elem ) . hide ( ) . addClass ( "wide" + prop ) ;
2009-01-09 23:49:18 +00:00
return "show" ;
} ,
2011-09-12 23:48:44 +00:00
"hide" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "wide" + prop ) ;
2009-01-09 23:49:18 +00:00
return "hide" ;
} ,
2011-09-12 23:48:44 +00:00
"100" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "wide" + prop ) ;
2009-01-09 23:49:18 +00:00
return prop == "opacity" ? 1 : 100 ;
} ,
2011-09-12 23:48:44 +00:00
"50" : function ( elem , prop ) {
2009-01-09 23:49:18 +00:00
return prop == "opacity" ? 0.50 : 50 ;
} ,
2011-09-12 23:48:44 +00:00
"0" : function ( elem , prop ) {
jQuery ( elem ) . addClass ( "noback" ) ;
2009-01-09 23:49:18 +00:00
return 0 ;
}
2011-09-12 23:48:44 +00:00
} , function ( tn , t ) {
2007-07-29 19:07:21 +00:00
test ( fn + " to " + tn , function ( ) {
2009-01-09 23:49:18 +00:00
var elem = jQuery . makeTest ( fn + " to " + tn ) ;
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00: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" ) ;
2011-08-17 20:29:55 +00:00
2011-08-16 15:19:06 +00:00
if ( f _o === "" ) {
f _o = 1 ;
}
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
var num = 0 ;
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
if ( t _h == "show" ) num ++ ;
if ( t _w == "show" ) num ++ ;
2011-09-12 23:48:44 +00:00
if ( t _w == "hide" || t _w == "show" ) num ++ ;
if ( t _h == "hide" || t _h == "show" ) num ++ ;
if ( t _o == "hide" || t _o == "show" ) num ++ ;
2007-07-29 19:07:21 +00:00
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 19:53:35 +00:00
2011-09-12 23:48:44 +00:00
expect ( num ) ;
2007-07-29 19:07:21 +00:00
stop ( ) ;
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
var anim = { width : t _w , height : t _h , opacity : t _o } ;
2010-10-05 19:53:35 +00:00
2011-04-07 04:00:52 +00:00
elem . animate ( anim , 50 ) ;
2011-09-12 23:48:44 +00:00
jQuery . when ( elem ) . done ( function ( elem ) {
2011-04-07 04:00:52 +00:00
elem = elem [ 0 ] ;
2011-08-17 20:29:55 +00:00
if ( t _w == "show" ) {
2011-11-06 20:27:42 +00:00
equal ( elem . style . display , "block" , "Showing, display should block: " + elem . style . display ) ;
2011-08-17 20:29:55 +00:00
}
2010-10-05 19:53:35 +00:00
2011-09-12 23:48:44 +00:00
if ( t _w == "hide" || t _w == "show" ) {
ok ( f _w === "" ? elem . style . width === f _w : elem . style . width . indexOf ( f _w ) === 0 , "Width must be reset to " + f _w + ": " + elem . style . width ) ;
2011-08-17 20:29:55 +00:00
}
2010-10-05 19:53:35 +00:00
2011-09-12 23:48:44 +00:00
if ( t _h == "hide" || t _h == "show" ) {
ok ( f _h === "" ? elem . style . height === f _h : elem . style . height . indexOf ( f _h ) === 0 , "Height must be reset to " + f _h + ": " + elem . style . height ) ;
2011-08-17 20:29:55 +00:00
}
var cur _o = jQuery . style ( elem , "opacity" ) ;
if ( f _o !== jQuery . css ( elem , "opacity" ) ) {
f _o = f ( elem , "opacity" ) ;
}
2011-08-17 21:06:21 +00:00
// The only time an _empty_string_ will be matched is in IE
// otherwise, the correct values will be tested as usual
2011-08-17 20:29:55 +00:00
if ( f _o === "" ) {
f _o = 1 ;
}
2011-08-17 21:06:21 +00:00
// See above
2011-08-17 20:29:55 +00:00
if ( cur _o === "" ) {
cur _o = 1 ;
}
2010-09-17 17:38:13 +00:00
2011-08-17 20:29:55 +00:00
if ( t _o == "hide" || t _o == "show" ) {
2011-11-06 20:27:42 +00:00
equal ( cur _o , f _o , "Opacity must be reset to " + f _o + ": " + cur _o ) ;
2011-08-17 20:29:55 +00:00
}
2010-10-05 19:53:35 +00:00
2011-08-17 20:29:55 +00:00
if ( t _w == "hide" ) {
2011-11-06 20:27:42 +00:00
equal ( elem . style . display , "none" , "Hiding, display should be none: " + elem . style . display ) ;
2011-08-17 20:29:55 +00:00
}
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
if ( t _o . constructor == Number ) {
2011-11-06 20:27:42 +00:00
equal ( cur _o , t _o , "Final opacity should be " + t _o + ": " + cur _o ) ;
2010-10-05 19:53:35 +00:00
2011-09-12 23:48:44 +00:00
ok ( jQuery . css ( elem , "opacity" ) != "" || cur _o == t _o , "Opacity should be explicitly set to " + t _o + ", is instead: " + cur _o ) ;
2007-07-29 19:07:21 +00:00
}
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
if ( t _w . constructor == Number ) {
2011-11-06 20:27:42 +00:00
equal ( elem . style . width , t _w + "px" , "Final width should be " + t _w + ": " + elem . style . width ) ;
2010-10-05 19:53:35 +00:00
2011-09-12 23:48:44 +00:00
var cur _w = jQuery . css ( elem , "width" ) ;
2007-07-29 19:07:21 +00:00
2011-09-12 23:48:44 +00:00
ok ( elem . style . width != "" || cur _w == t _w , "Width should be explicitly set to " + t _w + ", is instead: " + cur _w ) ;
2007-07-29 19:07:21 +00:00
}
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
if ( t _h . constructor == Number ) {
2011-11-06 20:27:42 +00:00
equal ( elem . style . height , t _h + "px" , "Final height should be " + t _h + ": " + elem . style . height ) ;
2010-10-05 19:53:35 +00:00
2011-09-12 23:48:44 +00:00
var cur _h = jQuery . css ( elem , "height" ) ;
2007-07-29 19:07:21 +00:00
2011-09-12 23:48:44 +00:00
ok ( elem . style . height != "" || cur _h == t _h , "Height should be explicitly set to " + t _h + ", is instead: " + cur _w ) ;
2007-07-29 19:07:21 +00:00
}
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
if ( t _h == "show" ) {
2011-09-12 23:48:44 +00:00
var old _h = jQuery . css ( elem , "height" ) ;
jQuery ( elem ) . append ( "<br/>Some more text<br/>and some more..." ) ;
2010-09-23 03:43:55 +00:00
if ( /Auto/ . test ( fn ) ) {
2011-09-12 23:48:44 +00:00
notEqual ( jQuery . css ( elem , "height" ) , old _h , "Make sure height is auto." ) ;
2010-09-23 03:43:55 +00:00
} else {
2011-11-06 20:27:42 +00:00
equal ( jQuery . css ( elem , "height" ) , old _h , "Make sure height is not auto." ) ;
2010-09-23 03:43:55 +00:00
}
2007-07-29 19:07:21 +00:00
}
2010-10-05 19:53:35 +00:00
2011-01-09 21:58:47 +00:00
// manually remove generated element
2011-09-12 23:48:44 +00:00
jQuery ( elem ) . remove ( ) ;
2011-01-09 21:58:47 +00:00
2007-07-29 19:07:21 +00:00
start ( ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2011-09-12 23:48:44 +00:00
jQuery . fn . saveState = function ( hiddenOverflow ) {
2011-04-12 08:47:46 +00:00
var check = [ "opacity" , "height" , "width" , "display" , "overflow" ] ;
2009-01-10 00:16:48 +00:00
expect ( check . length ) ;
2010-10-05 19:53:35 +00:00
2007-07-29 19:07:21 +00:00
stop ( ) ;
return this . each ( function ( ) {
var self = this ;
self . save = { } ;
2011-09-12 23:48:44 +00:00
jQuery . each ( check , function ( i , c ) {
self . save [ c ] = c === "overflow" && hiddenOverflow ? "hidden" : self . style [ c ] || jQuery . css ( self , c ) ;
2007-07-29 19:07:21 +00:00
} ) ;
} ) ;
} ;
2011-09-12 23:48:44 +00:00
jQuery . checkState = function ( ) {
2007-07-29 19:07:21 +00:00
var self = this ;
2011-09-12 23:48:44 +00:00
jQuery . each ( this . save , function ( c , v ) {
var cur = self . style [ c ] || jQuery . css ( self , c ) ;
2011-11-06 20:27:42 +00:00
equal ( cur , v , "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")" ) ;
2007-07-29 19:07:21 +00:00
} ) ;
2011-01-09 21:58:47 +00:00
// manually clean data on modified element
2011-09-12 23:48:44 +00:00
jQuery . removeData ( this , "olddisplay" , true ) ;
2011-01-09 21:58:47 +00:00
2007-07-29 19:07:21 +00:00
start ( ) ;
2011-04-11 23:09:35 +00:00
} ;
2007-07-29 19:07:21 +00:00
// Chaining Tests
test ( "Chain fadeOut fadeIn" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#fadein div" ) . saveState ( ) . fadeOut ( "fast" ) . fadeIn ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00:00
} ) ;
test ( "Chain fadeIn fadeOut" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#fadeout div" ) . saveState ( ) . fadeIn ( "fast" ) . fadeOut ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00:00
} ) ;
test ( "Chain hide show" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#show div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . hide ( "fast" ) . show ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00:00
} ) ;
test ( "Chain show hide" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#hide div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . show ( "fast" ) . hide ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00: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 20:31:32 +00:00
test ( "Chain show hide with easing and callback" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#hide div" ) . saveState ( ) . show ( "fast" ) . hide ( "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 20:31:32 +00:00
} ) ;
2007-07-29 19:07:21 +00:00
test ( "Chain toggle in" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#togglein div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . toggle ( "fast" ) . toggle ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00:00
} ) ;
test ( "Chain toggle out" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#toggleout div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . toggle ( "fast" ) . toggle ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00: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 20:31:32 +00:00
test ( "Chain toggle out with easing and callback" , function ( ) {
2011-09-12 23:48:44 +00: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 20:31:32 +00:00
} ) ;
2007-07-29 19:07:21 +00:00
test ( "Chain slideDown slideUp" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#slidedown div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideDown ( "fast" ) . slideUp ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00:00
} ) ;
test ( "Chain slideUp slideDown" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#slideup div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideUp ( "fast" ) . slideDown ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00: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 20:31:32 +00:00
test ( "Chain slideUp slideDown with easing and callback" , function ( ) {
2011-09-12 23:48:44 +00: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 20:31:32 +00:00
} ) ;
2007-07-29 19:07:21 +00:00
test ( "Chain slideToggle in" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#slidetogglein div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideToggle ( "fast" ) . slideToggle ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00:00
} ) ;
test ( "Chain slideToggle out" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#slidetoggleout div" ) . saveState ( jQuery . support . shrinkWrapBlocks ) . slideToggle ( "fast" ) . slideToggle ( "fast" , jQuery . checkState ) ;
2007-07-29 19:07:21 +00:00
} ) ;
2010-10-17 18:26:32 +00:00
test ( "Chain fadeToggle in" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#fadetogglein div" ) . saveState ( ) . fadeToggle ( "fast" ) . fadeToggle ( "fast" , jQuery . checkState ) ;
2010-10-17 18:26:32 +00:00
} ) ;
test ( "Chain fadeToggle out" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#fadetoggleout div" ) . saveState ( ) . fadeToggle ( "fast" ) . fadeToggle ( "fast" , jQuery . checkState ) ;
2010-10-17 18:26:32 +00: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 20:31:32 +00:00
test ( "Chain fadeTo 0.5 1.0 with easing and callback)" , function ( ) {
2011-09-12 23:48:44 +00:00
jQuery ( "#fadeto div" ) . saveState ( ) . fadeTo ( "fast" , 0.5 ) . fadeTo ( "fast" , 1.0 , "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 20:31:32 +00:00
} ) ;
2009-01-09 23:49:18 +00:00
jQuery . makeTest = function ( text ) {
2008-05-28 23:18:25 +00:00
var elem = jQuery ( "<div></div>" )
2011-09-12 23:48:44 +00:00
. attr ( "id" , "test" + jQuery . makeTest . id ++ )
2007-07-29 19:07:21 +00:00
. addClass ( "box" ) ;
2008-05-28 23:18:25 +00:00
jQuery ( "<h4></h4>" )
2007-07-29 19:07:21 +00:00
. text ( text )
. appendTo ( "#fx-tests" )
. after ( elem ) ;
return elem ;
2011-05-07 23:18:52 +00:00
} ;
2007-07-29 19:07:21 +00:00
2009-01-09 23:49:18 +00:00
jQuery . makeTest . id = 1 ;
2009-12-01 22:34:44 +00:00
test ( "jQuery.show('fast') doesn't clear radio buttons (bug #1095)" , function ( ) {
expect ( 4 ) ;
2011-02-13 22:02:14 +00:00
stop ( ) ;
2009-12-01 22:34:44 +00:00
var $checkedtest = jQuery ( "#checkedtest" ) ;
// IE6 was clearing "checked" in jQuery(elem).show("fast");
$checkedtest . hide ( ) . show ( "fast" , function ( ) {
2011-02-13 22:02:14 +00:00
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-01 22:34:44 +00:00
} ) ;
} ) ;
2009-12-06 16:37:34 +00:00
2011-09-12 23:48:44 +00:00
jQuery . each ( {
"slideToggle" : function ( $elem ) {
return $elem . height ( ) ;
} ,
"fadeToggle" : function ( $elem ) {
return $elem . css ( "opacity" ) ;
} ,
"toggle" : function ( $elem ) {
return $elem . width ( ) ;
}
} ,
function ( method , defProp ) {
test ( method + "().stop()." + method + "()" , function ( ) {
2012-01-20 20:57:11 +00:00
expect ( 8 ) ;
2012-03-06 02:37:43 +00:00
var animTime = 2000 ;
2011-09-12 23:48:44 +00:00
jQuery . each ( [ "in" , "out" ] , function ( i , type ) {
var $elem = jQuery ( "#" + method . toLowerCase ( ) + type ) ,
startVal = defProp ( $elem ) ;
2012-01-20 20:57:11 +00:00
$elem [ method ] ( animTime ) ;
2011-09-12 23:48:44 +00:00
stop ( ) ;
setTimeout ( function ( ) {
$elem . stop ( ) ;
notEqual ( defProp ( $elem ) , startVal , ".stop() is called about halfway through animation." ) ;
2012-01-20 20:57:11 +00:00
$elem [ method ] ( animTime , function ( ) {
equal ( defProp ( $elem ) , startVal , "After doing .stop() halfway through hide, check that state has been saved for returning to original property value." ) ;
// Start from hidden position to show this time
$elem . hide ( ) [ method ] ( animTime ) ;
setTimeout ( function ( ) {
$elem . stop ( ) ;
notEqual ( defProp ( $elem ) , startVal , ".stop() is called about halfway through animation." ) ;
$elem [ method ] ( animTime , function ( ) {
equal ( defProp ( $elem ) , startVal , "After doing .stop() halfway through show, check that state has been saved for returning to original property value." ) ;
// Remove olddisplay data from .hide() call
jQuery . removeData ( this , "olddisplay" , true ) ;
start ( ) ;
} ) ;
} , animTime / 2 ) ;
2011-09-12 23:48:44 +00:00
} ) ;
2012-01-20 20:57:11 +00:00
} , animTime / 2 ) ;
2011-09-12 23:48:44 +00:00
} ) ;
} ) ;
} ) ;
2009-12-06 16:37:34 +00:00
test ( "animate with per-property easing" , function ( ) {
2010-10-05 19:53:35 +00:00
2011-05-08 01:26:02 +00:00
expect ( 5 ) ;
2009-12-06 16:37:34 +00:00
stop ( ) ;
2010-10-05 19:53:35 +00:00
2011-05-08 00:46:38 +00:00
var data = { a : 0 , b : 0 , c : 0 } ,
_test1 _called = false ,
_test2 _called = false ,
2011-05-08 01:26:02 +00:00
_default _test _called = false ,
props = {
a : [ 100 , "_test1" ] ,
b : [ 100 , "_test2" ] ,
c : 100
} ;
2010-10-05 19:53:35 +00:00
2011-05-08 00:46:38 +00:00
jQuery . easing [ "_test1" ] = function ( p ) {
2009-12-06 16:37:34 +00:00
_test1 _called = true ;
2011-05-08 00:46:38 +00:00
return p ;
2009-12-06 16:37:34 +00:00
} ;
2010-10-05 19:53:35 +00:00
2011-05-03 23:07:24 +00:00
jQuery . easing [ "_test2" ] = function ( p ) {
2009-12-06 16:37:34 +00:00
_test2 _called = true ;
2011-05-03 23:07:24 +00:00
return p ;
2009-12-06 16:37:34 +00:00
} ;
2010-10-05 19:53:35 +00:00
2011-05-03 23:07:24 +00:00
jQuery . easing [ "_default_test" ] = function ( p ) {
2009-12-06 16:37:34 +00:00
_default _test _called = true ;
2011-05-03 23:07:24 +00:00
return p ;
2009-12-06 16:37:34 +00:00
} ;
2010-10-05 19:53:35 +00:00
2011-05-08 01:26:02 +00:00
jQuery ( data ) . animate ( props , 400 , "_default_test" , function ( ) {
2009-12-06 16:37:34 +00:00
start ( ) ;
2011-05-03 23:07:24 +00:00
2011-05-08 00:46:38 +00:00
ok ( _test1 _called , "Easing function (_test1) called" ) ;
ok ( _test2 _called , "Easing function (_test2) called" ) ;
ok ( _default _test _called , "Easing function (_default) called" ) ;
2011-05-08 01:26:02 +00:00
equal ( props . a [ 1 ] , "_test1" , "animate does not change original props (per-property easing would be lost)" ) ;
equal ( props . b [ 1 ] , "_test2" , "animate does not change original props (per-property easing would be lost)" ) ;
2009-12-06 16:37:34 +00:00
} ) ;
2010-10-05 19:53:35 +00:00
2009-12-18 16:01:19 +00:00
} ) ;
2010-10-11 20:22:43 +00:00
2012-05-11 20:20:32 +00:00
test ( "animate with CSS shorthand properties" , function ( ) {
expect ( 11 ) ;
stop ( ) ;
var _default _count = 0 ,
_special _count = 0 ,
propsBasic = { padding : "10 20 30" } ,
propsSpecial = { padding : [ "1 2 3" , "_special" ] } ;
jQuery . easing [ "_default" ] = function ( p ) {
if ( p >= 1 ) {
_default _count ++ ;
}
return p ;
} ;
jQuery . easing [ "_special" ] = function ( p ) {
if ( p >= 1 ) {
_special _count ++ ;
}
return p ;
} ;
jQuery ( "#foo" )
. animate ( propsBasic , 200 , "_default" , function ( ) {
equal ( this . style . paddingTop , "10px" , "padding-top was animated" ) ;
equal ( this . style . paddingLeft , "20px" , "padding-left was animated" ) ;
equal ( this . style . paddingRight , "20px" , "padding-right was animated" ) ;
equal ( this . style . paddingBottom , "30px" , "padding-bottom was animated" ) ;
equal ( _default _count , 4 , "per-animation default easing called for each property" ) ;
_default _count = 0 ;
} )
. animate ( propsSpecial , 200 , "_default" , function ( ) {
equal ( this . style . paddingTop , "1px" , "padding-top was animated again" ) ;
equal ( this . style . paddingLeft , "2px" , "padding-left was animated again" ) ;
equal ( this . style . paddingRight , "2px" , "padding-right was animated again" ) ;
equal ( this . style . paddingBottom , "3px" , "padding-bottom was animated again" ) ;
equal ( _default _count , 0 , "per-animation default easing not called" ) ;
equal ( _special _count , 4 , "special easing called for each property" ) ;
jQuery ( this ) . css ( "padding" , "0" ) ;
delete jQuery . easing [ "_default" ] ;
delete jQuery . easing [ "_special" ] ;
start ( ) ;
} ) ;
} ) ;
2010-10-11 20:22:43 +00:00
test ( "hide hidden elements, with animation (bug #7141)" , function ( ) {
expect ( 3 ) ;
QUnit . reset ( ) ;
stop ( ) ;
2010-12-30 06:34:48 +00:00
2011-04-17 06:43:57 +00:00
var div = jQuery ( "<div style='display:none'></div>" ) . appendTo ( "#qunit-fixture" ) ;
2011-11-06 20:27:42 +00:00
equal ( div . css ( "display" ) , "none" , "Element is hidden by default" ) ;
2010-10-11 20:22:43 +00:00
div . hide ( 1 , function ( ) {
2011-01-09 21:52:33 +00:00
ok ( ! jQuery . _data ( div , "olddisplay" ) , "olddisplay is undefined after hiding an already-hidden element" ) ;
2010-10-11 20:22:43 +00:00
div . show ( 1 , function ( ) {
2011-11-06 20:27:42 +00:00
equal ( div . css ( "display" ) , "block" , "Show a double-hidden element" ) ;
2010-10-11 20:22:43 +00:00
start ( ) ;
} ) ;
} ) ;
} ) ;
2011-02-13 22:03:46 +00:00
test ( "animate unit-less properties (#4966)" , 2 , function ( ) {
stop ( ) ;
2011-04-17 06:43:57 +00:00
var div = jQuery ( "<div style='z-index: 0; position: absolute;'></div>" ) . appendTo ( "#qunit-fixture" ) ;
2011-02-13 22:03:46 +00:00
equal ( div . css ( "z-index" ) , "0" , "z-index is 0" ) ;
div . animate ( { zIndex : 2 } , function ( ) {
equal ( div . css ( "z-index" ) , "2" , "z-index is 2" ) ;
start ( ) ;
} ) ;
} ) ;
2011-05-07 23:18:52 +00:00
test ( "animate properties missing px w/ opacity as last (#9074)" , 2 , function ( ) {
expect ( 6 ) ;
stop ( ) ;
var div = jQuery ( "<div style='position: absolute; margin-left: 0; left: 0px;'></div>" )
. appendTo ( "#qunit-fixture" ) ;
function cssInt ( prop ) {
return parseInt ( div . css ( prop ) , 10 ) ;
}
equal ( cssInt ( "marginLeft" ) , 0 , "Margin left is 0" ) ;
equal ( cssInt ( "left" ) , 0 , "Left is 0" ) ;
div . animate ( {
left : 200 ,
marginLeft : 200 ,
opacity : 0
} , 1000 ) ;
setTimeout ( function ( ) {
var ml = cssInt ( "marginLeft" ) ,
l = cssInt ( "left" ) ;
notEqual ( ml , 0 , "Margin left is not 0 after partial animate" ) ;
notEqual ( ml , 200 , "Margin left is not 200 after partial animate" ) ;
notEqual ( l , 0 , "Left is not 0 after partial animate" ) ;
notEqual ( l , 200 , "Left is not 200 after partial animate" ) ;
div . stop ( ) . remove ( ) ;
start ( ) ;
} , 100 ) ;
} ) ;
2011-05-10 15:22:12 +00:00
2011-05-09 15:46:00 +00:00
test ( "callbacks should fire in correct order (#9100)" , function ( ) {
stop ( ) ;
var a = 1 ,
cb = 0 ,
$lis = jQuery ( "<p data-operation='*2'></p><p data-operation='^2'></p>" ) . appendTo ( "#qunit-fixture" )
// The test will always pass if no properties are animated or if the duration is 0
. animate ( { fontSize : 12 } , 13 , function ( ) {
a *= jQuery ( this ) . data ( "operation" ) === "*2" ? 2 : a ;
cb ++ ;
if ( cb === 2 ) {
equal ( a , 4 , "test value has been *2 and _then_ ^2" ) ;
start ( ) ;
}
} ) ;
2011-05-10 15:22:12 +00:00
} ) ;
2011-09-28 16:00:21 +00:00
asyncTest ( "callbacks that throw exceptions will be removed (#5684)" , function ( ) {
expect ( 2 ) ;
var foo = jQuery ( "#foo" ) ;
function testException ( ) {
}
foo . animate ( { height : 1 } , 1 , function ( ) {
throw new testException ;
} ) ;
// this test thoroughly abuses undocumented methods - please feel free to update
// with any changes internally to these functions.
// make sure that the standard timer loop will NOT run.
jQuery . fx . stop ( ) ;
setTimeout ( function ( ) {
// the first call to fx.tick should raise the callback exception
raises ( jQuery . fx . tick , testException , "Exception was thrown" ) ;
// the second call shouldn't
jQuery . fx . tick ( ) ;
ok ( true , "Test completed without throwing a second exception" ) ;
start ( ) ;
} , 1 ) ;
} ) ;
2011-12-09 01:01:23 +00:00
test ( "animate will scale margin properties individually" , function ( ) {
expect ( 2 ) ;
stop ( ) ;
var foo = jQuery ( "#foo" ) . css ( {
margin : 0 ,
marginLeft : 100
} ) ;
ok ( foo . css ( "marginLeft" ) !== foo . css ( "marginRight" ) , "Sanity Check" ) ;
foo . animate ( {
margin : 200
} ) . stop ( ) ;
ok ( foo . css ( "marginLeft" ) !== foo . css ( "marginRight" ) , "The margin properties are different" ) ;
// clean up for next test
foo . css ( {
marginLeft : '' ,
marginRight : '' ,
marginTop : '' ,
marginBottom : ''
} ) ;
start ( ) ;
} ) ;
2012-04-23 19:05:12 +00:00
2012-05-29 02:25:04 +00:00
test ( "Do not append px to 'fill-opacity' #9548" , 1 , function ( ) {
var $div = jQuery ( "<div>" ) . appendTo ( "#qunit-fixture" ) ;
$div . css ( "fill-opacity" , 0 ) . animate ( { "fill-opacity" : 1.0 } , 0 , function ( ) {
equal ( jQuery ( this ) . css ( "fill-opacity" ) , 1 , "Do not append px to 'fill-opacity'" ) ;
} ) ;
} ) ;
2012-04-23 19:05:12 +00:00
// Start 1.8 Animation tests
asyncTest ( "jQuery.Animation( object, props, opts )" , 1 , function ( ) {
var testObject = {
foo : 0 ,
bar : 1 ,
width : 100
} ,
testDest = {
foo : 1 ,
bar : 0 ,
width : 200
} ;
jQuery . Animation ( testObject , testDest , { duration : 1 } )
. done ( function ( ) {
deepEqual ( testObject , testDest , "Animated foo and bar" ) ;
start ( ) ;
} ) ;
} ) ;
asyncTest ( "Animate Option: step: function( percent, tween )" , 1 , function ( ) {
var counter = { } ;
jQuery ( "#foo" ) . animate ( {
prop1 : 1 ,
prop2 : 2 ,
prop3 : 3
} , {
duration : 1 ,
step : function ( value , tween ) {
calls = counter [ tween . prop ] = counter [ tween . prop ] || [ ] ;
calls . push ( value ) ;
}
} ) . queue ( function ( next ) {
deepEqual ( counter , {
prop1 : [ 0 , 1 ] ,
prop2 : [ 0 , 2 ] ,
prop3 : [ 0 , 3 ]
} , "Step function was called once at 0% and once at 100% for each property" ) ;
next ( ) ;
start ( ) ;
} ) ;
} ) ;
asyncTest ( "Animate callbacks have correct context" , 2 , function ( ) {
var foo = jQuery ( "#foo" ) ;
foo . animate ( {
height : 10
} , 10 , function ( ) {
equal ( foo [ 0 ] , this , "Complete callback after stop(true) `this` is element" ) ;
} ) . stop ( true , true ) ;
foo . animate ( {
height : 100
} , 10 , function ( ) {
equal ( foo [ 0 ] , this , "Complete callback `this` is element" ) ;
start ( ) ;
} ) ;
} ) ;
2012-05-11 20:32:50 +00:00
asyncTest ( "User supplied callback called after show when fx off (#8892)" , 2 , function ( ) {
var foo = jQuery ( "#foo" ) ;
jQuery . fx . off = true ;
foo . hide ( ) ;
foo . fadeIn ( 500 , function ( ) {
ok ( jQuery ( this ) . is ( ":visible" ) , "Element is visible in callback" ) ;
foo . fadeOut ( 500 , function ( ) {
ok ( jQuery ( this ) . is ( ":hidden" ) , "Element is hidden in callback" ) ;
jQuery . fx . off = false ;
start ( ) ;
} ) ;
} ) ;
} ) ;
2012-05-18 17:48:24 +00:00
2012-05-23 02:36:55 +00:00
test ( "animate should set display for disconnected nodes" , function ( ) {
expect ( 18 ) ;
var i = 0 ,
methods = {
toggle : [ 1 ] ,
slideToggle : [ ] ,
fadeIn : [ ] ,
fadeTo : [ "fast" , 0.5 ] ,
slideDown : [ "fast" ] ,
show : [ 1 ] ,
animate : [ { width : "show" } ]
} ,
elems = [
// parentNode = document fragment
jQuery ( "<div>test</div>" ) ,
// parentNode = null
jQuery ( "<div/>" ) ,
jQuery ( '<div style="display:inline"/>' ) ,
jQuery ( '<div style="display:none"/>' )
] ;
strictEqual ( elems [ 0 ] . show ( ) [ 0 ] . style . display , "block" , "set display with show() for element with parentNode = document fragment" ) ;
strictEqual ( elems [ 1 ] . show ( ) [ 0 ] . style . display , "block" , "set display with show() for element with parentNode = null" ) ;
strictEqual ( elems [ 2 ] . show ( ) [ 0 ] . style . display , "inline" , "show() should not change display if it already set" ) ;
strictEqual ( elems [ 3 ] . show ( ) [ 0 ] . style . display , "block" , "show() should change display if it already set to none" ) ;
// cleanup
jQuery . each ( elems , function ( ) {
jQuery . removeData ( this [ 0 ] , "olddisplay" , true ) ;
} ) ;
stop ( ) ;
jQuery . each ( methods , function ( name , opt ) {
jQuery . each ( [
// parentNode = document fragment
jQuery ( "<div>test</div>" ) ,
// parentNode = null
jQuery ( "<div/>" )
] , function ( ) {
var callback = [ function ( ) {
strictEqual ( this . style . display , "block" , "set display to block with " + name ) ;
jQuery . removeData ( this , "olddisplay" , true ) ;
if ( ++ i === 14 ) {
start ( ) ;
}
} ] ;
jQuery . fn [ name ] . apply ( this , opt . concat ( callback ) ) ;
} ) ;
} ) ;
} ) ;
2012-05-18 17:48:24 +00:00
asyncTest ( "Animation callback should not show animated element as animated (#7157)" , 1 , function ( ) {
var foo = jQuery ( "#foo" ) ;
foo . animate ( {
opacity : 0
} , 100 , function ( ) {
ok ( ! foo . is ( ':animated' ) , "The element is not animated" ) ;
start ( ) ;
} ) ;
2012-05-23 02:36:55 +00:00
} ) ;
asyncTest ( "hide called on element within hidden parent should set display to none (#10045)" , 3 , function ( ) {
var hidden = jQuery ( ".hidden" ) ,
elems = jQuery ( "<div>hide</div><div>hide0</div><div>hide1</div>" ) ;
hidden . append ( elems ) ;
jQuery . when (
elems . eq ( 0 ) . hide ( ) ,
elems . eq ( 1 ) . hide ( 0 ) ,
elems . eq ( 2 ) . hide ( 1 )
) . done ( function ( ) {
strictEqual ( elems . get ( 0 ) . style . display , "none" , "hide() called on element within hidden parent should set display to none" ) ;
strictEqual ( elems . get ( 1 ) . style . display , "none" , "hide( 0 ) called on element within hidden parent should set display to none" ) ;
strictEqual ( elems . get ( 2 ) . style . display , "none" , "hide( 1 ) called on element within hidden parent should set display to none" ) ;
start ( ) ;
} ) ;
} ) ;
asyncTest ( "hide, fadeOut and slideUp called on element width height and width = 0 should set display to none" , 5 , function ( ) {
var foo = jQuery ( "#foo" ) ,
i = 0 ,
elems = jQuery ( ) ;
for ( ; i < 5 ; i ++ ) {
elems = elems . add ( '<div style="width:0;height:0;"></div>' ) ;
}
foo . append ( elems ) ;
jQuery . when (
elems . eq ( 0 ) . hide ( ) ,
elems . eq ( 1 ) . hide ( jQuery . noop ) ,
elems . eq ( 2 ) . hide ( 1 ) ,
elems . eq ( 3 ) . fadeOut ( ) ,
elems . eq ( 4 ) . slideUp ( )
) . done ( function ( ) {
strictEqual ( elems . get ( 0 ) . style . display , "none" , "hide() called on element width height and width = 0 should set display to none" ) ;
strictEqual ( elems . get ( 1 ) . style . display , "none" ,
"hide( jQuery.noop ) called on element width height and width = 0 should set display to none" ) ;
strictEqual ( elems . get ( 2 ) . style . display , "none" , "hide( 1 ) called on element width height and width = 0 should set display to none" ) ;
strictEqual ( elems . get ( 3 ) . style . display , "none" , "fadeOut() called on element width height and width = 0 should set display to none" ) ;
strictEqual ( elems . get ( 4 ) . style . display , "none" , "slideUp() called on element width height and width = 0 should set display to none" ) ;
start ( ) ;
} ) ;
} ) ;
2012-05-23 03:04:45 +00:00
asyncTest ( "Handle queue:false promises" , 10 , function ( ) {
var foo = jQuery ( "#foo" ) . clone ( ) . andSelf ( ) ,
step = 1 ;
foo . animate ( {
top : 1
} , {
duration : 10 ,
queue : false ,
complete : function ( ) {
ok ( step ++ <= 2 , "Step one or two" ) ;
}
} ) . animate ( {
bottom : 1
} , {
duration : 10 ,
complete : function ( ) {
ok ( step > 2 && step < 5 , "Step three or four" ) ;
step ++ ;
}
} ) ;
foo . promise ( ) . done ( function ( ) {
equal ( step ++ , 5 , "steps 1-5: queue:false then queue:fx done" ) ;
foo . animate ( {
top : 10
} , {
duration : 10 ,
complete : function ( ) {
ok ( step > 5 && step < 8 , "Step six or seven" ) ;
step ++ ;
}
} ) . animate ( {
bottom : 10
} , {
duration : 10 ,
queue : false ,
complete : function ( ) {
ok ( step > 7 && step < 10 , "Step eight or nine" ) ;
step ++ ;
}
} ) . promise ( ) . done ( function ( ) {
equal ( step ++ , 10 , "steps 6-10: queue:fx then queue:false" ) ;
start ( ) ;
} ) ;
} ) ;
} ) ;
asyncTest ( "multiple unqueued and promise" , 4 , function ( ) {
var foo = jQuery ( "#foo" ) ,
step = 1 ;
foo . animate ( {
marginLeft : 300
} , {
duration : 500 ,
queue : false ,
complete : function ( ) {
strictEqual ( step ++ , 2 , "Step 2" ) ;
}
} ) . animate ( {
top : 100
} , {
duration : 1500 ,
queue : false ,
complete : function ( ) {
strictEqual ( step ++ , 3 , "Step 3" ) ;
}
} ) . animate ( { } , {
duration : 2000 ,
queue : false ,
complete : function ( ) {
// no properties is a non-op and finishes immediately
strictEqual ( step ++ , 1 , "Step 1" ) ;
}
} ) . promise ( ) . done ( function ( ) {
strictEqual ( step ++ , 4 , "Step 4" ) ;
start ( ) ;
} ) ;
2012-05-29 02:25:04 +00:00
} ) ;
2012-05-29 16:40:13 +00:00
} // if ( jQuery.fx )