test/unit/css.js

   1 if ( jQuery.css ) {
   2
   3 QUnit.module( "css", { teardown: moduleTeardown } );
   4
   5 QUnit.test( "css(String|Hash)", function( assert ) {
   6         assert.expect( 42 );
   7
   8         assert.equal( jQuery( "#qunit-fixture" ).css( "display" ), "block", "Check for css property \"display\"" );
   9
  10         var $child, div, div2, width, height, child, prctval, checkval, old;
  11
  12         $child = jQuery( "#nothiddendivchild" ).css( { "width": "20%", "height": "20%" } );
  13         assert.notEqual( $child.css( "width" ), "20px", "Retrieving a width percentage on the child of a hidden div returns percentage" );
  14         assert.notEqual( $child.css( "height" ), "20px", "Retrieving a height percentage on the child of a hidden div returns percentage" );
  15
  16         div = jQuery( "<div/>" );
  17
  18         // These should be "auto" (or some better value)
  19         // temporarily provide "0px" for backwards compat
  20         assert.equal( div.css( "width" ), "0px", "Width on disconnected node." );
  21         assert.equal( div.css( "height" ), "0px", "Height on disconnected node." );
  22
  23         div.css( { "width": 4, "height": 4 } );
  24
  25         assert.equal( div.css( "width" ), "4px", "Width on disconnected node." );
  26         assert.equal( div.css( "height" ), "4px", "Height on disconnected node." );
  27
  28         div2 = jQuery( "<div style='display:none;'><input type='text' style='height:20px;'/><textarea style='height:20px;'/><div style='height:20px;'></div></div>" ).appendTo( "body" );
  29
  30         assert.equal( div2.find( "input" ).css( "height" ), "20px", "Height on hidden input." );
  31         assert.equal( div2.find( "textarea" ).css( "height" ), "20px", "Height on hidden textarea." );
  32         assert.equal( div2.find( "div" ).css( "height" ), "20px", "Height on hidden div." );
  33
  34         div2.remove();
  35
  36         // handle negative numbers by setting to zero #11604
  37         jQuery( "#nothiddendiv" ).css( { "width": 1, "height": 1 } );
  38
  39         width = parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) );
  40         height = parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) );
  41         jQuery( "#nothiddendiv" ).css( { "overflow":"hidden", "width": -1, "height": -1 } );
  42         assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) ), 0, "Test negative width set to 0" );
  43         assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) ), 0, "Test negative height set to 0" );
  44
  45         assert.equal( jQuery( "<div style='display: none;'/>" ).css( "display" ), "none", "Styles on disconnected nodes" );
  46
  47         jQuery( "#floatTest" ).css( { "float": "right" } );
  48         assert.equal( jQuery( "#floatTest" ).css( "float" ), "right", "Modified CSS float using \"float\": Assert float is right" );
  49         jQuery( "#floatTest" ).css( { "font-size": "30px" } );
  50         assert.equal( jQuery( "#floatTest" ).css( "font-size" ), "30px", "Modified CSS font-size: Assert font-size is 30px" );
  51         jQuery.each( "0,0.25,0.5,0.75,1".split( "," ), function( i, n ) {
  52                 jQuery( "#foo" ).css( { "opacity": n } );
  53
  54                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a String" );
  55                 jQuery( "#foo" ).css( { "opacity": parseFloat( n ) } );
  56                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a Number" );
  57         } );
  58         jQuery( "#foo" ).css( { "opacity": "" } );
  59         assert.equal( jQuery( "#foo" ).css( "opacity" ), "1", "Assert opacity is 1 when set to an empty String" );
  60
  61         assert.equal( jQuery( "#empty" ).css( "opacity" ), "0", "Assert opacity is accessible via filter property set in stylesheet in IE" );
  62         jQuery( "#empty" ).css( { "opacity": "1" } );
  63         assert.equal( jQuery( "#empty" ).css( "opacity" ), "1", "Assert opacity is taken from style attribute when set vs stylesheet in IE with filters" );
  64
  65         div = jQuery( "#nothiddendiv" );
  66         child = jQuery( "#nothiddendivchild" );
  67
  68         assert.equal( parseInt( div.css( "fontSize" ), 10 ), 16, "Verify fontSize px set." );
  69         assert.equal( parseInt( div.css( "font-size" ), 10 ), 16, "Verify fontSize px set." );
  70         assert.equal( parseInt( child.css( "fontSize" ), 10 ), 16, "Verify fontSize px set." );
  71         assert.equal( parseInt( child.css( "font-size" ), 10 ), 16, "Verify fontSize px set." );
  72
  73         child.css( "height", "100%" );
  74         assert.equal( child[ 0 ].style.height, "100%", "Make sure the height is being set correctly." );
  75
  76         child.attr( "class", "em" );
  77         assert.equal( parseInt( child.css( "fontSize" ), 10 ), 32, "Verify fontSize em set." );
  78
  79         // Have to verify this as the result depends upon the browser's CSS
  80         // support for font-size percentages
  81         child.attr( "class", "prct" );
  82         prctval = parseInt( child.css( "fontSize" ), 10 );
  83         checkval = 0;
  84         if ( prctval === 16 || prctval === 24 ) {
  85                 checkval = prctval;
  86         }
  87
  88         assert.equal( prctval, checkval, "Verify fontSize % set." );
  89
  90         assert.equal( typeof child.css( "width" ), "string", "Make sure that a string width is returned from css('width')." );
  91
  92         old = child[ 0 ].style.height;
  93
  94         // Test NaN
  95         child.css( "height", parseFloat( "zoo" ) );
  96         assert.equal( child[ 0 ].style.height, old, "Make sure height isn't changed on NaN." );
  97
  98         // Test null
  99         child.css( "height", null );
 100         assert.equal( child[ 0 ].style.height, old, "Make sure height isn't changed on null." );
 101
 102         old = child[ 0 ].style.fontSize;
 103
 104         // Test NaN
 105         child.css( "font-size", parseFloat( "zoo" ) );
 106         assert.equal( child[ 0 ].style.fontSize, old, "Make sure font-size isn't changed on NaN." );
 107
 108         // Test null
 109         child.css( "font-size", null );
 110         assert.equal( child[ 0 ].style.fontSize, old, "Make sure font-size isn't changed on null." );
 111
 112         assert.strictEqual( child.css( "x-fake" ), undefined, "Make sure undefined is returned from css(nonexistent)." );
 113
 114         div = jQuery( "<div/>" ).css( { position: "absolute", "z-index": 1000 } ).appendTo( "#qunit-fixture" );
 115         assert.strictEqual( div.css( "z-index" ), "1000",
 116                 "Make sure that a string z-index is returned from css('z-index') (#14432)." );
 117 } );
 118
 119 QUnit.test( "css() explicit and relative values", function( assert ) {
 120         assert.expect( 29 );
 121
 122         var $elem = jQuery( "#nothiddendiv" );
 123
 124         $elem.css( { "width": 1, "height": 1, "paddingLeft": "1px", "opacity": 1 } );
 125         assert.equal( $elem.css( "width" ), "1px", "Initial css set or width/height works (hash)" );
 126         assert.equal( $elem.css( "paddingLeft" ), "1px", "Initial css set of paddingLeft works (hash)" );
 127         assert.equal( $elem.css( "opacity" ), "1", "Initial css set of opacity works (hash)" );
 128
 129         $elem.css( { width: "+=9" } );
 130         assert.equal( $elem.css( "width" ), "10px", "'+=9' on width (hash)" );
 131
 132         $elem.css( { "width": "-=9" } );
 133         assert.equal( $elem.css( "width" ), "1px", "'-=9' on width (hash)" );
 134
 135         $elem.css( { "width": "+=9px" } );
 136         assert.equal( $elem.css( "width" ), "10px", "'+=9px' on width (hash)" );
 137
 138         $elem.css( { "width": "-=9px" } );
 139         assert.equal( $elem.css( "width" ), "1px", "'-=9px' on width (hash)" );
 140
 141         $elem.css( "width", "+=9" );
 142         assert.equal( $elem.css( "width" ), "10px", "'+=9' on width (params)" );
 143
 144         $elem.css( "width", "-=9" ) ;
 145         assert.equal( $elem.css( "width" ), "1px", "'-=9' on width (params)" );
 146
 147         $elem.css( "width", "+=9px" );
 148         assert.equal( $elem.css( "width" ), "10px", "'+=9px' on width (params)" );
 149
 150         $elem.css( "width", "-=9px" );
 151         assert.equal( $elem.css( "width" ), "1px", "'-=9px' on width (params)" );
 152
 153         $elem.css( "width", "-=-9px" );
 154         assert.equal( $elem.css( "width" ), "10px", "'-=-9px' on width (params)" );
 155
 156         $elem.css( "width", "+=-9px" );
 157         assert.equal( $elem.css( "width" ), "1px", "'+=-9px' on width (params)" );
 158
 159         $elem.css( { "paddingLeft": "+=4" } );
 160         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on paddingLeft (hash)" );
 161
 162         $elem.css( { "paddingLeft": "-=4" } );
 163         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on paddingLeft (hash)" );
 164
 165         $elem.css( { "paddingLeft": "+=4px" } );
 166         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on paddingLeft (hash)" );
 167
 168         $elem.css( { "paddingLeft": "-=4px" } );
 169         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on paddingLeft (hash)" );
 170
 171         $elem.css( { "padding-left": "+=4" } );
 172         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on padding-left (hash)" );
 173
 174         $elem.css( { "padding-left": "-=4" } );
 175         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on padding-left (hash)" );
 176
 177         $elem.css( { "padding-left": "+=4px" } );
 178         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on padding-left (hash)" );
 179
 180         $elem.css( { "padding-left": "-=4px" } );
 181         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on padding-left (hash)" );
 182
 183         $elem.css( "paddingLeft", "+=4" );
 184         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on paddingLeft (params)" );
 185
 186         $elem.css( "paddingLeft", "-=4" );
 187         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on paddingLeft (params)" );
 188
 189         $elem.css( "padding-left", "+=4px" );
 190         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on padding-left (params)" );
 191
 192         $elem.css( "padding-left", "-=4px" );
 193         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on padding-left (params)" );
 194
 195         $elem.css( { "opacity": "-=0.5" } );
 196         assert.equal( $elem.css( "opacity" ), "0.5", "'-=0.5' on opacity (hash)" );
 197
 198         $elem.css( { "opacity": "+=0.5" } );
 199         assert.equal( $elem.css( "opacity" ), "1", "'+=0.5' on opacity (hash)" );
 200
 201         $elem.css( "opacity", "-=0.5" );
 202         assert.equal( $elem.css( "opacity" ), "0.5", "'-=0.5' on opacity (params)" );
 203
 204         $elem.css( "opacity", "+=0.5" );
 205         assert.equal( $elem.css( "opacity" ), "1", "'+=0.5' on opacity (params)" );
 206 } );
 207
 208 QUnit.test( "css() non-px relative values (gh-1711)", function( assert ) {
 209         assert.expect( 17 );
 210
 211         var cssCurrent,
 212                 units = {},
 213                 $child = jQuery( "#nothiddendivchild" ),
 214                 add = function( prop, val, unit ) {
 215                         var difference,
 216                                 adjustment = ( val < 0 ? "-=" : "+=" ) + Math.abs( val ) + unit,
 217                                 message = prop + ": " + adjustment,
 218                                 cssOld = cssCurrent,
 219                                 expected = cssOld + val * units[ prop ][ unit ];
 220
 221                         // Apply change
 222                         $child.css( prop, adjustment );
 223                         cssCurrent = parseFloat( $child.css( prop ) );
 224
 225                         // Require a difference of no more than one pixel
 226                         difference = Math.abs( cssCurrent - expected );
 227                         if ( difference <= 1 ) {
 228                                 assert.ok( true, message );
 229
 230                         // ...or fail with actual and expected values
 231                         } else {
 232                                 assert.ok( false, message + " (actual " + cssCurrent + ", expected " + expected + ")" );
 233                         }
 234                 },
 235                 getUnits = function( prop ) {
 236                         units[ prop ] = {
 237                                 "px": 1,
 238                                 "em": parseFloat( $child.css( prop, "100em" ).css( prop ) ) / 100,
 239                                 "pt": parseFloat( $child.css( prop, "100pt" ).css( prop ) ) / 100,
 240                                 "pc": parseFloat( $child.css( prop, "100pc" ).css( prop ) ) / 100,
 241                                 "cm": parseFloat( $child.css( prop, "100cm" ).css( prop ) ) / 100,
 242                                 "mm": parseFloat( $child.css( prop, "100mm" ).css( prop ) ) / 100,
 243                                 "%": parseFloat( $child.css( prop, "100%"  ).css( prop ) ) / 100
 244                         };
 245                 };
 246
 247         jQuery( "#nothiddendiv" ).css( { height: 1, padding: 0, width: 400 } );
 248         $child.css( { height: 1, padding: 0 } );
 249
 250         getUnits( "width" );
 251         cssCurrent = parseFloat( $child.css( "width", "50%" ).css( "width" ) );
 252         add( "width",  25,    "%" );
 253         add( "width", -50,    "%" );
 254         add( "width",  10,   "em" );
 255         add( "width",  10,   "pt" );
 256         add( "width",  -2.3, "pt" );
 257         add( "width",   5,   "pc" );
 258         add( "width",  -5,   "em" );
 259         add( "width",  +2,   "cm" );
 260         add( "width", -15,   "mm" );
 261         add( "width",  21,   "px" );
 262
 263         getUnits( "lineHeight" );
 264         cssCurrent = parseFloat( $child.css( "lineHeight", "1em" ).css( "lineHeight" ) );
 265         add( "lineHeight",   2, "em" );
 266         add( "lineHeight", -10, "px" );
 267         add( "lineHeight",  20, "pt" );
 268         add( "lineHeight",  30, "pc" );
 269         add( "lineHeight",   1, "cm" );
 270         add( "lineHeight", -20, "mm" );
 271         add( "lineHeight",  50,  "%" );
 272 } );
 273
 274 QUnit.test( "css(String, Object)", function( assert ) {
 275         assert.expect( 19 );
 276         var j, div, display, ret, success;
 277
 278         jQuery( "#floatTest" ).css( "float", "left" );
 279         assert.equal( jQuery( "#floatTest" ).css( "float" ), "left", "Modified CSS float using \"float\": Assert float is left" );
 280         jQuery( "#floatTest" ).css( "font-size", "20px" );
 281         assert.equal( jQuery( "#floatTest" ).css( "font-size" ), "20px", "Modified CSS font-size: Assert font-size is 20px" );
 282
 283         jQuery.each( "0,0.25,0.5,0.75,1".split( "," ), function( i, n ) {
 284                 jQuery( "#foo" ).css( "opacity", n );
 285                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a String" );
 286                 jQuery( "#foo" ).css( "opacity", parseFloat( n ) );
 287                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a Number" );
 288         } );
 289         jQuery( "#foo" ).css( "opacity", "" );
 290         assert.equal( jQuery( "#foo" ).css( "opacity" ), "1", "Assert opacity is 1 when set to an empty String" );
 291
 292         // using contents will get comments regular, text, and comment nodes
 293         j = jQuery( "#nonnodes" ).contents();
 294         j.css( "overflow", "visible" );
 295         assert.equal( j.css( "overflow" ), "visible", "Check node,textnode,comment css works" );
 296         assert.equal( jQuery( "#t2037 .hidden" ).css( "display" ), "none", "Make sure browser thinks it is hidden" );
 297
 298         div = jQuery( "#nothiddendiv" );
 299         display = div.css( "display" );
 300         ret = div.css( "display", undefined );
 301
 302         assert.equal( ret, div, "Make sure setting undefined returns the original set." );
 303         assert.equal( div.css( "display" ), display, "Make sure that the display wasn't changed." );
 304
 305         success = true;
 306         try {
 307                 jQuery( "#foo" ).css( "backgroundColor", "rgba(0, 0, 0, 0.1)" );
 308         }
 309         catch ( e ) {
 310                 success = false;
 311         }
 312         assert.ok( success, "Setting RGBA values does not throw Error (#5509)" );
 313
 314         jQuery( "#foo" ).css( "font", "7px/21px sans-serif" );
 315         assert.strictEqual( jQuery( "#foo" ).css( "line-height" ), "21px",
 316                 "Set font shorthand property (#14759)" );
 317 } );
 318
 319 QUnit.test( "css(String, Object) with negative values", function( assert ) {
 320         assert.expect( 4 );
 321
 322         jQuery( "#nothiddendiv" ).css( "margin-top", "-10px" );
 323         jQuery( "#nothiddendiv" ).css( "margin-left", "-10px" );
 324         assert.equal( jQuery( "#nothiddendiv" ).css( "margin-top" ), "-10px", "Ensure negative top margins work." );
 325         assert.equal( jQuery( "#nothiddendiv" ).css( "margin-left" ), "-10px", "Ensure negative left margins work." );
 326
 327         jQuery( "#nothiddendiv" ).css( "position", "absolute" );
 328         jQuery( "#nothiddendiv" ).css( "top", "-20px" );
 329         jQuery( "#nothiddendiv" ).css( "left", "-20px" );
 330         assert.equal( jQuery( "#nothiddendiv" ).css( "top" ), "-20px", "Ensure negative top values work." );
 331         assert.equal( jQuery( "#nothiddendiv" ).css( "left" ), "-20px", "Ensure negative left values work." );
 332 } );
 333
 334 QUnit.test( "css(Array)", function( assert ) {
 335         assert.expect( 2 );
 336
 337         var expectedMany = {
 338                         "overflow": "visible",
 339                         "width": "16px"
 340                 },
 341                 expectedSingle = {
 342                         "width": "16px"
 343                 },
 344                 elem = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" );
 345
 346         assert.deepEqual( elem.css( expectedMany ).css( [ "overflow", "width" ] ), expectedMany, "Getting multiple element array" );
 347         assert.deepEqual( elem.css( expectedSingle ).css( [ "width" ] ), expectedSingle, "Getting single element array" );
 348 } );
 349
 350 QUnit.test( "css(String, Function)", function( assert ) {
 351         assert.expect( 3 );
 352
 353         var index,
 354                 sizes = [ "10px", "20px", "30px" ];
 355
 356         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 357                                  "<div class='cssFunction'></div>" +
 358                                  "<div class='cssFunction'></div></div>" )
 359                 .appendTo( "body" );
 360
 361         index = 0;
 362
 363         jQuery( "#cssFunctionTest div" ).css( "font-size", function() {
 364                 var size = sizes[ index ];
 365                 index++;
 366                 return size;
 367         } );
 368
 369         index = 0;
 370
 371         jQuery( "#cssFunctionTest div" ).each( function() {
 372                 var computedSize = jQuery( this ).css( "font-size" ),
 373                         expectedSize = sizes[ index ];
 374                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 375                 index++;
 376         } );
 377
 378         jQuery( "#cssFunctionTest" ).remove();
 379 } );
 380
 381 QUnit.test( "css(String, Function) with incoming value", function( assert ) {
 382         assert.expect( 3 );
 383
 384         var index,
 385                 sizes = [ "10px", "20px", "30px" ];
 386
 387         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 388                                  "<div class='cssFunction'></div>" +
 389                                  "<div class='cssFunction'></div></div>" )
 390                 .appendTo( "body" );
 391
 392         index = 0;
 393
 394         jQuery( "#cssFunctionTest div" ).css( "font-size", function() {
 395                 var size = sizes[ index ];
 396                 index++;
 397                 return size;
 398         } );
 399
 400         index = 0;
 401
 402         jQuery( "#cssFunctionTest div" ).css( "font-size", function( i, computedSize ) {
 403                 var expectedSize = sizes[ index ];
 404                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 405                 index++;
 406                 return computedSize;
 407         } );
 408
 409         jQuery( "#cssFunctionTest" ).remove();
 410 } );
 411
 412 QUnit.test( "css(Object) where values are Functions", function( assert ) {
 413         assert.expect( 3 );
 414
 415         var index,
 416                 sizes = [ "10px", "20px", "30px" ];
 417
 418         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 419                                  "<div class='cssFunction'></div>" +
 420                                  "<div class='cssFunction'></div></div>" )
 421                 .appendTo( "body" );
 422
 423         index = 0;
 424
 425         jQuery( "#cssFunctionTest div" ).css( { "fontSize": function() {
 426                 var size = sizes[ index ];
 427                 index++;
 428                 return size;
 429         } } );
 430
 431         index = 0;
 432
 433         jQuery( "#cssFunctionTest div" ).each( function() {
 434                 var computedSize = jQuery( this ).css( "font-size" ),
 435                         expectedSize = sizes[ index ];
 436                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 437                 index++;
 438         } );
 439
 440         jQuery( "#cssFunctionTest" ).remove();
 441 } );
 442
 443 QUnit.test( "css(Object) where values are Functions with incoming values", function( assert ) {
 444         assert.expect( 3 );
 445
 446         var index,
 447                 sizes = [ "10px", "20px", "30px" ];
 448
 449         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 450                                  "<div class='cssFunction'></div>" +
 451                                  "<div class='cssFunction'></div></div>" )
 452                 .appendTo( "body" );
 453
 454         index = 0;
 455
 456         jQuery( "#cssFunctionTest div" ).css( { "fontSize": function() {
 457                 var size = sizes[ index ];
 458                 index++;
 459                 return size;
 460         } } );
 461
 462         index = 0;
 463
 464         jQuery( "#cssFunctionTest div" ).css( { "font-size": function( i, computedSize ) {
 465                 var expectedSize = sizes[ index ];
 466                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 467                 index++;
 468                 return computedSize;
 469         } } );
 470
 471         jQuery( "#cssFunctionTest" ).remove();
 472 } );
 473
 474 // .show(), .hide(), can be excluded from the build
 475 if ( jQuery.fn.show && jQuery.fn.hide ) {
 476
 477 QUnit.test( "show()", function( assert ) {
 478
 479         assert.expect( 18 );
 480
 481         var hiddendiv, div, pass, old, test;
 482                 hiddendiv = jQuery( "div.hidden" );
 483
 484         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
 485
 486         hiddendiv.css( "display", "block" );
 487         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
 488
 489         hiddendiv.show();
 490         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
 491
 492         hiddendiv.css( "display", "" );
 493
 494         pass = true;
 495         div = jQuery( "#qunit-fixture div" );
 496         div.show().each( function() {
 497                 if ( this.style.display === "none" ) {
 498                         pass = false;
 499                 }
 500         } );
 501         assert.ok( pass, "Show" );
 502
 503         jQuery(
 504                 "<div id='show-tests'>" +
 505                 "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
 506                 "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
 507                 "<ul><li></li></ul></div>" +
 508                 "<table id='test-table'></table>"
 509         ).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
 510
 511         old = jQuery( "#test-table" ).show().css( "display" ) !== "table";
 512         jQuery( "#test-table" ).remove();
 513
 514         test = {
 515                 "div": "block",
 516                 "p": "block",
 517                 "a": "inline",
 518                 "code": "inline",
 519                 "pre": "block",
 520                 "span": "inline",
 521                 "table": old ? "block" : "table",
 522                 "thead": old ? "block" : "table-header-group",
 523                 "tbody": old ? "block" : "table-row-group",
 524                 "tr": old ? "block" : "table-row",
 525                 "th": old ? "block" : "table-cell",
 526                 "td": old ? "block" : "table-cell",
 527                 "ul": "block",
 528                 "li": old ? "block" : "list-item"
 529         };
 530
 531         jQuery.each( test, function( selector, expected ) {
 532                 var elem = jQuery( selector, "#show-tests" ).show();
 533                 assert.equal( elem.css( "display" ), expected, "Show using correct display type for " + selector );
 534         } );
 535
 536         // Make sure that showing or hiding a text node doesn't cause an error
 537         jQuery( "<div>test</div> text <span>test</span>" ).show().remove();
 538         jQuery( "<div>test</div> text <span>test</span>" ).hide().remove();
 539 } );
 540
 541 QUnit.test( "show/hide detached nodes", function( assert ) {
 542         assert.expect( 19 );
 543
 544         var div, span, tr;
 545
 546         div = jQuery( "<div>" ).hide();
 547         assert.equal( div.css( "display" ), "none", "hide() updates inline style of a detached div" );
 548         div.appendTo( "#qunit-fixture" );
 549         assert.equal( div.css( "display" ), "none",
 550                 "A hidden-while-detached div is hidden after attachment" );
 551         div.show();
 552         assert.equal( div.css( "display" ), "block",
 553                 "A hidden-while-detached div can be shown after attachment" );
 554
 555         div = jQuery( "<div class='hidden'>" );
 556         div.show().appendTo( "#qunit-fixture" );
 557         assert.equal( div.css( "display" ), "none",
 558                 "A shown-while-detached div can be hidden by the CSS cascade" );
 559
 560         div = jQuery( "<div><div class='hidden'></div></div>" ).children( "div" );
 561         div.show().appendTo( "#qunit-fixture" );
 562         assert.equal( div.css( "display" ), "none",
 563                 "A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
 564
 565         span = jQuery( "<span class='hidden'/>" );
 566         span.show().appendTo( "#qunit-fixture" );
 567         assert.equal( span.css( "display" ), "none",
 568                 "A shown-while-detached span can be hidden by the CSS cascade" );
 569
 570         div = jQuery( "div.hidden" );
 571         div.detach().show();
 572         assert.ok( !div[ 0 ].style.display,
 573                 "show() does not update inline style of a cascade-hidden-before-detach div" );
 574         div.appendTo( "#qunit-fixture" );
 575         assert.equal( div.css( "display" ), "none",
 576                 "A shown-while-detached cascade-hidden div is hidden after attachment" );
 577         div.remove();
 578
 579         span = jQuery( "<span class='hidden'/>" );
 580         span.appendTo( "#qunit-fixture" ).detach().show().appendTo( "#qunit-fixture" );
 581         assert.equal( span.css( "display" ), "none",
 582                 "A shown-while-detached cascade-hidden span is hidden after attachment" );
 583         span.remove();
 584
 585         div = jQuery( document.createElement( "div" ) );
 586         div.show().appendTo( "#qunit-fixture" );
 587         assert.ok( !div[ 0 ].style.display, "A shown-while-detached div has no inline style" );
 588         assert.equal( div.css( "display" ), "block",
 589                 "A shown-while-detached div has default display after attachment" );
 590         div.remove();
 591
 592         div = jQuery( "<div style='display: none'>" );
 593         div.show();
 594         assert.equal( div[ 0 ].style.display, "",
 595                 "show() updates inline style of a detached inline-hidden div" );
 596         div.appendTo( "#qunit-fixture" );
 597         assert.equal( div.css( "display" ), "block",
 598                 "A shown-while-detached inline-hidden div has default display after attachment" );
 599
 600         div = jQuery( "<div><div style='display: none'></div></div>" ).children( "div" );
 601         div.show().appendTo( "#qunit-fixture" );
 602         assert.equal( div.css( "display" ), "block",
 603                 "A shown-while-detached inline-hidden div inside a visible div has default display " +
 604                 "after attachment" );
 605
 606         span = jQuery( "<span style='display: none'/>" );
 607         span.show();
 608         assert.equal( span[ 0 ].style.display, "",
 609                 "show() updates inline style of a detached inline-hidden span" );
 610         span.appendTo( "#qunit-fixture" );
 611         assert.equal( span.css( "display" ), "inline",
 612                 "A shown-while-detached inline-hidden span has default display after attachment" );
 613
 614         div = jQuery( "<div style='display: inline'/>" );
 615         div.show().appendTo( "#qunit-fixture" );
 616         assert.equal( div.css( "display" ), "inline",
 617                 "show() does not update inline style of a detached inline-visible div" );
 618         div.remove();
 619
 620         tr = jQuery( "<tr/>" );
 621         jQuery( "#table" ).append( tr );
 622         tr.detach().hide().show();
 623
 624         assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
 625         tr.remove();
 626
 627         span = jQuery( "<span/>" ).hide().show();
 628         assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
 629         span.remove();
 630 } );
 631
 632 QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
 633         assert.expect( 3 );
 634
 635         var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
 636         assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
 637         div.hide();
 638         assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
 639         div.show();
 640         assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
 641
 642         div.remove();
 643 } );
 644
 645 QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
 646         assert.expect( 1 );
 647
 648         var div = jQuery( "<div />" ),
 649                 fixture = jQuery( "#qunit-fixture" );
 650
 651         fixture.append( div );
 652
 653         div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
 654         assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
 655 } );
 656
 657 QUnit.test( "show/hide 3.0, default display", function( assert ) {
 658
 659         assert.expect( 36 );
 660
 661         var i,
 662                 $elems = jQuery( "<div/>" )
 663                         .appendTo( "#qunit-fixture" )
 664                         .html( "<div data-expected-display='block'/>" +
 665                                 "<span data-expected-display='inline'/>" +
 666                                 "<ul><li data-expected-display='list-item'/></ul>" )
 667                         .find( "[data-expected-display]" );
 668
 669         $elems.each( function() {
 670                 var $elem = jQuery( this ),
 671                         name = this.nodeName,
 672                         expected = this.getAttribute( "data-expected-display" ),
 673                         sequence = [];
 674
 675                 if ( this.className ) {
 676                         name += "." + this.className;
 677                 }
 678                 if ( this.getAttribute( "style" ) ) {
 679                         name += "[style='" + this.getAttribute( "style" ) + "']";
 680                 }
 681                 name += " ";
 682
 683                 for ( i = 0; i < 3; i++ ) {
 684                         sequence.push( ".show()" );
 685                         $elem.show();
 686                         assert.equal( $elem.css( "display" ), expected,
 687                                 name + sequence.join( "" ) + " computed" );
 688                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 689
 690                         sequence.push( ".hide()" );
 691                         $elem.hide();
 692                         assert.equal( $elem.css( "display" ), "none",
 693                                 name + sequence.join( "" ) + " computed" );
 694                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 695                 }
 696         } );
 697 } );
 698
 699 QUnit.test( "show/hide 3.0, default body display", function( assert ) {
 700
 701         assert.expect( 2 );
 702
 703         var hideBody = supportjQuery( "<style>body{display:none}</style>" ).appendTo( document.head ),
 704                 body = jQuery( document.body );
 705
 706         assert.equal( body.css( "display" ), "none", "Correct initial display" );
 707
 708         body.show();
 709
 710         assert.equal( body.css( "display" ), "block", "Correct display after .show()" );
 711
 712         hideBody.remove();
 713 } );
 714
 715 QUnit.test( "show/hide 3.0, cascade display", function( assert ) {
 716
 717         assert.expect( 36 );
 718
 719         var i,
 720                 $elems = jQuery( "<div/>" )
 721                         .appendTo( "#qunit-fixture" )
 722                         .html( "<span class='block'/><div class='inline'/><div class='list-item'/>" )
 723                         .children();
 724
 725         $elems.each( function() {
 726                 var $elem = jQuery( this ),
 727                         name = this.nodeName,
 728                         sequence = [];
 729
 730                 if ( this.className ) {
 731                         name += "." + this.className;
 732                 }
 733                 if ( this.getAttribute( "style" ) ) {
 734                         name += "[style='" + this.getAttribute( "style" ) + "']";
 735                 }
 736                 name += " ";
 737
 738                 for ( i = 0; i < 3; i++ ) {
 739                         sequence.push( ".show()" );
 740                         $elem.show();
 741                         assert.equal( $elem.css( "display" ), this.className,
 742                                 name + sequence.join( "" ) + " computed" );
 743                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 744
 745                         sequence.push( ".hide()" );
 746                         $elem.hide();
 747                         assert.equal( $elem.css( "display" ), "none",
 748                                 name + sequence.join( "" ) + " computed" );
 749                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 750                 }
 751         } );
 752 } );
 753
 754 QUnit.test( "show/hide 3.0, inline display", function( assert ) {
 755
 756         assert.expect( 96 );
 757
 758         var i,
 759                 $elems = jQuery( "<div/>" )
 760                         .appendTo( "#qunit-fixture" )
 761                         .html( "<span data-expected-display='block' style='display:block'/>" +
 762                                 "<span class='list-item' data-expected-display='block' style='display:block'/>" +
 763                                 "<div data-expected-display='inline' style='display:inline'/>" +
 764                                 "<div class='list-item' data-expected-display='inline' style='display:inline'/>" +
 765                                 "<ul>" +
 766                                         "<li data-expected-display='block' style='display:block'/>" +
 767                                         "<li class='inline' data-expected-display='block' style='display:block'/>" +
 768                                         "<li data-expected-display='inline' style='display:inline'/>" +
 769                                         "<li class='block' data-expected-display='inline' style='display:inline'/>" +
 770                                 "</ul>" )
 771                         .find( "[data-expected-display]" );
 772
 773         $elems.each( function() {
 774                 var $elem = jQuery( this ),
 775                         name = this.nodeName,
 776                         expected = this.getAttribute( "data-expected-display" ),
 777                         sequence = [];
 778
 779                 if ( this.className ) {
 780                         name += "." + this.className;
 781                 }
 782                 if ( this.getAttribute( "style" ) ) {
 783                         name += "[style='" + this.getAttribute( "style" ) + "']";
 784                 }
 785                 name += " ";
 786
 787                 for ( i = 0; i < 3; i++ ) {
 788                         sequence.push( ".show()" );
 789                         $elem.show();
 790                         assert.equal( $elem.css( "display" ), expected,
 791                                 name + sequence.join( "" ) + " computed" );
 792                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 793
 794                         sequence.push( ".hide()" );
 795                         $elem.hide();
 796                         assert.equal( $elem.css( "display" ), "none",
 797                                 name + sequence.join( "" ) + " computed" );
 798                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 799                 }
 800         } );
 801 } );
 802
 803 QUnit.test( "show/hide 3.0, cascade hidden", function( assert ) {
 804
 805         assert.expect( 72 );
 806
 807         var i,
 808                 $elems = jQuery( "<div/>" )
 809                         .appendTo( "#qunit-fixture" )
 810                         .html( "<div class='hidden' data-expected-display='block'/>" +
 811                                 "<div class='hidden' data-expected-display='block' style='display:none'/>" +
 812                                 "<span class='hidden' data-expected-display='inline'/>" +
 813                                 "<span class='hidden' data-expected-display='inline' style='display:none'/>" +
 814                                 "<ul>" +
 815                                         "<li class='hidden' data-expected-display='list-item'/>" +
 816                                         "<li class='hidden' data-expected-display='list-item' style='display:none'/>" +
 817                                 "</ul>" )
 818                         .find( "[data-expected-display]" );
 819
 820         $elems.each( function() {
 821                 var $elem = jQuery( this ),
 822                         name = this.nodeName,
 823                         expected = this.getAttribute( "data-expected-display" ),
 824                         sequence = [];
 825
 826                 if ( this.className ) {
 827                         name += "." + this.className;
 828                 }
 829                 if ( this.getAttribute( "style" ) ) {
 830                         name += "[style='" + this.getAttribute( "style" ) + "']";
 831                 }
 832                 name += " ";
 833
 834                 for ( i = 0; i < 3; i++ ) {
 835                         sequence.push( ".hide()" );
 836                         $elem.hide();
 837                         assert.equal( $elem.css( "display" ), "none",
 838                                 name + sequence.join( "" ) + " computed" );
 839                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 840
 841                         sequence.push( ".show()" );
 842                         $elem.show();
 843                         assert.equal( $elem.css( "display" ), expected,
 844                                 name + sequence.join( "" ) + " computed" );
 845                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 846                 }
 847         } );
 848 } );
 849
 850 QUnit.test( "show/hide 3.0, inline hidden", function( assert ) {
 851
 852         assert.expect( 84 );
 853
 854         var i,
 855                 $elems = jQuery( "<div/>" )
 856                         .appendTo( "#qunit-fixture" )
 857                         .html( "<span data-expected-display='inline' style='display:none'/>" +
 858                                 "<span class='list-item' data-expected-display='list-item' style='display:none'/>" +
 859                                 "<div data-expected-display='block' style='display:none'/>" +
 860                                 "<div class='list-item' data-expected-display='list-item' style='display:none'/>" +
 861                                 "<ul>" +
 862                                         "<li data-expected-display='list-item' style='display:none'/>" +
 863                                         "<li class='block' data-expected-display='block' style='display:none'/>" +
 864                                         "<li class='inline' data-expected-display='inline' style='display:none'/>" +
 865                                 "</ul>" )
 866                         .find( "[data-expected-display]" );
 867
 868         $elems.each( function() {
 869                 var $elem = jQuery( this ),
 870                         name = this.nodeName,
 871                         expected = this.getAttribute( "data-expected-display" ),
 872                         sequence = [];
 873
 874                 if ( this.className ) {
 875                         name += "." + this.className;
 876                 }
 877                 if ( this.getAttribute( "style" ) ) {
 878                         name += "[style='" + this.getAttribute( "style" ) + "']";
 879                 }
 880                 name += " ";
 881
 882                 for ( i = 0; i < 3; i++ ) {
 883                         sequence.push( ".hide()" );
 884                         $elem.hide();
 885                         assert.equal( $elem.css( "display" ), "none",
 886                                 name + sequence.join( "" ) + " computed" );
 887                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 888
 889                         sequence.push( ".show()" );
 890                         $elem.show();
 891                         assert.equal( $elem.css( "display" ), expected,
 892                                 name + sequence.join( "" ) + " computed" );
 893                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 894                 }
 895         } );
 896 } );
 897
 898 }
 899
 900 QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "toggle()", function( assert ) {
 901         assert.expect( 9 );
 902         var div, oldHide,
 903                 x = jQuery( "#foo" );
 904
 905         assert.ok( x.is( ":visible" ), "is visible" );
 906         x.toggle();
 907         assert.ok( x.is( ":hidden" ), "is hidden" );
 908         x.toggle();
 909         assert.ok( x.is( ":visible" ), "is visible again" );
 910
 911         x.toggle( true );
 912         assert.ok( x.is( ":visible" ), "is visible" );
 913         x.toggle( false );
 914         assert.ok( x.is( ":hidden" ), "is hidden" );
 915         x.toggle( true );
 916         assert.ok( x.is( ":visible" ), "is visible again" );
 917
 918         div = jQuery( "<div style='display:none'><div></div></div>" ).appendTo( "#qunit-fixture" );
 919         x = div.find( "div" );
 920         assert.strictEqual( x.toggle().css( "display" ), "none", "is hidden" );
 921         assert.strictEqual( x.toggle().css( "display" ), "block", "is visible" );
 922
 923         // Ensure hide() is called when toggled (#12148)
 924         oldHide = jQuery.fn.hide;
 925         jQuery.fn.hide = function() {
 926                 assert.ok( true, name + " method called on toggle" );
 927                 return oldHide.apply( this, arguments );
 928         };
 929         x.toggle( name === "show" );
 930         jQuery.fn.hide = oldHide;
 931 } );
 932
 933 QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function( assert ) {
 934         assert.expect( 4 );
 935
 936         var $checkedtest = jQuery( "#checkedtest" );
 937         jQuery.css( $checkedtest[ 0 ], "height" );
 938
 939         assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
 940         assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
 941         assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
 942         assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
 943 } );
 944
 945 QUnit.test( "internal ref to elem.runtimeStyle (bug #7608)", function( assert ) {
 946         assert.expect( 1 );
 947         var result = true;
 948
 949         try {
 950                 jQuery( "#foo" ).css( { "width": "0%" } ).css( "width" );
 951         } catch ( e ) {
 952                 result = false;
 953         }
 954
 955         assert.ok( result, "elem.runtimeStyle does not throw exception" );
 956 } );
 957
 958 QUnit.test( "computed margins (trac-3333; gh-2237)", function( assert ) {
 959         assert.expect( 2 );
 960
 961         var $div = jQuery( "#foo" ),
 962                 $child = jQuery( "#en" );
 963
 964         $div.css( {
 965                 "width": "1px",
 966                 "marginRight": 0
 967         } );
 968         assert.equal( $div.css( "marginRight" ), "0px",
 969                 "marginRight correctly calculated with a width and display block" );
 970
 971         $div.css({
 972                 position: "absolute",
 973                 top: 0,
 974                 left: 0,
 975                 width: "100px"
 976         });
 977         $child.css({
 978                 width: "50px",
 979                 margin: "auto"
 980         });
 981         assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
 982 });
 983
 984 QUnit.test( "box model properties incorrectly returning % instead of px, see #10639 and #12088", function( assert ) {
 985         assert.expect( 2 );
 986
 987         var container = jQuery( "<div/>" ).width( 400 ).appendTo( "#qunit-fixture" ),
 988                 el = jQuery( "<div/>" ).css( { "width": "50%", "marginRight": "50%" } ).appendTo( container ),
 989                 el2 = jQuery( "<div/>" ).css( { "width": "50%", "minWidth": "300px", "marginLeft": "25%" } ).appendTo( container );
 990
 991         assert.equal( el.css( "marginRight" ), "200px", "css('marginRight') returning % instead of px, see #10639" );
 992         assert.equal( el2.css( "marginLeft" ), "100px", "css('marginLeft') returning incorrect pixel value, see #12088" );
 993 } );
 994
 995 QUnit.test( "jQuery.cssProps behavior, (bug #8402)", function( assert ) {
 996         assert.expect( 2 );
 997
 998         var div = jQuery( "<div>" ).appendTo( document.body ).css( {
 999                 "position": "absolute",
1000                 "top": 0,
1001                 "left": 10
1002         } );
1003         jQuery.cssProps.top = "left";
1004         assert.equal( div.css( "top" ), "10px", "the fixed property is used when accessing the computed style" );
1005         div.css( "top", "100px" );
1006         assert.equal( div[ 0 ].style.left, "100px", "the fixed property is used when setting the style" );
1007
1008         // cleanup jQuery.cssProps
1009         jQuery.cssProps.top = undefined;
1010 } );
1011
1012 QUnit.test( "widows & orphans #8936", function( assert ) {
1013
1014         var $p = jQuery( "<p>" ).appendTo( "#qunit-fixture" );
1015
1016         assert.expect( 2 );
1017
1018         $p.css( {
1019                 "widows": 3,
1020                 "orphans": 3
1021         } );
1022
1023         assert.equal( $p.css( "widows" ) || jQuery.style( $p[ 0 ], "widows" ), 3, "widows correctly set to 3" );
1024         assert.equal( $p.css( "orphans" ) || jQuery.style( $p[ 0 ], "orphans" ), 3, "orphans correctly set to 3" );
1025
1026         $p.remove();
1027 } );
1028
1029 QUnit.test( "can't get css for disconnected in IE<9, see #10254 and #8388", function( assert ) {
1030         assert.expect( 2 );
1031         var span, div;
1032
1033         span = jQuery( "<span/>" ).css( "background-image", "url(data/1x1.jpg)" );
1034         assert.notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see #10254" );
1035
1036         div = jQuery( "<div/>" ).css( "top", 10 );
1037         assert.equal( div.css( "top" ), "10px", "can't get top in IE<9, see #8388" );
1038 } );
1039
1040 QUnit.test( "Ensure styles are retrieving from parsed html on document fragments", function( assert ) {
1041         assert.expect( 1 );
1042
1043         var $span = jQuery(
1044                 jQuery.parseHTML( "<span style=\"font-family: Cuprum,sans-serif; font-size: 14px; color: #999999;\">some text</span>" )
1045         );
1046
1047         assert.equal( $span.css( "font-size" ), "14px", "Font-size retrievable on parsed HTML node" );
1048 } );
1049
1050 QUnit.test( "can't get background-position in IE<9, see #10796", function( assert ) {
1051         var div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" ),
1052                 units = [
1053                         "0 0",
1054                         "12px 12px",
1055                         "13px 12em",
1056                         "12em 13px",
1057                         "12em center",
1058                         "+12em center",
1059                         "12.2em center",
1060                         "center center"
1061                 ],
1062                 l = units.length,
1063                 i = 0;
1064
1065         assert.expect( l );
1066
1067         for ( ; i < l; i++ ) {
1068                 div.css( "background-position", units [ i ] );
1069                 assert.ok( div.css( "background-position" ), "can't get background-position in IE<9, see #10796" );
1070         }
1071 } );
1072
1073 if ( jQuery.fn.offset ) {
1074         QUnit.test( "percentage properties for left and top should be transformed to pixels, see #9505", function( assert ) {
1075                 assert.expect( 2 );
1076                 var parent = jQuery( "<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>" ).appendTo( "#qunit-fixture" ),
1077                         div = jQuery( "<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>" ).appendTo( parent );
1078
1079                 assert.equal( div.css( "top" ), "100px", "position properties not transformed to pixels, see #9505" );
1080                 assert.equal( div.css( "left" ), "100px", "position properties not transformed to pixels, see #9505" );
1081         } );
1082 }
1083
1084 QUnit.test( "Do not append px (#9548, #12990, #2792)", function( assert ) {
1085         assert.expect( 3 );
1086
1087         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1088
1089         $div.css( "fill-opacity", 1 );
1090
1091         // Support: Android 2.3 (no support for fill-opacity)
1092         if ( $div.css( "fill-opacity" ) !== undefined ) {
1093                 assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
1094         } else {
1095                 assert.ok( true, "No support for fill-opacity CSS property" );
1096         }
1097
1098         $div.css( "column-count", 1 );
1099         if ( $div.css( "column-count" ) !== undefined ) {
1100                 assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" );
1101         } else {
1102                 assert.ok( true, "No support for column-count CSS property" );
1103         }
1104
1105         $div.css( "animation-iteration-count", 2 );
1106         if ( $div.css( "animation-iteration-count" ) !== undefined ) {
1107                 // if $div.css( "animation-iteration-count" ) return "1",
1108                 // it actually return the default value of animation-iteration-count
1109                 assert.equal( $div.css( "animation-iteration-count" ), 2, "Do not append px to 'animation-iteration-count'" );
1110         } else {
1111                 assert.ok( true, "No support for animation-iteration-count CSS property" );
1112         }
1113 } );
1114
1115 QUnit.test( "css('width') and css('height') should respect box-sizing, see #11004", function( assert ) {
1116         assert.expect( 4 );
1117
1118         // Support: Android 2.3 (-webkit-box-sizing).
1119         var el_dis = jQuery( "<div style='width:300px;height:300px;margin:2px;padding:2px;-webkit-box-sizing:border-box;box-sizing:border-box;'>test</div>" ),
1120                 el = el_dis.clone().appendTo( "#qunit-fixture" );
1121
1122         assert.equal( el.css( "width" ), el.css( "width", el.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing, see #11004" );
1123         assert.equal( el_dis.css( "width" ), el_dis.css( "width", el_dis.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing for disconnected element, see #11004" );
1124         assert.equal( el.css( "height" ), el.css( "height", el.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing, see #11004" );
1125         assert.equal( el_dis.css( "height" ), el_dis.css( "height", el_dis.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing for disconnected element, see #11004" );
1126 } );
1127
1128 testIframeWithCallback(
1129         "css('width') should work correctly before document ready (#14084)",
1130         "css/cssWidthBeforeDocReady.html",
1131         function( cssWidthBeforeDocReady, assert ) {
1132                 assert.expect( 1 );
1133                 assert.strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
1134         }
1135 );
1136
1137 ( function() {
1138         var supportsFractionalGBCR,
1139                 qunitFixture = document.getElementById( "qunit-fixture" ),
1140                 div = document.createElement( "div" );
1141         div.style.width = "3.3px";
1142         qunitFixture.appendChild( div );
1143         supportsFractionalGBCR = div.getBoundingClientRect().width.toFixed( 1 ) === "3.3";
1144         qunitFixture.removeChild( div );
1145
1146         QUnit.test( "css('width') and css('height') should return fractional values for nodes in the document", function( assert ) {
1147                 if ( !supportsFractionalGBCR ) {
1148                         assert.expect( 1 );
1149                         assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
1150                         return;
1151                 }
1152
1153                 assert.expect( 2 );
1154
1155                 var el = jQuery( "<div class='test-div'></div>" ).appendTo( "#qunit-fixture" );
1156                 jQuery( "<style>.test-div { width: 33.3px; height: 88.8px; }</style>" ).appendTo( "#qunit-fixture" );
1157
1158                 assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
1159                         "css('width') should return fractional values" );
1160                 assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
1161                         "css('height') should return fractional values" );
1162         } );
1163
1164         QUnit.test( "css('width') and css('height') should return fractional values for disconnected nodes", function( assert ) {
1165                 if ( !supportsFractionalGBCR ) {
1166                         assert.expect( 1 );
1167                         assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
1168                         return;
1169                 }
1170
1171                 assert.expect( 2 );
1172
1173                 var el = jQuery( "<div style='width: 33.3px; height: 88.8px;'></div>" );
1174
1175                 assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
1176                         "css('width') should return fractional values" );
1177                 assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
1178                         "css('height') should return fractional values" );
1179         } );
1180 } )();
1181
1182 QUnit.test( "certain css values of 'normal' should be convertable to a number, see #8627", function( assert ) {
1183         assert.expect( 3 );
1184
1185         var el = jQuery( "<div style='letter-spacing:normal;font-weight:normal;'>test</div>" ).appendTo( "#qunit-fixture" );
1186
1187         assert.ok( jQuery.isNumeric( parseFloat( el.css( "letterSpacing" ) ) ), "css('letterSpacing') not convertable to number, see #8627" );
1188         assert.ok( jQuery.isNumeric( parseFloat( el.css( "fontWeight" ) ) ), "css('fontWeight') not convertable to number, see #8627" );
1189         assert.equal( typeof el.css( "fontWeight" ), "string", ".css() returns a string" );
1190 } );
1191
1192 // only run this test in IE9
1193 if ( document.documentMode === 9 ) {
1194         QUnit.test( ".css('filter') returns a string in IE9, see #12537", function( assert ) {
1195                 assert.expect( 1 );
1196
1197                 assert.equal( jQuery( "<div style='-ms-filter:\"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#ECECEC)\";'></div>" ).css( "filter" ), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#ECECEC)", "IE9 returns the correct value from css('filter')." );
1198         } );
1199 }
1200
1201 QUnit.test( "cssHooks - expand", function( assert ) {
1202         assert.expect( 15 );
1203         var result,
1204                 properties = {
1205                         margin: [ "marginTop", "marginRight", "marginBottom", "marginLeft" ],
1206                         borderWidth: [ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ],
1207                         padding: [ "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ]
1208                 };
1209
1210         jQuery.each( properties, function( property, keys ) {
1211                 var hook = jQuery.cssHooks[ property ],
1212                         expected = {};
1213                 jQuery.each( keys, function( _, key ) {
1214                         expected[ key ] = 10;
1215                 } );
1216                 result = hook.expand( 10 );
1217                 assert.deepEqual( result, expected, property + " expands properly with a number" );
1218
1219                 jQuery.each( keys, function( _, key ) {
1220                         expected[ key ] = "10px";
1221                 } );
1222                 result = hook.expand( "10px" );
1223                 assert.deepEqual( result, expected, property + " expands properly with '10px'" );
1224
1225                 expected[ keys[ 1 ] ] = expected[ keys[ 3 ] ] = "20px";
1226                 result = hook.expand( "10px 20px" );
1227                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px'" );
1228
1229                 expected[ keys[ 2 ] ] = "30px";
1230                 result = hook.expand( "10px 20px 30px" );
1231                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
1232
1233                 expected[ keys[ 3 ] ] = "40px";
1234                 result = hook.expand( "10px 20px 30px 40px" );
1235                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
1236
1237         } );
1238
1239 } );
1240
1241 QUnit.test( "css opacity consistency across browsers (#12685)", function( assert ) {
1242         assert.expect( 4 );
1243
1244         var el,
1245                 fixture = jQuery( "#qunit-fixture" );
1246
1247         // Append style element
1248         jQuery( "<style>.opacityWithSpaces_t12685 { opacity: 0.1; filter: alpha(opacity = 10); } .opacityNoSpaces_t12685 { opacity: 0.2; filter: alpha(opacity=20); }</style>" ).appendTo( fixture );
1249
1250         el = jQuery( "<div class='opacityWithSpaces_t12685'></div>" ).appendTo( fixture );
1251
1252         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "opacity from style sheet (filter:alpha with spaces)" );
1253         el.removeClass( "opacityWithSpaces_t12685" ).addClass( "opacityNoSpaces_t12685" );
1254         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 20, "opacity from style sheet (filter:alpha without spaces)" );
1255         el.css( "opacity", 0.3 );
1256         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 30, "override opacity" );
1257         el.css( "opacity", "" );
1258         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 20, "remove opacity override" );
1259 } );
1260
1261 QUnit[ jQuery.find.compile ? "test" : "skip" ]( ":visible/:hidden selectors", function( assert ) {
1262         assert.expect( 17 );
1263
1264         var $div, $table, $a;
1265
1266         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1267         jQuery( "#nothiddendiv" ).css( { display: "none" } );
1268         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1269         jQuery( "#nothiddendiv" ).css( { "display": "block" } );
1270         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1271         assert.ok( !jQuery( window ).is( ":visible" ), "Calling is(':visible') on window does not throw an exception (#10267)." );
1272         assert.ok( !jQuery( document ).is( ":visible" ), "Calling is(':visible') on document does not throw an exception (#10267)." );
1273
1274         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1275         jQuery( "#nothiddendiv" ).css( "display", "none" );
1276         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1277         jQuery( "#nothiddendiv" ).css( "display", "block" );
1278         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1279
1280         assert.ok( jQuery( "#siblingspan" ).is( ":visible" ), "Span with no content is visible" );
1281         $div = jQuery( "<div><span></span></div>" ).appendTo( "#qunit-fixture" );
1282         assert.equal( $div.find( ":visible" ).length, 1, "Span with no content is visible" );
1283         $div.css( { width: 0, height: 0, overflow: "hidden" } );
1284         assert.ok( $div.is( ":visible" ), "Div with width and height of 0 is still visible (gh-2227)" );
1285
1286         // Safari 6-7 and iOS 6-7 report 0 width for br elements
1287         // When newer browsers propagate, re-enable this test
1288         // $br = jQuery( "<br/>" ).appendTo( "#qunit-fixture" );
1289         // ok( $br.is( ":visible" ), "br element is visible" );
1290
1291         $table = jQuery( "#table" );
1292         $table.html( "<tr><td style='display:none'>cell</td><td>cell</td></tr>" );
1293         assert.equal( jQuery( "#table td:visible" ).length, 1, "hidden cell is not perceived as visible (#4512). Works on table elements" );
1294         $table.css( "display", "none" ).html( "<tr><td>cell</td><td>cell</td></tr>" );
1295         assert.equal( jQuery( "#table td:visible" ).length, 0, "hidden cell children not perceived as visible (#4512)" );
1296
1297         assert.t( "Is Visible", "#qunit-fixture div:visible:lt(2)", [ "foo", "nothiddendiv" ] );
1298         assert.t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
1299         assert.t( "Is Hidden", "#form input:hidden", [ "hidden1","hidden2" ] );
1300
1301         $a = jQuery( "<a href='#'><h1>Header</h1></a>" ).appendTo( "#qunit-fixture" );
1302         assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
1303 } );
1304
1305 QUnit.test( "Keep the last style if the new one isn't recognized by the browser (#14836)", function( assert ) {
1306         assert.expect( 2 );
1307
1308         var el;
1309         el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "fake value" );
1310         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting an unrecognized value" );
1311         el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", " " );
1312         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting to a space" );
1313 } );
1314
1315 QUnit.test( "Reset the style if set to an empty string", function( assert ) {
1316         assert.expect( 1 );
1317         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "" );
1318
1319         // Some browsers return an empty string; others "static". Both those cases mean the style
1320         // was reset successfully so accept them both.
1321         assert.equal( el.css( "position" ) || "static", "static",
1322                 "The style can be reset by setting to an empty string" );
1323 } );
1324
1325 QUnit.test(
1326         "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)",
1327         24,
1328         function( assert ) {
1329                 var baseUrl = document.location.href.replace( /([^\/]*)$/, "" );
1330                 var done = assert.async();
1331                 var styles = [ {
1332                                 name: "backgroundAttachment",
1333                                 value: [ "fixed" ],
1334                                 expected: [ "scroll" ]
1335                         },{
1336                                 name: "backgroundColor",
1337                                 value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
1338                                 expected: [ "transparent" ]
1339                         }, {
1340
1341                                 // Firefox returns auto's value
1342                                 name: "backgroundImage",
1343                                 value: [ "url('test.png')", "url(" + baseUrl + "test.png)", "url(\"" + baseUrl + "test.png\")" ],
1344                                 expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
1345                         }, {
1346                                 name: "backgroundPosition",
1347                                 value: [ "5% 5%" ],
1348                                 expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
1349                         }, {
1350
1351                                 // Firefox returns no-repeat
1352                                 name: "backgroundRepeat",
1353                                 value: [ "repeat-y" ],
1354                                 expected: [ "repeat", "no-repeat" ]
1355                         }, {
1356                                 name: "backgroundClip",
1357                                 value: [ "padding-box" ],
1358                                 expected: [ "border-box" ]
1359                         }, {
1360                                 name: "backgroundOrigin",
1361                                 value: [ "content-box" ],
1362                                 expected: [ "padding-box" ]
1363                         }, {
1364                                 name: "backgroundSize",
1365                                 value: [ "80px 60px" ],
1366                                 expected: [ "auto auto" ]
1367                 } ];
1368
1369                 jQuery.each( styles, function( index, style ) {
1370                         var $clone, $clonedChildren,
1371                                 $source = jQuery( "#firstp" ),
1372                                 source = $source[ 0 ],
1373                                 $children = $source.children();
1374
1375                         style.expected = style.expected.concat( [ "", "auto" ] );
1376
1377                         if ( source.style[ style.name ] === undefined ) {
1378                                 assert.ok( true, style.name +  ": style isn't supported and therefore not an issue" );
1379                                 assert.ok( true );
1380
1381                                 return true;
1382                         }
1383
1384                         $source.css( style.name, style.value[ 0 ] );
1385                         $children.css( style.name, style.value[ 0 ] );
1386
1387                         $clone = $source.clone();
1388                         $clonedChildren = $clone.children();
1389
1390                         $clone.css( style.name, "" );
1391                         $clonedChildren.css( style.name, "" );
1392
1393                         window.setTimeout( function() {
1394                                 assert.notEqual( $clone.css( style.name ), style.value[ 0 ], "Cloned css was changed" );
1395
1396                                 assert.ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
1397                                         "Clearing clone.css() doesn't affect source.css(): " + style.name +
1398                                         "; result: " + $source.css( style.name ) +
1399                                         "; expected: " + style.value.join( "," ) );
1400
1401                                 assert.ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
1402                                         "Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
1403                                         "; result: " + $children.css( style.name ) +
1404                                         "; expected: " + style.value.join( "," ) );
1405                         }, 100 );
1406                 } );
1407
1408                 window.setTimeout( done, 1000 );
1409         }
1410 );
1411
1412 // Support: IE < 11
1413 // We have to jump through the hoops here in order to test work with "order" CSS property,
1414 // that some browsers do not support. This test is not, strictly speaking, correct,
1415 // but it's the best that we can do.
1416 ( function() {
1417         var style = document.createElement( "div" ).style,
1418                 exist = "order" in style || "WebkitOrder" in style;
1419
1420         if ( exist ) {
1421                 QUnit.test( "Don't append px to CSS \"order\" value (#14049)", function( assert ) {
1422                         assert.expect( 1 );
1423
1424                         var $elem = jQuery( "<div/>" );
1425
1426                         $elem.css( "order", 2 );
1427                         assert.equal( $elem.css( "order" ), "2", "2 on order" );
1428                 } );
1429         }
1430 } )();
1431
1432 QUnit.test( "Do not throw on frame elements from css method (#15098)", function( assert ) {
1433         assert.expect( 1 );
1434
1435         var frameWin, frameDoc,
1436                 frameElement = document.createElement( "iframe" ),
1437                 frameWrapDiv = document.createElement( "div" );
1438
1439         frameWrapDiv.appendChild( frameElement );
1440         document.body.appendChild( frameWrapDiv );
1441         frameWin = frameElement.contentWindow;
1442         frameDoc = frameWin.document;
1443         frameDoc.open();
1444         frameDoc.write( "<!doctype html><html><body><div>Hi</div></body></html>" );
1445         frameDoc.close();
1446
1447         frameWrapDiv.style.display = "none";
1448
1449         try {
1450                 jQuery( frameDoc.body ).css( "direction" );
1451                 assert.ok( true, "It didn't throw" );
1452         } catch ( _ ) {
1453                 assert.ok( false, "It did throw" );
1454         }
1455 } );
1456
1457 ( function() {
1458         var vendorPrefixes = [ "Webkit", "Moz", "ms" ];
1459
1460         function resetCssPropsFor( name ) {
1461                 delete jQuery.cssProps[ name ];
1462                 jQuery.each( vendorPrefixes, function( index, prefix ) {
1463                         delete jQuery.cssProps[ prefix + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
1464                 } );
1465         }
1466
1467         QUnit.test( "Don't default to a cached previously used wrong prefixed name (gh-2015)", function( assert ) {
1468
1469                 // Note: this test needs a property we know is only supported in a prefixed version
1470                 // by at least one of our main supported browsers. This may get out of date so let's
1471                 // use -(webkit|moz)-appearance as well as those two are not on a standards track.
1472                 var appearanceName, transformName, elem, elemStyle,
1473                         transformVal = "translate(5px, 2px)",
1474                         emptyStyle = document.createElement( "div" ).style;
1475
1476                 if ( "appearance" in emptyStyle ) {
1477                         appearanceName = "appearance";
1478                 } else {
1479                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1480                                 var prefixedProp = prefix + "Appearance";
1481                                 if ( prefixedProp in emptyStyle ) {
1482                                         appearanceName = prefixedProp;
1483                                 }
1484                         } );
1485                 }
1486
1487                 if ( "transform" in emptyStyle ) {
1488                         transformName = "transform";
1489                 } else {
1490                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1491                                 var prefixedProp = prefix + "Transform";
1492                                 if ( prefixedProp in emptyStyle ) {
1493                                         transformName = prefixedProp;
1494                                 }
1495                         } );
1496                 }
1497
1498                 assert.expect( !!appearanceName + !!transformName + 1 );
1499
1500                 resetCssPropsFor( "appearance" );
1501                 resetCssPropsFor( "transform" );
1502
1503                 elem = jQuery( "<div/>" )
1504                         .css( {
1505                                 msAppearance: "none",
1506                                 appearance: "none",
1507
1508                                 // Only the ms prefix is used to make sure we haven't e.g. set
1509                                 // webkitTransform ourselves in the test.
1510                                 msTransform: transformVal,
1511                                 transform: transformVal
1512                         } );
1513                 elemStyle = elem[ 0 ].style;
1514
1515                 if ( appearanceName ) {
1516                         assert.equal( elemStyle[ appearanceName ], "none", "setting properly-prefixed appearance" );
1517                 }
1518                 if ( transformName ) {
1519                         assert.equal( elemStyle[ transformName ], transformVal, "setting properly-prefixed transform" );
1520                 }
1521                 assert.equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
1522         } );
1523
1524         QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version", function( assert ) {
1525                 assert.expect( 1 );
1526
1527                 var elem = jQuery( "<div/>" ),
1528                         style = elem[ 0 ].style;
1529                 style.MozFakeProperty = "old value";
1530                 elem.css( "fakeProperty", "new value" );
1531
1532                 assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
1533         } );
1534
1535 } )();
1536
1537 }