test/unit/effects.js

   1 ( function() {
   2
   3 // Can't test what ain't there
   4 if ( !includesModule( "effects" ) ) {
   5         return;
   6 }
   7
   8 var fxInterval = 13,
   9         oldRaf = window.requestAnimationFrame,
  10         hideOptions = {
  11                 inline: function() { jQuery.style( this, "display", "none" ); },
  12                 cascade: function() { this.className = "hidden"; }
  13         };
  14
  15 QUnit.module( "effects", {
  16         beforeEach: function() {
  17                 this.sandbox = sinon.createSandbox();
  18                 this.clock = this.sandbox.useFakeTimers( 505877050 );
  19                 window.requestAnimationFrame = null;
  20                 jQuery.fx.step = {};
  21         },
  22         afterEach: function() {
  23                 this.sandbox.restore();
  24                 jQuery.fx.stop();
  25                 window.requestAnimationFrame = oldRaf;
  26                 return moduleTeardown.apply( this, arguments );
  27         }
  28 } );
  29
  30 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "sanity check", function( assert ) {
  31         assert.expect( 1 );
  32         assert.equal( jQuery( "#qunit-fixture:visible, #foo:visible" ).length, 2, "QUnit state is correct for testing effects" );
  33 } );
  34
  35 QUnit.test( "show() basic", function( assert ) {
  36         assert.expect( 1 );
  37
  38         var div = jQuery( "<div>" ).hide().appendTo( "#qunit-fixture" ).show();
  39
  40         assert.equal( div.css( "display" ), "block", "Make sure pre-hidden divs show" );
  41
  42         // Clean up the detached node
  43         div.remove();
  44 } );
  45
  46 QUnit.test( "show()", function( assert ) {
  47         assert.expect( 27 );
  48
  49         var div, speeds, test,
  50                 hiddendiv = jQuery( "div.hidden" );
  51
  52         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
  53
  54         hiddendiv.css( "display", "block" );
  55         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
  56
  57         hiddendiv.show();
  58         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
  59
  60         hiddendiv.css( "display", "" );
  61
  62         div = jQuery( "#fx-queue div" ).slice( 0, 4 );
  63         div.show().each( function() {
  64                 assert.notEqual( this.style.display, "none", "don't change any <div> with display block" );
  65         } );
  66
  67         speeds = {
  68                 "null speed": null,
  69                 "undefined speed": undefined,
  70                 "false speed": false
  71         };
  72
  73         jQuery.each( speeds, function( name, speed ) {
  74                 var pass = true;
  75                 div.hide().show( speed ).each( function() {
  76                         if ( this.style.display === "none" ) {
  77                                 pass = false;
  78                         }
  79                 } );
  80                 assert.ok( pass, "Show with " + name );
  81         } );
  82
  83         jQuery.each( speeds, function( name, speed ) {
  84                 var pass = true;
  85                 div.hide().show( speed, function() {
  86                         pass = false;
  87                 } );
  88                 assert.ok( pass, "Show with " + name + " does not call animate callback" );
  89         } );
  90
  91         jQuery(
  92                 "<div id='show-tests'>" +
  93                 "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
  94                 "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
  95                 "<ul><li></li></ul></div>"
  96         ).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
  97
  98         test = {
  99                 "div": "block",
 100                 "p": "block",
 101                 "a": "inline",
 102                 "code": "inline",
 103                 "pre": "block",
 104                 "span": "inline",
 105                 "table": "table",
 106                 "thead": "table-header-group",
 107                 "tbody": "table-row-group",
 108                 "tr": "table-row",
 109                 "th": "table-cell",
 110                 "td": "table-cell",
 111                 "ul": "block",
 112                 "li": "list-item"
 113         };
 114
 115         jQuery.each( test, function( selector, expected ) {
 116                 var elem = jQuery( selector, "#show-tests" ).show();
 117                 assert.equal( elem.css( "display" ), expected, "Show using correct display type for " + selector );
 118         } );
 119
 120         jQuery( "#show-tests" ).remove();
 121
 122         // Make sure that showing or hiding a text node doesn't cause an error
 123         jQuery( "<div>test</div> text <span>test</span>" ).show().remove();
 124         jQuery( "<div>test</div> text <span>test</span>" ).hide().remove();
 125 } );
 126
 127 supportjQuery.each( hideOptions, function( type, setup ) {
 128         QUnit.test( "show(Number) - " + type + " hidden", function( assert ) {
 129                 assert.expect( 30 );
 130
 131                 jQuery(
 132                         "<div id='show-tests'>" +
 133                         "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
 134                         "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody>" +
 135                                 "</table>" +
 136                         "<ul><li></li></ul></div>"
 137                 ).appendTo( "#qunit-fixture" ).find( "*" ).each( setup );
 138
 139                 // Note: inline elements are expected to be inline-block
 140                 // because we're showing width/height
 141                 // Can't animate width/height inline
 142                 // See trac-14344
 143                 var test = {
 144                         "div": "block",
 145                         "p": "block",
 146                         "a": "inline",
 147                         "code": "inline",
 148                         "pre": "block",
 149                         "span": "inline",
 150                         "table": "table",
 151                         "thead": "table-header-group",
 152                         "tbody": "table-row-group",
 153                         "tr": "table-row",
 154                         "th": "table-cell",
 155                         "td": "table-cell",
 156                         "ul": "block",
 157                         "li": "list-item"
 158                 };
 159
 160                 jQuery.each( test, function( selector ) {
 161                         jQuery( selector, "#show-tests" ).show( fxInterval * 10 );
 162                 } );
 163                 this.clock.tick( fxInterval * 5 );
 164                 jQuery.each( test, function( selector, expected ) {
 165                         jQuery( selector, "#show-tests" ).each( function() {
 166                                 assert.equal(
 167                                         jQuery( this ).css( "display" ),
 168                                         expected === "inline" ? "inline-block" : expected,
 169                                         "Correct display type during animation for " + selector
 170                                 );
 171                         } );
 172                 } );
 173                 this.clock.tick( fxInterval * 5 );
 174                 jQuery.each( test, function( selector, expected ) {
 175                         jQuery( selector, "#show-tests" ).each( function() {
 176                                 assert.equal( jQuery( this ).css( "display" ), expected,
 177                                         "Correct display type after animation for " + selector );
 178                         } );
 179                 } );
 180
 181                 jQuery( "#show-tests" ).remove();
 182         } );
 183 } );
 184
 185 // Supports trac-7397
 186 supportjQuery.each( hideOptions, function( type, setup ) {
 187         QUnit.test( "Persist correct display value - " + type + " hidden", function( assert ) {
 188                 assert.expect( 3 );
 189
 190                 jQuery( "<div id='show-tests'><span style='position:absolute;'>foo</span></div>" )
 191                         .appendTo( "#qunit-fixture" ).find( "*" ).each( setup );
 192
 193                 var $span = jQuery( "#show-tests span" ),
 194                         displayNone = $span.css( "display" ),
 195                         display = "",
 196                         clock = this.clock;
 197
 198                 $span.show();
 199
 200                 display = $span.css( "display" );
 201
 202                 $span.hide();
 203
 204                 $span.fadeIn( fxInterval * 10, function() {
 205                         assert.equal( $span.css( "display" ), display, "Expecting display: " + display );
 206                         $span.fadeOut( fxInterval * 10, function() {
 207                                 assert.equal( $span.css( "display" ), displayNone, "Expecting display: " + displayNone );
 208                                 $span.fadeIn( fxInterval * 10, function() {
 209                                         assert.equal( $span.css( "display" ), display, "Expecting display: " + display );
 210                                 } );
 211                         } );
 212                 } );
 213
 214                 clock.tick( fxInterval * 30 );
 215         } );
 216
 217         // Support: IE 11+
 218         // IE doesn't support Shadow DOM.
 219         QUnit.testUnlessIE(
 220                 "Persist correct display value - " + type + " hidden, shadow child", function( assert ) {
 221                 assert.expect( 3 );
 222
 223                 jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
 224
 225                 var shadowHost = document.querySelector( "#shadowHost" );
 226                 var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
 227                 shadowRoot.innerHTML = "<style>.hidden{display: none;}</style>" +
 228                         "<span id='shadowChild' class='hidden'></span>";
 229                 var shadowChild = shadowRoot.querySelector( "#shadowChild" );
 230
 231                 var $shadowChild = jQuery( shadowChild );
 232                 var displayNone = "none";
 233                 var display = "inline";
 234                 var clock = this.clock;
 235
 236                 $shadowChild.fadeIn( fxInterval * 10, function() {
 237                         assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
 238                         $shadowChild.fadeOut( fxInterval * 10, function() {
 239                                 assert.equal( $shadowChild.css( "display" ), displayNone, "Expecting shadow display: " + displayNone );
 240                                 $shadowChild.fadeIn( fxInterval * 10, function() {
 241                                         assert.equal( $shadowChild.css( "display" ), display, "Expecting shadow display: " + display );
 242                                 } );
 243                         } );
 244                 } );
 245
 246                 clock.tick( fxInterval * 30 );
 247         } );
 248 } );
 249
 250 QUnit.test( "animate(Hash, Object, Function)", function( assert ) {
 251         assert.expect( 1 );
 252         var hash = { opacity: "show" },
 253                 hashCopy = jQuery.extend( {}, hash );
 254         jQuery( "#foo" ).animate( hash, 0, function() {
 255                 assert.equal( hash.opacity, hashCopy.opacity, "Check if animate changed the hash parameter" );
 256         } );
 257 } );
 258
 259 QUnit.test( "animate relative values", function( assert ) {
 260
 261         var value = 40,
 262                 clock = this.clock,
 263                 bases = [ "%", "px", "em" ],
 264                 adjustments = [ "px", "em" ],
 265                 container = jQuery( "<div></div>" )
 266                         .css( { position: "absolute", height: "50em", width: "50em" } ),
 267                 animations = bases.length * adjustments.length;
 268
 269         assert.expect( 2 * animations );
 270
 271         jQuery.each( bases, function( _, baseUnit ) {
 272                 jQuery.each( adjustments, function( _, adjustUnit ) {
 273                         var base = value + baseUnit,
 274                                 adjust = { height: "+=2" + adjustUnit, width: "-=2" + adjustUnit },
 275                                 elem = jQuery( "<div></div>" )
 276                                         .appendTo( container.clone().appendTo( "#qunit-fixture" ) )
 277                                         .css( {
 278                                                 position: "absolute",
 279                                                 height: base,
 280                                                 width: value + adjustUnit
 281                                         } ),
 282                                 baseScale = elem[ 0 ].offsetHeight / value,
 283                                 adjustScale = elem[ 0 ].offsetWidth / value;
 284
 285                         elem.css( "width", base ).animate( adjust, fxInterval * 10, function() {
 286                                 assert.equal( this.offsetHeight, value * baseScale + 2 * adjustScale,
 287                                         baseUnit + "+=" + adjustUnit );
 288                                 assert.equal( this.offsetWidth, value * baseScale - 2 * adjustScale,
 289                                         baseUnit + "-=" + adjustUnit );
 290
 291                         } );
 292
 293                         clock.tick( fxInterval * 10 );
 294                 } );
 295         } );
 296 } );
 297
 298 QUnit.test( "animate negative height", function( assert ) {
 299         assert.expect( 1 );
 300         jQuery( "#foo" ).animate( { height: -100 }, fxInterval * 10, function() {
 301                 assert.equal( this.offsetHeight, 0, "Verify height." );
 302         } );
 303         this.clock.tick( fxInterval * 10 );
 304 } );
 305
 306 QUnit.test( "animate negative margin", function( assert ) {
 307         assert.expect( 1 );
 308         jQuery( "#foo" ).animate( { "marginTop": -100 }, fxInterval * 10, function() {
 309                 assert.equal( jQuery( this ).css( "marginTop" ), "-100px", "Verify margin." );
 310         } );
 311         this.clock.tick( fxInterval * 10 );
 312 } );
 313
 314 QUnit.test( "animate negative margin with px", function( assert ) {
 315         assert.expect( 1 );
 316         jQuery( "#foo" ).animate( { marginTop: "-100px" }, fxInterval * 10, function() {
 317                 assert.equal( jQuery( this ).css( "marginTop" ), "-100px", "Verify margin." );
 318         } );
 319         this.clock.tick( fxInterval * 10 );
 320 } );
 321
 322 QUnit.test( "animate negative padding", function( assert ) {
 323         assert.expect( 1 );
 324         jQuery( "#foo" ).animate( { "paddingBottom": -100 }, fxInterval * 10, function() {
 325                 assert.equal( jQuery( this ).css( "paddingBottom" ), "0px", "Verify paddingBottom." );
 326         } );
 327         this.clock.tick( fxInterval * 10 );
 328 } );
 329
 330 QUnit.test( "animate block as inline width/height", function( assert ) {
 331         assert.expect( 3 );
 332
 333         jQuery( "#foo" ).css( { display: "inline", width: "", height: "" } ).animate( { width: 42, height: 42 }, fxInterval * 10, function() {
 334                 assert.equal( jQuery( this ).css( "display" ), "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
 335                 assert.equal( this.offsetWidth, 42, "width was animated" );
 336                 assert.equal( this.offsetHeight, 42, "height was animated" );
 337         } );
 338         this.clock.tick( fxInterval * 10 );
 339 } );
 340
 341 QUnit.test( "animate native inline width/height", function( assert ) {
 342         assert.expect( 3 );
 343
 344         jQuery( "#foo" ).css( { display: "", width: "", height: "" } )
 345                 .append( "<span>text</span>" )
 346                 .children( "span" )
 347                         .animate( { width: 42, height: 42 }, fxInterval * 10, function() {
 348                                 assert.equal( jQuery( this ).css( "display" ), "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
 349                                 assert.equal( this.offsetWidth, 42, "width was animated" );
 350                                 assert.equal( this.offsetHeight, 42, "height was animated" );
 351                         } );
 352         this.clock.tick( fxInterval * 10 );
 353 } );
 354
 355 QUnit.test( "animate block width/height", function( assert ) {
 356         assert.expect( 3 );
 357
 358         jQuery( "<div>" ).appendTo( "#qunit-fixture" ).css( {
 359                 display: "block",
 360                 width: 20,
 361                 height: 20,
 362                 paddingLeft: 60
 363         } ).animate( {
 364                 width: 42,
 365                 height: 42
 366         }, {
 367                 duration: fxInterval * 10,
 368                 step: function() {
 369                         if ( jQuery( this ).width() > 42 ) {
 370                                 assert.ok( false, "width was incorrectly augmented during animation" );
 371                         }
 372                 },
 373                 complete: function() {
 374                         assert.equal( jQuery( this ).css( "display" ), "block", "inline-block was not set on block element when animating width/height" );
 375                         assert.equal( jQuery( this ).width(), 42, "width was animated" );
 376                         assert.equal( jQuery( this ).height(), 42, "height was animated" );
 377                 }
 378         } );
 379         this.clock.tick( fxInterval * 10 );
 380 } );
 381
 382 QUnit.test( "animate table width/height", function( assert ) {
 383         assert.expect( 1 );
 384
 385         jQuery( "#table" ).animate( { width: 42, height: 42 }, fxInterval * 10, function() {
 386                 assert.equal( jQuery( this ).css( "display" ), "table", "display mode is correct" );
 387         } );
 388         this.clock.tick( fxInterval * 10 );
 389 } );
 390
 391 QUnit.test( "animate table-row width/height", function( assert ) {
 392         assert.expect( 3 );
 393         var tr = jQuery( "#table" )
 394                         .attr( { "cellspacing": 0, "cellpadding": 0, "border": 0 } )
 395                         .html( "<tr style='height:42px;'><td style='padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
 396                         .find( "tr" );
 397
 398         tr.animate( { width: 10, height: 10 }, fxInterval * 10, function() {
 399                 assert.equal( jQuery( this ).css( "display" ), "table-row", "display mode is correct" );
 400                 assert.equal( this.offsetWidth, 20, "width animated to shrink wrap point" );
 401                 assert.equal( this.offsetHeight, 20, "height animated to shrink wrap point" );
 402         } );
 403         this.clock.tick( fxInterval * 10 );
 404 } );
 405
 406 QUnit.test( "animate table-cell width/height", function( assert ) {
 407         assert.expect( 3 );
 408
 409         var td = jQuery( "#table" )
 410                         .attr( { "cellspacing": 0, "cellpadding": 0, "border": 0 } )
 411                         .html( "<tr><td style='width:42px;height:42px;padding:0;'><div style='width:20px;height:20px;'></div></td></tr>" )
 412                         .find( "td" );
 413
 414         td.animate( { width: 10, height: 10 }, fxInterval * 10, function() {
 415                 assert.equal( jQuery( this ).css( "display" ), "table-cell", "display mode is correct" );
 416                 assert.equal( this.offsetWidth, 20, "width animated to shrink wrap point" );
 417                 assert.equal( this.offsetHeight, 20, "height animated to shrink wrap point" );
 418         } );
 419         this.clock.tick( fxInterval * 10 );
 420 } );
 421
 422 QUnit.test( "animate percentage(%) on width/height", function( assert ) {
 423         assert.expect( 2 );
 424
 425         var $div = jQuery( "<div style='position:absolute;top:-999px;left:-999px;width:60px;height:60px;'><div style='width:50%;height:50%;'></div></div>" )
 426                 .appendTo( "#qunit-fixture" ).children( "div" );
 427
 428         $div.animate( { width: "25%", height: "25%" }, fxInterval, function() {
 429                 var $this = jQuery( this );
 430                 assert.equal( $this.css( "width" ), "15px", "Width was animated to 15px rather than 25px" );
 431                 assert.equal( $this.css( "height" ), "15px", "Height was animated to 15px rather than 25px" );
 432         } );
 433         this.clock.tick( fxInterval * 1.5 );
 434 } );
 435
 436 QUnit.test( "animate resets overflow-x and overflow-y when finished", function( assert ) {
 437         assert.expect( 2 );
 438         jQuery( "#foo" )
 439                 .css( { display: "block", width: 20, height: 20, overflowX: "visible", overflowY: "auto" } )
 440                 .animate( { width: 42, height: 42 }, fxInterval * 10, function() {
 441                         assert.equal( this.style.overflowX, "visible", "overflow-x is visible" );
 442                         assert.equal( this.style.overflowY, "auto", "overflow-y is auto" );
 443                 } );
 444         this.clock.tick( fxInterval * 10 );
 445 } );
 446
 447 QUnit.test( "animate option { queue: false }", function( assert ) {
 448         assert.expect( 2 );
 449         var foo = jQuery( "#foo" );
 450
 451         foo.animate( {
 452                 fontSize: "2em"
 453         }, {
 454                 queue: false,
 455                 duration: fxInterval,
 456                 complete: function() {
 457                         assert.ok( true, "Animation Completed" );
 458                 }
 459         } );
 460         this.clock.tick( fxInterval );
 461
 462         assert.equal( foo.queue().length, 0, "Queue is empty" );
 463 } );
 464
 465 QUnit.test( "animate option { queue: true }", function( assert ) {
 466         assert.expect( 2 );
 467         var foo = jQuery( "#foo" );
 468
 469         foo.animate( {
 470                 fontSize: "2em"
 471         }, {
 472                 queue: true,
 473                 duration: fxInterval,
 474                 complete: function() {
 475                         assert.ok( true, "Animation Completed" );
 476                 }
 477         } );
 478
 479         assert.notEqual( foo.queue().length, 0, "Default queue is not empty" );
 480
 481         //clear out existing timers before next test
 482         this.clock.tick( fxInterval );
 483 } );
 484
 485 QUnit.test( "animate option { queue: 'name' }", function( assert ) {
 486         assert.expect( 5 );
 487         var foo = jQuery( "#foo" ),
 488                 origWidth = parseFloat( foo.css( "width" ) ),
 489                 order = [];
 490
 491         foo.animate( { width: origWidth + 100 }, {
 492                 queue: "name",
 493                 duration: 1,
 494                 complete: function() {
 495
 496                         // second callback function
 497                         order.push( 2 );
 498                         assert.equal( parseFloat( foo.css( "width" ) ), origWidth + 100, "Animation ended" );
 499                         assert.equal( foo.queue( "name" ).length, 1, "Queue length of 'name' queue" );
 500                 }
 501         } ).queue( "name", function() {
 502
 503                 // last callback function
 504                 assert.deepEqual( order, [ 1, 2 ], "Callbacks in expected order" );
 505         } );
 506
 507         // this is the first callback function that should be called
 508         order.push( 1 );
 509         assert.equal( parseFloat( foo.css( "width" ) ), origWidth, "Animation does not start on its own." );
 510         assert.equal( foo.queue( "name" ).length, 2, "Queue length of 'name' queue" );
 511
 512         foo.dequeue( "name" );
 513         this.clock.tick( fxInterval );
 514
 515 } );
 516
 517 QUnit.test( "animate with no properties", function( assert ) {
 518         assert.expect( 2 );
 519
 520         var foo,
 521                 divs = jQuery( "div" ),
 522                 count = 0;
 523
 524         divs.animate( {}, function() {
 525                 count++;
 526         } );
 527
 528         assert.equal( divs.length, count, "Make sure that callback is called for each element in the set." );
 529
 530         foo = jQuery( "#foo" );
 531
 532         foo.animate( {} );
 533         foo.animate( { top: 10 }, fxInterval * 10, function() {
 534                 assert.ok( true, "Animation was properly dequeued." );
 535         } );
 536         this.clock.tick( fxInterval * 10 );
 537 } );
 538
 539 QUnit.test( "animate duration 0", function( assert ) {
 540         assert.expect( 11 );
 541
 542         var $elem,
 543                 $elems = jQuery( [ { a:0 }, { a:0 } ] ),
 544                 counter = 0;
 545
 546         assert.equal( jQuery.timers.length, 0, "Make sure no animation was running from another test" );
 547
 548         $elems.eq( 0 ).animate( { a:1 }, 0, function() {
 549                 assert.ok( true, "Animate a simple property." );
 550                 counter++;
 551         } );
 552
 553         // Failed until [6115]
 554         assert.equal( jQuery.timers.length, 0, "Make sure synchronic animations are not left on jQuery.timers" );
 555
 556         assert.equal( counter, 1, "One synchronic animations" );
 557
 558         $elems.animate( { a:2 }, 0, function() {
 559                 assert.ok( true, "Animate a second simple property." );
 560                 counter++;
 561         } );
 562
 563         assert.equal( counter, 3, "Multiple synchronic animations" );
 564
 565         $elems.eq( 0 ).animate( { a:3 }, 0, function() {
 566                 assert.ok( true, "Animate a third simple property." );
 567                 counter++;
 568         } );
 569         $elems.eq( 1 ).animate( { a:3 }, fxInterval * 20, function() {
 570                 counter++;
 571
 572                 // Failed until [6115]
 573                 assert.equal( counter, 5, "One synchronic and one asynchronic" );
 574         } );
 575         this.clock.tick( fxInterval * 20 );
 576
 577         $elem = jQuery( "<div></div>" );
 578         $elem.show( 0, function() {
 579                 assert.ok( true, "Show callback with no duration" );
 580         } );
 581         $elem.hide( 0, function() {
 582                 assert.ok( true, "Hide callback with no duration" );
 583         } );
 584
 585         // manually clean up detached elements
 586         $elem.remove();
 587 } );
 588
 589 QUnit.test( "animate hyphenated properties", function( assert ) {
 590         assert.expect( 1 );
 591
 592         jQuery( "#foo" )
 593                 .css( "font-size", 10 )
 594                 .animate( { "font-size": 20 }, fxInterval * 20, function() {
 595                         assert.equal( this.style.fontSize, "20px", "The font-size property was animated." );
 596                 } );
 597
 598         // FIXME why is this double only when run with other tests
 599         this.clock.tick( fxInterval * 40 );
 600
 601 } );
 602
 603 QUnit.test( "animate non-element", function( assert ) {
 604         assert.expect( 1 );
 605
 606         var obj = { test: 0 };
 607
 608         jQuery( obj ).animate( { test: 200 }, fxInterval * 20, function() {
 609                 assert.equal( obj.test, 200, "The custom property should be modified." );
 610         } );
 611         this.clock.tick( fxInterval * 20 );
 612 } );
 613
 614 QUnit.test( "animate non-element's zIndex without appending \"px\"", function( assert ) {
 615         assert.expect( 1 );
 616
 617         var obj = { zIndex: 0 };
 618
 619         jQuery( obj ).animate( { zIndex: 200 }, fxInterval * 20, function() {
 620                 assert.equal( obj.zIndex, 200, "The custom property should be modified without appending \"px\"." );
 621         } );
 622         this.clock.tick( fxInterval * 20 );
 623 } );
 624
 625 QUnit.test( "stop()", function( assert ) {
 626         assert.expect( 4 );
 627
 628         var $one, $two,
 629                 $foo = jQuery( "#foo" ),
 630                 w = 0,
 631                 nw;
 632
 633         $foo.hide().css( "width", 200 )
 634                 .animate( { "width": "show" }, fxInterval * 150 );
 635
 636         this.clock.tick( fxInterval * 10 );
 637         nw = $foo.css( "width" );
 638         assert.notEqual( parseFloat( nw ), w, "An animation occurred " + nw + " " + w + "px" );
 639         $foo.stop();
 640
 641         nw = $foo.css( "width" );
 642         assert.notEqual( parseFloat( nw ), w, "Stop didn't reset the animation " + nw + " " + w + "px" );
 643
 644         this.clock.tick( fxInterval * 10 );
 645
 646         $foo.removeData();
 647         $foo.removeData( undefined, true );
 648         assert.equal( nw, $foo.css( "width" ), "The animation didn't continue" );
 649
 650         $one = jQuery( "#fadein" );
 651         $two = jQuery( "#show" );
 652         $one.fadeTo( fxInterval * 10, 0, function() {
 653                 $one.stop();
 654         } );
 655         this.clock.tick( fxInterval * 10 );
 656         $two.fadeTo( fxInterval * 10, 0, function() {
 657                 assert.equal( $two.css( "opacity" ), "0", "Stop does not interfere with animations on other elements (trac-6641)" );
 658
 659                 // Reset styles
 660                 $one.add( $two ).css( "opacity", "" );
 661         } );
 662         this.clock.tick( fxInterval * 10 );
 663 } );
 664
 665 QUnit.test( "stop() - several in queue", function( assert ) {
 666         assert.expect( 5 );
 667
 668         var nw, $foo = jQuery( "#foo" );
 669
 670         // default duration is 400ms, so 800px ensures we aren't 0 or 1 after 1ms
 671         $foo.hide().css( "width", 800 );
 672
 673         $foo.animate( { "width": "show" }, 400, "linear" );
 674         $foo.animate( { "width": "hide" } );
 675         $foo.animate( { "width": "show" } );
 676
 677         this.clock.tick( 1 );
 678
 679         jQuery.fx.tick();
 680         assert.equal( $foo.queue().length, 3, "3 in the queue" );
 681
 682         nw = $foo.css( "width" );
 683         assert.notEqual( parseFloat( nw ), 1, "An animation occurred " + nw );
 684         $foo.stop();
 685
 686         assert.equal( $foo.queue().length, 2, "2 in the queue" );
 687         nw = $foo.css( "width" );
 688         assert.notEqual( parseFloat( nw ), 1, "Stop didn't reset the animation " + nw );
 689
 690         $foo.stop( true );
 691
 692         assert.equal( $foo.queue().length, 0, "0 in the queue" );
 693 } );
 694
 695 QUnit.test( "stop(clearQueue)", function( assert ) {
 696         assert.expect( 4 );
 697
 698         var $foo = jQuery( "#foo" ),
 699                 w = 0,
 700                 nw;
 701         $foo.hide().css( "width", fxInterval * 20 ).css( "width" );
 702
 703         $foo.animate( { "width": "show" }, fxInterval * 100 );
 704         $foo.animate( { "width": "hide" }, fxInterval * 100 );
 705         $foo.animate( { "width": "show" }, fxInterval * 100 );
 706         this.clock.tick( fxInterval * 10 );
 707         nw = $foo.css( "width" );
 708         assert.ok( parseFloat( nw ) !== w, "An animation occurred " + nw + " " + w + "px" );
 709         $foo.stop( true );
 710
 711         nw = $foo.css( "width" );
 712         assert.ok( parseFloat( nw ) !== w, "Stop didn't reset the animation " + nw + " " + w + "px" );
 713
 714         assert.equal( $foo.queue().length, 0, "The animation queue was cleared" );
 715         this.clock.tick( fxInterval * 10 );
 716         assert.equal( nw, $foo.css( "width" ), "The animation didn't continue" );
 717 } );
 718
 719 QUnit.test( "stop(clearQueue, gotoEnd)", function( assert ) {
 720         assert.expect( 1 );
 721
 722         var $foo = jQuery( "#foo" ),
 723                 w = 0,
 724                 nw;
 725         $foo.hide().css( "width", fxInterval * 20 ).css( "width" );
 726
 727         $foo.animate( { width: "show" }, fxInterval * 100 );
 728         $foo.animate( { width: "hide" }, fxInterval * 100 );
 729         $foo.animate( { width: "show" }, fxInterval * 100 );
 730         $foo.animate( { width: "hide" }, fxInterval * 100 );
 731         this.clock.tick( fxInterval * 10 );
 732         nw = $foo.css( "width" );
 733         assert.ok( parseFloat( nw ) !== w, "An animation occurred " + nw + " " + w + "px" );
 734         $foo.stop( false, true );
 735
 736         nw = $foo.css( "width" );
 737
 738         // Disabled, being flaky
 739         //equal( nw, 1, "Stop() reset the animation" );
 740
 741         this.clock.tick( fxInterval * 10 );
 742
 743         // Disabled, being flaky
 744         //equal( $foo.queue().length, 2, "The next animation continued" );
 745         $foo.stop( true );
 746 } );
 747
 748 QUnit.test( "stop( queue, ..., ... ) - Stop single queues", function( assert ) {
 749         assert.expect( 3 );
 750         var saved,
 751                 foo = jQuery( "#foo" ).css( { width: 200, height: 200 } );
 752
 753         foo.animate( {
 754                 width: 400
 755         }, {
 756                 duration: fxInterval * 50,
 757                 complete: function() {
 758                         assert.equal( parseFloat( foo.css( "width" ) ), 400, "Animation completed for standard queue" );
 759                         assert.equal( parseFloat( foo.css( "height" ) ), saved, "Height was not changed after the second stop" );
 760                 }
 761         } );
 762
 763         foo.animate( {
 764                 height: 400
 765         }, {
 766                 duration: fxInterval * 100,
 767                 queue: "height"
 768         } ).dequeue( "height" ).stop( "height", false, true );
 769
 770         assert.equal( parseFloat( foo.css( "height" ) ), 400, "Height was stopped with gotoEnd" );
 771
 772         foo.animate( {
 773                 height: 200
 774         }, {
 775                 duration: fxInterval * 100,
 776                 queue: "height"
 777         } ).dequeue( "height" ).stop( "height", false, false );
 778         saved = parseFloat( foo.css( "height" ) );
 779         this.clock.tick( fxInterval * 50 );
 780 } );
 781
 782 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "toggle()", function( assert ) {
 783         assert.expect( 6 );
 784         var x = jQuery( "#foo" );
 785         assert.ok( x.is( ":visible" ), "is visible" );
 786         x.toggle();
 787         assert.ok( x.is( ":hidden" ), "is hidden" );
 788         x.toggle();
 789         assert.ok( x.is( ":visible" ), "is visible again" );
 790
 791         x.toggle( true );
 792         assert.ok( x.is( ":visible" ), "is visible" );
 793         x.toggle( false );
 794         assert.ok( x.is( ":hidden" ), "is hidden" );
 795         x.toggle( true );
 796         assert.ok( x.is( ":visible" ), "is visible again" );
 797 } );
 798
 799 QUnit.test( "jQuery.fx.prototype.cur() - <1.8 Back Compat", function( assert ) {
 800         assert.expect( 7 );
 801
 802         var div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" ).css( {
 803                         color: "#ABC",
 804                         border: "5px solid black",
 805                         left: "auto",
 806                         marginBottom: "-11000px"
 807                 } )[ 0 ];
 808
 809         assert.equal(
 810                 ( new jQuery.fx( div, {}, "color" ) ).cur(),
 811                 jQuery.css( div, "color" ),
 812                 "Return the same value as jQuery.css for complex properties (bug trac-7912)"
 813         );
 814
 815         assert.strictEqual(
 816                 ( new jQuery.fx( div, {}, "borderLeftWidth" ) ).cur(),
 817                 5,
 818                 "Return simple values parsed as Float"
 819         );
 820
 821         // backgroundPosition actually returns 0% 0% in most browser
 822         // this fakes a "" return
 823         // hook now gets called twice because Tween will grab the current
 824         // value as it is being newed
 825         jQuery.cssHooks.backgroundPosition = {
 826                 get: function() {
 827                         assert.ok( true, "hook used" );
 828                         return "";
 829                 }
 830         };
 831
 832         assert.strictEqual(
 833                 ( new jQuery.fx( div, {}, "backgroundPosition" ) ).cur(),
 834                 0,
 835                 "Return 0 when jQuery.css returns an empty string"
 836         );
 837
 838         delete jQuery.cssHooks.backgroundPosition;
 839
 840         assert.strictEqual(
 841                 ( new jQuery.fx( div, {}, "left" ) ).cur(),
 842                 0,
 843                 "Return 0 when jQuery.css returns 'auto'"
 844         );
 845
 846         assert.equal(
 847                 ( new jQuery.fx( div, {}, "marginBottom" ) ).cur(),
 848                 -11000,
 849                 "support negative values < -10000 (bug trac-7193)"
 850         );
 851
 852         jQuery( div ).remove();
 853 } );
 854
 855 QUnit.test( "Overflow and Display", function( assert ) {
 856         assert.expect( 4 );
 857
 858         var
 859                 testClass = jQuery.makeTest( "Overflow and Display" )
 860                         .addClass( "overflow inline" ),
 861                 testStyle = jQuery.makeTest( "Overflow and Display (inline style)" )
 862                         .css( { overflow: "visible", display: "inline" } ),
 863                 done = function() {
 864                         assert.equal( jQuery.css( this, "overflow" ), "visible", "Overflow should be 'visible'" );
 865                         assert.equal( jQuery.css( this, "display" ), "inline", "Display should be 'inline'" );
 866                 };
 867
 868         testClass.add( testStyle )
 869                 .addClass( "widewidth" )
 870                 .text( "Some sample text." )
 871                 .before( "text before" )
 872                 .after( "text after" )
 873                 .animate( { opacity: 0.5 }, "slow", done );
 874         this.clock.tick( 600 + fxInterval );
 875 } );
 876
 877 jQuery.each( {
 878         "CSS Auto": function( elem, prop ) {
 879                 jQuery( elem ).addClass( "auto" + prop )
 880                         .text( "This is a long string of text." );
 881                 return "";
 882         },
 883         "JS Auto": function( elem, prop ) {
 884                 jQuery( elem ).css( prop, "" )
 885                         .text( "This is a long string of text." );
 886                 return "";
 887         },
 888         "CSS 100": function( elem, prop ) {
 889                 jQuery( elem ).addClass( "large" + prop );
 890                 return "";
 891         },
 892         "JS 100": function( elem, prop ) {
 893                 jQuery( elem ).css( prop, prop === "opacity" ? 1 : "100px" );
 894                 return prop === "opacity" ? 1 : 100;
 895         },
 896         "CSS 50": function( elem, prop ) {
 897                 jQuery( elem ).addClass( "med" + prop );
 898                 return "";
 899         },
 900         "JS 50": function( elem, prop ) {
 901                 jQuery( elem ).css( prop, prop === "opacity" ? 0.50 : "50px" );
 902                 return prop === "opacity" ? 0.5 : 50;
 903         },
 904         "CSS 0": function( elem, prop ) {
 905                 jQuery( elem ).addClass( "no" + prop );
 906                 return "";
 907         },
 908         "JS 0": function( elem, prop ) {
 909                 jQuery( elem ).css( prop, prop === "opacity" ? 0 : "0px" );
 910                 return 0;
 911         }
 912 }, function( fn, f ) {
 913         jQuery.each( {
 914                 "show": function( elem, prop ) {
 915                         jQuery( elem ).hide().addClass( "wide" + prop );
 916                         return "show";
 917                 },
 918                 "hide": function( elem, prop ) {
 919                         jQuery( elem ).addClass( "wide" + prop );
 920                         return "hide";
 921                 },
 922                 "100": function( elem, prop ) {
 923                         jQuery( elem ).addClass( "wide" + prop );
 924                         return prop === "opacity" ? 1 : 100;
 925                 },
 926                 "50": function( elem, prop ) {
 927                         return prop === "opacity" ? 0.50 : 50;
 928                 },
 929                 "0": function( elem ) {
 930                         jQuery( elem ).addClass( "noback" );
 931                         return 0;
 932                 }
 933         }, function( tn, t ) {
 934                 QUnit.test( fn + " to " + tn, function( assert ) {
 935                         var num, anim,
 936                                 elem = jQuery.makeTest( fn + " to " + tn ),
 937                                 t_w = t( elem, "width" ),
 938                                 f_w = f( elem, "width" ),
 939                                 t_h = t( elem, "height" ),
 940                                 f_h = f( elem, "height" ),
 941                                 t_o = t( elem, "opacity" ),
 942                                 f_o = f( elem, "opacity" );
 943
 944                         if ( f_o === "" ) {
 945                                 f_o = 1;
 946                         }
 947
 948                         num = 0;
 949
 950                         // TODO: uncrowd this
 951                         if ( t_h === "show" ) { num++; }
 952                         if ( t_w === "show" ) { num++; }
 953                         if ( t_w === "hide" || t_w === "show" ) { num++; }
 954                         if ( t_h === "hide" || t_h === "show" ) { num++; }
 955                         if ( t_o === "hide" || t_o === "show" ) { num++; }
 956                         if ( t_w === "hide" ) { num++; }
 957                         if ( t_o.constructor === Number ) { num += 2; }
 958                         if ( t_w.constructor === Number ) { num += 2; }
 959                         if ( t_h.constructor === Number ) { num += 2; }
 960
 961                         assert.expect( num );
 962
 963                         anim = { width: t_w, height: t_h, opacity: t_o };
 964
 965                         elem.animate( anim, fxInterval * 5 );
 966
 967                         jQuery.when( elem ).done( function( $elem ) {
 968                                 var cur_o, cur_w, cur_h, old_h,
 969                                         elem = $elem[ 0 ];
 970
 971                                 if ( t_w === "show" ) {
 972                                         assert.equal( $elem.css( "display" ), "block",
 973                                                 "Showing, display should block: " + elem.style.display );
 974                                 }
 975
 976                                 if ( t_w === "hide" || t_w === "show" ) {
 977                                         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 );
 978                                 }
 979
 980                                 if ( t_h === "hide" || t_h === "show" ) {
 981                                         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 );
 982                                 }
 983
 984                                 cur_o = jQuery.style( elem, "opacity" );
 985
 986                                 if ( f_o !== jQuery.css( elem, "opacity" ) ) {
 987                                         f_o = f( elem, "opacity" );
 988                                 }
 989
 990                                 if ( t_o === "hide" || t_o === "show" ) {
 991                                         assert.equal( cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o );
 992                                 }
 993
 994                                 if ( t_w === "hide" ) {
 995                                         assert.equal( elem.style.display, "none", "Hiding, display should be none: " + elem.style.display );
 996                                 }
 997
 998                                 if ( t_o.constructor === Number ) {
 999                                         assert.equal( cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o );
1000
1001                                         assert.ok( jQuery.css( elem, "opacity" ) !== "" || cur_o === t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o );
1002                                 }
1003
1004                                 if ( t_w.constructor === Number ) {
1005                                         assert.equal( elem.style.width, t_w + "px", "Final width should be " + t_w + ": " + elem.style.width );
1006
1007                                         cur_w = jQuery.css( elem, "width" );
1008
1009                                         assert.ok( elem.style.width !== "" || cur_w === t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w );
1010                                 }
1011
1012                                 if ( t_h.constructor === Number ) {
1013                                         assert.equal( elem.style.height, t_h + "px", "Final height should be " + t_h + ": " + elem.style.height );
1014
1015                                         cur_h = jQuery.css( elem, "height" );
1016
1017                                         assert.ok( elem.style.height !== "" || cur_h === t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_h );
1018                                 }
1019
1020                                 if ( t_h === "show" ) {
1021                                         old_h = jQuery.css( elem, "height" );
1022                                         jQuery( elem ).append( "<br/>Some more text<br/>and some more..." );
1023
1024                                         if ( /Auto/.test( fn ) ) {
1025                                                 assert.notEqual( jQuery.css( elem, "height" ), old_h, "Make sure height is auto." );
1026                                         } else {
1027                                                 assert.equal( jQuery.css( elem, "height" ), old_h, "Make sure height is not auto." );
1028                                         }
1029                                 }
1030
1031                                 // manually remove generated element
1032                                 jQuery( elem ).remove();
1033
1034                         } );
1035                         this.clock.tick( fxInterval * 10 );
1036                 } );
1037         } );
1038 } );
1039
1040 QUnit.test( "Effects chaining", function( assert ) {
1041         var remaining = 16,
1042                 props = [ "opacity", "height", "width", "display", "overflow" ],
1043                 setup = function( name, selector ) {
1044                         var $el = jQuery( selector );
1045                         return $el.data( getProps( $el[ 0 ] ) ).data( "name", name );
1046                 },
1047                 check = function() {
1048                         var data = jQuery.data( this ),
1049                                 name = data.name;
1050                         delete data.name;
1051
1052                         assert.deepEqual( getProps( this ), data, name );
1053
1054                         jQuery.removeData( this );
1055                 },
1056                 getProps = function( el ) {
1057                         var obj = {};
1058                         jQuery.each( props, function( i, prop ) {
1059                                 obj[ prop ] = prop === "overflow" && el.style[ prop ] || jQuery.css( el, prop );
1060                         } );
1061                         return obj;
1062                 };
1063
1064         assert.expect( remaining );
1065
1066         setup( ".fadeOut().fadeIn()", "#fadein div" ).fadeOut( "fast" ).fadeIn( "fast", check );
1067         setup( ".fadeIn().fadeOut()", "#fadeout div" ).fadeIn( "fast" ).fadeOut( "fast", check );
1068         setup( ".hide().show()", "#show div" ).hide( "fast" ).show( "fast", check );
1069         setup( ".show().hide()", "#hide div" ).show( "fast" ).hide( "fast", check );
1070         setup( ".show().hide(easing)", "#easehide div" ).show( "fast" ).hide( "fast", "linear", check );
1071         setup( ".toggle().toggle() - in", "#togglein div" ).toggle( "fast" ).toggle( "fast", check );
1072         setup( ".toggle().toggle() - out", "#toggleout div" ).toggle( "fast" ).toggle( "fast", check );
1073         setup( ".toggle().toggle(easing) - out", "#easetoggleout div" ).toggle( "fast" ).toggle( "fast", "linear", check );
1074         setup( ".slideDown().slideUp()", "#slidedown div" ).slideDown( "fast" ).slideUp( "fast", check );
1075         setup( ".slideUp().slideDown()", "#slideup div" ).slideUp( "fast" ).slideDown( "fast", check );
1076         setup( ".slideUp().slideDown(easing)", "#easeslideup div" ).slideUp( "fast" ).slideDown( "fast", "linear", check );
1077         setup( ".slideToggle().slideToggle() - in", "#slidetogglein div" ).slideToggle( "fast" ).slideToggle( "fast", check );
1078         setup( ".slideToggle().slideToggle() - out", "#slidetoggleout div" ).slideToggle( "fast" ).slideToggle( "fast", check );
1079         setup( ".fadeToggle().fadeToggle() - in", "#fadetogglein div" ).fadeToggle( "fast" ).fadeToggle( "fast", check );
1080         setup( ".fadeToggle().fadeToggle() - out", "#fadetoggleout div" ).fadeToggle( "fast" ).fadeToggle( "fast", check );
1081         setup( ".fadeTo(0.5).fadeTo(1.0, easing)", "#fadeto div" ).fadeTo( "fast", 0.5 ).fadeTo( "fast", 1.0, "linear", check );
1082
1083     this.clock.tick( 400 + fxInterval * 2 );
1084 } );
1085
1086 jQuery.makeTest = function( text ) {
1087         var elem = jQuery( "<div></div>" )
1088                 .attr( "id", "test" + jQuery.makeTest.id++ )
1089                 .addClass( "box" );
1090
1091         jQuery( "<h4></h4>" )
1092                 .text( text )
1093                 .appendTo( "#fx-tests" )
1094                 .after( elem );
1095
1096         return elem;
1097 };
1098
1099 jQuery.makeTest.id = 1;
1100
1101 QUnit.test( "jQuery.show('fast') doesn't clear radio buttons (bug trac-1095)", function( assert ) {
1102         assert.expect( 4 );
1103
1104         var $checkedtest = jQuery( "#checkedtest" );
1105         $checkedtest.hide().show( "fast", function() {
1106                 assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
1107                 assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
1108                 assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
1109                 assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
1110         } );
1111         this.clock.tick( 200 + fxInterval );
1112 } );
1113
1114 QUnit.test( "interrupt toggle", function( assert ) {
1115         assert.expect( 24 );
1116
1117         var longDuration = fxInterval * 200,
1118                 shortDuration = fxInterval * 50,
1119                 remaining = 0,
1120                 $elems = jQuery( ".chain-test" ),
1121                 clock = this.clock,
1122                 finish = function() {
1123                 };
1124
1125         jQuery.each( { slideToggle: "height", fadeToggle: "opacity", toggle: "width" }, function( method, prop ) {
1126                 var $methodElems = $elems.filter( "[id^='" + method.toLowerCase() + "']" ).each( function() {
1127
1128                         // Don't end test until we're done with this element
1129                         remaining++;
1130
1131                         // Save original property value for comparison
1132                         jQuery.data( this, "startVal", jQuery( this ).css( prop ) );
1133                 } );
1134
1135                 // Interrupt a hiding toggle
1136                 $methodElems[ method ]( longDuration );
1137                 setTimeout( function() {
1138                         $methodElems.stop().each( function() {
1139                                 assert.notEqual( jQuery( this ).css( prop ), jQuery.data( this, "startVal" ), ".stop() before completion of hiding ." + method + "() - #" + this.id );
1140                         } );
1141
1142                         // Restore
1143                         $methodElems[ method ]( shortDuration, function() {
1144                                 var id = this.id,
1145                                         $elem = jQuery( this ),
1146                                         startVal = $elem.data( "startVal" );
1147
1148                                 $elem.removeData( "startVal" );
1149
1150                                 assert.equal( $elem.css( prop ), startVal, "original value restored by ." + method + "() - #" + id );
1151
1152                                 // Interrupt a showing toggle
1153                                 $elem.hide()[ method ]( longDuration );
1154                                 setTimeout( function() {
1155                                         $elem.stop();
1156                                         assert.notEqual( $elem.css( prop ), startVal, ".stop() before completion of showing ." + method + "() - #" + id );
1157
1158                                         // Restore
1159                                         $elem[ method ]( shortDuration, function() {
1160                                                 assert.equal( $elem.css( prop ), startVal, "original value restored by ." + method + "() - #" + id );
1161                                                 finish();
1162                                         } );
1163                                 }, shortDuration );
1164                         } );
1165                 }, shortDuration );
1166         } );
1167         clock.tick( longDuration );
1168
1169         // FIXME untangle the set timeouts
1170 } );
1171
1172 QUnit.test( "animate with per-property easing", function( assert ) {
1173
1174         assert.expect( 5 );
1175
1176         var data = { a: 0, b: 0, c: 0 },
1177                 test1Called = false,
1178                 test2Called = false,
1179                 defaultTestCalled = false,
1180                 props = {
1181                         a: [ 100, "_test1" ],
1182                         b: [ 100, "_test2" ],
1183                         c: 100
1184                 };
1185
1186         jQuery.easing._test1 = function( p ) {
1187                 test1Called = true;
1188                 return p;
1189         };
1190
1191         jQuery.easing._test2 = function( p ) {
1192                 test2Called = true;
1193                 return p;
1194         };
1195
1196         jQuery.easing._defaultTest = function( p ) {
1197                 defaultTestCalled = true;
1198                 return p;
1199         };
1200
1201         jQuery( data ).animate( props, fxInterval * 40, "_defaultTest", function() {
1202                 assert.ok( test1Called, "Easing function (_test1) called" );
1203                 assert.ok( test2Called, "Easing function (_test2) called" );
1204                 assert.ok( defaultTestCalled, "Easing function (_default) called" );
1205                 assert.equal( props.a[ 1 ], "_test1", "animate does not change original props (per-property easing would be lost)" );
1206                 assert.equal( props.b[ 1 ], "_test2", "animate does not change original props (per-property easing would be lost)" );
1207         } );
1208
1209         this.clock.tick( fxInterval * 40 );
1210 } );
1211
1212 QUnit.test( "animate with CSS shorthand properties", function( assert ) {
1213         assert.expect( 11 );
1214
1215         var easeAnimation_count = 0,
1216                 easeProperty_count = 0,
1217                 propsBasic = { "padding": "10 20 30" },
1218                 propsSpecial = { "padding": [ "1 2 3", "propertyScope" ] };
1219
1220         jQuery.easing.animationScope = function( p ) {
1221                 if ( p >= 1 ) {
1222                         easeAnimation_count++;
1223                 }
1224                 return p;
1225         };
1226
1227         jQuery.easing.propertyScope = function( p ) {
1228                 if ( p >= 1 ) {
1229                         easeProperty_count++;
1230                 }
1231                 return p;
1232         };
1233
1234         jQuery( "#foo" )
1235                 .animate( propsBasic, fxInterval * 20,
1236                                 "animationScope", function() {
1237                         assert.equal( this.style.paddingTop, "10px", "padding-top was animated" );
1238                         assert.equal( this.style.paddingLeft, "20px", "padding-left was animated" );
1239                         assert.equal( this.style.paddingRight, "20px", "padding-right was animated" );
1240                         assert.equal( this.style.paddingBottom, "30px", "padding-bottom was animated" );
1241                         assert.equal( easeAnimation_count, 4, "per-animation default easing called for each property" );
1242                         easeAnimation_count = 0;
1243                 } )
1244                 .animate( propsSpecial, fxInterval * 20,
1245                                 "animationScope", function() {
1246                         assert.equal( this.style.paddingTop, "1px", "padding-top was animated again" );
1247                         assert.equal( this.style.paddingLeft, "2px", "padding-left was animated again" );
1248                         assert.equal( this.style.paddingRight, "2px", "padding-right was animated again" );
1249                         assert.equal( this.style.paddingBottom, "3px", "padding-bottom was animated again" );
1250                         assert.equal( easeAnimation_count, 0, "per-animation default easing not called" );
1251                         assert.equal( easeProperty_count, 4, "special easing called for each property" );
1252
1253                         jQuery( this ).css( "padding", "0" );
1254                         delete jQuery.easing.animationScope;
1255                         delete jQuery.easing.propertyScope;
1256                 } );
1257                 this.clock.tick( fxInterval * 40 );
1258 } );
1259
1260 QUnit.test( "hide hidden elements, with animation (bug trac-7141)", function( assert ) {
1261         assert.expect( 4 );
1262
1263         var div = jQuery( "<div id='bug7141' style='display:none'></div>" ).appendTo( "#qunit-fixture" );
1264         assert.equal( div.css( "display" ), "none", "Element is initially hidden" );
1265         div.hide( 10, function() {
1266                 assert.equal( div.css( "display" ), "none", "Element is hidden in .hide() callback" );
1267                 div.show( 11, function() {
1268                         assert.equal( div.css( "display" ), "block", "Element is visible in .show() callback" );
1269                 } );
1270         } );
1271         this.clock.tick( 50 );
1272         assert.equal( div.css( "display" ), "block", "Element is visible after animations" );
1273 } );
1274
1275 QUnit.test( "animate unit-less properties (trac-4966)", function( assert ) {
1276         assert.expect( 2 );
1277
1278         var div = jQuery( "<div style='z-index: 0; position: absolute;'></div>" ).appendTo( "#qunit-fixture" );
1279         assert.equal( div.css( "z-index" ), "0", "z-index is 0" );
1280         div.animate( { zIndex: 2 }, function() {
1281                 assert.equal( div.css( "z-index" ), "2", "z-index is 2" );
1282         } );
1283         this.clock.tick( 400 + fxInterval );
1284 } );
1285
1286 QUnit.test( "animate properties missing px w/ opacity as last (trac-9074)", function( assert ) {
1287         assert.expect( 6 );
1288
1289         var ml, l,
1290                 div = jQuery( "<div style='position: absolute; margin-left: 0; left: 0px;'></div>" )
1291                 .appendTo( "#qunit-fixture" );
1292         function cssInt( prop ) {
1293                 return parseInt( div.css( prop ), 10 );
1294         }
1295         assert.equal( cssInt( "marginLeft" ), 0, "Margin left is 0" );
1296         assert.equal( cssInt( "left" ), 0, "Left is 0" );
1297         div.animate( {
1298                 left: 200,
1299                 marginLeft: 200,
1300                 opacity: 0
1301         }, fxInterval * 200 );
1302
1303         this.clock.tick( fxInterval * 50 );
1304
1305         ml = cssInt( "marginLeft" );
1306         l = cssInt( "left" );
1307         assert.notEqual( ml, 0, "Margin left is not 0 after partial animate" );
1308         assert.notEqual( ml, 200, "Margin left is not 200 after partial animate" );
1309         assert.notEqual( l, 0, "Left is not 0 after partial animate" );
1310         assert.notEqual( l, 200, "Left is not 200 after partial animate" );
1311         div.stop().remove();
1312 } );
1313
1314 QUnit.test( "callbacks should fire in correct order (trac-9100)", function( assert ) {
1315         assert.expect( 1 );
1316
1317         var a = 1,
1318                 cb = 0;
1319
1320         jQuery( "<p data-operation='*2'></p><p data-operation='^2'></p>" ).appendTo( "#qunit-fixture" )
1321
1322                 // The test will always pass if no properties are animated or if the duration is 0
1323                 .animate( { fontSize: 12 }, fxInterval, function() {
1324                         a *= jQuery( this ).data( "operation" ) === "*2" ? 2 : a;
1325                         cb++;
1326                         if ( cb === 2 ) {
1327                                 assert.equal( a, 4, "test value has been *2 and _then_ ^2" );
1328                         }
1329                 } );
1330         this.clock.tick( fxInterval * 1.5 );
1331 } );
1332
1333 QUnit.test( "callbacks that throw exceptions will be removed (trac-5684)", function( assert ) {
1334         assert.expect( 2 );
1335
1336         var foo = jQuery( "#foo" );
1337
1338         function TestException() {
1339         }
1340
1341         foo.animate( { height: 1 }, 1, function() {
1342                 throw new TestException();
1343         } );
1344
1345         // this test thoroughly abuses undocumented methods - please feel free to update
1346         // with any changes internally to these functions.
1347
1348         // make sure that the standard timer loop will NOT run.
1349         jQuery.fx.stop();
1350
1351         this.clock.tick( 1 );
1352         assert.throws( jQuery.fx.tick, TestException, "Exception was thrown" );
1353
1354         // the second call shouldn't
1355         jQuery.fx.tick();
1356
1357         assert.ok( true, "Test completed without throwing a second exception" );
1358
1359 } );
1360
1361 QUnit.test( "animate will scale margin properties individually", function( assert ) {
1362         assert.expect( 2 );
1363
1364         var foo = jQuery( "#foo" ).css( {
1365                 "margin": 0,
1366                 "marginLeft": 100
1367         } );
1368
1369         assert.ok( foo.css( "marginLeft" ) !== foo.css( "marginRight" ), "Sanity Check" );
1370
1371         foo.animate( {
1372                 "margin": 200
1373         } ).stop();
1374
1375         assert.ok( foo.css( "marginLeft" ) !== foo.css( "marginRight" ), "The margin properties are different" );
1376
1377         // clean up for next test
1378         foo.css( {
1379                 "marginLeft": "",
1380                 "marginRight": "",
1381                 "marginTop": "",
1382                 "marginBottom": ""
1383         } );
1384 } );
1385
1386 QUnit.test( "Do not append px to 'fill-opacity' trac-9548", function( assert ) {
1387         assert.expect( 1 );
1388
1389         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1390
1391         $div.css( "fill-opacity", 0 ).animate( { "fill-opacity": 1.0 }, 0, function() {
1392                 assert.equal( jQuery( this ).css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
1393                 $div.remove();
1394         } );
1395 } );
1396
1397 QUnit.test( "line-height animates correctly (trac-13855)", function( assert ) {
1398         assert.expect( 12 );
1399
1400         var t0,
1401                 clock = this.clock,
1402                 longDuration = fxInterval * 200,
1403                 shortDuration = fxInterval * 50,
1404                 animated = jQuery(
1405                         "<p style='line-height: 100;'>unitless</p>" +
1406                         "<p style='line-height: 5000px;'>px</p>" +
1407                         "<p style='line-height: 5000%;'>percent</p>" +
1408                         "<p style='line-height: 100em;'>em</p>"
1409                 ).appendTo( "#qunit-fixture" ),
1410                 initialHeight = jQuery.map( animated, function( el ) {
1411                         return jQuery( el ).height();
1412                 } ),
1413                 tolerance = 1.5;
1414
1415         // Delay start to improve test stability
1416         setTimeout( function() {
1417
1418                 t0 = +( new Date() );
1419                 animated.animate( { "line-height": "hide" }, longDuration, "linear" );
1420
1421                 setTimeout( function() {
1422                         var progress = ( ( new Date() ) - t0 ) / longDuration;
1423
1424                         animated.each( function( i ) {
1425                                 var label = jQuery.text( this ),
1426                                         initial = initialHeight[ i ],
1427                                         height = jQuery( this ).height(),
1428                                         lower = initial * ( 1 - progress ) / tolerance;
1429                                 assert.ok( height < initial, "hide " + label + ": upper bound; " +
1430                                         height + " < " + initial + " @ " + ( progress * 100 ) + "%" );
1431                                 assert.ok( height > lower, "hide " + label + ": lower bound; "  +
1432                                         height + " > " + lower + " @ " + ( progress * 100 ) + "%" );
1433                         } );
1434
1435                         t0 = +( new Date() );
1436                         animated.stop( true, true ).hide()
1437                                         .animate( { "line-height": "show" }, longDuration, "linear" );
1438
1439                         setTimeout( function() {
1440                                 var progress = ( ( new Date() ) - t0 ) / longDuration;
1441
1442                                 animated.each( function( i ) {
1443                                         var label = jQuery.text( this ),
1444                                                 initial = initialHeight[ i ],
1445                                                 height = jQuery( this ).height(),
1446                                                 upper = initial * progress * tolerance;
1447                                         assert.ok( height < upper, "show " + label + ": upper bound; " +
1448                                                 height + " < " + upper + " @ " + ( progress * 100 ) + "%" );
1449                                 } );
1450
1451                                 animated.stop( true, true );
1452                         }, shortDuration );
1453                         clock.tick( shortDuration );
1454                 }, shortDuration );
1455                 clock.tick( shortDuration );
1456         }, fxInterval * 5 );
1457         clock.tick( fxInterval * 5 );
1458 } );
1459
1460 // Start 1.8 Animation tests
1461 QUnit.test( "jQuery.Animation( object, props, opts )", function( assert ) {
1462         assert.expect( 4 );
1463
1464         var animation,
1465                 testObject = {
1466                         "foo": 0,
1467                         "bar": 1,
1468                         "width": 100
1469                 },
1470                 testDest = {
1471                         "foo": 1,
1472                         "bar": 0,
1473                         "width": 200
1474                 };
1475
1476         animation = jQuery.Animation( testObject, testDest, { "duration": 1 } );
1477         animation.done( function() {
1478                 for ( var prop in testDest ) {
1479                         assert.equal( testObject[ prop ], testDest[ prop ], "Animated: " + prop );
1480                 }
1481                 animation.done( function() {
1482                         assert.deepEqual( testObject, testDest, "No unexpected properties" );
1483                 } );
1484         } );
1485         this.clock.tick( fxInterval );
1486 } );
1487
1488 QUnit.test( "Animate Option: step: function( percent, tween )", function( assert ) {
1489         assert.expect( 1 );
1490
1491         var counter = {};
1492         jQuery( "#foo" ).animate( {
1493                 prop1: 1,
1494                 prop2: 2,
1495                 prop3: 3
1496         }, {
1497                 duration: 1,
1498                 step: function( value, tween ) {
1499                         var calls = counter[ tween.prop ] = counter[ tween.prop ] || [];
1500
1501                         // in case this is called multiple times for either, lets store it in
1502                         // 0 or 1 in the array
1503                         calls[ value === 0 ? 0 : 1 ] = value;
1504                 }
1505         } ).queue( function( next ) {
1506                 assert.deepEqual( counter, {
1507                         prop1: [ 0, 1 ],
1508                         prop2: [ 0, 2 ],
1509                         prop3: [ 0, 3 ]
1510                 }, "Step function was called once at 0% and once at 100% for each property" );
1511                 next();
1512         } );
1513         this.clock.tick( fxInterval );
1514 } );
1515
1516 QUnit.test( "Animate callbacks have correct context", function( assert ) {
1517         assert.expect( 2 );
1518
1519         var foo = jQuery( "#foo" );
1520         foo.animate( {
1521                 height: 10
1522         }, fxInterval, function() {
1523                 assert.equal( foo[ 0 ], this, "Complete callback after stop(true) `this` is element" );
1524         } ).stop( true, true );
1525         foo.animate( {
1526                 height: 100
1527         }, fxInterval, function() {
1528                 assert.equal( foo[ 0 ], this, "Complete callback `this` is element" );
1529         } );
1530         this.clock.tick( fxInterval );
1531 } );
1532
1533 QUnit.test( "User supplied callback called after show when fx off (trac-8892)", function( assert ) {
1534         assert.expect( 2 );
1535
1536         var foo = jQuery( "#foo" );
1537         jQuery.fx.off = true;
1538         foo.hide();
1539         foo.fadeIn( 500, function() {
1540                 assert.ok( supportjQuery( this ).is( ":visible" ), "Element is visible in callback" );
1541                 foo.fadeOut( 500, function() {
1542                         assert.ok( supportjQuery( this ).is( ":hidden" ), "Element is hidden in callback" );
1543                         jQuery.fx.off = false;
1544                 } );
1545         } );
1546         this.clock.tick( 1000 );
1547 } );
1548
1549 QUnit.test( "animate should set display for disconnected nodes", function( assert ) {
1550         assert.expect( 20 );
1551
1552         var showMethods = {
1553                         fadeIn: [],
1554                         fadeTo: [ "fast", 0.5 ],
1555                         slideDown: [ "fast" ],
1556                         show: [ 1 ],
1557                         animate: [ { width: "show" } ]
1558                 },
1559                 toggleMethods = {
1560                         toggle: [ 1 ],
1561                         slideToggle: []
1562                 },
1563                 $divEmpty = jQuery( "<div></div>" ),
1564                 $divTest = jQuery( "<div>test</div>" ),
1565                 $divNone = jQuery( "<div style='display: none;'></div>" ),
1566                 $divInline = jQuery( "<div style='display: inline;'></div>" ),
1567                 nullParentDisplay = $divEmpty.css( "display" ),
1568                 underFragmentDisplay = $divTest.css( "display" ),
1569                 clock = this.clock;
1570
1571         assert.strictEqual( $divEmpty[ 0 ].parentNode, null, "Setup: element with null parentNode" );
1572         assert.strictEqual( ( $divTest[ 0 ].parentNode || {} ).nodeType, 11, "Setup: element under fragment" );
1573
1574         assert.strictEqual( $divEmpty.show()[ 0 ].style.display, "",
1575                 "set display with show() for element with null parentNode" );
1576         assert.strictEqual( $divTest.show()[ 0 ].style.display, "",
1577                 "set display with show() for element under fragment" );
1578         assert.strictEqual( $divNone.show()[ 0 ].style.display, "",
1579                 "show() should change display if it already set to none" );
1580         assert.strictEqual( $divInline.show()[ 0 ].style.display, "inline",
1581                 "show() should not change display if it already set" );
1582
1583         jQuery.each( showMethods, function( name, opt ) {
1584                 jQuery.fn[ name ].apply( jQuery( "<div></div>" ), opt.concat( [ function() {
1585                         assert.strictEqual( jQuery( this ).css( "display" ), nullParentDisplay,
1586                                 "." + name + " block with null parentNode" );
1587                 } ] ) );
1588
1589                 jQuery.fn[ name ].apply( jQuery( "<div>test</div>" ), opt.concat( [ function() {
1590                         assert.strictEqual( jQuery( this ).css( "display" ), underFragmentDisplay,
1591                                 "." + name + " block under fragment" );
1592                 } ] ) );
1593         } );
1594         jQuery.each( toggleMethods, function( name, opt ) {
1595                 jQuery.fn[ name ].apply( jQuery( "<div></div>" ), opt.concat( [ function() {
1596                         assert.strictEqual( jQuery( this ).css( "display" ), "none",
1597                                 "." + name + " block with null parentNode" );
1598                 } ] ) );
1599
1600                 jQuery.fn[ name ].apply( jQuery( "<div>test</div>" ), opt.concat( [ function() {
1601                         assert.strictEqual( jQuery( this ).css( "display" ), "none",
1602                                 "." + name + " block under fragment" );
1603                 } ] ) );
1604         } );
1605         clock.tick( 400 + fxInterval );
1606 } );
1607
1608 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "Animation callback should not show animated element as :animated (trac-7157)", function( assert ) {
1609         assert.expect( 1 );
1610
1611         var foo = jQuery( "#foo" );
1612
1613         foo.animate( {
1614                 opacity: 0
1615         }, fxInterval * 10, function() {
1616                 assert.ok( !foo.is( ":animated" ), "The element is not animated" );
1617         } );
1618         this.clock.tick( fxInterval * 10 );
1619 } );
1620
1621 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "Initial step callback should show element as :animated (trac-14623)", function( assert ) {
1622         assert.expect( 1 );
1623
1624         var foo = jQuery( "#foo" );
1625
1626         foo.animate( {
1627                 opacity: 0
1628         }, {
1629                 duration: 100,
1630                 step: function() {
1631                         assert.ok( foo.is( ":animated" ), "The element matches :animated inside step function" );
1632                 }
1633         } );
1634         this.clock.tick( 1 );
1635         foo.stop();
1636 } );
1637
1638 QUnit.test( "hide called on element within hidden parent should set display to none (trac-10045)", function( assert ) {
1639         assert.expect( 3 );
1640
1641         var hidden = jQuery( ".hidden" ),
1642                 elems = jQuery( "<div>hide</div><div>hide0</div><div>hide1</div>" );
1643
1644         hidden.append( elems );
1645
1646         jQuery.when(
1647                 elems.eq( 0 ).hide(),
1648                 elems.eq( 1 ).hide( 0 ),
1649                 elems.eq( 2 ).hide( 1 )
1650         ).done( function() {
1651                 assert.strictEqual( elems.get( 0 ).style.display, "none", "hide() called on element within hidden parent should set display to none" );
1652                 assert.strictEqual( elems.get( 1 ).style.display, "none", "hide( 0 ) called on element within hidden parent should set display to none" );
1653                 assert.strictEqual( elems.get( 2 ).style.display, "none", "hide( 1 ) called on element within hidden parent should set display to none" );
1654
1655                 elems.remove();
1656         } );
1657         this.clock.tick( fxInterval );
1658 } );
1659
1660 QUnit.test( "hide, fadeOut and slideUp called on element width height and width = 0 should set display to none", function( assert ) {
1661         assert.expect( 5 );
1662
1663         var foo = jQuery( "#foo" ),
1664                 i = 0,
1665                 elems = jQuery();
1666
1667         for ( ; i < 5; i++ ) {
1668                 elems = elems.add( "<div style='width:0;height:0;'></div>" );
1669         }
1670
1671         foo.append( elems );
1672
1673         jQuery.when(
1674                 elems.eq( 0 ).hide(),
1675                 elems.eq( 1 ).hide( jQuery.noop ),
1676                 elems.eq( 2 ).hide( 1 ),
1677                 elems.eq( 3 ).fadeOut(),
1678                 elems.eq( 4 ).slideUp()
1679         ).done( function() {
1680                 assert.strictEqual( elems.get( 0 ).style.display, "none", "hide() called on element width height and width = 0 should set display to none" );
1681                 assert.strictEqual( elems.get( 1 ).style.display, "none",
1682                                                                                                 "hide( jQuery.noop ) called on element width height and width = 0 should set display to none" );
1683                 assert.strictEqual( elems.get( 2 ).style.display, "none", "hide( 1 ) called on element width height and width = 0 should set display to none" );
1684                 assert.strictEqual( elems.get( 3 ).style.display, "none", "fadeOut() called on element width height and width = 0 should set display to none" );
1685                 assert.strictEqual( elems.get( 4 ).style.display, "none", "slideUp() called on element width height and width = 0 should set display to none" );
1686
1687         } );
1688         this.clock.tick( 400 + fxInterval );
1689 } );
1690
1691 QUnit.test( "hide should not leave hidden inline elements visible (trac-14848)", function( assert ) {
1692         assert.expect( 2 );
1693
1694         var el = jQuery( "#simon1" );
1695
1696         el.hide( 1, function() {
1697                 assert.equal( el.css( "display" ), "none", "hidden" );
1698                 el.hide( 1, function() {
1699                         assert.equal( el.css( "display" ), "none", "still hidden" );
1700                 } );
1701         } );
1702
1703         this.clock.tick( 100 );
1704 } );
1705
1706 QUnit.test( "Handle queue:false promises", function( assert ) {
1707         assert.expect( 10 );
1708
1709         var foo = jQuery( "#foo" ).clone().addBack(),
1710                 step = 1;
1711
1712         foo.animate( {
1713                 top: 1
1714         }, {
1715                 duration: fxInterval,
1716                 queue: false,
1717                 complete: function() {
1718                         assert.ok( step++ <= 2, "Step one or two" );
1719                 }
1720         } ).animate( {
1721                 bottom: 1
1722         }, {
1723                 duration: fxInterval,
1724                 complete: function() {
1725                         assert.ok( step > 2 && step < 5, "Step three or four" );
1726                         step++;
1727                 }
1728         } );
1729
1730         this.clock.tick( fxInterval );
1731
1732         foo.promise().done( function() {
1733                 assert.equal( step++, 5, "steps 1-5: queue:false then queue:fx done" );
1734                 foo.animate( {
1735                         top: 10
1736                 }, {
1737                         duration: fxInterval,
1738                         complete: function() {
1739                                 assert.ok( step > 5 && step < 8, "Step six or seven" );
1740                                 step++;
1741                         }
1742                 } ).animate( {
1743                         bottom: 10
1744                 }, {
1745                         duration: fxInterval,
1746                         queue: false,
1747                         complete: function() {
1748                                 assert.ok( step > 7 && step < 10, "Step eight or nine" );
1749                                 step++;
1750                         }
1751                 } ).promise().done( function() {
1752                         assert.equal( step++, 10, "steps 6-10: queue:fx then queue:false" );
1753                 } );
1754
1755         } );
1756         this.clock.tick( fxInterval );
1757 } );
1758
1759 QUnit.test( "multiple unqueued and promise", function( assert ) {
1760         assert.expect( 4 );
1761
1762         var foo = jQuery( "#foo" ),
1763                 step = 1;
1764         foo.animate( {
1765                 marginLeft: 300
1766         }, {
1767                 duration: 500,
1768                 queue: false,
1769                 complete: function() {
1770                         assert.strictEqual( step++, 2, "Step 2" );
1771                 }
1772         } ).animate( {
1773                 top: 100
1774         }, {
1775                 duration: 1000,
1776                 queue: false,
1777                 complete: function() {
1778                         assert.strictEqual( step++, 3, "Step 3" );
1779                 }
1780         } ).animate( {}, {
1781                 duration: 2000,
1782                 queue: false,
1783                 complete: function() {
1784
1785                         // no properties is a non-op and finishes immediately
1786                         assert.strictEqual( step++, 1, "Step 1" );
1787                 }
1788         } ).promise().done( function() {
1789                 assert.strictEqual( step++, 4, "Step 4" );
1790         } );
1791         this.clock.tick( 1000 + fxInterval );
1792 } );
1793
1794 QUnit.test( "animate does not change start value for non-px animation (trac-7109)", function( assert ) {
1795         assert.expect( 1 );
1796
1797         var parent = jQuery( "<div><div></div></div>" ).css( { width: 284, height: 1 } ).appendTo( "#qunit-fixture" ),
1798                 child = parent.children().css( { fontSize: "98.6in", width: "0.01em", height: 1 } ),
1799                 actual = parseFloat( child.css( "width" ) ),
1800                 computed = [];
1801
1802         child.animate( { width: "0%" }, {
1803                 duration: 1,
1804                 step: function() {
1805                         computed.push( parseFloat( child.css( "width" ) ) );
1806                 }
1807         } ).queue( function( next ) {
1808                 var ratio = computed[ 0 ] / actual;
1809                 assert.ok( ratio > 0.9 && ratio < 1.1,
1810                         "Starting width was close enough (" + computed[ 0 ] + " approximates " + actual + ")" );
1811                 next();
1812                 parent.remove();
1813         } );
1814         this.clock.tick( fxInterval );
1815 } );
1816
1817 QUnit.test( "non-px animation handles non-numeric start (trac-11971)", function( assert ) {
1818         assert.expect( 2 );
1819
1820         var foo = jQuery( "#foo" ),
1821                 initial = foo.css( "backgroundPositionX" );
1822
1823         if ( !initial ) {
1824                 assert.expect( 1 );
1825                 assert.ok( true, "Style property not understood" );
1826                 return;
1827         }
1828
1829         foo.animate( { backgroundPositionX: "42%" }, {
1830                 duration: 1,
1831                 progress: function( anim, percent ) {
1832                         if ( percent ) {
1833                                 return;
1834                         }
1835
1836                         if ( parseFloat( initial ) ) {
1837                                 assert.equal( jQuery.style( this, "backgroundPositionX" ), initial, "Numeric start preserved" );
1838                         } else {
1839                                 assert.equal( jQuery.style( this, "backgroundPositionX" ), "0%", "Non-numeric start zeroed" );
1840                         }
1841                 },
1842                 done: function() {
1843                         assert.equal( jQuery.style( this, "backgroundPositionX" ), "42%", "End reached" );
1844                 }
1845         } );
1846         this.clock.tick( fxInterval );
1847 } );
1848
1849 QUnit.test( "Animation callbacks (trac-11797)", function( assert ) {
1850         assert.expect( 15 );
1851
1852         var prog = 0,
1853                 targets = jQuery( "#foo" ).children(),
1854                 done = false,
1855                 expectedProgress = 1;
1856
1857         targets.eq( 0 ).animate( {}, {
1858                 duration: 1,
1859                 start: function() {
1860                         assert.ok( true, "empty: start" );
1861                 },
1862                 progress: function( anim, percent ) {
1863                         assert.equal( percent, prog, "empty: progress " + prog );
1864                         prog = 1;
1865                 },
1866                 done: function() {
1867                         assert.ok( true, "empty: done" );
1868                 },
1869                 fail: function() {
1870                         assert.ok( false, "empty: fail" );
1871                 },
1872                 always: function() {
1873                         assert.ok( true, "empty: always" );
1874                         done = true;
1875                 }
1876         } );
1877
1878         assert.ok( done, "empty: done immediately" );
1879
1880         done = false;
1881         targets.eq( 1 ).animate( {
1882                 opacity: 0
1883         }, {
1884                 duration: 1,
1885                 start: function() {
1886                         assert.ok( true, "stopped: start" );
1887                 },
1888                 progress: function( anim, percent ) {
1889                         assert.equal( percent, 0, "stopped: progress 0" );
1890                 },
1891                 done: function() {
1892                         assert.ok( false, "stopped: done" );
1893                 },
1894                 fail: function() {
1895                         assert.ok( true, "stopped: fail" );
1896                 },
1897                 always: function() {
1898                         assert.ok( true, "stopped: always" );
1899                         done = true;
1900                 }
1901         } ).stop();
1902
1903         assert.ok( done, "stopped: stopped immediately" );
1904
1905         targets.eq( 2 ).animate( {
1906                 opacity: 0
1907         }, {
1908                 duration: 1,
1909                 start: function() {
1910                         assert.ok( true, "async: start" );
1911                 },
1912                 progress: function( anim, percent ) {
1913                         assert.equal( percent, expectedProgress, "async: progress " + expectedProgress );
1914                         expectedProgress++;
1915                 },
1916                 done: function() {
1917                         assert.ok( true, "async: done" );
1918                 },
1919                 fail: function() {
1920                         assert.ok( false, "async: fail" );
1921                 },
1922                 always: function() {
1923                         assert.ok( true, "async: always" );
1924                 }
1925         } );
1926         this.clock.tick( fxInterval );
1927 } );
1928
1929 QUnit.test( "Animation callbacks in order (gh-2283)", function( assert ) {
1930         assert.expect( 9 );
1931
1932         var done = assert.async(),
1933                 step = 0,
1934                 dur = 50;
1935
1936         jQuery( "#foo" ).animate( {
1937                 width: "5px"
1938         }, {
1939                 duration: dur,
1940                 start: function() {
1941                         assert.step( "start" );
1942                 },
1943                 progress: function( anim, p, ms ) {
1944                         if ( !( step++ ) ) {
1945                                 assert.step( "progress" );
1946                                 assert.strictEqual( p, 0, "first progress callback: progress ratio" );
1947                                 assert.strictEqual( ms, dur, "first progress callback: remaining ms" );
1948                         } else {
1949                                 assert.step( "last progress" );
1950                                 assert.strictEqual( p, 1, "last progress callback: progress ratio" );
1951                                 assert.strictEqual( ms, 0, "last progress callback: remaining ms" );
1952                         }
1953                 },
1954                 done: function() {
1955                         assert.step( "done" );
1956                 },
1957                 fail: function() {
1958                         assert.ok( false, "Animation failed" );
1959                 },
1960                 always: function() {
1961                         assert.verifySteps( [ "start", "progress", "last progress", "done" ] );
1962                         done();
1963                 }
1964         } ).finish();
1965
1966         this.clock.tick( dur + fxInterval );
1967 } );
1968
1969 QUnit.test( "Animate properly sets overflow hidden when animating width/height (trac-12117)", function( assert ) {
1970         assert.expect( 8 );
1971
1972         jQuery.each( [ "height", "width" ], function( _, prop ) {
1973                 jQuery.each( [ 100, 0 ], function( _, value ) {
1974                         var div = jQuery( "<div>" ).css( "overflow", "auto" ),
1975                                 props = {};
1976                         props[ prop ] = value;
1977                         div.animate( props, 1 );
1978                         assert.equal( div.css( "overflow" ), "hidden",
1979                                 "overflow: hidden set when animating " + prop + " to " + value );
1980                         div.stop();
1981                         assert.equal( div.css( "overflow" ), "auto",
1982                                 "overflow: auto restored after animating " + prop + " to " + value );
1983                 } );
1984         } );
1985 } );
1986
1987 QUnit.test( "Each tick of the timer loop uses a fresh time (trac-12837)", function( assert ) {
1988         var lastVal,
1989                 tmp = jQuery( {
1990                         test: 0
1991                 } );
1992         assert.expect( 3 );
1993         tmp.animate( {
1994                 test: 100
1995         }, {
1996                 step: function( p, fx ) {
1997                         assert.ok( fx.now !== lastVal, "Current value is not the last value: " + lastVal + " - " + fx.now );
1998                         lastVal = fx.now;
1999                 }
2000         } );
2001         this.clock.tick( 1 );
2002
2003         // now that we have a new time, run another tick
2004         jQuery.fx.tick();
2005
2006         this.clock.tick( 1 );
2007
2008         jQuery.fx.tick();
2009         tmp.stop();
2010 } );
2011
2012 QUnit.test( "Animations with 0 duration don't ease (trac-12273)", function( assert ) {
2013         assert.expect( 1 );
2014
2015         jQuery.easing.test = function() {
2016                 assert.ok( false, "Called easing" );
2017         };
2018
2019         jQuery( "#foo" ).animate( {
2020                 height: 100
2021         }, {
2022                 duration: 0,
2023                 easing: "test",
2024                 complete: function() {
2025                         assert.equal( jQuery( this ).height(), 100, "Height is 100" );
2026                 }
2027         } );
2028
2029         delete jQuery.easing.test;
2030 } );
2031
2032 jQuery.map( [ "toggle", "slideToggle", "fadeToggle" ], function( method ) {
2033
2034         // this test would look a lot better if we were using something to override
2035         // the default timers
2036         var duration = 1500;
2037         QUnit.test( "toggle state tests: " + method + " (trac-8685)", function( assert ) {
2038                 function secondToggle() {
2039                         var stopped = parseFloat( element.css( check ) );
2040                         tested = false;
2041                         element[ method ]( {
2042                                 duration: duration,
2043                                 step: function( p, fx ) {
2044                                         if ( fx.pos > 0.1 && fx.prop === check && !tested ) {
2045                                                 tested = true;
2046                                                 assert.equal( fx.start, stopped, check + " starts at " + stopped + " where it stopped" );
2047                                                 assert.equal( fx.end, original, check + " ending value is " + original );
2048                                                 element.stop();
2049                                         }
2050                                 }
2051                         } );
2052                 }
2053
2054                 var tested,
2055                         original,
2056                         check = method === "slideToggle" ? "height" : "opacity",
2057                         element = jQuery( "#foo" ).height( 200 );
2058
2059                 assert.expect( 4 );
2060
2061                 element[ method ]( {
2062                         duration: duration,
2063                         easing: "linear",
2064                         step: function( p, fx ) {
2065                                 if ( fx.pos > 0.1 && fx.prop === check && !tested ) {
2066                                         tested = true;
2067                                         original = fx.start;
2068                                         assert.ok( fx.start !== 0, check + " is starting at " + original + " on first toggle (non-zero)" );
2069                                         assert.equal( fx.end, 0, check + " is ending at 0 on first toggle" );
2070                                         element.stop();
2071                                 }
2072                         },
2073                         always: secondToggle
2074                 } );
2075
2076                 // FIXME figure out why 470
2077                 this.clock.tick( 470 + fxInterval * 2 );
2078         } );
2079 } );
2080
2081 QUnit.test( "jQuery.fx.start & jQuery.fx.stop hook points", function( assert ) {
2082         var oldStart = jQuery.fx.start,
2083                 oldStop = jQuery.fx.stop,
2084                 foo = jQuery( { foo: 0 } );
2085
2086         assert.expect( 3 );
2087
2088         jQuery.fx.start = function() {
2089                 assert.ok( true, "start called" );
2090         };
2091         jQuery.fx.stop = function() {
2092                 assert.ok( true, "stop called" );
2093         };
2094
2095         // calls start
2096         foo.animate( { foo: 1 }, { queue: false } );
2097
2098         // calls start
2099         foo.animate( { foo: 2 }, { queue: false } );
2100         foo.stop();
2101
2102         // calls stop
2103         jQuery.fx.tick();
2104
2105         // cleanup
2106         jQuery.fx.start = oldStart;
2107         jQuery.fx.stop = oldStop;
2108 } );
2109
2110 QUnit.test( ".finish() completes all queued animations", function( assert ) {
2111         var animations = {
2112                         top: 100,
2113                         left: 100,
2114                         height: 100,
2115                         width: 100
2116                 },
2117                 div = jQuery( "<div>" );
2118
2119         assert.expect( 11 );
2120
2121         jQuery.each( animations, function( prop, value ) {
2122                 var anim = {};
2123                 anim[ prop ] = value;
2124
2125                 // the delay shouldn't matter at all!
2126                 div.css( prop, 1 ).animate( anim, function() {
2127                         assert.ok( true, "Called animation callback for " + prop );
2128                 } ).delay( 100 );
2129         } );
2130         assert.equal( div.queue().length, 8, "8 animations in the queue" );
2131         div.finish();
2132         jQuery.each( animations, function( prop, value ) {
2133                 assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
2134         } );
2135         assert.equal( div.queue().length, 0, "empty queue when done" );
2136
2137         if ( QUnit.jQuerySelectors ) {
2138                 assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
2139         } else {
2140                 assert.ok( "skip", ":animated selector not supported with selector-native" );
2141         }
2142
2143         // cleanup
2144         div.remove();
2145
2146         // leaves a "shadow timer" which does nothing around, need to force a tick
2147         jQuery.fx.tick();
2148 } );
2149
2150 QUnit.test( ".finish( false ) - unqueued animations", function( assert ) {
2151         var animations = {
2152                         top: 100,
2153                         left: 100,
2154                         height: 100,
2155                         width: 100
2156                 },
2157                 div = jQuery( "<div>" );
2158
2159         assert.expect( 10 );
2160
2161         jQuery.each( animations, function( prop, value ) {
2162                 var anim = {};
2163                 anim[ prop ] = value;
2164                 div.css( prop, 1 ).animate( anim, {
2165                         queue: false,
2166                         complete: function() {
2167                                 assert.ok( true, "Called animation callback for " + prop );
2168                         }
2169                 } );
2170         } );
2171         assert.equal( div.queue().length, 0, "0 animations in the queue" );
2172         div.finish( false );
2173         jQuery.each( animations, function( prop, value ) {
2174                 assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
2175         } );
2176
2177         if ( QUnit.jQuerySelectors ) {
2178                 assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
2179         } else {
2180                 assert.ok( "skip", ":animated selector not supported with selector-native" );
2181         }
2182
2183         // cleanup
2184         div.remove();
2185
2186         // leaves a "shadow timer" which does nothing around, need to force a tick
2187         jQuery.fx.tick();
2188 } );
2189
2190 QUnit.test( ".finish( \"custom\" ) - custom queue animations", function( assert ) {
2191         var animations = {
2192                         top: 100,
2193                         left: 100,
2194                         height: 100,
2195                         width: 100
2196                 },
2197                 div = jQuery( "<div>" );
2198
2199         assert.expect( 11 );
2200
2201         jQuery.each( animations, function( prop, value ) {
2202                 var anim = {};
2203                 anim[ prop ] = value;
2204                 div.css( prop, 1 ).animate( anim, {
2205                         queue: "custom",
2206                         complete: function() {
2207                                 assert.ok( true, "Called animation callback for " + prop );
2208                         }
2209                 } );
2210         } );
2211         assert.equal( div.queue( "custom" ).length, 4, "4 animations in the queue" );
2212
2213         // start the first animation
2214         div.dequeue( "custom" );
2215
2216         if ( QUnit.jQuerySelectors ) {
2217                 assert.equal( div.is( ":animated" ), true, ":animated matches" );
2218         } else {
2219                 assert.ok( "skip", ":animated selector not supported with selector-native" );
2220         }
2221
2222         div.finish( "custom" );
2223         jQuery.each( animations, function( prop, value ) {
2224                 assert.equal( parseFloat( div.css( prop ) ), value, prop + " finished at correct value" );
2225         } );
2226
2227         if ( QUnit.jQuerySelectors ) {
2228                 assert.equal( div.is( ":animated" ), false, ":animated doesn't match" );
2229         } else {
2230                 assert.ok( "skip", ":animated selector not supported with selector-native" );
2231         }
2232
2233         // cleanup
2234         div.remove();
2235
2236         // leaves a "shadow timer" which does nothing around, need to force a tick
2237         jQuery.fx.tick();
2238 } );
2239
2240 QUnit.test( ".finish() calls finish of custom queue functions", function( assert ) {
2241         function queueTester( next, hooks ) {
2242                 hooks.stop = function( gotoEnd ) {
2243                         inside++;
2244                         assert.equal( this, div[ 0 ] );
2245                         assert.ok( gotoEnd, "hooks.stop(true) called" );
2246                 };
2247         }
2248         var div = jQuery( "<div>" ),
2249                 inside = 0,
2250                 outside = 0;
2251
2252         assert.expect( 6 );
2253         queueTester.finish = function() {
2254                 outside++;
2255                 assert.ok( true, "Finish called on custom queue function" );
2256         };
2257
2258         div.queue( queueTester ).queue( queueTester ).queue( queueTester ).finish();
2259
2260         assert.equal( inside, 1, "1 stop(true) callback" );
2261         assert.equal( outside, 2, "2 finish callbacks" );
2262
2263         div.remove();
2264 } );
2265
2266 QUnit.test( ".finish() is applied correctly when multiple elements were animated (trac-13937)", function( assert ) {
2267         assert.expect( 3 );
2268
2269         var elems = jQuery( "<a>0</a><a>1</a><a>2</a>" );
2270
2271         elems
2272                 .animate( { opacity: 0 }, fxInterval * 150 )
2273                 .animate( { opacity: 1 }, fxInterval * 150 );
2274
2275         setTimeout( function() {
2276                 elems.eq( 1 ).finish();
2277                 assert.ok( !elems.eq( 1 ).queue().length, "empty queue for .finish()ed element" );
2278                 assert.ok( elems.eq( 0 ).queue().length, "non-empty queue for preceding element" );
2279                 assert.ok( elems.eq( 2 ).queue().length, "non-empty queue for following element" );
2280                 elems.stop( true );
2281
2282         }, 100 );
2283         this.clock.tick( fxInterval * 150 );
2284 } );
2285
2286 QUnit.test( "slideDown() after stop() (trac-13483)", function( assert ) {
2287                 assert.expect( 2 );
2288
2289                 var ul = jQuery( "<ul style='height: 100px; display: block;'></ul>" )
2290                                 .appendTo( "#qunit-fixture" ),
2291                         origHeight = ul.height(),
2292                         clock = this.clock;
2293
2294         // First test. slideUp() -> stop() in the middle -> slideDown() until the end
2295                 ul.slideUp( fxInterval * 100 );
2296                 clock.tick( fxInterval * 50 );
2297                 ul.stop( true );
2298                 ul.slideDown( 1, function() {
2299                                 assert.equal( ul.height(), origHeight, "slideDown() after interrupting slideUp() with stop(). Height must be in original value" );
2300
2301                                 // Second test. slideDown() -> stop() in the middle -> slideDown() until the end
2302                                 ul.slideUp( 1 );
2303                                 clock.tick( fxInterval );
2304                                 ul.slideDown( fxInterval * 100 );
2305                                 clock.tick( fxInterval * 50 );
2306                                 ul.stop( true );
2307                                 ul.slideDown( 1 );
2308                                 assert.equal( ul.height(), origHeight, "slideDown() after interrupting slideDown() with stop(). Height must be in original value" );
2309
2310                                 // Cleanup
2311                                 ul.remove();
2312                                 clock.tick( fxInterval );
2313
2314                 } );
2315
2316                 clock.tick( fxInterval );
2317 } );
2318
2319 QUnit.test( "Respect display value on inline elements (trac-14824)", function( assert ) {
2320         assert.expect( 2 );
2321
2322         var clock = this.clock,
2323                 fromStyleSheet = jQuery( "<span id='span-14824'></span>" ),
2324                 fromStyleAttr = jQuery( "<span style='display: block;'></span>" );
2325
2326         jQuery( "#qunit-fixture" ).append( fromStyleSheet, fromStyleAttr );
2327
2328         fromStyleSheet.slideUp( function() {
2329                 jQuery( this ).slideDown( function() {
2330                         assert.equal( jQuery( this ).css( "display" ), "block",
2331                                 "Respect previous display value (from stylesheet) on span element" );
2332                 } );
2333         } );
2334
2335         fromStyleAttr.slideUp( function() {
2336                 jQuery( this ).slideDown( function() {
2337                         assert.equal( jQuery( this ).css( "display" ), "block",
2338                                 "Respect previous display value (from style attribute) on span element" );
2339                 } );
2340         } );
2341
2342         clock.tick( 800 + fxInterval * 2 );
2343 } );
2344
2345 QUnit.test( "jQuery.easing._default (gh-2218)", function( assert ) {
2346         assert.expect( 2 );
2347
2348         jQuery( "#foo" )
2349                 .animate( { width: "5px" }, {
2350                         duration: 5,
2351                         start: function( anim ) {
2352                                 assert.equal( anim.opts.easing, jQuery.easing._default,
2353                                         "anim.opts.easing should be equal to jQuery.easing._default when the easing argument is not given" );
2354                         }
2355                 } )
2356                 .animate( { height: "5px" }, {
2357                         duration: 5,
2358                         easing: "linear",
2359                         start: function( anim ) {
2360                                 assert.equal( anim.opts.easing, "linear",
2361                                         "anim.opts.easing should be equal to the easing argument" );
2362                         }
2363                 } )
2364                 .stop();
2365
2366         this.clock.tick( 10 + fxInterval );
2367 } );
2368
2369 QUnit.test( "jQuery.easing._default in Animation (gh-2218", function( assert ) {
2370         assert.expect( 3 );
2371
2372         var animation,
2373                 defaultEasing = jQuery.easing._default,
2374                 called = false,
2375                 testObject = { "width": 100 },
2376                 testDest = { "width": 200 };
2377
2378         jQuery.easing.custom = function( p ) {
2379                 called = true;
2380                 return p;
2381         };
2382         jQuery.easing._default = "custom";
2383
2384         animation = jQuery.Animation( testObject, testDest, { "duration": 1 } );
2385         animation.done( function() {
2386                 assert.equal( testObject.width, testDest.width, "Animated width" );
2387                 assert.ok( called, "Custom jQuery.easing._default called" );
2388                 assert.strictEqual( animation.opts.easing, "custom",
2389                         "Animation used custom jQuery.easing._default" );
2390                 jQuery.easing._default = defaultEasing;
2391                 delete jQuery.easing.custom;
2392         } );
2393
2394         this.clock.tick( fxInterval );
2395 } );
2396
2397 QUnit.test( "jQuery.easing._default in Tween (gh-2218)", function( assert ) {
2398         assert.expect( 3 );
2399
2400         var tween,
2401                 defaultEasing = jQuery.easing._default,
2402                 called = false,
2403                 testObject = { "width": 100 };
2404
2405         jQuery.easing.custom = function( p ) {
2406                 called = true;
2407                 return p;
2408         };
2409         jQuery.easing._default = "custom";
2410
2411         tween = jQuery.Tween( testObject, { "duration": 1 }, "width", 200 );
2412         tween.run( 1 );
2413         assert.equal( testObject.width, 200, "Animated width" );
2414         assert.ok( called, "Custom jQuery.easing._default called" );
2415         assert.strictEqual( tween.easing, "custom",
2416                 "Animation used custom jQuery.easing._default" );
2417         jQuery.easing._default = defaultEasing;
2418         delete jQuery.easing.custom;
2419 } );
2420
2421 QUnit.test( "Display value is correct for disconnected nodes (trac-13310)", function( assert ) {
2422         assert.expect( 3 );
2423
2424         var div = jQuery( "<div></div>" );
2425
2426         assert.equal( div.css( "display", "inline" ).hide().show().appendTo( "body" ).css( "display" ), "inline", "Initialized display value has returned" );
2427         div.remove();
2428
2429         div.css( "display", "none" ).hide();
2430         assert.equal( jQuery._data( div[ 0 ], "olddisplay" ), undefined, "olddisplay is undefined after hiding a detached and hidden element" );
2431         div.remove();
2432
2433         div.css( "display", "inline-block" ).hide().appendTo( "body" ).fadeIn( function() {
2434                 assert.equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
2435                 div.remove();
2436         } );
2437         this.clock.tick( 1000 );
2438 } );
2439
2440 QUnit.test( "Show/hide/toggle and display: inline", function( assert ) {
2441         assert.expect( 40 );
2442
2443         var clock = this.clock;
2444
2445         jQuery( "<span></span><div style='display:inline' title='inline div'></div>" ).each( function() {
2446                 var completed, interrupted,
2447                         N = fxInterval * 10,
2448                         fixture = jQuery( "#qunit-fixture" ),
2449                         $el = jQuery( this ),
2450                         kind = this.title || this.nodeName.toLowerCase();
2451
2452                 // Animations allowed to complete
2453                 completed = jQuery.map( [
2454                         $el.clone().data( { call: "hide", done: "none" } ).appendTo( fixture ).hide( N ),
2455                         $el.clone().data( { call: "toggle", done: "none" } ).appendTo( fixture ).toggle( N ),
2456                         $el.clone().data( { call: "hide+show", done: "inline" } ).appendTo( fixture )
2457                                 .hide().show( N ),
2458                         $el.clone().data( { call: "hide+toggle", done: "inline" } ).appendTo( fixture )
2459                                 .hide().toggle( N )
2460                 ], function( $clone ) { return $clone[ 0 ]; } );
2461
2462                 // Animations not allowed to complete
2463                 interrupted = jQuery.map( [
2464                         $el.clone().data( { call: "hide+stop" } ).appendTo( fixture ).hide( N ),
2465                         $el.clone().data( { call: "toggle+stop" } ).appendTo( fixture ).toggle( N ),
2466                         $el.clone().data( { call: "hide+show+stop" } ).appendTo( fixture ).hide().show( N ),
2467                         $el.clone().data( { call: "hide+toggle+stop" } ).appendTo( fixture ).hide().toggle( N )
2468                 ], function( $clone ) { return $clone[ 0 ]; } );
2469
2470                 // All elements should be inline-block during the animation
2471                 clock.tick( N / 2 );
2472                 jQuery( completed ).each( function() {
2473                         var $el = jQuery( this ),
2474                                 call = $el.data( "call" );
2475                         assert.strictEqual( $el.css( "display" ), "inline-block", kind + " display during " + call );
2476                 } );
2477
2478                 // Interrupted elements should remain inline-block
2479                 jQuery( interrupted ).stop();
2480                 clock.tick( N / 2 );
2481                 jQuery( interrupted ).each( function() {
2482                         var $el = jQuery( this ),
2483                                 call = $el.data( "call" );
2484                         assert.strictEqual( $el.css( "display" ), "inline-block", kind + " display after " + call );
2485                 } );
2486
2487                 // Completed elements should not remain inline-block
2488                 clock.tick( N / 2 );
2489                 jQuery( completed ).each( function() {
2490                         var $el = jQuery( this ),
2491                                 call = $el.data( "call" ),
2492                                 display = $el.data( "done" );
2493                         assert.strictEqual( $el.css( "display" ), display, kind + " display after " + call );
2494                 } );
2495
2496                 // A post-animation toggle should not make any element inline-block
2497                 completed = jQuery( completed.concat( interrupted ) );
2498                 completed.toggle( N / 2 );
2499                 clock.tick( N );
2500                 completed.each( function() {
2501                         var $el = jQuery( this ),
2502                                 call = $el.data( "call" );
2503                         assert.ok( $el.css( "display" ) !== "inline-block",
2504                                 kind + " display is not inline-block after " + call + "+toggle" );
2505                 } );
2506         } );
2507 } );
2508
2509 function testEasing( assert, speed, easing, complete ) {
2510         assert.expect( 4 );
2511         var options = jQuery.speed( speed, easing, complete );
2512
2513         assert.equal( options.duration, fxInterval, "Duration set properly" );
2514         assert.equal(
2515                 typeof options.easing === "function" ? options.easing() : options.easing,
2516                 "linear",
2517                 "Easing set properly"
2518         );
2519         assert.equal( options.queue, "fx", "Queue defaults to fx" );
2520         options.complete();
2521 }
2522
2523 QUnit.test( "jQuery.speed( speed, easing, complete )", function( assert ) {
2524         testEasing( assert, fxInterval, "linear", function() {
2525                 assert.ok( true, "Complete called" );
2526         } );
2527 } );
2528
2529 QUnit.test( "jQuery.speed( speed, easing, complete ) - with easing function", function( assert ) {
2530         testEasing(
2531                 assert,
2532                 fxInterval,
2533                 function() {
2534                         return "linear";
2535                 },
2536                 function() {
2537                         assert.ok( true, "Complete called" );
2538                 }
2539         );
2540 } );
2541
2542 QUnit.test( "jQuery.speed( options )", function( assert ) {
2543         testEasing( assert, {
2544                 duration: fxInterval,
2545                 easing: "linear",
2546                 complete: function() {
2547                         assert.ok( true, "Complete called" );
2548                 }
2549         } );
2550 } );
2551
2552 QUnit.test( "jQuery.speed( options ) - with easing function", function( assert ) {
2553         testEasing( assert, {
2554                 duration: fxInterval,
2555                 easing: function() {
2556                         return "linear";
2557                 },
2558                 complete: function() {
2559                         assert.ok( true, "Complete called" );
2560                 }
2561         } );
2562 } );
2563
2564 QUnit.test( "jQuery.speed( options ) - queue values", function( assert ) {
2565         assert.expect( 5 );
2566
2567         var get = function( queue ) {
2568                 return jQuery.speed( { queue: queue } ).queue;
2569         };
2570
2571         assert.equal( get( null ), "fx", "null defaults to 'fx'" );
2572         assert.equal( get( undefined ), "fx", "undefined defaults to 'fx'" );
2573         assert.equal( get( true ), "fx", "true defaults to 'fx'" );
2574         assert.equal( get( "fx" ), "fx", "'fx' passed through" );
2575         assert.equal( get( "custom" ), "custom", "'custom' passed through" );
2576 } );
2577
2578 QUnit.test( "jQuery.speed() - durations", function( assert ) {
2579         assert.expect( 5 );
2580
2581         var get = function( duration ) {
2582                 return jQuery.speed( duration ).duration;
2583         };
2584
2585         assert.equal( get( 100 ), 100, "jQuery.speed sets number duration" );
2586         assert.equal( get(), jQuery.fx.speeds._default, "jQuery.speed falls back default duration" );
2587         assert.equal( get( "slow" ), jQuery.fx.speeds.slow, "jQuery.speed uses preset speeds" );
2588         assert.equal( get( "fast" ), jQuery.fx.speeds.fast, "jQuery.speed uses preset speeds" );
2589         jQuery.fx.off = true;
2590         assert.equal( get( 100 ), 0, "jQuery.speed defaults duration to zero if fx is off" );
2591         jQuery.fx.off = false;
2592 } );
2593
2594 } )();