2011-01-09 22:58:47 +01:00
module ( "effects" , { teardown : moduleTeardown } ) ;
2006-11-18 14:37:01 +01:00
2010-10-05 20:28:43 +02:00
test ( "sanity check" , function ( ) {
expect ( 1 ) ;
2011-04-17 08:43:57 +02:00
ok ( jQuery ( "#dl:visible, #qunit-fixture:visible, #foo:visible" ) . length === 3 , "QUnit state is correct for testing effects" ) ;
2010-10-05 20:28:43 +02:00
} ) ;
2009-03-18 22:15:38 +01:00
test ( "show()" , function ( ) {
2010-11-03 23:59:55 +01:00
expect ( 28 ) ;
2010-10-26 23:37:44 +02:00
var hiddendiv = jQuery ( "div.hidden" ) ;
2010-10-27 20:35:26 +02:00
hiddendiv . hide ( ) . show ( ) ;
equals ( hiddendiv . css ( "display" ) , "block" , "Make sure a pre-hidden div is visible." ) ;
2011-04-17 08:43:57 +02:00
var div = jQuery ( "<div>" ) . hide ( ) . appendTo ( "#qunit-fixture" ) . show ( ) ;
2010-11-03 23:59:55 +01:00
equal ( div . css ( "display" ) , "block" , "Make sure pre-hidden divs show" ) ;
2010-10-27 20:35:26 +02:00
QUnit . reset ( ) ;
hiddendiv = jQuery ( "div.hidden" ) ;
2010-10-26 23:37:44 +02: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-08 01:18:52 +02:00
var pass = true ;
div = jQuery ( "#qunit-fixture div" ) ;
2009-03-18 22:15:38 +01:00
div . show ( ) . each ( function ( ) {
if ( this . style . display == "none" ) pass = false ;
} ) ;
ok ( pass , "Show" ) ;
2010-01-20 00:27:20 +01:00
var speeds = {
2011-02-13 23:02:14 +01:00
"null speed" : null ,
"undefined speed" : undefined ,
"empty string speed" : "" ,
"false speed" : false
2010-01-20 00:27:20 +01:00
} ;
jQuery . each ( speeds , function ( name , speed ) {
2011-02-13 23:02:14 +01:00
pass = true ;
div . hide ( ) . show ( speed ) . each ( function ( ) {
if ( this . style . display == "none" ) pass = false ;
} ) ;
ok ( pass , "Show with " + name ) ;
} ) ;
2010-01-20 00:27:20 +01:00
jQuery . each ( speeds , function ( name , speed ) {
2011-02-13 23:02:14 +01:00
pass = true ;
div . hide ( ) . show ( speed , function ( ) {
2010-01-20 00:27:20 +01:00
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
2011-04-17 08:43:57 +02: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 07:34:48 +01:00
2010-10-09 03:29:41 +02:00
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 ) ;
} ) ;
2011-04-17 20:07:42 +02: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 22:15:38 +01:00
} ) ;
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
2011-04-17 08:43:57 +02: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 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 ( ) ;
}
} ) ;
} ) ;
} ) ;
2010-11-10 00:06:33 +01:00
2011-02-13 23:02:14 +01:00
// Supports #7397
2010-11-10 00:06:33 +01:00
test ( "Persist correct display value" , function ( ) {
2011-02-13 23:02:14 +01:00
expect ( 3 ) ;
2010-11-10 00:06:33 +01:00
QUnit . reset ( ) ;
stop ( ) ;
// #show-tests * is set display: none in CSS
2011-04-17 08:43:57 +02:00
jQuery ( "#qunit-fixture" ) . append ( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" ) ;
2010-12-30 07:34:48 +01:00
var $span = jQuery ( "#show-tests span" ) ,
2011-02-13 23:02:14 +01:00
displayNone = $span . css ( "display" ) ,
2011-04-12 10:47:46 +02:00
display = "" , num = 0 ;
2010-11-10 00:06:33 +01:00
2011-02-13 23:02:14 +01:00
$span . show ( ) ;
2010-12-30 07:34:48 +01:00
2011-02-13 23:02:14 +01:00
display = $span . css ( "display" ) ;
2010-12-30 07:34:48 +01:00
2011-02-13 23:02:14 +01:00
$span . hide ( ) ;
2010-12-30 07:34:48 +01:00
2011-02-13 23:02:14 +01:00
$span . fadeIn ( 100 , function ( ) {
equals ( $span . css ( "display" ) , display , "Expecting display: " + display ) ;
$span . fadeOut ( 100 , function ( ) {
equals ( $span . css ( "display" ) , displayNone , "Expecting display: " + displayNone ) ;
$span . fadeIn ( 100 , function ( ) {
equals ( $span . css ( "display" ) , display , "Expecting display: " + display ) ;
start ( ) ;
} ) ;
} ) ;
} ) ;
2010-11-10 00:06:33 +01:00
} ) ;
2011-04-12 17:48:07 +02:00
test ( "show() resolves correct default display #8099" , function ( ) {
2011-04-13 19:58:17 +02:00
expect ( 7 ) ;
2011-04-13 21:43:15 +02:00
var tt8099 = jQuery ( "<tt/>" ) . appendTo ( "body" ) ,
dfn8099 = jQuery ( "<dfn/>" , { html : "foo" } ) . appendTo ( "body" ) ;
2011-04-12 17:48:07 +02:00
2011-04-13 21:43:15 +02:00
equals ( tt8099 . css ( "display" ) , "none" , "default display override for all tt" ) ;
equals ( tt8099 . show ( ) . css ( "display" ) , "inline" , "Correctly resolves display:inline" ) ;
2011-04-12 17:48:07 +02:00
2011-04-13 19:43:52 +02:00
equals ( jQuery ( "#foo" ) . hide ( ) . show ( ) . css ( "display" ) , "block" , "Correctly resolves display:block after hide/show" ) ;
2011-04-13 21:43:15 +02:00
equals ( tt8099 . hide ( ) . css ( "display" ) , "none" , "default display override for all tt" ) ;
equals ( tt8099 . show ( ) . css ( "display" ) , "inline" , "Correctly resolves display:inline" ) ;
2011-04-13 19:43:52 +02:00
2011-04-13 21:43:15 +02:00
equals ( dfn8099 . css ( "display" ) , "none" , "default display override for all dfn" ) ;
equals ( dfn8099 . show ( ) . css ( "display" ) , "inline" , "Correctly resolves display:inline" ) ;
2011-04-13 19:58:17 +02:00
2011-04-13 21:43:15 +02:00
tt8099 . remove ( ) ;
dfn8099 . remove ( ) ;
2011-04-12 17:48:07 +02:00
} ) ;
2010-11-10 00:06:33 +01:00
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 ( ) ;
2011-04-12 10:47:46 +02:00
var hash = { opacity : "show" } ;
2008-05-29 01:18:25 +02:00
var hashCopy = jQuery . extend ( { } , hash ) ;
2011-04-12 10:47:46 +02:00
jQuery ( "#foo" ) . animate ( hash , 0 , function ( ) {
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" ) ;
2010-12-30 07:34:48 +01:00
2010-10-15 03:48:03 +02:00
span . remove ( ) ;
if ( jQuery . support . inlineBlockNeedsLayout || expected === "inline-block" ) {
stop ( ) ;
2011-04-12 10:47:46 +02:00
jQuery ( "#foo" ) . css ( { display : "inline" , width : "" , height : "" } ) . animate ( { width : 42 , height : 42 } , 100 , function ( ) {
2010-10-15 03:48:03 +02:00
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" ) ;
2010-12-30 07:34:48 +01:00
2010-10-15 03:48:03 +02:00
span . remove ( ) ;
if ( jQuery . support . inlineBlockNeedsLayout || expected === "inline-block" ) {
stop ( ) ;
2011-04-12 10:47:46 +02:00
jQuery ( "#foo" ) . css ( { display : "" , width : "" , height : "" } )
. append ( "<span>text</span>" )
. children ( "span" )
2010-10-15 03:48:03 +02:00
. 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" ) ;
2011-04-12 10:47:46 +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
} ) ;
2011-04-12 10:47:46 +02:00
$foo . animate ( { fontSize : "2em" } , { queue : false , duration : 10 , complete : function ( ) {
2007-11-17 00:39:23 +01:00
// 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
} ) ;
2011-01-09 22:58:47 +01:00
// manually clean up detached elements
$elem . remove ( ) ;
2009-01-15 00:09:52 +01:00
} ) ;
2009-07-25 22:56:15 +02:00
test ( "animate hyphenated properties" , function ( ) {
expect ( 1 ) ;
stop ( ) ;
2011-01-09 22:58:47 +01:00
jQuery ( "#foo" )
2009-07-25 22:56:15 +02:00
. 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 ( ) ;
2011-01-09 22:58:47 +01:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2007-09-04 02:28:22 +02:00
2011-04-12 10:47:46 +02: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 ( ) {
2011-01-09 22:58:47 +01:00
$foo . removeData ( ) ;
$foo . removeData ( undefined , true ) ;
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 ( ) ;
2011-01-09 22:58:47 +01:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2011-04-12 10:47:46 +02:00
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
$foo . animate ( { width : "show" } , 1000 ) ;
2007-11-30 22:36:49 +01:00
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 ( ) ;
2011-01-09 22:58:47 +01:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2011-04-12 10:47:46 +02:00
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
$foo . animate ( { width : "show" } , 1000 ) ;
2007-11-30 22:36:49 +01: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" ) ;
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 ( ) ;
2011-01-09 22:58:47 +01:00
var $foo = jQuery ( "#foo" ) ;
2007-11-30 22:36:49 +01:00
var w = 0 ;
$foo . hide ( ) . width ( 200 ) . width ( ) ;
2011-04-12 10:47:46 +02:00
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
$foo . animate ( { width : "show" } , 1000 ) ;
$foo . animate ( { width : "hide" } , 1000 ) ;
2007-11-30 22:36:49 +01: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 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 ) ;
2011-01-09 22:58:47 +01:00
var x = jQuery ( "#foo" ) ;
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 ( ) ;
2011-05-08 01:18:52 +02:00
} ;
2009-01-10 00:49:18 +01:00
2011-02-17 19:12:57 +01:00
test ( "jQuery.fx.prototype.cur()" , 6 , function ( ) {
2011-04-17 08:43:57 +02:00
var div = jQuery ( "<div></div>" ) . appendTo ( "#qunit-fixture" ) . css ( {
2011-02-17 19:12:57 +01:00
color : "#ABC" ,
border : "5px solid black" ,
left : "auto" ,
marginBottom : "-11000px"
2011-02-17 17:26:23 +01:00
} ) [ 0 ] ;
equals (
2011-02-17 19:12:57 +01:00
( new jQuery . fx ( div , { } , "color" ) ) . cur ( ) ,
jQuery . css ( div , "color" ) ,
2011-02-17 17:26:23 +01:00
"Return the same value as jQuery.css for complex properties (bug #7912)"
) ;
strictEqual (
2011-02-17 19:12:57 +01:00
( new jQuery . fx ( div , { } , "borderLeftWidth" ) ) . cur ( ) ,
2011-02-17 17:26:23 +01:00
5 ,
"Return simple values parsed as Float"
) ;
2011-02-17 19:12:57 +01:00
// backgroundPosition actually returns 0% 0% in most browser
// this fakes a "" return
jQuery . cssHooks . backgroundPosition = {
get : function ( ) {
ok ( true , "hook used" ) ;
return "" ;
}
} ;
2011-02-17 17:26:23 +01:00
strictEqual (
2011-02-17 19:12:57 +01:00
( new jQuery . fx ( div , { } , "backgroundPosition" ) ) . cur ( ) ,
2011-02-17 17:26:23 +01:00
0 ,
2011-02-17 19:12:57 +01:00
"Return 0 when jQuery.css returns an empty string"
2011-02-17 17:26:23 +01:00
) ;
2011-02-17 19:12:57 +01:00
delete jQuery . cssHooks . backgroundPosition ;
2011-02-17 17:26:23 +01:00
strictEqual (
2011-02-17 19:12:57 +01:00
( new jQuery . fx ( div , { } , "left" ) ) . cur ( ) ,
2011-02-17 17:26:23 +01:00
0 ,
2011-02-17 19:12:57 +01:00
"Return 0 when jQuery.css returns 'auto'"
2011-02-17 17:26:23 +01:00
) ;
equals (
2011-02-17 19:12:57 +01:00
( new jQuery . fx ( div , { } , "marginBottom" ) ) . cur ( ) ,
- 11000 ,
2011-02-17 17:26:23 +01:00
"support negative values < -10000 (bug #7193)"
) ;
2010-12-30 08:16:39 +01:00
} ) ;
2009-01-10 00:49:18 +01: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 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 ;
}
2011-05-08 02:46:38 +02:00
} , function ( fn , f ) {
jQuery . each ( {
2009-01-10 00:49:18 +01:00
"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
2011-04-07 06:00:52 +02:00
elem . animate ( anim , 50 ) ;
jQuery . when ( elem ) . done ( function ( elem ) {
elem = elem [ 0 ] ;
2007-07-29 21:07:21 +02:00
if ( t _w == "show" )
2011-04-07 06:00:52 +02:00
equals ( elem . style . display , "block" , "Showing, display should block: " + elem . 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" )
2011-04-07 06:00:52 +02:00
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 ) ;
2010-10-05 21:53:35 +02:00
2007-07-29 21:07:21 +02:00
if ( t _h == "hide" || t _h == "show" )
2011-04-07 06:00:52 +02:00
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 ) ;
2010-10-05 21:53:35 +02:00
2011-04-07 06:00:52 +02:00
var cur _o = jQuery . style ( elem , "opacity" ) ;
2010-09-17 19:38:13 +02:00
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" )
2011-04-07 06:00:52 +02:00
equals ( elem . style . display , "none" , "Hiding, display should be none: " + elem . 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
2011-04-07 06:00:52 +02: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 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 ) {
2011-04-07 06:00:52 +02:00
equals ( elem . style . width , t _w + "px" , "Final width should be " + t _w + ": " + elem . style . width ) ;
2010-10-05 21:53:35 +02:00
2011-04-07 06:00:52 +02:00
var cur _w = jQuery . css ( elem , "width" ) ;
2007-07-29 21:07:21 +02:00
2011-04-07 06:00:52 +02:00
ok ( elem . style . width != "" || cur _w == t _w , "Width should be explicitly set to " + t _w + ", is instead: " + cur _w ) ;
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 _h . constructor == Number ) {
2011-04-07 06:00:52 +02:00
equals ( elem . style . height , t _h + "px" , "Final height should be " + t _h + ": " + elem . style . height ) ;
2010-10-05 21:53:35 +02:00
2011-04-07 06:00:52 +02:00
var cur _h = jQuery . css ( elem , "height" ) ;
2007-07-29 21:07:21 +02:00
2011-04-07 06:00:52 +02:00
ok ( elem . style . height != "" || cur _h == t _h , "Height should be explicitly set to " + t _h + ", is instead: " + cur _w ) ;
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 _h == "show" ) {
2011-04-07 06:00:52 +02:00
var old _h = jQuery . css ( elem , "height" ) ;
jQuery ( elem ) . append ( "<br/>Some more text<br/>and some more..." ) ;
2010-09-23 05:43:55 +02:00
if ( /Auto/ . test ( fn ) ) {
2011-04-07 06:00:52 +02:00
notEqual ( jQuery . css ( elem , "height" ) , old _h , "Make sure height is auto." ) ;
2010-09-23 05:43:55 +02:00
} else {
2011-04-07 06:00:52 +02:00
equals ( jQuery . css ( elem , "height" ) , old _h , "Make sure height is not auto." ) ;
2010-09-23 05:43:55 +02:00
}
2007-07-29 21:07:21 +02:00
}
2010-10-05 21:53:35 +02:00
2011-01-09 22:58:47 +01:00
// manually remove generated element
2011-04-07 06:00:52 +02:00
jQuery ( elem ) . remove ( ) ;
2011-01-09 22:58:47 +01:00
2007-07-29 21:07:21 +02:00
start ( ) ;
} ) ;
} ) ;
} ) ;
} ) ;
2010-10-05 22:20:44 +02:00
jQuery . fn . saveState = function ( hiddenOverflow ) {
2011-04-12 10:47:46 +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
} ) ;
2011-01-09 22:58:47 +01:00
// manually clean data on modified element
2011-04-12 10:47:46 +02:00
jQuery . removeData ( this , "olddisplay" , true ) ;
2011-01-09 22:58:47 +01:00
2007-07-29 21:07:21 +02:00
start ( ) ;
2011-04-12 01:09:35 +02:00
} ;
2007-07-29 21:07:21 +02:00
// Chaining Tests
test ( "Chain fadeOut fadeIn" , function ( ) {
2011-04-12 10:47:46 +02:00
jQuery ( "#fadein div" ) . saveState ( ) . fadeOut ( "fast" ) . fadeIn ( "fast" , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain fadeIn fadeOut" , function ( ) {
2011-04-12 10:47:46 +02:00
jQuery ( "#fadeout div" ) . saveState ( ) . fadeIn ( "fast" ) . fadeOut ( "fast" , jQuery . checkState ) ;
2007-07-29 21:07:21 +02:00
} ) ;
test ( "Chain hide show" , function ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +02: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 22:31:32 +02:00
} ) ;
2007-07-29 21:07:21 +02:00
test ( "Chain toggle in" , function ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +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 ( ) {
2011-04-12 10:47:46 +02:00
jQuery ( "#fadetogglein div" ) . saveState ( ) . fadeToggle ( "fast" ) . fadeToggle ( "fast" , jQuery . checkState ) ;
2010-10-17 20:26:32 +02:00
} ) ;
test ( "Chain fadeToggle out" , function ( ) {
2011-04-12 10:47:46 +02:00
jQuery ( "#fadetoggleout div" ) . saveState ( ) . fadeToggle ( "fast" ) . fadeToggle ( "fast" , jQuery . checkState ) ;
2010-10-17 20:26:32 +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 fadeTo 0.5 1.0 with easing and callback)" , function ( ) {
2011-04-12 10:47:46 +02: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 22:31:32 +02:00
} ) ;
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" )
. after ( elem ) ;
return elem ;
2011-05-08 01:18:52 +02:00
} ;
2007-07-29 21:07:21 +02:00
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 ) ;
2011-02-13 23:02:14 +01:00
stop ( ) ;
2009-12-01 23:34:44 +01:00
var $checkedtest = jQuery ( "#checkedtest" ) ;
// IE6 was clearing "checked" in jQuery(elem).show("fast");
$checkedtest . hide ( ) . show ( "fast" , function ( ) {
2011-02-13 23:02:14 +01: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 23:34:44 +01:00
} ) ;
} ) ;
2009-12-06 17:37:34 +01:00
test ( "animate with per-property easing" , function ( ) {
2010-10-05 21:53:35 +02:00
2011-05-08 03:26:02 +02:00
expect ( 5 ) ;
2009-12-06 17:37:34 +01:00
stop ( ) ;
2010-10-05 21:53:35 +02:00
2011-05-08 02:46:38 +02:00
var data = { a : 0 , b : 0 , c : 0 } ,
_test1 _called = false ,
_test2 _called = false ,
2011-05-08 03:26:02 +02:00
_default _test _called = false ,
props = {
a : [ 100 , "_test1" ] ,
b : [ 100 , "_test2" ] ,
c : 100
} ;
2010-10-05 21:53:35 +02:00
2011-05-08 02:46:38 +02:00
jQuery . easing [ "_test1" ] = function ( p ) {
2009-12-06 17:37:34 +01:00
_test1 _called = true ;
2011-05-08 02:46:38 +02:00
return p ;
2009-12-06 17:37:34 +01:00
} ;
2010-10-05 21:53:35 +02:00
2011-05-04 01:07:24 +02:00
jQuery . easing [ "_test2" ] = function ( p ) {
2009-12-06 17:37:34 +01:00
_test2 _called = true ;
2011-05-04 01:07:24 +02:00
return p ;
2009-12-06 17:37:34 +01:00
} ;
2010-10-05 21:53:35 +02:00
2011-05-04 01:07:24 +02:00
jQuery . easing [ "_default_test" ] = function ( p ) {
2009-12-06 17:37:34 +01:00
_default _test _called = true ;
2011-05-04 01:07:24 +02:00
return p ;
2009-12-06 17:37:34 +01:00
} ;
2010-10-05 21:53:35 +02:00
2011-05-08 03:26:02 +02:00
jQuery ( data ) . animate ( props , 400 , "_default_test" , function ( ) {
2009-12-06 17:37:34 +01:00
start ( ) ;
2011-05-04 01:07:24 +02:00
2011-05-08 02:46:38 +02: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 03:26:02 +02: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 17:37:34 +01:00
} ) ;
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 ( ) ;
2011-04-17 08:43:57 +02:00
var div = jQuery ( "<div style='display:none'></div>" ) . appendTo ( "#qunit-fixture" ) ;
2010-10-11 22:22:43 +02:00
equals ( div . css ( "display" ) , "none" , "Element is hidden by default" ) ;
div . hide ( ) ;
2011-01-09 22:52:33 +01:00
ok ( ! jQuery . _data ( div , "olddisplay" ) , "olddisplay is undefined after hiding an already-hidden element" ) ;
2010-10-11 22:22:43 +02:00
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 ( ) ;
2010-12-30 07:34:48 +01:00
2011-04-17 08:43:57 +02:00
var div = jQuery ( "<div style='display:none'></div>" ) . appendTo ( "#qunit-fixture" ) ;
2010-10-11 22:22:43 +02:00
equals ( div . css ( "display" ) , "none" , "Element is hidden by default" ) ;
div . hide ( 1 , function ( ) {
2011-01-09 22:52:33 +01:00
ok ( ! jQuery . _data ( div , "olddisplay" ) , "olddisplay is undefined after hiding an already-hidden element" ) ;
2010-10-11 22:22:43 +02:00
div . show ( 1 , function ( ) {
equals ( div . css ( "display" ) , "block" , "Show a double-hidden element" ) ;
start ( ) ;
} ) ;
} ) ;
} ) ;
2011-02-13 23:03:46 +01:00
test ( "animate unit-less properties (#4966)" , 2 , function ( ) {
stop ( ) ;
2011-04-17 08:43:57 +02:00
var div = jQuery ( "<div style='z-index: 0; position: absolute;'></div>" ) . appendTo ( "#qunit-fixture" ) ;
2011-02-13 23:03:46 +01: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-08 01:18:52 +02: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 ) ;
} ) ;