3 // Can't test what ain't there
4 if ( !includesModule( "effects" ) ) {
9 oldRaf = window.requestAnimationFrame,
12 jQuery.style( this, "display", "none" );
15 this.className = "hidden";
19 QUnit.module( "effects", {
20 beforeEach: function() {
21 this.sandbox = sinon.createSandbox();
22 this.clock = this.sandbox.useFakeTimers( 505877050 );
23 window.requestAnimationFrame = null;
26 afterEach: function() {
27 this.sandbox.restore();
29 window.requestAnimationFrame = oldRaf;
30 return moduleTeardown.apply( this, arguments );
34 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "sanity check", function( assert ) {
36 assert.equal( jQuery( "#qunit-fixture:visible, #foo:visible" ).length, 2, "QUnit state is correct for testing effects" );
39 QUnit.test( "show() basic", function( assert ) {
42 var div = jQuery( "<div>" ).hide().appendTo( "#qunit-fixture" ).show();
44 assert.equal( div.css( "display" ), "block", "Make sure pre-hidden divs show" );
46 // Clean up the detached node
50 QUnit.test( "show()", function( assert ) {
53 var div, speeds, test,
54 hiddendiv = jQuery( "div.hidden" );
56 assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
58 hiddendiv.css( "display", "block" );
59 assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
62 assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
64 hiddendiv.css( "display", "" );
66 div = jQuery( "#fx-queue div" ).slice( 0, 4 );
67 div.show().each( function() {
68 assert.notEqual( this.style.display, "none", "don't change any <div> with display block" );
73 "undefined speed": undefined,
77 jQuery.each( speeds, function( name, speed ) {
79 div.hide().show( speed ).each( function() {
80 if ( this.style.display === "none" ) {
84 assert.ok( pass, "Show with " + name );
87 jQuery.each( speeds, function( name, speed ) {
89 div.hide().show( speed, function() {
92 assert.ok( pass, "Show with " + name + " does not call animate callback" );
96 "<div id='show-tests'>" +
97 "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
98 "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
99 "<ul><li></li></ul></div>"
100 ).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
110 "thead": "table-header-group",
111 "tbody": "table-row-group",
119 jQuery.each( test, function( selector, expected ) {
120 var elem = jQuery( selector, "#show-tests" ).show();
121 assert.equal( elem.css( "display" ), expected, "Show using correct display type for " + selector );
124 jQuery( "#show-tests" ).remove();
126 // Make sure that showing or hiding a text node doesn't cause an error
127 jQuery( "<div>test</div> text <span>test</span>" ).show().remove();
128 jQuery( "<div>test</div> text <span>test</span>" ).hide().remove();
131 supportjQuery.each( hideOptions, function( type, setup ) {
132 QUnit.test( "show(Number) - " + type + " hidden", function( assert ) {
136 "<div id='show-tests'>" +
137 "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
138 "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody>" +
140 "<ul><li></li></ul></div>"
141 ).appendTo( "#qunit-fixture" ).find( "*" ).each( setup );
143 // Note: inline elements are expected to be inline-block
144 // because we're showing width/height
145 // Can't animate width/height inline
155 "thead": "table-header-group",
156 "tbody": "table-row-group",
164 jQuery.each( test, function( selector ) {
165 jQuery( selector, "#show-tests" ).show( fxInterval * 10 );
167 this.clock.tick( fxInterval * 5 );
168 jQuery.each( test, function( selector, expected ) {
169 jQuery( selector, "#show-tests" ).each( function() {
171 jQuery( this ).css( "display" ),
172 expected === "inline" ? "inline-block" : expected,
173 "Correct display type during animation for " + selector
177 this.clock.tick( fxInterval * 5 );
178 jQuery.each( test, function( selector, expected ) {
179 jQuery( selector, "#show-tests" ).each( function() {
180 assert.equal( jQuery( this ).css( "display" ), expected,
181 "Correct display type after animation for " + selector );
185 jQuery( "#show-tests" ).remove();
189 // Supports trac-7397
190 supportjQuery.each( hideOptions, function( type, setup ) {
191 QUnit.test( "Persist correct display value - " + type + " hidden", function( assert ) {
194 jQuery( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" )
195 .appendTo( "#qunit-fixture" ).find( "*" ).each( setup );
197 var $span = jQuery( "#show-tests span" ),
198 displayNone = $span.css( "display" ),
204 display = $span.css( "display" );
208 $span.fadeIn( fxInterval * 10, function() {
209 assert.equal( $span.css( "display" ), display, "Expecting display: " + display );
210 $span.fadeOut( fxInterval * 10, function() {
211 assert.equal( $span.css( "display" ), displayNone, "Expecting display: " + displayNone );
212 $span.fadeIn( fxInterval * 10, function() {
213 assert.equal( $span.css( "display" ), display, "Expecting display: " + display );
218 clock.tick( fxInterval * 30 );
222 // IE doesn't support Shadow DOM.
224 "Persist correct display value - " + type + " hidden, shadow child", function( assert ) {
227 jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
229 var shadowHost = document.querySelector( "#shadowHost" );
230 var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
231 shadowRoot.innerHTML = "<style>.hidden{display: none;}</style>" +
232 "<span id='shadowChild' class='hidden'></span>";
233 var shadowChild = shadowRoot.querySelector( "#shadowChild" );
235 var $shadowChild = jQuery( shadowChild );
236 var displayNone = "none";
237 var display = "inline";
238 var clock = this.clock;
240 $shadowChild.fadeIn( fxInterval * 10, function() {
241 assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
242 $shadowChild.fadeOut( fxInterval * 10, function() {
243 assert.equal( $shadowChild.css( "display" ), displayNone, "Expecting shadow display: " + displayNone );
244 $shadowChild.fadeIn( fxInterval * 10, function() {
245 assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
250 clock.tick( fxInterval * 30 );
254 QUnit.test( "animate(Hash, Object, Function)", function( assert ) {
256 var hash = { opacity: "show" },
257 hashCopy = jQuery.extend( {}, hash );
258 jQuery( "#foo" ).animate( hash, 0, function() {
259 assert.equal( hash.opacity, hashCopy.opacity, "Check if animate changed the hash parameter" );
263 QUnit.test( "animate relative values", function( assert ) {
267 bases = [ "%", "px", "em" ],
268 adjustments = [ "px", "em" ],
269 container = jQuery( "<div></div>" )
270 .css( { position: "absolute", height: "50em", width: "50em" } ),
271 animations = bases.length * adjustments.length;
273 assert.expect( 2 * animations );
275 jQuery.each( bases, function( _, baseUnit ) {
276 jQuery.each( adjustments, function( _, adjustUnit ) {
277 var base = value + baseUnit,
278 adjust = { height: "+=2" + adjustUnit, width: "-=2" + adjustUnit },
279 elem = jQuery( "<div></div>" )
280 .appendTo( container.clone().appendTo( "#qunit-fixture" ) )
282 position: "absolute",
284 width: value + adjustUnit
286 baseScale = elem[ 0 ].offsetHeight / value,
287 adjustScale = elem[ 0 ].offsetWidth / value;
289 elem.css( "width", base ).animate( adjust, fxInterval * 10, function() {
290 assert.equal( this.offsetHeight, value * baseScale + 2 * adjustScale,
291 baseUnit + "+=" + adjustUnit );
292 assert.equal( this.offsetWidth, value * baseScale - 2 * adjustScale,
293 baseUnit + "-=" + adjustUnit );
297 clock.tick( fxInterval * 10 );
302 QUnit.test( "animate negative height", function( assert ) {
304 jQuery( "#foo" ).animate( { height: -100 }, fxInterval * 10, function() {
305 assert.equal( this.offsetHeight, 0, "Verify height." );
307 this.clock.tick( fxInterval * 10 );
310 QUnit.test( "animate negative margin", function( assert ) {
312 jQuery( "#foo" ).animate( { "marginTop": -100 }, fxInterval * 10, function() {
313 assert.equal( jQuery( this ).css( "marginTop" ), "-100px", "Verify margin." );
315 this.clock.tick( fxInterval * 10 );
318 QUnit.test( "animate negative margin with px", function( assert ) {
320 jQuery( "#foo" ).animate( { marginTop: "-100px" }, fxInterval * 10, function() {
321 assert.equal( jQuery( this ).css( "marginTop" ), "-100px", "Verify margin." );
323 this.clock.tick( fxInterval * 10 );
326 QUnit.test( "animate negative padding", function( assert ) {
328 jQuery( "#foo" ).animate( { "paddingBottom": -100 }, fxInterval * 10, function() {
329 assert.equal( jQuery( this ).css( "paddingBottom" ), "0px", "Verify paddingBottom." );
331 this.clock.tick( fxInterval * 10 );
334 QUnit.test( "animate block as inline width/height", function( assert ) {
337 jQuery( "#foo" ).css( { display: "inline", width: "", height: "" } ).animate( { width: 42, height: 42 }, fxInterval * 10, function() {
338 assert.equal( jQuery( this ).css( "display" ), "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
339 assert.equal( this.offsetWidth, 42, "width was animated" );
340 assert.equal( this.offsetHeight, 42, "height was animated" );
342 this.clock.tick( fxInterval * 10 );
345 QUnit.test( "animate native inline width/height", function( assert ) {
348 jQuery( "#foo" ).css( { display: "", width: "", height: "" } )
349 .append( "<span>text</span>" )
351 .animate( { width: 42, height: 42 }, fxInterval * 10, function() {
352 assert.equal( jQuery( this ).css( "display" ), "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
353 assert.equal( this.offsetWidth, 42, "width was animated" );
354 assert.equal( this.offsetHeight, 42, "height was animated" );
356 this.clock.tick( fxInterval * 10 );
359 QUnit.test( "animate block width/height", function( assert ) {
362 jQuery( "<div>" ).appendTo( "#qunit-fixture" ).css( {
371 duration: fxInterval * 10,
373 if ( jQuery( this ).width() > 42 ) {
374 assert.ok( false, "width was incorrectly augmented during animation" );
377 complete: function() {
378 assert.equal( jQuery( this ).css( "display" ), "block", "inline-block was not set on block element when animating width/height" );
379 assert.equal( jQuery( this ).width(), 42, "width was animated" );
380 assert.equal( jQuery( this ).height(), 42, "height was animated" );
383 this.clock.tick( fxInterval * 10 );
386 QUnit.test( "animate table width/height", function( assert ) {
389 jQuery( "#table" ).animate( { width: 42, height: 42 }, fxInterval * 10, function() {
390 assert.equal( jQuery( this ).css( "display" ), "table", "display mode is correct" );
392 this.clock.tick( fxInterval * 10 );
395 QUnit.test( "animate table-row width/height", function( assert ) {
397 var tr = jQuery( "#table" )
398 .attr( { "cellspacing": 0, "cellpadding": 0, "border": 0 } )
399 .html( "<tr style='height:42px;'><td style='padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
402 tr.animate( { width: 10, height: 10 }, fxInterval * 10, function() {
403 assert.equal( jQuery( this ).css( "display" ), "table-row", "display mode is correct" );
404 assert.equal( this.offsetWidth, 20, "width animated to shrink wrap point" );
405 assert.equal( this.offsetHeight, 20, "height animated to shrink wrap point" );
407 this.clock.tick( fxInterval * 10 );
410 QUnit.test( "animate table-cell width/height", function( assert ) {
413 var td = jQuery( "#table" )
414 .attr( { "cellspacing": 0, "cellpadding": 0, "border": 0 } )
415 .html( "<tr><td style='width:42px;height:42px;padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
418 td.animate( { width: 10, height: 10 }, fxInterval * 10, function() {
419 assert.equal( jQuery( this ).css( "display" ), "table-cell", "display mode is correct" );
420 assert.equal( this.offsetWidth, 20, "width animated to shrink wrap point" );
421 assert.equal( this.offsetHeight, 20, "height animated to shrink wrap point" );
423 this.clock.tick( fxInterval * 10 );
426 QUnit.test( "animate percentage(%) on width/height", function( assert ) {
429 var $div = jQuery( "<div style='position:absolute;top:-999px;left:-999px;width:60px;height:60px;'><div style='width:50%;height:50%;'></div></div>" )
430 .appendTo( "#qunit-fixture" ).children( "div" );
432 $div.animate( { width: "25%", height: "25%" }, fxInterval, function() {
433 var $this = jQuery( this );
434 assert.equal( $this.css( "width" ), "15px", "Width was animated to 15px rather than 25px" );
435 assert.equal( $this.css( "height" ), "15px", "Height was animated to 15px rather than 25px" );
437 this.clock.tick( fxInterval * 1.5 );
440 QUnit.test( "animate resets overflow-x and overflow-y when finished", function( assert ) {
443 .css( { display: "block", width: 20, height: 20, overflowX: "visible", overflowY: "auto" } )
444 .animate( { width: 42, height: 42 }, fxInterval * 10, function() {
445 assert.equal( this.style.overflowX, "visible", "overflow-x is visible" );
446 assert.equal( this.style.overflowY, "auto", "overflow-y is auto" );
448 this.clock.tick( fxInterval * 10 );
451 QUnit.test( "animate option { queue: false }", function( assert ) {
453 var foo = jQuery( "#foo" );
459 duration: fxInterval,
460 complete: function() {
461 assert.ok( true, "Animation Completed" );
464 this.clock.tick( fxInterval );
466 assert.equal( foo.queue().length, 0, "Queue is empty" );
469 QUnit.test( "animate option { queue: true }", function( assert ) {
471 var foo = jQuery( "#foo" );
477 duration: fxInterval,
478 complete: function() {
479 assert.ok( true, "Animation Completed" );
483 assert.notEqual( foo.queue().length, 0, "Default queue is not empty" );
485 //clear out existing timers before next test
486 this.clock.tick( fxInterval );
489 QUnit.test( "animate option { queue: 'name' }", function( assert ) {
491 var foo = jQuery( "#foo" ),
492 origWidth = parseFloat( foo.css( "width" ) ),
495 foo.animate( { width: origWidth + 100 }, {
498 complete: function() {
500 // second callback function
502 assert.equal( parseFloat( foo.css( "width" ) ), origWidth + 100, "Animation ended" );
503 assert.equal( foo.queue( "name" ).length, 1, "Queue length of 'name' queue" );
505 } ).queue( "name", function() {
507 // last callback function
508 assert.deepEqual( order, [ 1, 2 ], "Callbacks in expected order" );
511 // this is the first callback function that should be called
513 assert.equal( parseFloat( foo.css( "width" ) ), origWidth, "Animation does not start on its own." );
514 assert.equal( foo.queue( "name" ).length, 2, "Queue length of 'name' queue" );
516 foo.dequeue( "name" );
517 this.clock.tick( fxInterval );
521 QUnit.test( "animate with no properties", function( assert ) {
525 divs = jQuery( "div" ),
528 divs.animate( {}, function() {
532 assert.equal( divs.length, count, "Make sure that callback is called for each element in the set." );
534 foo = jQuery( "#foo" );
537 foo.animate( { top: 10 }, fxInterval * 10, function() {
538 assert.ok( true, "Animation was properly dequeued." );
540 this.clock.tick( fxInterval * 10 );
543 QUnit.test( "animate duration 0", function( assert ) {
547 $elems = jQuery( [ { a: 0 }, { a: 0 } ] ),
550 assert.equal( jQuery.timers.length, 0, "Make sure no animation was running from another test" );
552 $elems.eq( 0 ).animate( { a: 1 }, 0, function() {
553 assert.ok( true, "Animate a simple property." );
557 // Failed until [6115]
558 assert.equal( jQuery.timers.length, 0, "Make sure synchronic animations are not left on jQuery.timers" );
560 assert.equal( counter, 1, "One synchronic animations" );
562 $elems.animate( { a: 2 }, 0, function() {
563 assert.ok( true, "Animate a second simple property." );
567 assert.equal( counter, 3, "Multiple synchronic animations" );
569 $elems.eq( 0 ).animate( { a: 3 }, 0, function() {
570 assert.ok( true, "Animate a third simple property." );
573 $elems.eq( 1 ).animate( { a: 3 }, fxInterval * 20, function() {
576 // Failed until [6115]
577 assert.equal( counter, 5, "One synchronic and one asynchronic" );
579 this.clock.tick( fxInterval * 20 );
581 $elem = jQuery( "<div></div>" );
582 $elem.show( 0, function() {
583 assert.ok( true, "Show callback with no duration" );
585 $elem.hide( 0, function() {
586 assert.ok( true, "Hide callback with no duration" );
589 // manually clean up detached elements
593 QUnit.test( "animate hyphenated properties", function( assert ) {
597 .css( "font-size", 10 )
598 .animate( { "font-size": 20 }, fxInterval * 20, function() {
599 assert.equal( this.style.fontSize, "20px", "The font-size property was animated." );
602 // FIXME why is this double only when run with other tests
603 this.clock.tick( fxInterval * 40 );
607 QUnit.test( "animate non-element", function( assert ) {
610 var obj = { test: 0 };
612 jQuery( obj ).animate( { test: 200 }, fxInterval * 20, function() {
613 assert.equal( obj.test, 200, "The custom property should be modified." );
615 this.clock.tick( fxInterval * 20 );
618 QUnit.test( "animate non-element's zIndex without appending \"px\"", function( assert ) {
621 var obj = { zIndex: 0 };
623 jQuery( obj ).animate( { zIndex: 200 }, fxInterval * 20, function() {
624 assert.equal( obj.zIndex, 200, "The custom property should be modified without appending \"px\"." );
626 this.clock.tick( fxInterval * 20 );
629 QUnit.test( "stop()", function( assert ) {
633 $foo = jQuery( "#foo" ),
637 $foo.hide().css( "width", 200 )
638 .animate( { "width": "show" }, fxInterval * 150 );
640 this.clock.tick( fxInterval * 10 );
641 nw = $foo.css( "width" );
642 assert.notEqual( parseFloat( nw ), w, "An animation occurred " + nw + " " + w + "px" );
645 nw = $foo.css( "width" );
646 assert.notEqual( parseFloat( nw ), w, "Stop didn't reset the animation " + nw + " " + w + "px" );
648 this.clock.tick( fxInterval * 10 );
651 $foo.removeData( undefined, true );
652 assert.equal( nw, $foo.css( "width" ), "The animation didn't continue" );
654 $one = jQuery( "#fadein" );
655 $two = jQuery( "#show" );
656 $one.fadeTo( fxInterval * 10, 0, function() {
659 this.clock.tick( fxInterval * 10 );
660 $two.fadeTo( fxInterval * 10, 0, function() {
661 assert.equal( $two.css( "opacity" ), "0", "Stop does not interfere with animations on other elements (trac-6641)" );
664 $one.add( $two ).css( "opacity", "" );
666 this.clock.tick( fxInterval * 10 );
669 QUnit.test( "stop() - several in queue", function( assert ) {
672 var nw, $foo = jQuery( "#foo" );
674 // default duration is 400ms, so 800px ensures we aren't 0 or 1 after 1ms
675 $foo.hide().css( "width", 800 );
677 $foo.animate( { "width": "show" }, 400, "linear" );
678 $foo.animate( { "width": "hide" } );
679 $foo.animate( { "width": "show" } );
681 this.clock.tick( 1 );
684 assert.equal( $foo.queue().length, 3, "3 in the queue" );
686 nw = $foo.css( "width" );
687 assert.notEqual( parseFloat( nw ), 1, "An animation occurred " + nw );
690 assert.equal( $foo.queue().length, 2, "2 in the queue" );
691 nw = $foo.css( "width" );
692 assert.notEqual( parseFloat( nw ), 1, "Stop didn't reset the animation " + nw );
696 assert.equal( $foo.queue().length, 0, "0 in the queue" );
699 QUnit.test( "stop(clearQueue)", function( assert ) {
702 var $foo = jQuery( "#foo" ),
705 $foo.hide().css( "width", fxInterval * 20 ).css( "width" );
707 $foo.animate( { "width": "show" }, fxInterval * 100 );
708 $foo.animate( { "width": "hide" }, fxInterval * 100 );
709 $foo.animate( { "width": "show" }, fxInterval * 100 );
710 this.clock.tick( fxInterval * 10 );
711 nw = $foo.css( "width" );
712 assert.ok( parseFloat( nw ) !== w, "An animation occurred " + nw + " " + w + "px" );
715 nw = $foo.css( "width" );
716 assert.ok( parseFloat( nw ) !== w, "Stop didn't reset the animation " + nw + " " + w + "px" );
718 assert.equal( $foo.queue().length, 0, "The animation queue was cleared" );
719 this.clock.tick( fxInterval * 10 );
720 assert.equal( nw, $foo.css( "width" ), "The animation didn't continue" );
723 QUnit.test( "stop(clearQueue, gotoEnd)", function( assert ) {
726 var $foo = jQuery( "#foo" ),
729 $foo.hide().css( "width", fxInterval * 20 ).css( "width" );
731 $foo.animate( { width: "show" }, fxInterval * 100 );
732 $foo.animate( { width: "hide" }, fxInterval * 100 );
733 $foo.animate( { width: "show" }, fxInterval * 100 );
734 $foo.animate( { width: "hide" }, fxInterval * 100 );
735 this.clock.tick( fxInterval * 10 );
736 nw = $foo.css( "width" );
737 assert.ok( parseFloat( nw ) !== w, "An animation occurred " + nw + " " + w + "px" );
738 $foo.stop( false, true );
740 nw = $foo.css( "width" );
742 // Disabled, being flaky
743 //equal( nw, 1, "Stop() reset the animation" );
745 this.clock.tick( fxInterval * 10 );
747 // Disabled, being flaky
748 //equal( $foo.queue().length, 2, "The next animation continued" );
752 QUnit.test( "stop( queue, ..., ... ) - Stop single queues", function( assert ) {
755 foo = jQuery( "#foo" ).css( { width: 200, height: 200 } );
760 duration: fxInterval * 50,
761 complete: function() {
762 assert.equal( parseFloat( foo.css( "width" ) ), 400, "Animation completed for standard queue" );
763 assert.equal( parseFloat( foo.css( "height" ) ), saved, "Height was not changed after the second stop" );
770 duration: fxInterval * 100,
772 } ).dequeue( "height" ).stop( "height", false, true );
774 assert.equal( parseFloat( foo.css( "height" ) ), 400, "Height was stopped with gotoEnd" );
779 duration: fxInterval * 100,
781 } ).dequeue( "height" ).stop( "height", false, false );
782 saved = parseFloat( foo.css( "height" ) );
783 this.clock.tick( fxInterval * 50 );
786 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "toggle()", function( assert ) {
788 var x = jQuery( "#foo" );
789 assert.ok( x.is( ":visible" ), "is visible" );
791 assert.ok( x.is( ":hidden" ), "is hidden" );
793 assert.ok( x.is( ":visible" ), "is visible again" );
796 assert.ok( x.is( ":visible" ), "is visible" );
798 assert.ok( x.is( ":hidden" ), "is hidden" );
800 assert.ok( x.is( ":visible" ), "is visible again" );
803 QUnit.test( "jQuery.fx.prototype.cur() - <1.8 Back Compat", function( assert ) {
806 var div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" ).css( {
808 border: "5px solid black",
810 marginBottom: "-11000px"
814 ( new jQuery.fx( div, {}, "color" ) ).cur(),
815 jQuery.css( div, "color" ),
816 "Return the same value as jQuery.css for complex properties (bug trac-7912)"
820 ( new jQuery.fx( div, {}, "borderLeftWidth" ) ).cur(),
822 "Return simple values parsed as Float"
825 // backgroundPosition actually returns 0% 0% in most browser
826 // this fakes a "" return
827 // hook now gets called twice because Tween will grab the current
828 // value as it is being newed
829 jQuery.cssHooks.backgroundPosition = {
831 assert.ok( true, "hook used" );
837 ( new jQuery.fx( div, {}, "backgroundPosition" ) ).cur(),
839 "Return 0 when jQuery.css returns an empty string"
842 delete jQuery.cssHooks.backgroundPosition;
845 ( new jQuery.fx( div, {}, "left" ) ).cur(),
847 "Return 0 when jQuery.css returns 'auto'"
851 ( new jQuery.fx( div, {}, "marginBottom" ) ).cur(),
853 "support negative values < -10000 (bug trac-7193)"
856 jQuery( div ).remove();
859 QUnit.test( "Overflow and Display", function( assert ) {
863 testClass = jQuery.makeTest( "Overflow and Display" )
864 .addClass( "overflow inline" ),
865 testStyle = jQuery.makeTest( "Overflow and Display (inline style)" )
866 .css( { overflow: "visible", display: "inline" } ),
868 assert.equal( jQuery.css( this, "overflow" ), "visible", "Overflow should be 'visible'" );
869 assert.equal( jQuery.css( this, "display" ), "inline", "Display should be 'inline'" );
872 testClass.add( testStyle )
873 .addClass( "widewidth" )
874 .text( "Some sample text." )
875 .before( "text before" )
876 .after( "text after" )
877 .animate( { opacity: 0.5 }, "slow", done );
878 this.clock.tick( 600 + fxInterval );
882 "CSS Auto": function( elem, prop ) {
883 jQuery( elem ).addClass( "auto" + prop )
884 .text( "This is a long string of text." );
887 "JS Auto": function( elem, prop ) {
888 jQuery( elem ).css( prop, "" )
889 .text( "This is a long string of text." );
892 "CSS 100": function( elem, prop ) {
893 jQuery( elem ).addClass( "large" + prop );
896 "JS 100": function( elem, prop ) {
897 jQuery( elem ).css( prop, prop === "opacity" ? 1 : "100px" );
898 return prop === "opacity" ? 1 : 100;
900 "CSS 50": function( elem, prop ) {
901 jQuery( elem ).addClass( "med" + prop );
904 "JS 50": function( elem, prop ) {
905 jQuery( elem ).css( prop, prop === "opacity" ? 0.50 : "50px" );
906 return prop === "opacity" ? 0.5 : 50;
908 "CSS 0": function( elem, prop ) {
909 jQuery( elem ).addClass( "no" + prop );
912 "JS 0": function( elem, prop ) {
913 jQuery( elem ).css( prop, prop === "opacity" ? 0 : "0px" );
916 }, function( fn, f ) {
918 "show": function( elem, prop ) {
919 jQuery( elem ).hide().addClass( "wide" + prop );
922 "hide": function( elem, prop ) {
923 jQuery( elem ).addClass( "wide" + prop );
926 "100": function( elem, prop ) {
927 jQuery( elem ).addClass( "wide" + prop );
928 return prop === "opacity" ? 1 : 100;
930 "50": function( elem, prop ) {
931 return prop === "opacity" ? 0.50 : 50;
933 "0": function( elem ) {
934 jQuery( elem ).addClass( "noback" );
937 }, function( tn, t ) {
938 QUnit.test( fn + " to " + tn, function( assert ) {
940 elem = jQuery.makeTest( fn + " to " + tn ),
941 t_w = t( elem, "width" ),
942 f_w = f( elem, "width" ),
943 t_h = t( elem, "height" ),
944 f_h = f( elem, "height" ),
945 t_o = t( elem, "opacity" ),
946 f_o = f( elem, "opacity" );
954 // TODO: uncrowd this
955 if ( t_h === "show" ) {
958 if ( t_w === "show" ) {
961 if ( t_w === "hide" || t_w === "show" ) {
964 if ( t_h === "hide" || t_h === "show" ) {
967 if ( t_o === "hide" || t_o === "show" ) {
970 if ( t_w === "hide" ) {
973 if ( t_o.constructor === Number ) {
976 if ( t_w.constructor === Number ) {
979 if ( t_h.constructor === Number ) {
983 assert.expect( num );
985 anim = { width: t_w, height: t_h, opacity: t_o };
987 elem.animate( anim, fxInterval * 5 );
989 jQuery.when( elem ).done( function( $elem ) {
990 var cur_o, cur_w, cur_h, old_h,
993 if ( t_w === "show" ) {
994 assert.equal( $elem.css( "display" ), "block",
995 "Showing, display should block: " + elem.style.display );
998 if ( t_w === "hide" || t_w === "show" ) {
999 assert.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 );
1002 if ( t_h === "hide" || t_h === "show" ) {
1003 assert.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 );
1006 cur_o = jQuery.style( elem, "opacity" );
1008 if ( f_o !== jQuery.css( elem, "opacity" ) ) {
1009 f_o = f( elem, "opacity" );
1012 if ( t_o === "hide" || t_o === "show" ) {
1013 assert.equal( cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o );
1016 if ( t_w === "hide" ) {
1017 assert.equal( elem.style.display, "none", "Hiding, display should be none: " + elem.style.display );
1020 if ( t_o.constructor === Number ) {
1021 assert.equal( cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o );
1023 assert.ok( jQuery.css( elem, "opacity" ) !== "" || cur_o === t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o );
1026 if ( t_w.constructor === Number ) {
1027 assert.equal( elem.style.width, t_w + "px", "Final width should be " + t_w + ": " + elem.style.width );
1029 cur_w = jQuery.css( elem, "width" );
1031 assert.ok( elem.style.width !== "" || cur_w === t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w );
1034 if ( t_h.constructor === Number ) {
1035 assert.equal( elem.style.height, t_h + "px", "Final height should be " + t_h + ": " + elem.style.height );
1037 cur_h = jQuery.css( elem, "height" );
1039 assert.ok( elem.style.height !== "" || cur_h === t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_h );
1042 if ( t_h === "show" ) {
1043 old_h = jQuery.css( elem, "height" );
1044 jQuery( elem ).append( "<br/>Some more text<br/>and some more..." );
1046 if ( /Auto/.test( fn ) ) {
1047 assert.notEqual( jQuery.css( elem, "height" ), old_h, "Make sure height is auto." );
1049 assert.equal( jQuery.css( elem, "height" ), old_h, "Make sure height is not auto." );
1053 // manually remove generated element
1054 jQuery( elem ).remove();
1057 this.clock.tick( fxInterval * 10 );
1062 QUnit.test( "Effects chaining", function( assert ) {
1064 props = [ "opacity", "height", "width", "display", "overflow" ],
1065 setup = function( name, selector ) {
1066 var $el = jQuery( selector );
1067 return $el.data( getProps( $el[ 0 ] ) ).data( "name", name );
1069 check = function() {
1070 var data = jQuery.data( this ),
1074 assert.deepEqual( getProps( this ), data, name );
1076 jQuery.removeData( this );
1078 getProps = function( el ) {
1080 jQuery.each( props, function( i, prop ) {
1081 obj[ prop ] = prop === "overflow" && el.style[ prop ] || jQuery.css( el, prop );
1086 assert.expect( remaining );
1088 setup( ".fadeOut().fadeIn()", "#fadein div" ).fadeOut( "fast" ).fadeIn( "fast", check );
1089 setup( ".fadeIn().fadeOut()", "#fadeout div" ).fadeIn( "fast" ).fadeOut( "fast", check );
1090 setup( ".hide().show()", "#show div" ).hide( "fast" ).show( "fast", check );
1091 setup( ".show().hide()", "#hide div" ).show( "fast" ).hide( "fast", check );
1092 setup( ".show().hide(easing)", "#easehide div" ).show( "fast" ).hide( "fast", "linear", check );
1093 setup( ".toggle().toggle() - in", "#togglein div" ).toggle( "fast" ).toggle( "fast", check );
1094 setup( ".toggle().toggle() - out", "#toggleout div" ).toggle( "fast" ).toggle( "fast", check );
1095 setup( ".toggle().toggle(easing) - out", "#easetoggleout div" ).toggle( "fast" ).toggle( "fast", "linear", check );
1096 setup( ".slideDown().slideUp()", "#slidedown div" ).slideDown( "fast" ).slideUp( "fast", check );
1097 setup( ".slideUp().slideDown()", "#slideup div" ).slideUp( "fast" ).slideDown( "fast", check );
1098 setup( ".slideUp().slideDown(easing)", "#easeslideup div" ).slideUp( "fast" ).slideDown( "fast", "linear", check );
1099 setup( ".slideToggle().slideToggle() - in", "#slidetogglein div" ).slideToggle( "fast" ).slideToggle( "fast", check );
1100 setup( ".slideToggle().slideToggle() - out", "#slidetoggleout div" ).slideToggle( "fast" ).slideToggle( "fast", check );
1101 setup( ".fadeToggle().fadeToggle() - in", "#fadetogglein div" ).fadeToggle( "fast" ).fadeToggle( "fast", check );
1102 setup( ".fadeToggle().fadeToggle() - out", "#fadetoggleout div" ).fadeToggle( "fast" ).fadeToggle( "fast", check );
1103 setup( ".fadeTo(0.5).fadeTo(1.0, easing)", "#fadeto div" ).fadeTo( "fast", 0.5 ).fadeTo( "fast", 1.0, "linear", check );
1105 this.clock.tick( 400 + fxInterval * 2 );
1108 jQuery.makeTest = function( text ) {
1109 var elem = jQuery( "<div></div>" )
1110 .attr( "id", "test" + jQuery.makeTest.id++ )
1113 jQuery( "<h4></h4>" )
1115 .appendTo( "#fx-tests" )
1121 jQuery.makeTest.id = 1;
1123 QUnit.test( "jQuery.show('fast') doesn't clear radio buttons (bug trac-1095)", function( assert ) {
1126 var $checkedtest = jQuery( "#checkedtest" );
1127 $checkedtest.hide().show( "fast", function() {
1128 assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
1129 assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
1130 assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
1131 assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
1133 this.clock.tick( 200 + fxInterval );
1136 QUnit.test( "interrupt toggle", function( assert ) {
1137 assert.expect( 24 );
1139 var longDuration = fxInterval * 200,
1140 shortDuration = fxInterval * 50,
1141 $elems = jQuery( ".chain-test" ),
1143 finish = function() {};
1145 jQuery.each( { slideToggle: "height", fadeToggle: "opacity", toggle: "width" }, function( method, prop ) {
1146 var $methodElems = $elems.filter( "[id^='" + method.toLowerCase() + "']" ).each( function() {
1148 // Save original property value for comparison
1149 jQuery.data( this, "startVal", jQuery( this ).css( prop ) );
1152 // Interrupt a hiding toggle
1153 $methodElems[ method ]( longDuration );
1154 setTimeout( function() {
1155 $methodElems.stop().each( function() {
1156 assert.notEqual( jQuery( this ).css( prop ), jQuery.data( this, "startVal" ), ".stop() before completion of hiding ." + method + "() - #" + this.id );
1160 $methodElems[ method ]( shortDuration, function() {
1162 $elem = jQuery( this ),
1163 startVal = $elem.data( "startVal" );
1165 $elem.removeData( "startVal" );
1167 assert.equal( $elem.css( prop ), startVal, "original value restored by ." + method + "() - #" + id );
1169 // Interrupt a showing toggle
1170 $elem.hide()[ method ]( longDuration );
1171 setTimeout( function() {
1173 assert.notEqual( $elem.css( prop ), startVal, ".stop() before completion of showing ." + method + "() - #" + id );
1176 $elem[ method ]( shortDuration, function() {
1177 assert.equal( $elem.css( prop ), startVal, "original value restored by ." + method + "() - #" + id );
1184 clock.tick( longDuration );
1186 // FIXME untangle the set timeouts
1189 QUnit.test( "animate with per-property easing", function( assert ) {
1193 var data = { a: 0, b: 0, c: 0 },
1194 test1Called = false,
1195 test2Called = false,
1196 defaultTestCalled = false,
1198 a: [ 100, "_test1" ],
1199 b: [ 100, "_test2" ],
1203 jQuery.easing._test1 = function( p ) {
1208 jQuery.easing._test2 = function( p ) {
1213 jQuery.easing._defaultTest = function( p ) {
1214 defaultTestCalled = true;
1218 jQuery( data ).animate( props, fxInterval * 40, "_defaultTest", function() {
1219 assert.ok( test1Called, "Easing function (_test1) called" );
1220 assert.ok( test2Called, "Easing function (_test2) called" );
1221 assert.ok( defaultTestCalled, "Easing function (_default) called" );
1222 assert.equal( props.a[ 1 ], "_test1", "animate does not change original props (per-property easing would be lost)" );
1223 assert.equal( props.b[ 1 ], "_test2", "animate does not change original props (per-property easing would be lost)" );
1226 this.clock.tick( fxInterval * 40 );
1229 QUnit.test( "animate with CSS shorthand properties", function( assert ) {
1230 assert.expect( 11 );
1232 var easeAnimation_count = 0,
1233 easeProperty_count = 0,
1234 propsBasic = { "padding": "10 20 30" },
1235 propsSpecial = { "padding": [ "1 2 3", "propertyScope" ] };
1237 jQuery.easing.animationScope = function( p ) {
1239 easeAnimation_count++;
1244 jQuery.easing.propertyScope = function( p ) {
1246 easeProperty_count++;
1252 .animate( propsBasic, fxInterval * 20,
1253 "animationScope", function() {
1254 assert.equal( this.style.paddingTop, "10px", "padding-top was animated" );
1255 assert.equal( this.style.paddingLeft, "20px", "padding-left was animated" );
1256 assert.equal( this.style.paddingRight, "20px", "padding-right was animated" );
1257 assert.equal( this.style.paddingBottom, "30px", "padding-bottom was animated" );
1258 assert.equal( easeAnimation_count, 4, "per-animation default easing called for each property" );
1259 easeAnimation_count = 0;
1261 .animate( propsSpecial, fxInterval * 20,
1262 "animationScope", function() {
1263 assert.equal( this.style.paddingTop, "1px", "padding-top was animated again" );
1264 assert.equal( this.style.paddingLeft, "2px", "padding-left was animated again" );
1265 assert.equal( this.style.paddingRight, "2px", "padding-right was animated again" );
1266 assert.equal( this.style.paddingBottom, "3px", "padding-bottom was animated again" );
1267 assert.equal( easeAnimation_count, 0, "per-animation default easing not called" );
1268 assert.equal( easeProperty_count, 4, "special easing called for each property" );
1270 jQuery( this ).css( "padding", "0" );
1271 delete jQuery.easing.animationScope;
1272 delete jQuery.easing.propertyScope;
1274 this.clock.tick( fxInterval * 40 );
1277 QUnit.test( "hide hidden elements, with animation (bug trac-7141)", function( assert ) {
1280 var div = jQuery( "<div id='bug7141' style='display:none'></div>" ).appendTo( "#qunit-fixture" );
1281 assert.equal( div.css( "display" ), "none", "Element is initially hidden" );
1282 div.hide( 10, function() {
1283 assert.equal( div.css( "display" ), "none", "Element is hidden in .hide() callback" );
1284 div.show( 11, function() {
1285 assert.equal( div.css( "display" ), "block", "Element is visible in .show() callback" );
1288 this.clock.tick( 50 );
1289 assert.equal( div.css( "display" ), "block", "Element is visible after animations" );
1292 QUnit.test( "animate unit-less properties (trac-4966)", function( assert ) {
1295 var div = jQuery( "<div style='z-index: 0; position: absolute;'></div>" ).appendTo( "#qunit-fixture" );
1296 assert.equal( div.css( "z-index" ), "0", "z-index is 0" );
1297 div.animate( { zIndex: 2 }, function() {
1298 assert.equal( div.css( "z-index" ), "2", "z-index is 2" );
1300 this.clock.tick( 400 + fxInterval );
1303 QUnit.test( "animate properties missing px w/ opacity as last (trac-9074)", function( assert ) {
1307 div = jQuery( "<div style='position: absolute; margin-left: 0; left: 0px;'></div>" )
1308 .appendTo( "#qunit-fixture" );
1309 function cssInt( prop ) {
1310 return parseInt( div.css( prop ), 10 );
1312 assert.equal( cssInt( "marginLeft" ), 0, "Margin left is 0" );
1313 assert.equal( cssInt( "left" ), 0, "Left is 0" );
1318 }, fxInterval * 200 );
1320 this.clock.tick( fxInterval * 50 );
1322 ml = cssInt( "marginLeft" );
1323 l = cssInt( "left" );
1324 assert.notEqual( ml, 0, "Margin left is not 0 after partial animate" );
1325 assert.notEqual( ml, 200, "Margin left is not 200 after partial animate" );
1326 assert.notEqual( l, 0, "Left is not 0 after partial animate" );
1327 assert.notEqual( l, 200, "Left is not 200 after partial animate" );
1328 div.stop().remove();
1331 QUnit.test( "callbacks should fire in correct order (trac-9100)", function( assert ) {
1337 jQuery( "<p data-operation='*2'></p><p data-operation='^2'></p>" ).appendTo( "#qunit-fixture" )
1339 // The test will always pass if no properties are animated or if the duration is 0
1340 .animate( { fontSize: 12 }, fxInterval, function() {
1341 a *= jQuery( this ).data( "operation" ) === "*2" ? 2 : a;
1344 assert.equal( a, 4, "test value has been *2 and _then_ ^2" );
1347 this.clock.tick( fxInterval * 1.5 );
1350 QUnit.test( "callbacks that throw exceptions will be removed (trac-5684)", function( assert ) {
1353 var foo = jQuery( "#foo" );
1355 function TestException() {
1358 foo.animate( { height: 1 }, 1, function() {
1359 throw new TestException();
1362 // this test thoroughly abuses undocumented methods - please feel free to update
1363 // with any changes internally to these functions.
1365 // make sure that the standard timer loop will NOT run.
1368 this.clock.tick( 1 );
1369 assert.throws( jQuery.fx.tick, TestException, "Exception was thrown" );
1371 // the second call shouldn't
1374 assert.ok( true, "Test completed without throwing a second exception" );
1378 QUnit.test( "animate will scale margin properties individually", function( assert ) {
1381 var foo = jQuery( "#foo" ).css( {
1386 assert.ok( foo.css( "marginLeft" ) !== foo.css( "marginRight" ), "Sanity Check" );
1392 assert.ok( foo.css( "marginLeft" ) !== foo.css( "marginRight" ), "The margin properties are different" );
1394 // clean up for next test
1403 QUnit.test( "Do not append px to 'fill-opacity' trac-9548", function( assert ) {
1406 var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1408 $div.css( "fill-opacity", 0 ).animate( { "fill-opacity": 1.0 }, 0, function() {
1409 assert.equal( jQuery( this ).css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
1414 QUnit.test( "line-height animates correctly (trac-13855)", function( assert ) {
1415 assert.expect( 12 );
1419 longDuration = fxInterval * 200,
1420 shortDuration = fxInterval * 50,
1422 "<p style='line-height: 100;'>unitless</p>" +
1423 "<p style='line-height: 5000px;'>px</p>" +
1424 "<p style='line-height: 5000%;'>percent</p>" +
1425 "<p style='line-height: 100em;'>em</p>"
1426 ).appendTo( "#qunit-fixture" ),
1427 initialHeight = jQuery.map( animated, function( el ) {
1428 return jQuery( el ).height();
1432 // Delay start to improve test stability
1433 setTimeout( function() {
1435 t0 = +( new Date() );
1436 animated.animate( { "line-height": "hide" }, longDuration, "linear" );
1438 setTimeout( function() {
1439 var progress = ( ( new Date() ) - t0 ) / longDuration;
1441 animated.each( function( i ) {
1442 var label = jQuery.text( this ),
1443 initial = initialHeight[ i ],
1444 height = jQuery( this ).height(),
1445 lower = initial * ( 1 - progress ) / tolerance;
1446 assert.ok( height < initial, "hide " + label + ": upper bound; " +
1447 height + " < " + initial + " @ " + ( progress * 100 ) + "%" );
1448 assert.ok( height > lower, "hide " + label + ": lower bound; " +
1449 height + " > " + lower + " @ " + ( progress * 100 ) + "%" );
1452 t0 = +( new Date() );
1453 animated.stop( true, true ).hide()
1454 .animate( { "line-height": "show" }, longDuration, "linear" );
1456 setTimeout( function() {
1457 var progress = ( ( new Date() ) - t0 ) / longDuration;
1459 animated.each( function( i ) {
1460 var label = jQuery.text( this ),
1461 initial = initialHeight[ i ],
1462 height = jQuery( this ).height(),
1463 upper = initial * progress * tolerance;
1464 assert.ok( height < upper, "show " + label + ": upper bound; " +
1465 height + " < " + upper + " @ " + ( progress * 100 ) + "%" );
1468 animated.stop( true, true );
1470 clock.tick( shortDuration );
1472 clock.tick( shortDuration );
1473 }, fxInterval * 5 );
1474 clock.tick( fxInterval * 5 );
1477 // Start 1.8 Animation tests
1478 QUnit.test( "jQuery.Animation( object, props, opts )", function( assert ) {
1493 animation = jQuery.Animation( testObject, testDest, { "duration": 1 } );
1494 animation.done( function() {
1495 for ( var prop in testDest ) {
1496 assert.equal( testObject[ prop ], testDest[ prop ], "Animated: " + prop );
1498 animation.done( function() {
1499 assert.deepEqual( testObject, testDest, "No unexpected properties" );
1502 this.clock.tick( fxInterval );
1505 QUnit.test( "Animate Option: step: function( percent, tween )", function( assert ) {
1509 jQuery( "#foo" ).animate( {
1515 step: function( value, tween ) {
1516 var calls = counter[ tween.prop ] = counter[ tween.prop ] || [];
1518 // in case this is called multiple times for either, lets store it in
1519 // 0 or 1 in the array
1520 calls[ value === 0 ? 0 : 1 ] = value;
1522 } ).queue( function( next ) {
1523 assert.deepEqual( counter, {
1527 }, "Step function was called once at 0% and once at 100% for each property" );
1530 this.clock.tick( fxInterval );
1533 QUnit.test( "Animate callbacks have correct context", function( assert ) {
1536 var foo = jQuery( "#foo" );
1539 }, fxInterval, function() {
1540 assert.equal( foo[ 0 ], this, "Complete callback after stop(true) `this` is element" );
1541 } ).stop( true, true );
1544 }, fxInterval, function() {
1545 assert.equal( foo[ 0 ], this, "Complete callback `this` is element" );
1547 this.clock.tick( fxInterval );
1550 QUnit.test( "User supplied callback called after show when fx off (trac-8892)", function( assert ) {
1553 var foo = jQuery( "#foo" );
1554 jQuery.fx.off = true;
1556 foo.fadeIn( 500, function() {
1557 assert.ok( supportjQuery( this ).is( ":visible" ), "Element is visible in callback" );
1558 foo.fadeOut( 500, function() {
1559 assert.ok( supportjQuery( this ).is( ":hidden" ), "Element is hidden in callback" );
1560 jQuery.fx.off = false;
1563 this.clock.tick( 1000 );
1566 QUnit.test( "animate should set display for disconnected nodes", function( assert ) {
1567 assert.expect( 20 );
1571 fadeTo: [ "fast", 0.5 ],
1572 slideDown: [ "fast" ],
1574 animate: [ { width: "show" } ]
1580 $divEmpty = jQuery( "<div></div>" ),
1581 $divTest = jQuery( "<div>test</div>" ),
1582 $divNone = jQuery( "<div style='display: none;'></div>" ),
1583 $divInline = jQuery( "<div style='display: inline;'></div>" ),
1584 nullParentDisplay = $divEmpty.css( "display" ),
1585 underFragmentDisplay = $divTest.css( "display" ),
1588 assert.strictEqual( $divEmpty[ 0 ].parentNode, null, "Setup: element with null parentNode" );
1589 assert.strictEqual( ( $divTest[ 0 ].parentNode || {} ).nodeType, 11, "Setup: element under fragment" );
1591 assert.strictEqual( $divEmpty.show()[ 0 ].style.display, "",
1592 "set display with show() for element with null parentNode" );
1593 assert.strictEqual( $divTest.show()[ 0 ].style.display, "",
1594 "set display with show() for element under fragment" );
1595 assert.strictEqual( $divNone.show()[ 0 ].style.display, "",
1596 "show() should change display if it already set to none" );
1597 assert.strictEqual( $divInline.show()[ 0 ].style.display, "inline",
1598 "show() should not change display if it already set" );
1600 jQuery.each( showMethods, function( name, opt ) {
1601 jQuery.fn[ name ].apply( jQuery( "<div></div>" ), opt.concat( [ function() {
1602 assert.strictEqual( jQuery( this ).css( "display" ), nullParentDisplay,
1603 "." + name + " block with null parentNode" );
1606 jQuery.fn[ name ].apply( jQuery( "<div>test</div>" ), opt.concat( [ function() {
1607 assert.strictEqual( jQuery( this ).css( "display" ), underFragmentDisplay,
1608 "." + name + " block under fragment" );
1611 jQuery.each( toggleMethods, function( name, opt ) {
1612 jQuery.fn[ name ].apply( jQuery( "<div></div>" ), opt.concat( [ function() {
1613 assert.strictEqual( jQuery( this ).css( "display" ), "none",
1614 "." + name + " block with null parentNode" );
1617 jQuery.fn[ name ].apply( jQuery( "<div>test</div>" ), opt.concat( [ function() {
1618 assert.strictEqual( jQuery( this ).css( "display" ), "none",
1619 "." + name + " block under fragment" );
1622 clock.tick( 400 + fxInterval );
1625 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "Animation callback should not show animated element as :animated (trac-7157)", function( assert ) {
1628 var foo = jQuery( "#foo" );
1632 }, fxInterval * 10, function() {
1633 assert.ok( !foo.is( ":animated" ), "The element is not animated" );
1635 this.clock.tick( fxInterval * 10 );
1638 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "Initial step callback should show element as :animated (trac-14623)", function( assert ) {
1641 var foo = jQuery( "#foo" );
1648 assert.ok( foo.is( ":animated" ), "The element matches :animated inside step function" );
1651 this.clock.tick( 1 );
1655 QUnit.test( "hide called on element within hidden parent should set display to none (trac-10045)", function( assert ) {
1658 var hidden = jQuery( ".hidden" ),
1659 elems = jQuery( "<div>hide</div><div>hide0</div><div>hide1</div>" );
1661 hidden.append( elems );
1664 elems.eq( 0 ).hide(),
1665 elems.eq( 1 ).hide( 0 ),
1666 elems.eq( 2 ).hide( 1 )
1667 ).done( function() {
1668 assert.strictEqual( elems.get( 0 ).style.display, "none", "hide() called on element within hidden parent should set display to none" );
1669 assert.strictEqual( elems.get( 1 ).style.display, "none", "hide( 0 ) called on element within hidden parent should set display to none" );
1670 assert.strictEqual( elems.get( 2 ).style.display, "none", "hide( 1 ) called on element within hidden parent should set display to none" );
1674 this.clock.tick( fxInterval );
1677 QUnit.test( "hide, fadeOut and slideUp called on element width height and width = 0 should set display to none", function( assert ) {
1680 var foo = jQuery( "#foo" ),
1684 for ( ; i < 5; i++ ) {
1685 elems = elems.add( "<div style='width:0;height:0;'></div>" );
1688 foo.append( elems );
1691 elems.eq( 0 ).hide(),
1692 elems.eq( 1 ).hide( jQuery.noop ),
1693 elems.eq( 2 ).hide( 1 ),
1694 elems.eq( 3 ).fadeOut(),
1695 elems.eq( 4 ).slideUp()
1696 ).done( function() {
1697 assert.strictEqual( elems.get( 0 ).style.display, "none", "hide() called on element width height and width = 0 should set display to none" );
1698 assert.strictEqual( elems.get( 1 ).style.display, "none",
1699 "hide( jQuery.noop ) called on element width height and width = 0 should set display to none" );
1700 assert.strictEqual( elems.get( 2 ).style.display, "none", "hide( 1 ) called on element width height and width = 0 should set display to none" );
1701 assert.strictEqual( elems.get( 3 ).style.display, "none", "fadeOut() called on element width height and width = 0 should set display to none" );
1702 assert.strictEqual( elems.get( 4 ).style.display, "none", "slideUp() called on element width height and width = 0 should set display to none" );
1705 this.clock.tick( 400 + fxInterval );
1708 QUnit.test( "hide should not leave hidden inline elements visible (trac-14848)", function( assert ) {
1711 var el = jQuery( "#john1" );
1713 el.hide( 1, function() {
1714 assert.equal( el.css( "display" ), "none", "hidden" );
1715 el.hide( 1, function() {
1716 assert.equal( el.css( "display" ), "none", "still hidden" );
1720 this.clock.tick( 100 );
1723 QUnit.test( "Handle queue:false promises", function( assert ) {
1724 assert.expect( 10 );
1726 var foo = jQuery( "#foo" ).clone().addBack(),
1732 duration: fxInterval,
1734 complete: function() {
1735 assert.ok( step++ <= 2, "Step one or two" );
1740 duration: fxInterval,
1741 complete: function() {
1742 assert.ok( step > 2 && step < 5, "Step three or four" );
1747 this.clock.tick( fxInterval );
1749 foo.promise().done( function() {
1750 assert.equal( step++, 5, "steps 1-5: queue:false then queue:fx done" );
1754 duration: fxInterval,
1755 complete: function() {
1756 assert.ok( step > 5 && step < 8, "Step six or seven" );
1762 duration: fxInterval,
1764 complete: function() {
1765 assert.ok( step > 7 && step < 10, "Step eight or nine" );
1768 } ).promise().done( function() {
1769 assert.equal( step++, 10, "steps 6-10: queue:fx then queue:false" );
1773 this.clock.tick( fxInterval );
1776 QUnit.test( "multiple unqueued and promise", function( assert ) {
1779 var foo = jQuery( "#foo" ),
1786 complete: function() {
1787 assert.strictEqual( step++, 2, "Step 2" );
1794 complete: function() {
1795 assert.strictEqual( step++, 3, "Step 3" );
1800 complete: function() {
1802 // no properties is a non-op and finishes immediately
1803 assert.strictEqual( step++, 1, "Step 1" );
1805 } ).promise().done( function() {
1806 assert.strictEqual( step++, 4, "Step 4" );
1808 this.clock.tick( 1000 + fxInterval );
1811 QUnit.test( "animate does not change start value for non-px animation (trac-7109)", function( assert ) {
1814 var parent = jQuery( "<div><div></div></div>" ).css( { width: 284, height: 1 } ).appendTo( "#qunit-fixture" ),
1815 child = parent.children().css( { fontSize: "98.6in", width: "0.01em", height: 1 } ),
1816 actual = parseFloat( child.css( "width" ) ),
1819 child.animate( { width: "0%" }, {
1822 computed.push( parseFloat( child.css( "width" ) ) );
1824 } ).queue( function( next ) {
1825 var ratio = computed[ 0 ] / actual;
1826 assert.ok( ratio > 0.9 && ratio < 1.1,
1827 "Starting width was close enough (" + computed[ 0 ] + " approximates " + actual + ")" );
1831 this.clock.tick( fxInterval );
1834 QUnit.test( "non-px animation handles non-numeric start (trac-11971)", function( assert ) {
1837 var foo = jQuery( "#foo" ),
1838 initial = foo.css( "backgroundPositionX" );
1842 assert.ok( true, "Style property not understood" );
1846 foo.animate( { backgroundPositionX: "42%" }, {
1848 progress: function( anim, percent ) {
1853 if ( parseFloat( initial ) ) {
1854 assert.equal( jQuery.style( this, "backgroundPositionX" ), initial, "Numeric start preserved" );
1856 assert.equal( jQuery.style( this, "backgroundPositionX" ), "0%", "Non-numeric start zeroed" );
1860 assert.equal( jQuery.style( this, "backgroundPositionX" ), "42%", "End reached" );
1863 this.clock.tick( fxInterval );
1866 QUnit.test( "Animation callbacks (trac-11797)", function( assert ) {
1867 assert.expect( 15 );
1870 targets = jQuery( "#foo" ).children(),
1872 expectedProgress = 1;
1874 targets.eq( 0 ).animate( {}, {
1877 assert.ok( true, "empty: start" );
1879 progress: function( anim, percent ) {
1880 assert.equal( percent, prog, "empty: progress " + prog );
1884 assert.ok( true, "empty: done" );
1887 assert.ok( false, "empty: fail" );
1889 always: function() {
1890 assert.ok( true, "empty: always" );
1895 assert.ok( done, "empty: done immediately" );
1898 targets.eq( 1 ).animate( {
1903 assert.ok( true, "stopped: start" );
1905 progress: function( anim, percent ) {
1906 assert.equal( percent, 0, "stopped: progress 0" );
1909 assert.ok( false, "stopped: done" );
1912 assert.ok( true, "stopped: fail" );
1914 always: function() {
1915 assert.ok( true, "stopped: always" );
1920 assert.ok( done, "stopped: stopped immediately" );
1922 targets.eq( 2 ).animate( {
1927 assert.ok( true, "async: start" );
1929 progress: function( anim, percent ) {
1930 assert.equal( percent, expectedProgress, "async: progress " + expectedProgress );
1934 assert.ok( true, "async: done" );
1937 assert.ok( false, "async: fail" );
1939 always: function() {
1940 assert.ok( true, "async: always" );
1943 this.clock.tick( fxInterval );
1946 QUnit.test( "Animation callbacks in order (gh-2283)", function( assert ) {
1949 var done = assert.async(),
1953 jQuery( "#foo" ).animate( {
1958 assert.step( "start" );
1960 progress: function( anim, p, ms ) {
1961 if ( !( step++ ) ) {
1962 assert.step( "progress" );
1963 assert.strictEqual( p, 0, "first progress callback: progress ratio" );
1964 assert.strictEqual( ms, dur, "first progress callback: remaining ms" );
1966 assert.step( "last progress" );
1967 assert.strictEqual( p, 1, "last progress callback: progress ratio" );
1968 assert.strictEqual( ms, 0, "last progress callback: remaining ms" );
1972 assert.step( "done" );
1975 assert.ok( false, "Animation failed" );
1977 always: function() {
1978 assert.verifySteps( [ "start", "progress", "last progress", "done" ] );
1983 this.clock.tick( dur + fxInterval );
1986 QUnit.test( "Animate properly sets overflow hidden when animating width/height (trac-12117)", function( assert ) {
1989 jQuery.each( [ "height", "width" ], function( _, prop ) {
1990 jQuery.each( [ 100, 0 ], function( _, value ) {
1991 var div = jQuery( "<div>" ).css( "overflow", "auto" ),
1993 props[ prop ] = value;
1994 div.animate( props, 1 );
1995 assert.equal( div.css( "overflow" ), "hidden",
1996 "overflow: hidden set when animating " + prop + " to " + value );
1998 assert.equal( div.css( "overflow" ), "auto",
1999 "overflow: auto restored after animating " + prop + " to " + value );
2004 QUnit.test( "Each tick of the timer loop uses a fresh time (trac-12837)", function( assert ) {
2013 step: function( p, fx ) {
2014 assert.ok( fx.now !== lastVal, "Current value is not the last value: " + lastVal + " - " + fx.now );
2018 this.clock.tick( 1 );
2020 // now that we have a new time, run another tick
2023 this.clock.tick( 1 );
2029 QUnit.test( "Animations with 0 duration don't ease (trac-12273)", function( assert ) {
2032 jQuery.easing.test = function() {
2033 assert.ok( false, "Called easing" );
2036 jQuery( "#foo" ).animate( {
2041 complete: function() {
2042 assert.equal( jQuery( this ).height(), 100, "Height is 100" );
2046 delete jQuery.easing.test;
2049 jQuery.map( [ "toggle", "slideToggle", "fadeToggle" ], function( method ) {
2051 // this test would look a lot better if we were using something to override
2052 // the default timers
2053 var duration = 1500;
2054 QUnit.test( "toggle state tests: " + method + " (trac-8685)", function( assert ) {
2055 function secondToggle() {
2056 var stopped = parseFloat( element.css( check ) );
2058 element[ method ]( {
2060 step: function( p, fx ) {
2061 if ( fx.pos > 0.1 && fx.prop === check && !tested ) {
2063 assert.equal( fx.start, stopped, check + " starts at " + stopped + " where it stopped" );
2064 assert.equal( fx.end, original, check + " ending value is " + original );
2073 check = method === "slideToggle" ? "height" : "opacity",
2074 element = jQuery( "#foo" ).height( 200 );
2078 element[ method ]( {
2081 step: function( p, fx ) {
2082 if ( fx.pos > 0.1 && fx.prop === check && !tested ) {
2084 original = fx.start;
2085 assert.ok( fx.start !== 0, check + " is starting at " + original + " on first toggle (non-zero)" );
2086 assert.equal( fx.end, 0, check + " is ending at 0 on first toggle" );
2090 always: secondToggle
2093 // FIXME figure out why 470
2094 this.clock.tick( 470 + fxInterval * 2 );
2098 QUnit.test( "jQuery.fx.start & jQuery.fx.stop hook points", function( assert ) {
2099 var oldStart = jQuery.fx.start,
2100 oldStop = jQuery.fx.stop,
2101 foo = jQuery( { foo: 0 } );
2105 jQuery.fx.start = function() {
2106 assert.ok( true, "start called" );
2108 jQuery.fx.stop = function() {
2109 assert.ok( true, "stop called" );
2113 foo.animate( { foo: 1 }, { queue: false } );
2116 foo.animate( { foo: 2 }, { queue: false } );
2123 jQuery.fx.start = oldStart;
2124 jQuery.fx.stop = oldStop;
2127 QUnit.test( ".finish() completes all queued animations", function( assert ) {
2134 div = jQuery( "<div>" );
2136 assert.expect( 11 );
2138 jQuery.each( animations, function( prop, value ) {
2140 anim[ prop ] = value;
2142 // the delay shouldn't matter at all!
2143 div.css( prop, 1 ).animate( anim, function() {
2144 assert.ok( true, "Called animation callback for " + prop );
2147 assert.equal( div.queue().length, 8, "8 animations in the queue" );
2149 jQuery.each( animations, function( prop, value ) {
2150 assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
2152 assert.equal( div.queue().length, 0, "empty queue when done" );
2154 if ( QUnit.jQuerySelectors ) {
2155 assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
2157 assert.ok( "skip", ":animated selector not supported with selector-native" );
2163 // leaves a "shadow timer" which does nothing around, need to force a tick
2167 QUnit.test( ".finish( false ) - unqueued animations", function( assert ) {
2174 div = jQuery( "<div>" );
2176 assert.expect( 10 );
2178 jQuery.each( animations, function( prop, value ) {
2180 anim[ prop ] = value;
2181 div.css( prop, 1 ).animate( anim, {
2183 complete: function() {
2184 assert.ok( true, "Called animation callback for " + prop );
2188 assert.equal( div.queue().length, 0, "0 animations in the queue" );
2189 div.finish( false );
2190 jQuery.each( animations, function( prop, value ) {
2191 assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
2194 if ( QUnit.jQuerySelectors ) {
2195 assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
2197 assert.ok( "skip", ":animated selector not supported with selector-native" );
2203 // leaves a "shadow timer" which does nothing around, need to force a tick
2207 QUnit.test( ".finish( \"custom\" ) - custom queue animations", function( assert ) {
2214 div = jQuery( "<div>" );
2216 assert.expect( 11 );
2218 jQuery.each( animations, function( prop, value ) {
2220 anim[ prop ] = value;
2221 div.css( prop, 1 ).animate( anim, {
2223 complete: function() {
2224 assert.ok( true, "Called animation callback for " + prop );
2228 assert.equal( div.queue( "custom" ).length, 4, "4 animations in the queue" );
2230 // start the first animation
2231 div.dequeue( "custom" );
2233 if ( QUnit.jQuerySelectors ) {
2234 assert.equal( div.is( ":animated" ), true, ":animated matches" );
2236 assert.ok( "skip", ":animated selector not supported with selector-native" );
2239 div.finish( "custom" );
2240 jQuery.each( animations, function( prop, value ) {
2241 assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
2244 if ( QUnit.jQuerySelectors ) {
2245 assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
2247 assert.ok( "skip", ":animated selector not supported with selector-native" );
2253 // leaves a "shadow timer" which does nothing around, need to force a tick
2257 QUnit.test( ".finish() calls finish of custom queue functions", function( assert ) {
2258 function queueTester( next, hooks ) {
2259 hooks.stop = function( gotoEnd ) {
2261 assert.equal( this, div[ 0 ] );
2262 assert.ok( gotoEnd, "hooks.stop(true) called" );
2265 var div = jQuery( "<div>" ),
2270 queueTester.finish = function() {
2272 assert.ok( true, "Finish called on custom queue function" );
2275 div.queue( queueTester ).queue( queueTester ).queue( queueTester ).finish();
2277 assert.equal( inside, 1, "1 stop(true) callback" );
2278 assert.equal( outside, 2, "2 finish callbacks" );
2283 QUnit.test( ".finish() is applied correctly when multiple elements were animated (trac-13937)", function( assert ) {
2286 var elems = jQuery( "<a>0</a><a>1</a><a>2</a>" );
2289 .animate( { opacity: 0 }, fxInterval * 150 )
2290 .animate( { opacity: 1 }, fxInterval * 150 );
2292 setTimeout( function() {
2293 elems.eq( 1 ).finish();
2294 assert.ok( !elems.eq( 1 ).queue().length, "empty queue for .finish()ed element" );
2295 assert.ok( elems.eq( 0 ).queue().length, "non-empty queue for preceding element" );
2296 assert.ok( elems.eq( 2 ).queue().length, "non-empty queue for following element" );
2300 this.clock.tick( fxInterval * 150 );
2303 QUnit.test( "slideDown() after stop() (trac-13483)", function( assert ) {
2306 var ul = jQuery( "<ul style='height: 100px; display: block;'></ul>" )
2307 .appendTo( "#qunit-fixture" ),
2308 origHeight = ul.height(),
2311 // First test. slideUp() -> stop() in the middle -> slideDown() until the end
2312 ul.slideUp( fxInterval * 100 );
2313 clock.tick( fxInterval * 50 );
2315 ul.slideDown( 1, function() {
2316 assert.equal( ul.height(), origHeight, "slideDown() after interrupting slideUp() with stop(). Height must be in original value" );
2318 // Second test. slideDown() -> stop() in the middle -> slideDown() until the end
2320 clock.tick( fxInterval );
2321 ul.slideDown( fxInterval * 100 );
2322 clock.tick( fxInterval * 50 );
2325 assert.equal( ul.height(), origHeight, "slideDown() after interrupting slideDown() with stop(). Height must be in original value" );
2329 clock.tick( fxInterval );
2333 clock.tick( fxInterval );
2336 QUnit.test( "Respect display value on inline elements (trac-14824)", function( assert ) {
2339 var clock = this.clock,
2340 fromStyleSheet = jQuery( "<span id='span-14824'></span>" ),
2341 fromStyleAttr = jQuery( "<span style='display: block;'></span>" );
2343 jQuery( "#qunit-fixture" ).append( fromStyleSheet, fromStyleAttr );
2345 fromStyleSheet.slideUp( function() {
2346 jQuery( this ).slideDown( function() {
2347 assert.equal( jQuery( this ).css( "display" ), "block",
2348 "Respect previous display value (from stylesheet) on span element" );
2352 fromStyleAttr.slideUp( function() {
2353 jQuery( this ).slideDown( function() {
2354 assert.equal( jQuery( this ).css( "display" ), "block",
2355 "Respect previous display value (from style attribute) on span element" );
2359 clock.tick( 800 + fxInterval * 2 );
2362 QUnit.test( "jQuery.easing._default (gh-2218)", function( assert ) {
2366 .animate( { width: "5px" }, {
2368 start: function( anim ) {
2369 assert.equal( anim.opts.easing, jQuery.easing._default,
2370 "anim.opts.easing should be equal to jQuery.easing._default when the easing argument is not given" );
2373 .animate( { height: "5px" }, {
2376 start: function( anim ) {
2377 assert.equal( anim.opts.easing, "linear",
2378 "anim.opts.easing should be equal to the easing argument" );
2383 this.clock.tick( 10 + fxInterval );
2386 QUnit.test( "jQuery.easing._default in Animation (gh-2218", function( assert ) {
2390 defaultEasing = jQuery.easing._default,
2392 testObject = { "width": 100 },
2393 testDest = { "width": 200 };
2395 jQuery.easing.custom = function( p ) {
2399 jQuery.easing._default = "custom";
2401 animation = jQuery.Animation( testObject, testDest, { "duration": 1 } );
2402 animation.done( function() {
2403 assert.equal( testObject.width, testDest.width, "Animated width" );
2404 assert.ok( called, "Custom jQuery.easing._default called" );
2405 assert.strictEqual( animation.opts.easing, "custom",
2406 "Animation used custom jQuery.easing._default" );
2407 jQuery.easing._default = defaultEasing;
2408 delete jQuery.easing.custom;
2411 this.clock.tick( fxInterval );
2414 QUnit.test( "jQuery.easing._default in Tween (gh-2218)", function( assert ) {
2418 defaultEasing = jQuery.easing._default,
2420 testObject = { "width": 100 };
2422 jQuery.easing.custom = function( p ) {
2426 jQuery.easing._default = "custom";
2428 tween = jQuery.Tween( testObject, { "duration": 1 }, "width", 200 );
2430 assert.equal( testObject.width, 200, "Animated width" );
2431 assert.ok( called, "Custom jQuery.easing._default called" );
2432 assert.strictEqual( tween.easing, "custom",
2433 "Animation used custom jQuery.easing._default" );
2434 jQuery.easing._default = defaultEasing;
2435 delete jQuery.easing.custom;
2438 QUnit.test( "Display value is correct for disconnected nodes (trac-13310)", function( assert ) {
2441 var div = jQuery( "<div></div>" );
2443 assert.equal( div.css( "display", "inline" ).hide().show().appendTo( "body" ).css( "display" ), "inline", "Initialized display value has returned" );
2446 div.css( "display", "none" ).hide();
2447 assert.equal( jQuery._data( div[ 0 ], "olddisplay" ), undefined, "olddisplay is undefined after hiding a detached and hidden element" );
2450 div.css( "display", "inline-block" ).hide().appendTo( "body" ).fadeIn( function() {
2451 assert.equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
2454 this.clock.tick( 1000 );
2457 QUnit.test( "Show/hide/toggle and display: inline", function( assert ) {
2458 assert.expect( 40 );
2460 var clock = this.clock;
2462 jQuery( "<span></span><div style='display:inline' title='inline div'></div>" ).each( function() {
2463 var completed, interrupted,
2464 N = fxInterval * 10,
2465 fixture = jQuery( "#qunit-fixture" ),
2466 $el = jQuery( this ),
2467 kind = this.title || this.nodeName.toLowerCase();
2469 // Animations allowed to complete
2470 completed = jQuery.map( [
2471 $el.clone().data( { call: "hide", done: "none" } ).appendTo( fixture ).hide( N ),
2472 $el.clone().data( { call: "toggle", done: "none" } ).appendTo( fixture ).toggle( N ),
2473 $el.clone().data( { call: "hide+show", done: "inline" } ).appendTo( fixture )
2475 $el.clone().data( { call: "hide+toggle", done: "inline" } ).appendTo( fixture )
2477 ], function( $clone ) {
2481 // Animations not allowed to complete
2482 interrupted = jQuery.map( [
2483 $el.clone().data( { call: "hide+stop" } ).appendTo( fixture ).hide( N ),
2484 $el.clone().data( { call: "toggle+stop" } ).appendTo( fixture ).toggle( N ),
2485 $el.clone().data( { call: "hide+show+stop" } ).appendTo( fixture ).hide().show( N ),
2486 $el.clone().data( { call: "hide+toggle+stop" } ).appendTo( fixture ).hide().toggle( N )
2487 ], function( $clone ) {
2491 // All elements should be inline-block during the animation
2492 clock.tick( N / 2 );
2493 jQuery( completed ).each( function() {
2494 var $el = jQuery( this ),
2495 call = $el.data( "call" );
2496 assert.strictEqual( $el.css( "display" ), "inline-block", kind + " display during " + call );
2499 // Interrupted elements should remain inline-block
2500 jQuery( interrupted ).stop();
2501 clock.tick( N / 2 );
2502 jQuery( interrupted ).each( function() {
2503 var $el = jQuery( this ),
2504 call = $el.data( "call" );
2505 assert.strictEqual( $el.css( "display" ), "inline-block", kind + " display after " + call );
2508 // Completed elements should not remain inline-block
2509 clock.tick( N / 2 );
2510 jQuery( completed ).each( function() {
2511 var $el = jQuery( this ),
2512 call = $el.data( "call" ),
2513 display = $el.data( "done" );
2514 assert.strictEqual( $el.css( "display" ), display, kind + " display after " + call );
2517 // A post-animation toggle should not make any element inline-block
2518 completed = jQuery( completed.concat( interrupted ) );
2519 completed.toggle( N / 2 );
2521 completed.each( function() {
2522 var $el = jQuery( this ),
2523 call = $el.data( "call" );
2524 assert.ok( $el.css( "display" ) !== "inline-block",
2525 kind + " display is not inline-block after " + call + "+toggle" );
2530 function testEasing( assert, speed, easing, complete ) {
2532 var options = jQuery.speed( speed, easing, complete );
2534 assert.equal( options.duration, fxInterval, "Duration set properly" );
2536 typeof options.easing === "function" ? options.easing() : options.easing,
2538 "Easing set properly"
2540 assert.equal( options.queue, "fx", "Queue defaults to fx" );
2544 QUnit.test( "jQuery.speed( speed, easing, complete )", function( assert ) {
2545 testEasing( assert, fxInterval, "linear", function() {
2546 assert.ok( true, "Complete called" );
2550 QUnit.test( "jQuery.speed( speed, easing, complete ) - with easing function", function( assert ) {
2558 assert.ok( true, "Complete called" );
2563 QUnit.test( "jQuery.speed( options )", function( assert ) {
2564 testEasing( assert, {
2565 duration: fxInterval,
2567 complete: function() {
2568 assert.ok( true, "Complete called" );
2573 QUnit.test( "jQuery.speed( options ) - with easing function", function( assert ) {
2574 testEasing( assert, {
2575 duration: fxInterval,
2576 easing: function() {
2579 complete: function() {
2580 assert.ok( true, "Complete called" );
2585 QUnit.test( "jQuery.speed( options ) - queue values", function( assert ) {
2588 var get = function( queue ) {
2589 return jQuery.speed( { queue: queue } ).queue;
2592 assert.equal( get( null ), "fx", "null defaults to 'fx'" );
2593 assert.equal( get( undefined ), "fx", "undefined defaults to 'fx'" );
2594 assert.equal( get( true ), "fx", "true defaults to 'fx'" );
2595 assert.equal( get( "fx" ), "fx", "'fx' passed through" );
2596 assert.equal( get( "custom" ), "custom", "'custom' passed through" );
2599 QUnit.test( "jQuery.speed() - durations", function( assert ) {
2602 var get = function( duration ) {
2603 return jQuery.speed( duration ).duration;
2606 assert.equal( get( 100 ), 100, "jQuery.speed sets number duration" );
2607 assert.equal( get(), jQuery.fx.speeds._default, "jQuery.speed falls back default duration" );
2608 assert.equal( get( "slow" ), jQuery.fx.speeds.slow, "jQuery.speed uses preset speeds" );
2609 assert.equal( get( "fast" ), jQuery.fx.speeds.fast, "jQuery.speed uses preset speeds" );
2610 jQuery.fx.off = true;
2611 assert.equal( get( 100 ), 0, "jQuery.speed defaults duration to zero if fx is off" );
2612 jQuery.fx.off = false;