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