third-party/jquery-ui-1.10.2/tests/unit/effects/effects_core.js

   1 (function($) {
   2
   3 function present( value, array, message ) {
   4         QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message );
   5 }
   6
   7 function notPresent( value, array, message ) {
   8         QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message );
   9 }
  10
  11 // minDuration is used for "short" animate tests where we are only concerned about the final
  12 var minDuration = 15,
  13
  14         // duration is used for "long" animates where we plan on testing properties during animation
  15         duration = 200;
  16
  17 module( "effects.core" );
  18
  19 // TODO: test all signatures of .show(), .hide(), .toggle().
  20 // Look at core's signatures and UI's signatures.
  21 asyncTest( ".hide() with step", function() {
  22         expect( 1 );
  23         var element = $( "#elem" ),
  24                 step = function() {
  25                         ok( true, "step callback invoked" );
  26                         step = $.noop;
  27                 };
  28
  29         element.hide({
  30                 step: function() {
  31                         step();
  32                 },
  33                 complete: start
  34         });
  35 });
  36
  37 test( "Immediate Return Conditions", function() {
  38         var hidden = $( "div.hidden" ),
  39                 count = 0;
  40         expect( 3 );
  41         hidden.hide( "blind", function() {
  42                 equal( ++count, 1, "Hide on hidden returned immediately" );
  43         }).show().show( "blind", function() {
  44                 equal( ++count, 2, "Show on shown returned immediately" );
  45         });
  46         equal( ++count, 3, "Both Functions worked properly" );
  47 });
  48
  49 test( ".hide() with hidden parent", function() {
  50         expect( 1 );
  51         var element = $( "div.hidden" ).children();
  52         element.hide( "blind", function() {
  53                 equal( element.css( "display" ), "none", "display: none" );
  54         });
  55 });
  56
  57 asyncTest( "Parse of null for options", function() {
  58         var hidden = $( "div.hidden" ),
  59                 count = 0;
  60         expect( 1 );
  61         hidden.show( "blind", null, 1, function() {
  62                 equal( ++count, 1, "null for options still works" );
  63                 start();
  64         });
  65 });
  66
  67 test( "removeClass", function() {
  68         expect( 3 );
  69
  70         var element = $( "<div>" );
  71         equal( "", element[ 0 ].className );
  72         element.addClass( "destroyed" );
  73         equal( "destroyed", element[ 0 ].className );
  74         element.removeClass();
  75         equal( "", element[ 0 ].className );
  76 });
  77
  78
  79 /* TODO: Disabled - Can't figure out why this is failing in IE 6/7
  80 test( "createWrapper and removeWrapper retain focused elements (#7595)", function() {
  81         expect( 2 );
  82         var test = $( "div.hidden" ).show(),
  83                 input = $( "<input type='text'>" ).appendTo( test ).focus();
  84
  85         $.effects.createWrapper( test );
  86         equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" );
  87         $.effects.removeWrapper( test );
  88         equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" );
  89 });
  90 */
  91
  92 module( "effects.core: animateClass" );
  93
  94 asyncTest( "animateClass works with borderStyle", function() {
  95         var test = $("div.animateClass");
  96         expect(3);
  97         test.toggleClass("testAddBorder", minDuration, function() {
  98                 test.toggleClass("testAddBorder", minDuration, function() {
  99                         equal( test.css("borderLeftStyle"), "none", "None border set" );
 100                         start();
 101                 });
 102                 equal( test.css("borderLeftStyle"), "solid", "None border not immedately set" );
 103         });
 104         equal( test.css("borderLeftStyle"), "solid", "Solid border immedately set" );
 105 });
 106
 107 asyncTest( "animateClass works with colors", function() {
 108         var test = $("div.animateClass"),
 109                 oldStep = jQuery.fx.step.backgroundColor;
 110
 111         expect(2);
 112
 113         // we want to catch the first frame of animation
 114         jQuery.fx.step.backgroundColor = function( fx ) {
 115                 oldStep.apply( this, arguments );
 116
 117                 // make sure it has animated somewhere we can detect
 118                 if ( fx.pos > 255 / 2000 ) {
 119                         jQuery.fx.step.backgroundColor = oldStep;
 120                         notPresent( test.css("backgroundColor"),
 121                                 [ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ],
 122                                 "Color is not endpoints in middle." );
 123                         test.stop( true, true );
 124                 }
 125         };
 126
 127         test.toggleClass("testChangeBackground", {
 128                 duration: 2000,
 129                 complete: function() {
 130                         present( test.css("backgroundColor"), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" );
 131                         start();
 132                 }
 133         });
 134 });
 135
 136 asyncTest( "animateClass calls step option", 1, function() {
 137         var test = jQuery( "div.animateClass" ),
 138                 step = function() {
 139                         ok( true, "Step Function Called" );
 140                         test.stop();
 141                         start();
 142                         step = $.noop;
 143                 };
 144         test.toggleClass( "testChangeBackground", {
 145                 step: function() {
 146                         step();
 147                 }
 148         });
 149 });
 150
 151 asyncTest( "animateClass works with children", 3, function() {
 152         var animatedChild,
 153                 test = $("div.animateClass"),
 154                 h2 = test.find("h2");
 155
 156         test.toggleClass("testChildren", {
 157                 children: true,
 158                 duration: duration,
 159                 complete: function() {
 160                         equal( h2.css("fontSize"), "20px", "Text size is final during complete");
 161                         test.toggleClass("testChildren", {
 162                                 duration: duration,
 163                                 complete: function() {
 164                                         equal( h2.css("fontSize"), "10px", "Text size revertted after class removed");
 165
 166                                         start();
 167                                 },
 168                                 step: function( val, fx ) {
 169                                         if ( fx.elem === h2[ 0 ] ) {
 170                                                 ok( false, "Error - Animating property on h2" );
 171                                         }
 172                                 }
 173                         });
 174                 },
 175                 step: function( val, fx ) {
 176                         if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) {
 177                                 equal( fx.end, 20, "animating font size on child" );
 178                                 animatedChild = true;
 179                         }
 180                 }
 181         });
 182 });
 183
 184 asyncTest( "animateClass clears style properties when stopped", function() {
 185         var test = $("div.animateClass"),
 186                 style = test[0].style,
 187                 orig = style.cssText;
 188
 189         expect( 2 );
 190
 191         test.addClass( "testChangeBackground", duration );
 192         notEqual( orig, style.cssText, "cssText is not the same after starting animation" );
 193
 194         test.stop( true, true );
 195         equal( orig, $.trim( style.cssText ), "cssText is the same after stopping animation midway" );
 196         start();
 197 });
 198
 199 asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function() {
 200         expect( 2 );
 201         var test = $( "div.ticket7106" );
 202
 203         // ensure the class stays and that the css property stays
 204         function animationComplete() {
 205                 ok( test.hasClass( "testClass" ), "class change during animateClass was not lost" );
 206                 equal( test.height(), 100, "css change during animateClass was not lost" );
 207                 start();
 208         }
 209
 210         // add a class and change a style property after starting an animated class
 211         test.addClass( "animate", minDuration, animationComplete )
 212                 .addClass( "testClass" )
 213                 .height( 100 );
 214 });
 215
 216
 217 $.each( $.effects.effect, function( effect ) {
 218         module( "effects." + effect );
 219
 220         // puff and size are defined inside scale
 221         if ( effect !== "puff" && effect !== "size" ) {
 222                 TestHelpers.testJshint( "effect-" + effect );
 223         }
 224
 225         if ( effect === "transfer" ) {
 226                 return;
 227         }
 228         asyncTest( "show/hide", function() {
 229                 expect( 8 );
 230                 var hidden = $( "div.hidden" ),
 231                         count = 0,
 232                         test = 0;
 233
 234                 function queueTest( fn ) {
 235                         count++;
 236                         var point = count;
 237                         return function( next ) {
 238                                 test++;
 239                                 equal( point, test, "Queue function fired in order" );
 240                                 if ( fn ) {
 241                                         fn();
 242                                 } else {
 243                                         setTimeout( next, minDuration );
 244                                 }
 245                         };
 246                 }
 247
 248                 hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() {
 249                         equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" );
 250                 })).queue( queueTest() ).hide( effect, minDuration, queueTest(function() {
 251                         equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" );
 252                 })).queue( queueTest(function() {
 253                         deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains");
 254                         start();
 255                 }));
 256         });
 257
 258         asyncTest( "relative width & height - properties are preserved", function() {
 259                 var test = $("div.relWidth.relHeight"),
 260                         width = test.width(), height = test.height(),
 261                         cssWidth = test[0].style.width, cssHeight = test[0].style.height;
 262
 263                 expect( 4 );
 264                 test.toggle( effect, minDuration, function() {
 265                         equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" );
 266                         equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" );
 267                         start();
 268                 });
 269                 equal( test.width(), width, "Width is the same px after animation started" );
 270                 equal( test.height(), height, "Height is the same px after animation started" );
 271         });
 272 });
 273
 274 })(jQuery);