").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'");
});
});
// 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();
});
});
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();
});
});
});
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("
test
"),
// parentNode = null
jQuery("
"),
jQuery('
'),
jQuery('
')
];
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("
test
"),
// parentNode = null
jQuery("
")
], 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 ) );
});
});
});
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();
});
});
asyncTest( "hide called on element within hidden parent should set display to none (#10045)", 3, function() {
var hidden = jQuery(".hidden"),
elems = jQuery("
hide
hide0
hide1
");
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('
');
}
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();
});
});
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();
});
});
} // if ( jQuery.fx )