test/unit/effects.js

   1 module("effects", { teardown: moduleTeardown });
   2
   3 test("sanity check", function() {
   4         expect(1);
   5         ok( jQuery("#dl:visible, #main:visible, #foo:visible").length === 3, "QUnit state is correct for testing effects" );
   6 });
   7
   8 test("show()", function() {
   9         expect(28);
  10
  11         var hiddendiv = jQuery("div.hidden");
  12
  13         hiddendiv.hide().show();
  14
  15         equals( hiddendiv.css("display"), "block", "Make sure a pre-hidden div is visible." );
  16
  17         var div = jQuery("<div>").hide().appendTo("#main").show();
  18
  19         equal( div.css("display"), "block", "Make sure pre-hidden divs show" );
  20
  21         QUnit.reset();
  22
  23         hiddendiv = jQuery("div.hidden");
  24
  25         equal(jQuery.css( hiddendiv[0], "display"), "none", "hiddendiv is display: none");
  26
  27         hiddendiv.css("display", "block");
  28         equal(jQuery.css( hiddendiv[0], "display"), "block", "hiddendiv is display: block");
  29
  30         hiddendiv.show();
  31         equal(jQuery.css( hiddendiv[0], "display"), "block", "hiddendiv is display: block");
  32
  33         hiddendiv.css("display","");
  34
  35         var pass = true, div = jQuery("#main div");
  36         div.show().each(function(){
  37                 if ( this.style.display == "none" ) pass = false;
  38         });
  39         ok( pass, "Show" );
  40
  41         var speeds = {
  42           "null speed": null,
  43           "undefined speed": undefined,
  44           "empty string speed": "",
  45           "false speed": false
  46         };
  47
  48         jQuery.each(speeds, function(name, speed) {
  49     pass = true;
  50         div.hide().show(speed).each(function() {
  51                 if ( this.style.display == "none" ) pass = false;
  52         });
  53         ok( pass, "Show with " + name);
  54   });
  55
  56
  57         jQuery.each(speeds, function(name, speed) {
  58     pass = true;
  59         div.hide().show(speed, function() {
  60                         pass = false;
  61                 });
  62                 ok( pass, "Show with " + name + " does not call animate callback" );
  63         });
  64
  65         // #show-tests * is set display: none in CSS
  66         jQuery("#main").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>');
  67
  68         var old = jQuery("#test-table").show().css("display") !== "table";
  69         jQuery("#test-table").remove();
  70
  71         var test = {
  72                 "div"      : "block",
  73                 "p"        : "block",
  74                 "a"        : "inline",
  75                 "code"     : "inline",
  76                 "pre"      : "block",
  77                 "span"     : "inline",
  78                 "table"    : old ? "block" : "table",
  79                 "thead"    : old ? "block" : "table-header-group",
  80                 "tbody"    : old ? "block" : "table-row-group",
  81                 "tr"       : old ? "block" : "table-row",
  82                 "th"       : old ? "block" : "table-cell",
  83                 "td"       : old ? "block" : "table-cell",
  84                 "ul"       : "block",
  85                 "li"       : old ? "block" : "list-item"
  86         };
  87
  88         jQuery.each(test, function(selector, expected) {
  89                 var elem = jQuery(selector, "#show-tests").show();
  90                 equals( elem.css("display"), expected, "Show using correct display type for " + selector );
  91         });
  92 });
  93
  94 test("show(Number) - other displays", function() {
  95         expect(15);
  96         QUnit.reset();
  97         stop();
  98
  99         // #show-tests * is set display: none in CSS
 100         jQuery("#main").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>');
 101
 102         var old = jQuery("#test-table").show().css("display") !== "table",
 103                 num = 0;
 104         jQuery("#test-table").remove();
 105
 106         var test = {
 107                 "div"      : "block",
 108                 "p"        : "block",
 109                 "a"        : "inline",
 110                 "code"     : "inline",
 111                 "pre"      : "block",
 112                 "span"     : "inline",
 113                 "table"    : old ? "block" : "table",
 114                 "thead"    : old ? "block" : "table-header-group",
 115                 "tbody"    : old ? "block" : "table-row-group",
 116                 "tr"       : old ? "block" : "table-row",
 117                 "th"       : old ? "block" : "table-cell",
 118                 "td"       : old ? "block" : "table-cell",
 119                 "ul"       : "block",
 120                 "li"       : old ? "block" : "list-item"
 121         };
 122
 123         jQuery.each(test, function(selector, expected) {
 124                 var elem = jQuery(selector, "#show-tests").show(1, function() {
 125                         equals( elem.css("display"), expected, "Show using correct display type for " + selector );
 126                         if ( ++num === 15 ) {
 127                                 start();
 128                         }
 129                 });
 130         });
 131 });
 132
 133
 134
 135 //  Supports #7397
 136 test("Persist correct display value", function() {
 137   expect(3);
 138         QUnit.reset();
 139         stop();
 140
 141         // #show-tests * is set display: none in CSS
 142         jQuery("#main").append('<div id="show-tests"><span style="position:absolute;">foo</span></div>');
 143
 144         var $span = jQuery("#show-tests span"),
 145           displayNone = $span.css("display"),
 146           display = '', num = 0;
 147
 148   $span.show();
 149
 150   display = $span.css("display");
 151
 152   $span.hide();
 153
 154   $span.fadeIn(100, function() {
 155
 156     equals($span.css("display"), display, "Expecting display: " + display);
 157
 158     $span.fadeOut(100, function () {
 159
 160       equals($span.css("display"), displayNone, "Expecting display: " + displayNone);
 161
 162       $span.fadeIn(100, function() {
 163
 164         equals($span.css("display"), display, "Expecting display: " + display);
 165
 166         start();
 167       });
 168     });
 169   });
 170 });
 171
 172 test("show() resolves correct default display #8099", function() {
 173         expect(3);
 174         var bug8099 = jQuery("<tt/>").appendTo("#main");
 175
 176         equals( bug8099.css("display"), "none", "default display override for all tt" );
 177         equals( bug8099.show().css("display"), "inline", "Correctly resolves display:inline" );
 178
 179         bug8099.remove();
 180
 181         equals( jQuery("#foo").hide().show().css("display"), "block", "Correctly resolves display:block after hide/show" );
 182 });
 183
 184 test("animate(Hash, Object, Function)", function() {
 185         expect(1);
 186         stop();
 187         var hash = {opacity: 'show'};
 188         var hashCopy = jQuery.extend({}, hash);
 189         jQuery('#foo').animate(hash, 0, function() {
 190                 equals( hash.opacity, hashCopy.opacity, 'Check if animate changed the hash parameter' );
 191                 start();
 192         });
 193 });
 194
 195 test("animate negative height", function() {
 196         expect(1);
 197         stop();
 198         jQuery("#foo").animate({ height: -100 }, 100, function() {
 199                 equals( this.offsetHeight, 0, "Verify height." );
 200                 start();
 201         });
 202 });
 203
 204 test("animate block as inline width/height", function() {
 205         expect(3);
 206
 207         var span = jQuery("<span>").css("display", "inline-block").appendTo("body"),
 208                 expected = span.css("display");
 209
 210         span.remove();
 211
 212         if ( jQuery.support.inlineBlockNeedsLayout || expected === "inline-block" ) {
 213                 stop();
 214
 215                 jQuery("#foo").css({ display: "inline", width: '', height: '' }).animate({ width: 42, height: 42 }, 100, function() {
 216                         equals( jQuery(this).css("display"), jQuery.support.inlineBlockNeedsLayout ? "inline" : "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
 217                         equals( this.offsetWidth, 42, "width was animated" );
 218                         equals( this.offsetHeight, 42, "height was animated" );
 219                         start();
 220                 });
 221
 222         // Browser doesn't support inline-block
 223         } else {
 224                 ok( true, "Browser doesn't support inline-block" );
 225                 ok( true, "Browser doesn't support inline-block" );
 226                 ok( true, "Browser doesn't support inline-block" );
 227         }
 228 });
 229
 230 test("animate native inline width/height", function() {
 231         expect(3);
 232
 233         var span = jQuery("<span>").css("display", "inline-block").appendTo("body"),
 234                 expected = span.css("display");
 235
 236         span.remove();
 237
 238         if ( jQuery.support.inlineBlockNeedsLayout || expected === "inline-block" ) {
 239                 stop();
 240                 jQuery("#foo").css({ display: "", width: '', height: '' })
 241                         .append('<span>text</span>')
 242                         .children('span')
 243                                 .animate({ width: 42, height: 42 }, 100, function() {
 244                                         equals( jQuery(this).css("display"), "inline-block", "inline-block was set on non-floated inline element when animating width/height" );
 245                                         equals( this.offsetWidth, 42, "width was animated" );
 246                                         equals( this.offsetHeight, 42, "height was animated" );
 247                                         start();
 248                                 });
 249
 250         // Browser doesn't support inline-block
 251         } else {
 252                 ok( true, "Browser doesn't support inline-block" );
 253                 ok( true, "Browser doesn't support inline-block" );
 254                 ok( true, "Browser doesn't support inline-block" );
 255         }
 256 });
 257
 258 test("animate block width/height", function() {
 259         expect(3);
 260         stop();
 261         jQuery("#foo").css({ display: "block", width: 20, height: 20 }).animate({ width: 42, height: 42 }, 100, function() {
 262                 equals( jQuery(this).css("display"), "block", "inline-block was not set on block element when animating width/height" );
 263                 equals( this.offsetWidth, 42, "width was animated" );
 264                 equals( this.offsetHeight, 42, "height was animated" );
 265                 start();
 266         });
 267 });
 268
 269 test("animate table width/height", function() {
 270         expect(1);
 271         stop();
 272
 273         var displayMode = jQuery("#table").css("display") !== "table" ? "block" : "table";
 274
 275         jQuery("#table").animate({ width: 42, height: 42 }, 100, function() {
 276                 equals( jQuery(this).css("display"), displayMode, "display mode is correct" );
 277                 start();
 278         });
 279 });
 280
 281 test("animate table-row width/height", function() {
 282         expect(3);
 283         stop();
 284         var tr = jQuery("#table")
 285                 .attr({ "cellspacing": 0, "cellpadding": 0, "border": 0 })
 286                 .html("<tr style='height:42px;'><td style='padding:0;'><div style='width:20px;height:20px;'></div></td></tr>")
 287                 .find("tr");
 288
 289         // IE<8 uses “block” instead of the correct display type
 290         var displayMode = tr.css("display") !== "table-row" ? "block" : "table-row";
 291
 292         tr.animate({ width: 10, height: 10 }, 100, function() {
 293                 equals( jQuery(this).css("display"), displayMode, "display mode is correct" );
 294                 equals( this.offsetWidth, 20, "width animated to shrink wrap point" );
 295                 equals( this.offsetHeight, 20, "height animated to shrink wrap point" );
 296                 start();
 297         });
 298 });
 299
 300 test("animate table-cell width/height", function() {
 301         expect(3);
 302         stop();
 303         var td = jQuery("#table")
 304                 .attr({ "cellspacing": 0, "cellpadding": 0, "border": 0 })
 305                 .html("<tr><td style='width:42px;height:42px;padding:0;'><div style='width:20px;height:20px;'></div></td></tr>")
 306                 .find("td");
 307
 308         // IE<8 uses “block” instead of the correct display type
 309         var displayMode = td.css("display") !== "table-cell" ? "block" : "table-cell";
 310
 311         td.animate({ width: 10, height: 10 }, 100, function() {
 312                 equals( jQuery(this).css("display"), displayMode, "display mode is correct" );
 313                 equals( this.offsetWidth, 20, "width animated to shrink wrap point" );
 314                 equals( this.offsetHeight, 20, "height animated to shrink wrap point" );
 315                 start();
 316         });
 317 });
 318
 319 test("animate resets overflow-x and overflow-y when finished", function() {
 320         expect(2);
 321         stop();
 322         jQuery("#foo")
 323                 .css({ display: "block", width: 20, height: 20, overflowX: "visible", overflowY: "auto" })
 324                 .animate({ width: 42, height: 42 }, 100, function() {
 325                         equals( this.style.overflowX, "visible", "overflow-x is visible" );
 326                         equals( this.style.overflowY, "auto", "overflow-y is auto" );
 327                         start();
 328                 });
 329 });
 330
 331 /* // This test ends up being flaky depending upon the CPU load
 332 test("animate option (queue === false)", function () {
 333         expect(1);
 334         stop();
 335
 336         var order = [];
 337
 338         var $foo = jQuery("#foo");
 339         $foo.animate({width:'100px'}, 3000, function () {
 340                 // should finish after unqueued animation so second
 341                 order.push(2);
 342                 same( order, [ 1, 2 ], "Animations finished in the correct order" );
 343                 start();
 344         });
 345         $foo.animate({fontSize:'2em'}, {queue:false, duration:10, complete:function () {
 346                 // short duration and out of queue so should finish first
 347                 order.push(1);
 348         }});
 349 });
 350 */
 351
 352 test("animate with no properties", function() {
 353         expect(2);
 354
 355         var divs = jQuery("div"), count = 0;
 356
 357         divs.animate({}, function(){
 358                 count++;
 359         });
 360
 361         equals( divs.length, count, "Make sure that callback is called for each element in the set." );
 362
 363         stop();
 364
 365         var foo = jQuery("#foo");
 366
 367         foo.animate({});
 368         foo.animate({top: 10}, 100, function(){
 369                 ok( true, "Animation was properly dequeued." );
 370                 start();
 371         });
 372 });
 373
 374 test("animate duration 0", function() {
 375         expect(11);
 376
 377         stop();
 378
 379         var $elems = jQuery([{ a:0 },{ a:0 }]), counter = 0;
 380
 381         equals( jQuery.timers.length, 0, "Make sure no animation was running from another test" );
 382
 383         $elems.eq(0).animate( {a:1}, 0, function(){
 384                 ok( true, "Animate a simple property." );
 385                 counter++;
 386         });
 387
 388         // Failed until [6115]
 389         equals( jQuery.timers.length, 0, "Make sure synchronic animations are not left on jQuery.timers" );
 390
 391         equals( counter, 1, "One synchronic animations" );
 392
 393         $elems.animate( { a:2 }, 0, function(){
 394                 ok( true, "Animate a second simple property." );
 395                 counter++;
 396         });
 397
 398         equals( counter, 3, "Multiple synchronic animations" );
 399
 400         $elems.eq(0).animate( {a:3}, 0, function(){
 401                 ok( true, "Animate a third simple property." );
 402                 counter++;
 403         });
 404         $elems.eq(1).animate( {a:3}, 200, function(){
 405                 counter++;
 406                 // Failed until [6115]
 407                 equals( counter, 5, "One synchronic and one asynchronic" );
 408                 start();
 409         });
 410
 411         var $elem = jQuery("<div />");
 412         $elem.show(0, function(){
 413                 ok(true, "Show callback with no duration");
 414         });
 415         $elem.hide(0, function(){
 416                 ok(true, "Hide callback with no duration");
 417         });
 418
 419         // manually clean up detached elements
 420         $elem.remove();
 421 });
 422
 423 test("animate hyphenated properties", function(){
 424         expect(1);
 425         stop();
 426
 427         jQuery("#foo")
 428                 .css("font-size", 10)
 429                 .animate({"font-size": 20}, 200, function(){
 430                         equals( this.style.fontSize, "20px", "The font-size property was animated." );
 431                         start();
 432                 });
 433 });
 434
 435 test("animate non-element", function(){
 436         expect(1);
 437         stop();
 438
 439         var obj = { test: 0 };
 440
 441         jQuery(obj).animate({test: 200}, 200, function(){
 442                 equals( obj.test, 200, "The custom property should be modified." );
 443                 start();
 444         });
 445 });
 446
 447 test("stop()", function() {
 448         expect(3);
 449         stop();
 450
 451         var $foo = jQuery("#foo");
 452         var w = 0;
 453         $foo.hide().width(200).width();
 454
 455         $foo.animate({ width:'show' }, 1000);
 456         setTimeout(function(){
 457                 var nw = $foo.width();
 458                 notEqual( nw, w, "An animation occurred " + nw + "px " + w + "px");
 459                 $foo.stop();
 460
 461                 nw = $foo.width();
 462                 notEqual( nw, w, "Stop didn't reset the animation " + nw + "px " + w + "px");
 463                 setTimeout(function(){
 464                         $foo.removeData();
 465                         $foo.removeData(undefined, true);
 466                         equals( nw, $foo.width(), "The animation didn't continue" );
 467                         start();
 468                 }, 100);
 469         }, 100);
 470 });
 471
 472 test("stop() - several in queue", function() {
 473         expect(3);
 474         stop();
 475
 476         var $foo = jQuery("#foo");
 477         var w = 0;
 478         $foo.hide().width(200).width();
 479
 480         $foo.animate({ width:'show' }, 1000);
 481         $foo.animate({ width:'hide' }, 1000);
 482         $foo.animate({ width:'show' }, 1000);
 483         setTimeout(function(){
 484                 equals( $foo.queue().length, 3, "All 3 still in the queue" );
 485                 var nw = $foo.width();
 486                 notEqual( nw, w, "An animation occurred " + nw + "px " + w + "px");
 487                 $foo.stop();
 488
 489                 nw = $foo.width();
 490                 notEqual( nw, w, "Stop didn't reset the animation " + nw + "px " + w + "px");
 491
 492                 $foo.stop(true);
 493                 start();
 494         }, 100);
 495 });
 496
 497 test("stop(clearQueue)", function() {
 498         expect(4);
 499         stop();
 500
 501         var $foo = jQuery("#foo");
 502         var w = 0;
 503         $foo.hide().width(200).width();
 504
 505         $foo.animate({ width:'show' }, 1000);
 506         $foo.animate({ width:'hide' }, 1000);
 507         $foo.animate({ width:'show' }, 1000);
 508         setTimeout(function(){
 509                 var nw = $foo.width();
 510                 ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
 511                 $foo.stop(true);
 512
 513                 nw = $foo.width();
 514                 ok( nw != w, "Stop didn't reset the animation " + nw + "px " + w + "px");
 515
 516                 equals( $foo.queue().length, 0, "The animation queue was cleared" );
 517                 setTimeout(function(){
 518                         equals( nw, $foo.width(), "The animation didn't continue" );
 519                         start();
 520                 }, 100);
 521         }, 100);
 522 });
 523
 524 test("stop(clearQueue, gotoEnd)", function() {
 525         expect(1);
 526         stop();
 527
 528         var $foo = jQuery("#foo");
 529         var w = 0;
 530         $foo.hide().width(200).width();
 531
 532         $foo.animate({ width:'show' }, 1000);
 533         $foo.animate({ width:'hide' }, 1000);
 534         $foo.animate({ width:'show' }, 1000);
 535         $foo.animate({ width:'hide' }, 1000);
 536         setTimeout(function(){
 537                 var nw = $foo.width();
 538                 ok( nw != w, "An animation occurred " + nw + "px " + w + "px");
 539                 $foo.stop(false, true);
 540
 541                 nw = $foo.width();
 542                 // Disabled, being flaky
 543                 //equals( nw, 1, "Stop() reset the animation" );
 544
 545                 setTimeout(function(){
 546                         // Disabled, being flaky
 547                         //equals( $foo.queue().length, 2, "The next animation continued" );
 548                         $foo.stop(true);
 549                         start();
 550                 }, 100);
 551         }, 100);
 552 });
 553
 554 test("toggle()", function() {
 555         expect(6);
 556         var x = jQuery("#foo");
 557         ok( x.is(":visible"), "is visible" );
 558         x.toggle();
 559         ok( x.is(":hidden"), "is hidden" );
 560         x.toggle();
 561         ok( x.is(":visible"), "is visible again" );
 562
 563         x.toggle(true);
 564         ok( x.is(":visible"), "is visible" );
 565         x.toggle(false);
 566         ok( x.is(":hidden"), "is hidden" );
 567         x.toggle(true);
 568         ok( x.is(":visible"), "is visible again" );
 569 });
 570
 571 jQuery.checkOverflowDisplay = function(){
 572         var o = jQuery.css( this, "overflow" );
 573
 574         equals(o, "visible", "Overflow should be visible: " + o);
 575         equals(jQuery.css( this, "display" ), "inline", "Display shouldn't be tampered with.");
 576
 577         start();
 578 }
 579
 580 test("support negative values < -10000 (bug #7193)", function () {
 581         expect(1);
 582         stop();
 583
 584         jQuery.extend(jQuery.fx.step, {
 585                 "marginBottom": function(fx) {
 586                         equals( fx.cur(), -11000, "Element has margin-bottom of -11000" );
 587                         delete jQuery.fx.step.marginBottom;
 588                 }
 589     });
 590
 591         jQuery("#main").css("marginBottom", "-11000px").animate({ marginBottom: "-11001px" }, {
 592                 duration: 1,
 593                 complete: start
 594         });
 595 });
 596
 597 test("JS Overflow and Display", function() {
 598         expect(2);
 599         stop();
 600         jQuery.makeTest( "JS Overflow and Display" )
 601                 .addClass("widewidth")
 602                 .css({ overflow: "visible", display: "inline" })
 603                 .addClass("widewidth")
 604                 .text("Some sample text.")
 605                 .before("text before")
 606                 .after("text after")
 607                 .animate({ opacity: 0.5 }, "slow", jQuery.checkOverflowDisplay);
 608 });
 609
 610 test("CSS Overflow and Display", function() {
 611         expect(2);
 612         stop();
 613         jQuery.makeTest( "CSS Overflow and Display" )
 614                 .addClass("overflow inline")
 615                 .addClass("widewidth")
 616                 .text("Some sample text.")
 617                 .before("text before")
 618                 .after("text after")
 619                 .animate({ opacity: 0.5 }, "slow", jQuery.checkOverflowDisplay);
 620 });
 621
 622 jQuery.each( {
 623         "CSS Auto": function(elem,prop){
 624                 jQuery(elem).addClass("auto" + prop)
 625                         .text("This is a long string of text.");
 626                 return "";
 627         },
 628         "JS Auto": function(elem,prop){
 629                 jQuery(elem).css(prop,"")
 630                         .text("This is a long string of text.");
 631                 return "";
 632         },
 633         "CSS 100": function(elem,prop){
 634                 jQuery(elem).addClass("large" + prop);
 635                 return "";
 636         },
 637         "JS 100": function(elem,prop){
 638                 jQuery(elem).css(prop,prop == "opacity" ? 1 : "100px");
 639                 return prop == "opacity" ? 1 : 100;
 640         },
 641         "CSS 50": function(elem,prop){
 642                 jQuery(elem).addClass("med" + prop);
 643                 return "";
 644         },
 645         "JS 50": function(elem,prop){
 646                 jQuery(elem).css(prop,prop == "opacity" ? 0.50 : "50px");
 647                 return prop == "opacity" ? 0.5 : 50;
 648         },
 649         "CSS 0": function(elem,prop){
 650                 jQuery(elem).addClass("no" + prop);
 651                 return "";
 652         },
 653         "JS 0": function(elem,prop){
 654                 jQuery(elem).css(prop,prop == "opacity" ? 0 : "0px");
 655                 return 0;
 656         }
 657 }, function(fn, f){
 658         jQuery.each( {
 659                 "show": function(elem,prop){
 660                         jQuery(elem).hide().addClass("wide"+prop);
 661                         return "show";
 662                 },
 663                 "hide": function(elem,prop){
 664                         jQuery(elem).addClass("wide"+prop);
 665                         return "hide";
 666                 },
 667                 "100": function(elem,prop){
 668                         jQuery(elem).addClass("wide"+prop);
 669                         return prop == "opacity" ? 1 : 100;
 670                 },
 671                 "50": function(elem,prop){
 672                         return prop == "opacity" ? 0.50 : 50;
 673                 },
 674                 "0": function(elem,prop){
 675                         jQuery(elem).addClass("noback");
 676                         return 0;
 677                 }
 678         }, function(tn, t){
 679                 test(fn + " to " + tn, function() {
 680                         var elem = jQuery.makeTest( fn + " to " + tn );
 681
 682                         var t_w = t( elem, "width" );
 683                         var f_w = f( elem, "width" );
 684                         var t_h = t( elem, "height" );
 685                         var f_h = f( elem, "height" );
 686                         var t_o = t( elem, "opacity" );
 687                         var f_o = f( elem, "opacity" );
 688
 689                         var num = 0;
 690
 691                         if ( t_h == "show" ) num++;
 692                         if ( t_w == "show" ) num++;
 693                         if ( t_w == "hide"||t_w == "show" ) num++;
 694                         if ( t_h == "hide"||t_h == "show" ) num++;
 695                         if ( t_o == "hide"||t_o == "show" ) num++;
 696                         if ( t_w == "hide" ) num++;
 697                         if ( t_o.constructor == Number ) num += 2;
 698                         if ( t_w.constructor == Number ) num += 2;
 699                         if ( t_h.constructor == Number ) num +=2;
 700
 701                         expect(num);
 702                         stop();
 703
 704                         var anim = { width: t_w, height: t_h, opacity: t_o };
 705
 706                         elem.animate(anim, 50, function(){
 707                                 if ( t_w == "show" )
 708                                         equals( this.style.display, "block", "Showing, display should block: " + this.style.display);
 709
 710                                 if ( t_w == "hide"||t_w == "show" )
 711                                         ok(f_w === "" ? this.style.width === f_w : this.style.width.indexOf(f_w) === 0, "Width must be reset to " + f_w + ": " + this.style.width);
 712
 713                                 if ( t_h == "hide"||t_h == "show" )
 714                                         ok(f_h === "" ? this.style.height === f_h : this.style.height.indexOf(f_h) === 0, "Height must be reset to " + f_h + ": " + this.style.height);
 715
 716                                 var cur_o = jQuery.style(this, "opacity");
 717
 718                                 if ( t_o == "hide" || t_o == "show" )
 719                                         equals(cur_o, f_o, "Opacity must be reset to " + f_o + ": " + cur_o);
 720
 721                                 if ( t_w == "hide" )
 722                                         equals(this.style.display, "none", "Hiding, display should be none: " + this.style.display);
 723
 724                                 if ( t_o.constructor == Number ) {
 725                                         equals(cur_o, t_o, "Final opacity should be " + t_o + ": " + cur_o);
 726
 727                                         ok(jQuery.css(this, "opacity") != "" || cur_o == t_o, "Opacity should be explicitly set to " + t_o + ", is instead: " + cur_o);
 728                                 }
 729
 730                                 if ( t_w.constructor == Number ) {
 731                                         equals(this.style.width, t_w + "px", "Final width should be " + t_w + ": " + this.style.width);
 732
 733                                         var cur_w = jQuery.css(this,"width");
 734
 735                                         ok(this.style.width != "" || cur_w == t_w, "Width should be explicitly set to " + t_w + ", is instead: " + cur_w);
 736                                 }
 737
 738                                 if ( t_h.constructor == Number ) {
 739                                         equals(this.style.height, t_h + "px", "Final height should be " + t_h + ": " + this.style.height);
 740
 741                                         var cur_h = jQuery.css(this,"height");
 742
 743                                         ok(this.style.height != "" || cur_h == t_h, "Height should be explicitly set to " + t_h + ", is instead: " + cur_w);
 744                                 }
 745
 746                                 if ( t_h == "show" ) {
 747                                         var old_h = jQuery.css(this, "height");
 748                                         jQuery(this).append("<br/>Some more text<br/>and some more...");
 749
 750                                         if ( /Auto/.test( fn ) ) {
 751                                                 notEqual(jQuery.css(this, "height"), old_h, "Make sure height is auto.");
 752                                         } else {
 753                                                 equals(jQuery.css(this, "height"), old_h, "Make sure height is not auto.");
 754                                         }
 755                                 }
 756
 757                                 // manually remove generated element
 758                                 jQuery(this).remove();
 759
 760                                 start();
 761                         });
 762                 });
 763         });
 764 });
 765
 766 jQuery.fn.saveState = function(hiddenOverflow){
 767         var check = ['opacity','height','width','display','overflow'];
 768         expect(check.length);
 769
 770         stop();
 771         return this.each(function(){
 772                 var self = this;
 773                 self.save = {};
 774                 jQuery.each(check, function(i,c){
 775                         self.save[c] = c === "overflow" && hiddenOverflow ? "hidden" : self.style[ c ] || jQuery.css(self,c);
 776                 });
 777         });
 778 };
 779
 780 jQuery.checkState = function(){
 781         var self = this;
 782         jQuery.each(this.save, function(c,v){
 783                 var cur = self.style[ c ] || jQuery.css(self, c);
 784                 equals( cur, v, "Make sure that " + c + " is reset (Old: " + v + " Cur: " + cur + ")");
 785         });
 786
 787         // manually clean data on modified element
 788         jQuery.removeData(this, 'olddisplay', true);
 789
 790         start();
 791 }
 792
 793 // Chaining Tests
 794 test("Chain fadeOut fadeIn", function() {
 795         jQuery('#fadein div').saveState().fadeOut('fast').fadeIn('fast',jQuery.checkState);
 796 });
 797 test("Chain fadeIn fadeOut", function() {
 798         jQuery('#fadeout div').saveState().fadeIn('fast').fadeOut('fast',jQuery.checkState);
 799 });
 800
 801 test("Chain hide show", function() {
 802         jQuery('#show div').saveState(jQuery.support.shrinkWrapBlocks).hide('fast').show('fast',jQuery.checkState);
 803 });
 804 test("Chain show hide", function() {
 805         jQuery('#hide div').saveState(jQuery.support.shrinkWrapBlocks).show('fast').hide('fast',jQuery.checkState);
 806 });
 807 test("Chain show hide with easing and callback", function() {
 808         jQuery('#hide div').saveState().show('fast').hide('fast','linear',jQuery.checkState);
 809 });
 810
 811 test("Chain toggle in", function() {
 812         jQuery('#togglein div').saveState(jQuery.support.shrinkWrapBlocks).toggle('fast').toggle('fast',jQuery.checkState);
 813 });
 814 test("Chain toggle out", function() {
 815         jQuery('#toggleout div').saveState(jQuery.support.shrinkWrapBlocks).toggle('fast').toggle('fast',jQuery.checkState);
 816 });
 817 test("Chain toggle out with easing and callback", function() {
 818  jQuery('#toggleout div').saveState(jQuery.support.shrinkWrapBlocks).toggle('fast').toggle('fast','linear',jQuery.checkState);
 819 });
 820 test("Chain slideDown slideUp", function() {
 821         jQuery('#slidedown div').saveState(jQuery.support.shrinkWrapBlocks).slideDown('fast').slideUp('fast',jQuery.checkState);
 822 });
 823 test("Chain slideUp slideDown", function() {
 824         jQuery('#slideup div').saveState(jQuery.support.shrinkWrapBlocks).slideUp('fast').slideDown('fast',jQuery.checkState);
 825 });
 826 test("Chain slideUp slideDown with easing and callback", function() {
 827         jQuery('#slideup div').saveState(jQuery.support.shrinkWrapBlocks).slideUp('fast').slideDown('fast','linear',jQuery.checkState);
 828 });
 829
 830 test("Chain slideToggle in", function() {
 831         jQuery('#slidetogglein div').saveState(jQuery.support.shrinkWrapBlocks).slideToggle('fast').slideToggle('fast',jQuery.checkState);
 832 });
 833 test("Chain slideToggle out", function() {
 834         jQuery('#slidetoggleout div').saveState(jQuery.support.shrinkWrapBlocks).slideToggle('fast').slideToggle('fast',jQuery.checkState);
 835 });
 836
 837 test("Chain fadeToggle in", function() {
 838         jQuery('#fadetogglein div').saveState().fadeToggle('fast').fadeToggle('fast',jQuery.checkState);
 839 });
 840 test("Chain fadeToggle out", function() {
 841         jQuery('#fadetoggleout div').saveState().fadeToggle('fast').fadeToggle('fast',jQuery.checkState);
 842 });
 843
 844 test("Chain fadeTo 0.5 1.0 with easing and callback)", function() {
 845         jQuery('#fadeto div').saveState().fadeTo('fast',0.5).fadeTo('fast',1.0,'linear',jQuery.checkState);
 846 });
 847
 848 jQuery.makeTest = function( text ){
 849         var elem = jQuery("<div></div>")
 850                 .attr("id", "test" + jQuery.makeTest.id++)
 851                 .addClass("box");
 852
 853         jQuery("<h4></h4>")
 854                 .text( text )
 855                 .appendTo("#fx-tests")
 856                 .after( elem );
 857
 858         return elem;
 859 }
 860
 861 jQuery.makeTest.id = 1;
 862
 863 test("jQuery.show('fast') doesn't clear radio buttons (bug #1095)", function () {
 864         expect(4);
 865   stop();
 866
 867         var $checkedtest = jQuery("#checkedtest");
 868         // IE6 was clearing "checked" in jQuery(elem).show("fast");
 869         $checkedtest.hide().show("fast", function() {
 870         ok( !! jQuery(":radio:first", $checkedtest).attr("checked"), "Check first radio still checked." );
 871         ok( ! jQuery(":radio:last", $checkedtest).attr("checked"), "Check last radio still NOT checked." );
 872         ok( !! jQuery(":checkbox:first", $checkedtest).attr("checked"), "Check first checkbox still checked." );
 873         ok( ! jQuery(":checkbox:last", $checkedtest).attr("checked"), "Check last checkbox still NOT checked." );
 874         start();
 875         });
 876 });
 877
 878 test("animate with per-property easing", function(){
 879
 880         expect(3);
 881         stop();
 882
 883         var _test1_called = false;
 884         var _test2_called = false;
 885         var _default_test_called = false;
 886
 887         jQuery.easing['_test1'] = function() {
 888                 _test1_called = true;
 889         };
 890
 891         jQuery.easing['_test2'] = function() {
 892                 _test2_called = true;
 893         };
 894
 895         jQuery.easing['_default_test'] = function() {
 896                 _default_test_called = true;
 897         };
 898
 899         jQuery({a:0,b:0,c:0}).animate({
 900                 a: [100, '_test1'],
 901                 b: [100, '_test2'],
 902                 c: 100
 903         }, 400, '_default_test', function(){
 904                 start();
 905                 ok(_test1_called, "Easing function (1) called");
 906                 ok(_test2_called, "Easing function (2) called");
 907                 ok(_default_test_called, "Easing function (_default) called");
 908         });
 909
 910 });
 911
 912 test("hide hidden elements (bug #7141)", function() {
 913         expect(3);
 914         QUnit.reset();
 915
 916         var div = jQuery("<div style='display:none'></div>").appendTo("#main");
 917         equals( div.css("display"), "none", "Element is hidden by default" );
 918         div.hide();
 919         ok( !jQuery._data(div, "olddisplay"), "olddisplay is undefined after hiding an already-hidden element" );
 920         div.show();
 921         equals( div.css("display"), "block", "Show a double-hidden element" );
 922
 923         div.remove();
 924 });
 925
 926 test("hide hidden elements, with animation (bug #7141)", function() {
 927         expect(3);
 928         QUnit.reset();
 929         stop();
 930
 931         var div = jQuery("<div style='display:none'></div>").appendTo("#main");
 932         equals( div.css("display"), "none", "Element is hidden by default" );
 933         div.hide(1, function () {
 934                 ok( !jQuery._data(div, "olddisplay"), "olddisplay is undefined after hiding an already-hidden element" );
 935                 div.show(1, function () {
 936                         equals( div.css("display"), "block", "Show a double-hidden element" );
 937                         start();
 938                 });
 939         });
 940 });