test/unit/effects.js

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