test/unit/css.js

   1 if ( includesModule( "css" ) ) {
   2
   3 QUnit.module( "css", { afterEach: 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></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;'></textarea><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 trac-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;'></div>" ).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" );
  62         jQuery( "#empty" ).css( { "opacity": "1" } );
  63         assert.equal( jQuery( "#empty" ).css( "opacity" ), "1", "Assert opacity is taken from style attribute when set" );
  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></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') (trac-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                         message += " (actual " + round( cssCurrent, 2 ) + "px, expected " +
 225                                 round( expected, 2 ) + "px)";
 226
 227                         // Require a difference of no more than one pixel
 228                         difference = Math.abs( cssCurrent - expected );
 229                         assert.ok( difference <= 1, message );
 230                 },
 231                 getUnits = function( prop ) {
 232                         units[ prop ] = {
 233                                 "px": 1,
 234                                 "em": parseFloat( $child.css( prop, "100em" ).css( prop ) ) / 100,
 235                                 "pt": parseFloat( $child.css( prop, "100pt" ).css( prop ) ) / 100,
 236                                 "pc": parseFloat( $child.css( prop, "100pc" ).css( prop ) ) / 100,
 237                                 "cm": parseFloat( $child.css( prop, "100cm" ).css( prop ) ) / 100,
 238                                 "mm": parseFloat( $child.css( prop, "100mm" ).css( prop ) ) / 100,
 239                                 "%": parseFloat( $child.css( prop, "500%"  ).css( prop ) ) / 500
 240                         };
 241                 },
 242                 round = function( num, fractionDigits ) {
 243                         var base = Math.pow( 10, fractionDigits );
 244                         return Math.round( num * base ) / base;
 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",  50,  "%" );
 266         add( "lineHeight",   2, "em" );
 267         add( "lineHeight", -10, "px" );
 268         add( "lineHeight",  20, "pt" );
 269         add( "lineHeight",  30, "pc" );
 270         add( "lineHeight",   1, "cm" );
 271         add( "lineHeight", -44, "mm" );
 272 } );
 273
 274 QUnit.test( "css() mismatched relative values with bounded styles (gh-2144)", function( assert ) {
 275         assert.expect( 1 );
 276
 277         var right,
 278                 $container = jQuery( "<div></div>" )
 279                         .css( { position: "absolute", width: "400px", fontSize: "4px" } )
 280                         .appendTo( "#qunit-fixture" ),
 281                 $el = jQuery( "<div></div>" )
 282                         .css( { position: "absolute", left: "50%", right: "50%" } )
 283                         .appendTo( $container );
 284
 285         $el.css( "right", "-=25em" );
 286         assert.equal( Math.round( parseFloat( $el.css( "right" ) ) ), 100,
 287                 "Constraints do not interfere with unit conversion" );
 288 } );
 289
 290 QUnit.test( "css(String, Object)", function( assert ) {
 291         assert.expect( 19 );
 292         var j, div, display, ret, success;
 293
 294         jQuery( "#floatTest" ).css( "float", "left" );
 295         assert.equal( jQuery( "#floatTest" ).css( "float" ), "left", "Modified CSS float using \"float\": Assert float is left" );
 296         jQuery( "#floatTest" ).css( "font-size", "20px" );
 297         assert.equal( jQuery( "#floatTest" ).css( "font-size" ), "20px", "Modified CSS font-size: Assert font-size is 20px" );
 298
 299         jQuery.each( "0,0.25,0.5,0.75,1".split( "," ), function( i, n ) {
 300                 jQuery( "#foo" ).css( "opacity", n );
 301                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a String" );
 302                 jQuery( "#foo" ).css( "opacity", parseFloat( n ) );
 303                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a Number" );
 304         } );
 305         jQuery( "#foo" ).css( "opacity", "" );
 306         assert.equal( jQuery( "#foo" ).css( "opacity" ), "1", "Assert opacity is 1 when set to an empty String" );
 307
 308         // using contents will get comments regular, text, and comment nodes
 309         j = jQuery( "#nonnodes" ).contents();
 310         j.css( "overflow", "visible" );
 311         assert.equal( j.css( "overflow" ), "visible", "Check node,textnode,comment css works" );
 312         assert.equal( jQuery( "#t2037 .hidden" ).css( "display" ), "none", "Make sure browser thinks it is hidden" );
 313
 314         div = jQuery( "#nothiddendiv" );
 315         display = div.css( "display" );
 316         ret = div.css( "display", undefined );
 317
 318         assert.equal( ret, div, "Make sure setting undefined returns the original set." );
 319         assert.equal( div.css( "display" ), display, "Make sure that the display wasn't changed." );
 320
 321         success = true;
 322         try {
 323                 jQuery( "#foo" ).css( "backgroundColor", "rgba(0, 0, 0, 0.1)" );
 324         }
 325         catch ( e ) {
 326                 success = false;
 327         }
 328         assert.ok( success, "Setting RGBA values does not throw Error (trac-5509)" );
 329
 330         jQuery( "#foo" ).css( "font", "7px/21px sans-serif" );
 331         assert.strictEqual( jQuery( "#foo" ).css( "line-height" ), "21px",
 332                 "Set font shorthand property (trac-14759)" );
 333 } );
 334
 335 QUnit.test( "css(String, Object) with negative values", function( assert ) {
 336         assert.expect( 4 );
 337
 338         jQuery( "#nothiddendiv" ).css( "margin-top", "-10px" );
 339         jQuery( "#nothiddendiv" ).css( "margin-left", "-10px" );
 340         assert.equal( jQuery( "#nothiddendiv" ).css( "margin-top" ), "-10px", "Ensure negative top margins work." );
 341         assert.equal( jQuery( "#nothiddendiv" ).css( "margin-left" ), "-10px", "Ensure negative left margins work." );
 342
 343         jQuery( "#nothiddendiv" ).css( "position", "absolute" );
 344         jQuery( "#nothiddendiv" ).css( "top", "-20px" );
 345         jQuery( "#nothiddendiv" ).css( "left", "-20px" );
 346         assert.equal( jQuery( "#nothiddendiv" ).css( "top" ), "-20px", "Ensure negative top values work." );
 347         assert.equal( jQuery( "#nothiddendiv" ).css( "left" ), "-20px", "Ensure negative left values work." );
 348 } );
 349
 350 QUnit.test( "css(Array)", function( assert ) {
 351         assert.expect( 2 );
 352
 353         var expectedMany = {
 354                         "overflow": "visible",
 355                         "width": "16px"
 356                 },
 357                 expectedSingle = {
 358                         "width": "16px"
 359                 },
 360                 elem = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" );
 361
 362         assert.deepEqual( elem.css( expectedMany ).css( [ "overflow", "width" ] ), expectedMany, "Getting multiple element array" );
 363         assert.deepEqual( elem.css( expectedSingle ).css( [ "width" ] ), expectedSingle, "Getting single element array" );
 364 } );
 365
 366 QUnit.test( "css(String, Function)", function( assert ) {
 367         assert.expect( 3 );
 368
 369         var index,
 370                 sizes = [ "10px", "20px", "30px" ];
 371
 372         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 373                                 "<div class='cssFunction'></div>" +
 374                                 "<div class='cssFunction'></div></div>" )
 375                 .appendTo( "body" );
 376
 377         index = 0;
 378
 379         jQuery( "#cssFunctionTest div" ).css( "font-size", function() {
 380                 var size = sizes[ index ];
 381                 index++;
 382                 return size;
 383         } );
 384
 385         index = 0;
 386
 387         jQuery( "#cssFunctionTest div" ).each( function() {
 388                 var computedSize = jQuery( this ).css( "font-size" ),
 389                         expectedSize = sizes[ index ];
 390                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 391                 index++;
 392         } );
 393
 394         jQuery( "#cssFunctionTest" ).remove();
 395 } );
 396
 397 QUnit.test( "css(String, Function) with incoming value", function( assert ) {
 398         assert.expect( 3 );
 399
 400         var index,
 401                 sizes = [ "10px", "20px", "30px" ];
 402
 403         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 404                                 "<div class='cssFunction'></div>" +
 405                                 "<div class='cssFunction'></div></div>" )
 406                 .appendTo( "body" );
 407
 408         index = 0;
 409
 410         jQuery( "#cssFunctionTest div" ).css( "font-size", function() {
 411                 var size = sizes[ index ];
 412                 index++;
 413                 return size;
 414         } );
 415
 416         index = 0;
 417
 418         jQuery( "#cssFunctionTest div" ).css( "font-size", function( i, computedSize ) {
 419                 var expectedSize = sizes[ index ];
 420                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 421                 index++;
 422                 return computedSize;
 423         } );
 424
 425         jQuery( "#cssFunctionTest" ).remove();
 426 } );
 427
 428 QUnit.test( "css(Object) where values are Functions", function( assert ) {
 429         assert.expect( 3 );
 430
 431         var index,
 432                 sizes = [ "10px", "20px", "30px" ];
 433
 434         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 435                                 "<div class='cssFunction'></div>" +
 436                                 "<div class='cssFunction'></div></div>" )
 437                 .appendTo( "body" );
 438
 439         index = 0;
 440
 441         jQuery( "#cssFunctionTest div" ).css( { "fontSize": function() {
 442                 var size = sizes[ index ];
 443                 index++;
 444                 return size;
 445         } } );
 446
 447         index = 0;
 448
 449         jQuery( "#cssFunctionTest div" ).each( function() {
 450                 var computedSize = jQuery( this ).css( "font-size" ),
 451                         expectedSize = sizes[ index ];
 452                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 453                 index++;
 454         } );
 455
 456         jQuery( "#cssFunctionTest" ).remove();
 457 } );
 458
 459 QUnit.test( "css(Object) where values are Functions with incoming values", function( assert ) {
 460         assert.expect( 3 );
 461
 462         var index,
 463                 sizes = [ "10px", "20px", "30px" ];
 464
 465         jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 466                                 "<div class='cssFunction'></div>" +
 467                                 "<div class='cssFunction'></div></div>" )
 468                 .appendTo( "body" );
 469
 470         index = 0;
 471
 472         jQuery( "#cssFunctionTest div" ).css( { "fontSize": function() {
 473                 var size = sizes[ index ];
 474                 index++;
 475                 return size;
 476         } } );
 477
 478         index = 0;
 479
 480         jQuery( "#cssFunctionTest div" ).css( { "font-size": function( i, computedSize ) {
 481                 var expectedSize = sizes[ index ];
 482                 assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 483                 index++;
 484                 return computedSize;
 485         } } );
 486
 487         jQuery( "#cssFunctionTest" ).remove();
 488 } );
 489
 490 QUnit.test( "show()", function( assert ) {
 491
 492         assert.expect( 18 );
 493
 494         var hiddendiv, div, pass, test;
 495                 hiddendiv = jQuery( "div.hidden" );
 496
 497         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
 498
 499         hiddendiv.css( "display", "block" );
 500         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
 501
 502         hiddendiv.show();
 503         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
 504
 505         hiddendiv.css( "display", "" );
 506
 507         pass = true;
 508         div = jQuery( "#qunit-fixture div" );
 509         div.show().each( function() {
 510                 if ( this.style.display === "none" ) {
 511                         pass = false;
 512                 }
 513         } );
 514         assert.ok( pass, "Show" );
 515
 516         jQuery(
 517                 "<div id='show-tests'>" +
 518                 "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
 519                 "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
 520                 "<ul><li></li></ul></div>"
 521         ).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
 522
 523         test = {
 524                 "div": "block",
 525                 "p": "block",
 526                 "a": "inline",
 527                 "code": "inline",
 528                 "pre": "block",
 529                 "span": "inline",
 530                 "table": "table",
 531                 "thead": "table-header-group",
 532                 "tbody": "table-row-group",
 533                 "tr": "table-row",
 534                 "th": "table-cell",
 535                 "td": "table-cell",
 536                 "ul": "block",
 537                 "li": "list-item"
 538         };
 539
 540         jQuery.each( test, function( selector, expected ) {
 541                 var elem = jQuery( selector, "#show-tests" ).show();
 542                 assert.equal( elem.css( "display" ), expected, "Show using correct display type for " + selector );
 543         } );
 544
 545         // Make sure that showing or hiding a text node doesn't cause an error
 546         jQuery( "<div>test</div> text <span>test</span>" ).show().remove();
 547         jQuery( "<div>test</div> text <span>test</span>" ).hide().remove();
 548 } );
 549
 550 QUnit.test( "show/hide detached nodes", function( assert ) {
 551         assert.expect( 19 );
 552
 553         var div, span, tr;
 554
 555         div = jQuery( "<div>" ).hide();
 556         assert.equal( div.css( "display" ), "none", "hide() updates inline style of a detached div" );
 557         div.appendTo( "#qunit-fixture" );
 558         assert.equal( div.css( "display" ), "none",
 559                 "A hidden-while-detached div is hidden after attachment" );
 560         div.show();
 561         assert.equal( div.css( "display" ), "block",
 562                 "A hidden-while-detached div can be shown after attachment" );
 563
 564         div = jQuery( "<div class='hidden'>" );
 565         div.show().appendTo( "#qunit-fixture" );
 566         assert.equal( div.css( "display" ), "none",
 567                 "A shown-while-detached div can be hidden by the CSS cascade" );
 568
 569         div = jQuery( "<div><div class='hidden'></div></div>" ).children( "div" );
 570         div.show().appendTo( "#qunit-fixture" );
 571         assert.equal( div.css( "display" ), "none",
 572                 "A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
 573
 574         span = jQuery( "<span class='hidden'></span>" );
 575         span.show().appendTo( "#qunit-fixture" );
 576         assert.equal( span.css( "display" ), "none",
 577                 "A shown-while-detached span can be hidden by the CSS cascade" );
 578
 579         div = jQuery( "div.hidden" );
 580         div.detach().show();
 581         assert.ok( !div[ 0 ].style.display,
 582                 "show() does not update inline style of a cascade-hidden-before-detach div" );
 583         div.appendTo( "#qunit-fixture" );
 584         assert.equal( div.css( "display" ), "none",
 585                 "A shown-while-detached cascade-hidden div is hidden after attachment" );
 586         div.remove();
 587
 588         span = jQuery( "<span class='hidden'></span>" );
 589         span.appendTo( "#qunit-fixture" ).detach().show().appendTo( "#qunit-fixture" );
 590         assert.equal( span.css( "display" ), "none",
 591                 "A shown-while-detached cascade-hidden span is hidden after attachment" );
 592         span.remove();
 593
 594         div = jQuery( document.createElement( "div" ) );
 595         div.show().appendTo( "#qunit-fixture" );
 596         assert.ok( !div[ 0 ].style.display, "A shown-while-detached div has no inline style" );
 597         assert.equal( div.css( "display" ), "block",
 598                 "A shown-while-detached div has default display after attachment" );
 599         div.remove();
 600
 601         div = jQuery( "<div style='display: none'>" );
 602         div.show();
 603         assert.equal( div[ 0 ].style.display, "",
 604                 "show() updates inline style of a detached inline-hidden div" );
 605         div.appendTo( "#qunit-fixture" );
 606         assert.equal( div.css( "display" ), "block",
 607                 "A shown-while-detached inline-hidden div has default display after attachment" );
 608
 609         div = jQuery( "<div><div style='display: none'></div></div>" ).children( "div" );
 610         div.show().appendTo( "#qunit-fixture" );
 611         assert.equal( div.css( "display" ), "block",
 612                 "A shown-while-detached inline-hidden div inside a visible div has default display " +
 613                 "after attachment" );
 614
 615         span = jQuery( "<span style='display: none'></span>" );
 616         span.show();
 617         assert.equal( span[ 0 ].style.display, "",
 618                 "show() updates inline style of a detached inline-hidden span" );
 619         span.appendTo( "#qunit-fixture" );
 620         assert.equal( span.css( "display" ), "inline",
 621                 "A shown-while-detached inline-hidden span has default display after attachment" );
 622
 623         div = jQuery( "<div style='display: inline'></div>" );
 624         div.show().appendTo( "#qunit-fixture" );
 625         assert.equal( div.css( "display" ), "inline",
 626                 "show() does not update inline style of a detached inline-visible div" );
 627         div.remove();
 628
 629         tr = jQuery( "<tr></tr>" );
 630         jQuery( "#table" ).append( tr );
 631         tr.detach().hide().show();
 632
 633         assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
 634         tr.remove();
 635
 636         span = jQuery( "<span></span>" ).hide().show();
 637         assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
 638         span.remove();
 639 } );
 640
 641 // Support: IE 11+
 642 // IE doesn't support Shadow DOM.
 643 QUnit.testUnlessIE(
 644         "show/hide shadow child nodes", function( assert ) {
 645
 646         assert.expect( 28 );
 647         jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
 648         var shadowHost = document.querySelector( "#shadowHost" );
 649         var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
 650         shadowRoot.innerHTML = "" +
 651                 "<style>.hidden{display: none;}</style>" +
 652                 "<div class='hidden' id='shadowdiv'>" +
 653                 "       <p class='hidden' id='shadowp'>" +
 654                 "               <a href='#' class='hidden' id='shadowa'></a>" +
 655                 "       </p>" +
 656                 "       <code class='hidden' id='shadowcode'></code>" +
 657                 "       <pre class='hidden' id='shadowpre'></pre>" +
 658                 "       <span class='hidden' id='shadowspan'></span>" +
 659                 "</div>" +
 660                 "<table class='hidden' id='shadowtable'>" +
 661                 "       <thead class='hidden' id='shadowthead'>" +
 662                 "               <tr class='hidden' id='shadowtr'>" +
 663                 "                       <th class='hidden' id='shadowth'></th>" +
 664                 "               </tr>" +
 665                 "       </thead>" +
 666                 "       <tbody class='hidden' id='shadowtbody'>" +
 667                 "               <tr class='hidden'>" +
 668                 "                       <td class='hidden' id='shadowtd'></td>" +
 669                 "               </tr>" +
 670                 "       </tbody>" +
 671                 "</table>" +
 672                 "<ul class='hidden' id='shadowul'>" +
 673                 "       <li class='hidden' id='shadowli'></li>" +
 674                 "</ul>";
 675
 676         var test = {
 677                 "div": "block",
 678                 "p": "block",
 679                 "a": "inline",
 680                 "code": "inline",
 681                 "pre": "block",
 682                 "span": "inline",
 683                 "table": "table",
 684                 "thead": "table-header-group",
 685                 "tbody": "table-row-group",
 686                 "tr": "table-row",
 687                 "th": "table-cell",
 688                 "td": "table-cell",
 689                 "ul": "block",
 690                 "li": "list-item"
 691         };
 692
 693         jQuery.each( test, function( selector, expected ) {
 694                 var shadowChild = shadowRoot.querySelector( "#shadow" + selector );
 695                 var $shadowChild = jQuery( shadowChild );
 696                 assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
 697                 $shadowChild.show();
 698                 assert.strictEqual( $shadowChild.css( "display" ), expected, "Show using correct display type for " + selector );
 699         } );
 700 } );
 701
 702 QUnit.test( "hide hidden elements (bug trac-7141)", function( assert ) {
 703         assert.expect( 3 );
 704
 705         var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
 706         assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
 707         div.hide();
 708         assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
 709         div.show();
 710         assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
 711
 712         div.remove();
 713 } );
 714
 715 QUnit.test( "show() after hide() should always set display to initial value (trac-14750)", function( assert ) {
 716         assert.expect( 1 );
 717
 718         var div = jQuery( "<div></div>" ),
 719                 fixture = jQuery( "#qunit-fixture" );
 720
 721         fixture.append( div );
 722
 723         div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
 724         assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
 725 } );
 726
 727 QUnit.test( "show/hide 3.0, default display", function( assert ) {
 728
 729         assert.expect( 36 );
 730
 731         var i,
 732                 $elems = jQuery( "<div></div>" )
 733                         .appendTo( "#qunit-fixture" )
 734                         .html( "<div data-expected-display='block'></div>" +
 735                                 "<span data-expected-display='inline'></span>" +
 736                                 "<ul><li data-expected-display='list-item'></li></ul>" )
 737                         .find( "[data-expected-display]" );
 738
 739         $elems.each( function() {
 740                 var $elem = jQuery( this ),
 741                         name = this.nodeName,
 742                         expected = this.getAttribute( "data-expected-display" ),
 743                         sequence = [];
 744
 745                 if ( this.className ) {
 746                         name += "." + this.className;
 747                 }
 748                 if ( this.getAttribute( "style" ) ) {
 749                         name += "[style='" + this.getAttribute( "style" ) + "']";
 750                 }
 751                 name += " ";
 752
 753                 for ( i = 0; i < 3; i++ ) {
 754                         sequence.push( ".show()" );
 755                         $elem.show();
 756                         assert.equal( $elem.css( "display" ), expected,
 757                                 name + sequence.join( "" ) + " computed" );
 758                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 759
 760                         sequence.push( ".hide()" );
 761                         $elem.hide();
 762                         assert.equal( $elem.css( "display" ), "none",
 763                                 name + sequence.join( "" ) + " computed" );
 764                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 765                 }
 766         } );
 767 } );
 768
 769 QUnit.test( "show/hide 3.0, default body display", function( assert ) {
 770
 771         assert.expect( 2 );
 772
 773         var hideBody = supportjQuery( "<style>body{display:none}</style>" ).appendTo( document.head ),
 774                 body = jQuery( document.body );
 775
 776         assert.equal( body.css( "display" ), "none", "Correct initial display" );
 777
 778         body.show();
 779
 780         assert.equal( body.css( "display" ), "block", "Correct display after .show()" );
 781
 782         hideBody.remove();
 783 } );
 784
 785 QUnit.test( "show/hide 3.0, cascade display", function( assert ) {
 786
 787         assert.expect( 36 );
 788
 789         var i,
 790                 $elems = jQuery( "<div></div>" )
 791                         .appendTo( "#qunit-fixture" )
 792                         .html( "<span class='block'></span><div class='inline'></div><div class='list-item'></div>" )
 793                         .children();
 794
 795         $elems.each( function() {
 796                 var $elem = jQuery( this ),
 797                         name = this.nodeName,
 798                         sequence = [];
 799
 800                 if ( this.className ) {
 801                         name += "." + this.className;
 802                 }
 803                 if ( this.getAttribute( "style" ) ) {
 804                         name += "[style='" + this.getAttribute( "style" ) + "']";
 805                 }
 806                 name += " ";
 807
 808                 for ( i = 0; i < 3; i++ ) {
 809                         sequence.push( ".show()" );
 810                         $elem.show();
 811                         assert.equal( $elem.css( "display" ), this.className,
 812                                 name + sequence.join( "" ) + " computed" );
 813                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 814
 815                         sequence.push( ".hide()" );
 816                         $elem.hide();
 817                         assert.equal( $elem.css( "display" ), "none",
 818                                 name + sequence.join( "" ) + " computed" );
 819                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 820                 }
 821         } );
 822 } );
 823
 824 QUnit.test( "show/hide 3.0, inline display", function( assert ) {
 825
 826         assert.expect( 96 );
 827
 828         var i,
 829                 $elems = jQuery( "<div></div>" )
 830                         .appendTo( "#qunit-fixture" )
 831                         .html( "<span data-expected-display='block' style='display:block'></span>" +
 832                                 "<span class='list-item' data-expected-display='block' style='display:block'></span>" +
 833                                 "<div data-expected-display='inline' style='display:inline'></div>" +
 834                                 "<div class='list-item' data-expected-display='inline' style='display:inline'></div>" +
 835                                 "<ul>" +
 836                                         "<li data-expected-display='block' style='display:block'></li>" +
 837                                         "<li class='inline' data-expected-display='block' style='display:block'></li>" +
 838                                         "<li data-expected-display='inline' style='display:inline'></li>" +
 839                                         "<li class='block' data-expected-display='inline' style='display:inline'></li>" +
 840                                 "</ul>" )
 841                         .find( "[data-expected-display]" );
 842
 843         $elems.each( function() {
 844                 var $elem = jQuery( this ),
 845                         name = this.nodeName,
 846                         expected = this.getAttribute( "data-expected-display" ),
 847                         sequence = [];
 848
 849                 if ( this.className ) {
 850                         name += "." + this.className;
 851                 }
 852                 if ( this.getAttribute( "style" ) ) {
 853                         name += "[style='" + this.getAttribute( "style" ) + "']";
 854                 }
 855                 name += " ";
 856
 857                 for ( i = 0; i < 3; i++ ) {
 858                         sequence.push( ".show()" );
 859                         $elem.show();
 860                         assert.equal( $elem.css( "display" ), expected,
 861                                 name + sequence.join( "" ) + " computed" );
 862                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 863
 864                         sequence.push( ".hide()" );
 865                         $elem.hide();
 866                         assert.equal( $elem.css( "display" ), "none",
 867                                 name + sequence.join( "" ) + " computed" );
 868                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 869                 }
 870         } );
 871 } );
 872
 873 QUnit.test( "show/hide 3.0, cascade hidden", function( assert ) {
 874
 875         assert.expect( 72 );
 876
 877         var i,
 878                 $elems = jQuery( "<div></div>" )
 879                         .appendTo( "#qunit-fixture" )
 880                         .html( "<div class='hidden' data-expected-display='block'></div>" +
 881                                 "<div class='hidden' data-expected-display='block' style='display:none'></div>" +
 882                                 "<span class='hidden' data-expected-display='inline'></span>" +
 883                                 "<span class='hidden' data-expected-display='inline' style='display:none'></span>" +
 884                                 "<ul>" +
 885                                         "<li class='hidden' data-expected-display='list-item'></li>" +
 886                                         "<li class='hidden' data-expected-display='list-item' style='display:none'></li>" +
 887                                 "</ul>" )
 888                         .find( "[data-expected-display]" );
 889
 890         $elems.each( function() {
 891                 var $elem = jQuery( this ),
 892                         name = this.nodeName,
 893                         expected = this.getAttribute( "data-expected-display" ),
 894                         sequence = [];
 895
 896                 if ( this.className ) {
 897                         name += "." + this.className;
 898                 }
 899                 if ( this.getAttribute( "style" ) ) {
 900                         name += "[style='" + this.getAttribute( "style" ) + "']";
 901                 }
 902                 name += " ";
 903
 904                 for ( i = 0; i < 3; i++ ) {
 905                         sequence.push( ".hide()" );
 906                         $elem.hide();
 907                         assert.equal( $elem.css( "display" ), "none",
 908                                 name + sequence.join( "" ) + " computed" );
 909                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 910
 911                         sequence.push( ".show()" );
 912                         $elem.show();
 913                         assert.equal( $elem.css( "display" ), expected,
 914                                 name + sequence.join( "" ) + " computed" );
 915                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 916                 }
 917         } );
 918 } );
 919
 920 QUnit.test( "show/hide 3.0, inline hidden", function( assert ) {
 921
 922         assert.expect( 84 );
 923
 924         var i,
 925                 $elems = jQuery( "<div></div>" )
 926                         .appendTo( "#qunit-fixture" )
 927                         .html( "<span data-expected-display='inline' style='display:none'></span>" +
 928                                 "<span class='list-item' data-expected-display='list-item' style='display:none'></span>" +
 929                                 "<div data-expected-display='block' style='display:none'></div>" +
 930                                 "<div class='list-item' data-expected-display='list-item' style='display:none'></div>" +
 931                                 "<ul>" +
 932                                         "<li data-expected-display='list-item' style='display:none'></li>" +
 933                                         "<li class='block' data-expected-display='block' style='display:none'></li>" +
 934                                         "<li class='inline' data-expected-display='inline' style='display:none'></li>" +
 935                                 "</ul>" )
 936                         .find( "[data-expected-display]" );
 937
 938         $elems.each( function() {
 939                 var $elem = jQuery( this ),
 940                         name = this.nodeName,
 941                         expected = this.getAttribute( "data-expected-display" ),
 942                         sequence = [];
 943
 944                 if ( this.className ) {
 945                         name += "." + this.className;
 946                 }
 947                 if ( this.getAttribute( "style" ) ) {
 948                         name += "[style='" + this.getAttribute( "style" ) + "']";
 949                 }
 950                 name += " ";
 951
 952                 for ( i = 0; i < 3; i++ ) {
 953                         sequence.push( ".hide()" );
 954                         $elem.hide();
 955                         assert.equal( $elem.css( "display" ), "none",
 956                                 name + sequence.join( "" ) + " computed" );
 957                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 958
 959                         sequence.push( ".show()" );
 960                         $elem.show();
 961                         assert.equal( $elem.css( "display" ), expected,
 962                                 name + sequence.join( "" ) + " computed" );
 963                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 964                 }
 965         } );
 966 } );
 967
 968 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "toggle()", function( assert ) {
 969         assert.expect( 9 );
 970         var div, oldHide,
 971                 x = jQuery( "#foo" );
 972
 973         assert.ok( x.is( ":visible" ), "is visible" );
 974         x.toggle();
 975         assert.ok( x.is( ":hidden" ), "is hidden" );
 976         x.toggle();
 977         assert.ok( x.is( ":visible" ), "is visible again" );
 978
 979         x.toggle( true );
 980         assert.ok( x.is( ":visible" ), "is visible" );
 981         x.toggle( false );
 982         assert.ok( x.is( ":hidden" ), "is hidden" );
 983         x.toggle( true );
 984         assert.ok( x.is( ":visible" ), "is visible again" );
 985
 986         div = jQuery( "<div style='display:none'><div></div></div>" ).appendTo( "#qunit-fixture" );
 987         x = div.find( "div" );
 988         assert.strictEqual( x.toggle().css( "display" ), "none", "is hidden" );
 989         assert.strictEqual( x.toggle().css( "display" ), "block", "is visible" );
 990
 991         // Ensure hide() is called when toggled (trac-12148)
 992         oldHide = jQuery.fn.hide;
 993         jQuery.fn.hide = function() {
 994                 assert.ok( true, name + " method called on toggle" );
 995                 return oldHide.apply( this, arguments );
 996         };
 997         x.toggle( name === "show" );
 998         jQuery.fn.hide = oldHide;
 999 } );
1000
1001 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "detached toggle()", function( assert ) {
1002         assert.expect( 6 );
1003         var detached = jQuery( "<p><a></a><p>" ).find( "*" ).addBack(),
1004                 hiddenDetached = jQuery( "<p><a></a></p>" ).find( "*" ).addBack().css( "display", "none" ),
1005                 cascadeHiddenDetached = jQuery( "<p><a></a></p>" ).find( "*" ).addBack().addClass( "hidden" );
1006
1007         detached.toggle();
1008         detached.appendTo( "#qunit-fixture" );
1009         assert.equal( detached[ 0 ].style.display, "none", "detached element" );
1010         assert.equal( detached[ 1 ].style.display, "none", "element in detached tree" );
1011
1012         hiddenDetached.toggle();
1013         hiddenDetached.appendTo( "#qunit-fixture" );
1014         assert.equal( hiddenDetached[ 0 ].style.display, "", "detached, hidden element" );
1015         assert.equal( hiddenDetached[ 1 ].style.display, "", "hidden element in detached tree" );
1016
1017         cascadeHiddenDetached.toggle();
1018         cascadeHiddenDetached.appendTo( "#qunit-fixture" );
1019         assert.equal( cascadeHiddenDetached[ 0 ].style.display, "none",
1020                 "detached, cascade-hidden element" );
1021         assert.equal( cascadeHiddenDetached[ 1 ].style.display, "none",
1022                 "cascade-hidden element in detached tree" );
1023 } );
1024
1025 QUnit[ QUnit.jQuerySelectors && !QUnit.isIE ? "test" : "skip" ](
1026         "shadow toggle()", function( assert ) {
1027
1028         assert.expect( 4 );
1029
1030         jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
1031         var shadowHost = document.querySelector( "#shadowHost" );
1032         var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
1033         shadowRoot.innerHTML = "" +
1034                 "<style>.hidden{display: none;}</style>" +
1035                 "<div id='shadowHiddenChild' class='hidden'></div>" +
1036                 "<div id='shadowChild'></div>";
1037         var shadowChild = shadowRoot.querySelector( "#shadowChild" );
1038         var shadowHiddenChild = shadowRoot.querySelector( "#shadowHiddenChild" );
1039
1040         var $shadowChild = jQuery( shadowChild );
1041         assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
1042         $shadowChild.toggle();
1043         assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
1044
1045         $shadowChild = jQuery( shadowHiddenChild );
1046         assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
1047         $shadowChild.toggle();
1048         assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
1049 } );
1050
1051 QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug trac-1095)", function( assert ) {
1052         assert.expect( 4 );
1053
1054         var $checkedtest = jQuery( "#checkedtest" );
1055         jQuery.css( $checkedtest[ 0 ], "height" );
1056
1057         assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
1058         assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
1059         assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
1060         assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
1061 } );
1062
1063 QUnit.test( "internal ref to elem.runtimeStyle (bug trac-7608)", function( assert ) {
1064         assert.expect( 1 );
1065         var result = true;
1066
1067         try {
1068                 jQuery( "#foo" ).css( { "width": "0%" } ).css( "width" );
1069         } catch ( e ) {
1070                 result = false;
1071         }
1072
1073         assert.ok( result, "elem.runtimeStyle does not throw exception" );
1074 } );
1075
1076 QUnit.test( "computed margins (trac-3333; gh-2237)", function( assert ) {
1077         assert.expect( 2 );
1078
1079         var $div = jQuery( "#foo" ),
1080                 $child = jQuery( "#en" );
1081
1082         $div.css( {
1083                 "width": "1px",
1084                 "marginRight": 0
1085         } );
1086         assert.equal( $div.css( "marginRight" ), "0px",
1087                 "marginRight correctly calculated with a width and display block" );
1088
1089         $div.css( {
1090                 position: "absolute",
1091                 top: 0,
1092                 left: 0,
1093                 width: "100px"
1094         } );
1095         $child.css( {
1096                 width: "50px",
1097                 margin: "auto"
1098         } );
1099         assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
1100 } );
1101
1102 QUnit.test( "box model properties incorrectly returning % instead of px, see trac-10639 and trac-12088", function( assert ) {
1103         assert.expect( 2 );
1104
1105         var container = jQuery( "<div></div>" ).width( 400 ).appendTo( "#qunit-fixture" ),
1106                 el = jQuery( "<div></div>" ).css( { "width": "50%", "marginRight": "50%" } ).appendTo( container ),
1107                 el2 = jQuery( "<div></div>" ).css( { "width": "50%", "minWidth": "300px", "marginLeft": "25%" } ).appendTo( container );
1108
1109         assert.equal( el.css( "marginRight" ), "200px", "css('marginRight') returning % instead of px, see trac-10639" );
1110         assert.equal( el2.css( "marginLeft" ), "100px", "css('marginLeft') returning incorrect pixel value, see trac-12088" );
1111 } );
1112
1113 QUnit.test( "widows & orphans trac-8936", function( assert ) {
1114
1115         var $p = jQuery( "<p>" ).appendTo( "#qunit-fixture" );
1116
1117         assert.expect( 2 );
1118
1119         $p.css( {
1120                 "widows": 3,
1121                 "orphans": 3
1122         } );
1123
1124         assert.equal( $p.css( "widows" ) || jQuery.style( $p[ 0 ], "widows" ), 3, "widows correctly set to 3" );
1125         assert.equal( $p.css( "orphans" ) || jQuery.style( $p[ 0 ], "orphans" ), 3, "orphans correctly set to 3" );
1126
1127         $p.remove();
1128 } );
1129
1130 QUnit.test( "can't get css for disconnected in IE<9, see trac-10254 and trac-8388", function( assert ) {
1131         assert.expect( 2 );
1132         var span, div;
1133
1134         span = jQuery( "<span></span>" ).css( "background-image", "url(" + baseURL + "1x1.jpg)" );
1135         assert.notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see trac-10254" );
1136
1137         div = jQuery( "<div></div>" ).css( "top", 10 );
1138         assert.equal( div.css( "top" ), "10px", "can't get top in IE<9, see trac-8388" );
1139 } );
1140
1141 QUnit.test( "Ensure styles are retrieving from parsed html on document fragments", function( assert ) {
1142         assert.expect( 1 );
1143
1144         var $span = jQuery(
1145                 jQuery.parseHTML( "<span style=\"font-family: Cuprum,sans-serif; font-size: 14px; color: #999999;\">some text</span>" )
1146         );
1147
1148         assert.equal( $span.css( "font-size" ), "14px", "Font-size retrievable on parsed HTML node" );
1149 } );
1150
1151 QUnit.test( "can't get background-position in IE<9, see trac-10796", function( assert ) {
1152         var div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" ),
1153                 units = [
1154                         "0 0",
1155                         "12px 12px",
1156                         "13px 12em",
1157                         "12em 13px",
1158                         "12em center",
1159                         "+12em center",
1160                         "12.2em center",
1161                         "center center"
1162                 ],
1163                 l = units.length,
1164                 i = 0;
1165
1166         assert.expect( l );
1167
1168         for ( ; i < l; i++ ) {
1169                 div.css( "background-position", units [ i ] );
1170                 assert.ok( div.css( "background-position" ), "can't get background-position in IE<9, see trac-10796" );
1171         }
1172 } );
1173
1174 if ( includesModule( "offset" ) ) {
1175         QUnit.test( "percentage properties for left and top should be transformed to pixels, see trac-9505", function( assert ) {
1176                 assert.expect( 2 );
1177                 var parent = jQuery( "<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>" ).appendTo( "#qunit-fixture" ),
1178                         div = jQuery( "<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>" ).appendTo( parent );
1179
1180                 assert.equal( div.css( "top" ), "100px", "position properties not transformed to pixels, see trac-9505" );
1181                 assert.equal( div.css( "left" ), "100px", "position properties not transformed to pixels, see trac-9505" );
1182         } );
1183 }
1184
1185 QUnit.test( "Do not append px (trac-9548, trac-12990, gh-2792)", function( assert ) {
1186         assert.expect( 4 );
1187
1188         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1189
1190         $div.css( "fill-opacity", 1 );
1191         assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
1192
1193         $div.css( "font-size", "27px" );
1194         $div.css( "line-height", 2 );
1195         assert.equal( $div.css( "line-height" ), "54px", "Do not append px to 'line-height'" );
1196
1197         $div.css( "column-count", 1 );
1198         if ( $div.css( "column-count" ) !== undefined ) {
1199                 assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" );
1200         } else {
1201                 assert.ok( true, "No support for column-count CSS property" );
1202         }
1203
1204         $div.css( "animation-iteration-count", 2 );
1205         if ( $div.css( "animation-iteration-count" ) !== undefined ) {
1206                 // if $div.css( "animation-iteration-count" ) return "1",
1207                 // it actually return the default value of animation-iteration-count
1208                 assert.equal( $div.css( "animation-iteration-count" ), 2, "Do not append px to 'animation-iteration-count'" );
1209         } else {
1210                 assert.ok( true, "No support for animation-iteration-count CSS property" );
1211         }
1212 } );
1213
1214
1215 // IE doesn't support the standard version of CSS Grid.
1216 QUnit.testUnlessIE( "Do not append px to CSS Grid-related properties (gh-4007)",
1217         function( assert ) {
1218
1219         assert.expect( 12 );
1220
1221         var prop, value, subProp, subValue, $div,
1222                 gridProps = {
1223                         "grid-area": {
1224                                 "grid-row-start": "2",
1225                                 "grid-row-end": "auto",
1226                                 "grid-column-start": "auto",
1227                                 "grid-column-end": "auto"
1228                         },
1229                         "grid-column": {
1230                                 "grid-column-start": "2",
1231                                 "grid-column-end": "auto"
1232                         },
1233                         "grid-column-end": true,
1234                         "grid-column-start": true,
1235                         "grid-row": {
1236                                 "grid-row-start": "2",
1237                                 "grid-row-end": "auto"
1238                         },
1239                         "grid-row-end": true,
1240                         "grid-row-start": true
1241                 };
1242
1243         for ( prop in gridProps ) {
1244                 $div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" );
1245                 $div.css( prop, 2 );
1246
1247                 value = gridProps[ prop ];
1248
1249                 if ( typeof value === "object" ) {
1250                         for ( subProp in value ) {
1251                                 subValue = value[ subProp ];
1252                                 assert.equal( $div.css( subProp ), subValue,
1253                                         "Do not append px to '" + prop + "' (retrieved " + subProp + ")" );
1254                         }
1255                 } else {
1256                         assert.equal( $div.css( prop ), "2", "Do not append px to '" + prop + "'" );
1257                 }
1258
1259                 $div.remove();
1260         }
1261 } );
1262
1263 QUnit.test( "Do not append px to most properties not accepting integer values", function( assert ) {
1264         assert.expect( 3 );
1265
1266         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1267
1268         $div.css( "font-size", "27px" );
1269
1270         $div.css( "font-size", 2 );
1271         assert.equal( $div.css( "font-size" ), "27px", "Do not append px to 'font-size'" );
1272
1273         $div.css( "fontSize", 2 );
1274         assert.equal( $div.css( "fontSize" ), "27px", "Do not append px to 'fontSize'" );
1275
1276         $div.css( "letter-spacing", "2px" );
1277         $div.css( "letter-spacing", 3 );
1278         assert.equal( $div.css( "letter-spacing" ), "2px", "Do not append px to 'letter-spacing'" );
1279 } );
1280
1281 QUnit.test( "Append px to whitelisted properties", function( assert ) {
1282         var prop,
1283                 $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1284                 whitelist = {
1285                         margin: "marginTop",
1286                         marginTop: undefined,
1287                         marginRight: undefined,
1288                         marginBottom: undefined,
1289                         marginLeft: undefined,
1290                         padding: "paddingTop",
1291                         paddingTop: undefined,
1292                         paddingRight: undefined,
1293                         paddingBottom: undefined,
1294                         paddingLeft: undefined,
1295                         top: undefined,
1296                         right: undefined,
1297                         bottom: undefined,
1298                         left: undefined,
1299                         width: undefined,
1300                         height: undefined,
1301                         minWidth: undefined,
1302                         minHeight: undefined,
1303                         maxWidth: undefined,
1304                         maxHeight: undefined,
1305                         border: "borderTopWidth",
1306                         borderWidth: "borderTopWidth",
1307                         borderTop: "borderTopWidth",
1308                         borderTopWidth: undefined,
1309                         borderRight: "borderRightWidth",
1310                         borderRightWidth: undefined,
1311                         borderBottom: "borderBottomWidth",
1312                         borderBottomWidth: undefined,
1313                         borderLeft: "borderLeftWidth",
1314                         borderLeftWidth: undefined
1315                 };
1316
1317         assert.expect( ( Object.keys( whitelist ).length ) * 2 );
1318
1319         for ( prop in whitelist ) {
1320                 var propToCheck = whitelist[ prop ] || prop,
1321                         kebabProp = prop.replace( /[A-Z]/g, function( match ) {
1322                                 return "-" + match.toLowerCase();
1323                         } ),
1324                         kebabPropToCheck = propToCheck.replace( /[A-Z]/g, function( match ) {
1325                                 return "-" + match.toLowerCase();
1326                         } );
1327                 $div.css( prop, 3 )
1328                         .css( "position", "absolute" )
1329                         .css( "border-style", "solid" );
1330                 assert.equal( $div.css( propToCheck ), "3px", "Append px to '" + prop + "'" );
1331                 $div.css( kebabProp, 3 )
1332                         .css( "position", "absolute" )
1333                         .css( "border-style", "solid" );
1334                 assert.equal( $div.css( kebabPropToCheck ), "3px", "Append px to '" + kebabProp + "'" );
1335         }
1336 } );
1337
1338 QUnit.test( "css('width') and css('height') should respect box-sizing, see trac-11004", function( assert ) {
1339         assert.expect( 4 );
1340
1341         var el_dis = jQuery( "<div style='width:300px;height:300px;margin:2px;padding:2px;box-sizing:border-box;'>test</div>" ),
1342                 el = el_dis.clone().appendTo( "#qunit-fixture" );
1343
1344         assert.equal( el.css( "width" ), el.css( "width", el.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing, see trac-11004" );
1345         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 trac-11004" );
1346         assert.equal( el.css( "height" ), el.css( "height", el.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing, see trac-11004" );
1347         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 trac-11004" );
1348 } );
1349
1350 QUnit.test( "table rows width/height should be unaffected by inline styles", function( assert ) {
1351         assert.expect( 2 );
1352
1353         var table = jQuery(
1354                 "<table>\n" +
1355                 "  <tr id=\"row\" style=\"height: 1px; width: 1px;\">\n" +
1356                 "    <td>\n" +
1357                 "      <div style=\"height: 100px; width: 100px;\"></div>\n" +
1358                 "    </div>\n" +
1359                 "  </tr>\n" +
1360                 "</table>"
1361         );
1362         var tr = table.find( "tr" );
1363
1364         table.appendTo( "#qunit-fixture" );
1365
1366         assert.ok( parseInt( tr.css( "width" ) ) > 10, "tr width unaffected by inline style" );
1367         assert.ok( parseInt( tr.css( "height" ) ) > 10, "tr height unaffected by inline style" );
1368 } );
1369
1370 testIframe(
1371         "css('width') should work correctly before document ready (trac-14084)",
1372         "css/cssWidthBeforeDocReady.html",
1373         function( assert, jQuery, window, document, cssWidthBeforeDocReady ) {
1374                 assert.expect( 1 );
1375                 assert.strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
1376         }
1377 );
1378
1379 testIframe(
1380         "css('width') should work correctly with browser zooming",
1381         "css/cssWidthBrowserZoom.html",
1382         function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) {
1383                 assert.expect( 2 );
1384                 assert.strictEqual( widthBeforeSet, "100px", "elem.css('width') works correctly with browser zoom" );
1385                 assert.strictEqual( widthAfterSet, "100px", "elem.css('width', val) works correctly with browser zoom" );
1386         }
1387 );
1388
1389 QUnit.testUnlessIE( "css('width') and css('height') should return fractional values for nodes in the document", function( assert ) {
1390         assert.expect( 2 );
1391
1392         var el = jQuery( "<div class='test-div'></div>" ).appendTo( "#qunit-fixture" );
1393         jQuery( "<style>.test-div { width: 33.3px; height: 88.8px; }</style>" ).appendTo( "#qunit-fixture" );
1394
1395         assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
1396                 "css('width') should return fractional values" );
1397         assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
1398                 "css('height') should return fractional values" );
1399 } );
1400
1401 QUnit.testUnlessIE( "css('width') and css('height') should return fractional values for disconnected nodes", function( assert ) {
1402         assert.expect( 2 );
1403
1404         var el = jQuery( "<div style='width: 33.3px; height: 88.8px;'></div>" );
1405
1406         assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
1407                 "css('width') should return fractional values" );
1408         assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
1409                 "css('height') should return fractional values" );
1410 } );
1411
1412 QUnit.test( "certain css values of 'normal' should be convertible to a number, see trac-8627", function( assert ) {
1413         assert.expect( 3 );
1414
1415         var el = jQuery( "<div style='letter-spacing:normal;font-weight:normal;'>test</div>" ).appendTo( "#qunit-fixture" );
1416
1417         assert.ok( !isNaN( parseFloat( el.css( "letterSpacing" ) ) ), "css('letterSpacing') not convertible to number, see trac-8627" );
1418         assert.ok( !isNaN( parseFloat( el.css( "fontWeight" ) ) ), "css('fontWeight') not convertible to number, see trac-8627" );
1419         assert.equal( typeof el.css( "fontWeight" ), "string", ".css() returns a string" );
1420 } );
1421
1422 QUnit.test( "cssHooks - expand", function( assert ) {
1423         assert.expect( 15 );
1424         var result,
1425                 properties = {
1426                         margin: [ "marginTop", "marginRight", "marginBottom", "marginLeft" ],
1427                         borderWidth: [ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ],
1428                         padding: [ "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ]
1429                 };
1430
1431         jQuery.each( properties, function( property, keys ) {
1432                 var hook = jQuery.cssHooks[ property ],
1433                         expected = {};
1434                 jQuery.each( keys, function( _, key ) {
1435                         expected[ key ] = 10;
1436                 } );
1437                 result = hook.expand( 10 );
1438                 assert.deepEqual( result, expected, property + " expands properly with a number" );
1439
1440                 jQuery.each( keys, function( _, key ) {
1441                         expected[ key ] = "10px";
1442                 } );
1443                 result = hook.expand( "10px" );
1444                 assert.deepEqual( result, expected, property + " expands properly with '10px'" );
1445
1446                 expected[ keys[ 1 ] ] = expected[ keys[ 3 ] ] = "20px";
1447                 result = hook.expand( "10px 20px" );
1448                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px'" );
1449
1450                 expected[ keys[ 2 ] ] = "30px";
1451                 result = hook.expand( "10px 20px 30px" );
1452                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
1453
1454                 expected[ keys[ 3 ] ] = "40px";
1455                 result = hook.expand( "10px 20px 30px 40px" );
1456                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
1457
1458         } );
1459
1460 } );
1461
1462 QUnit.test( "css opacity consistency across browsers (trac-12685)", function( assert ) {
1463         assert.expect( 3 );
1464
1465         var el,
1466                 fixture = jQuery( "#qunit-fixture" );
1467
1468         // Append style element
1469         jQuery( "<style>.opacity_t12685 { opacity: 0.1; }</style>" ).appendTo( fixture );
1470
1471         el = jQuery( "<div class='opacity_t12685'></div>" ).appendTo( fixture );
1472
1473         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "opacity from style sheet" );
1474         el.css( "opacity", 0.3 );
1475         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 30, "override opacity" );
1476         el.css( "opacity", "" );
1477         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "remove opacity override" );
1478 } );
1479
1480 QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( ":visible/:hidden selectors", function( assert ) {
1481         assert.expect( 18 );
1482
1483         var $div, $table, $a, $br;
1484
1485         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1486         jQuery( "#nothiddendiv" ).css( { display: "none" } );
1487         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1488         jQuery( "#nothiddendiv" ).css( { "display": "block" } );
1489         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1490         assert.ok( !jQuery( window ).is( ":visible" ), "Calling is(':visible') on window does not throw an exception (trac-10267)." );
1491         assert.ok( !jQuery( document ).is( ":visible" ), "Calling is(':visible') on document does not throw an exception (trac-10267)." );
1492
1493         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1494         jQuery( "#nothiddendiv" ).css( "display", "none" );
1495         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1496         jQuery( "#nothiddendiv" ).css( "display", "block" );
1497         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1498
1499         assert.ok( jQuery( "#siblingspan" ).is( ":visible" ), "Span with no content is visible" );
1500         $div = jQuery( "<div><span></span></div>" ).appendTo( "#qunit-fixture" );
1501         assert.equal( $div.find( ":visible" ).length, 1, "Span with no content is visible" );
1502         $div.css( { width: 0, height: 0, overflow: "hidden" } );
1503         assert.ok( $div.is( ":visible" ), "Div with width and height of 0 is still visible (gh-2227)" );
1504
1505         $br = jQuery( "<br/>" ).appendTo( "#qunit-fixture" );
1506         assert.ok( $br.is( ":visible" ), "br element is visible" );
1507
1508         $table = jQuery( "#table" );
1509         $table.html( "<tr><td style='display:none'>cell</td><td>cell</td></tr>" );
1510         assert.equal( jQuery( "#table td:visible" ).length, 1, "hidden cell is not perceived as visible (trac-4512). Works on table elements" );
1511         $table.css( "display", "none" ).html( "<tr><td>cell</td><td>cell</td></tr>" );
1512         assert.equal( jQuery( "#table td:visible" ).length, 0, "hidden cell children not perceived as visible (trac-4512)" );
1513
1514         if ( QUnit.jQuerySelectorsPos ) {
1515                 assert.t( "Is Visible", "#qunit-fixture div:visible:lt(2)", [ "foo", "nothiddendiv" ] );
1516         } else {
1517                 assert.ok( "skip", "Positional selectors are not supported" );
1518         }
1519
1520         assert.t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
1521         assert.t( "Is Hidden", "#form input:hidden", [ "hidden1", "hidden2" ] );
1522
1523         $a = jQuery( "<a href='#'><h1>Header</h1></a>" ).appendTo( "#qunit-fixture" );
1524         assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
1525 } );
1526
1527 QUnit.test( "Keep the last style if the new one isn't recognized by the browser (trac-14836)", function( assert ) {
1528         assert.expect( 1 );
1529
1530         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "fake value" );
1531         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting an unrecognized value" );
1532 } );
1533
1534 QUnit.test(
1535         "Keep the last style if the new one is a non-empty whitespace (gh-3204)",
1536         function( assert ) {
1537         assert.expect( 1 );
1538
1539         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", " " );
1540         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting to a space" );
1541 } );
1542
1543 QUnit.test( "Reset the style if set to an empty string", function( assert ) {
1544         assert.expect( 1 );
1545         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "" );
1546
1547         // Some browsers return an empty string; others "static". Both those cases mean the style
1548         // was reset successfully so accept them both.
1549         assert.equal( el.css( "position" ) || "static", "static",
1550                 "The style can be reset by setting to an empty string" );
1551 } );
1552
1553 QUnit.test(
1554         "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (trac-8908)",
1555         function( assert ) {
1556                 assert.expect( 24 );
1557                 var done = assert.async();
1558                 var styles = [ {
1559                                 name: "backgroundAttachment",
1560                                 value: [ "fixed" ]
1561                         }, {
1562                                 name: "backgroundColor",
1563                                 value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ]
1564                         }, {
1565
1566                                 // Firefox returns auto's value
1567                                 name: "backgroundImage",
1568                                 value: [ "url('test.png')", "url(" + baseURL + "test.png)", "url(\"" + baseURL + "test.png\")" ]
1569                         }, {
1570                                 name: "backgroundPosition",
1571                                 value: [ "5% 5%" ]
1572                         }, {
1573
1574                                 // Firefox returns no-repeat
1575                                 name: "backgroundRepeat",
1576                                 value: [ "repeat-y" ]
1577                         }, {
1578                                 name: "backgroundClip",
1579                                 value: [ "padding-box" ]
1580                         }, {
1581                                 name: "backgroundOrigin",
1582                                 value: [ "content-box" ]
1583                         }, {
1584                                 name: "backgroundSize",
1585                                 value: [ "80px 60px" ]
1586                 } ];
1587
1588                 jQuery.each( styles, function( index, style ) {
1589                         var $clone, $clonedChildren,
1590                                 $source = jQuery( "#firstp" ),
1591                                 source = $source[ 0 ],
1592                                 $children = $source.children();
1593
1594                         if ( source.style[ style.name ] === undefined ) {
1595                                 assert.ok( true, style.name +  ": style isn't supported and therefore not an issue" );
1596                                 assert.ok( true );
1597
1598                                 return true;
1599                         }
1600
1601                         $source.css( style.name, style.value[ 0 ] );
1602                         $children.css( style.name, style.value[ 0 ] );
1603
1604                         $clone = $source.clone();
1605                         $clonedChildren = $clone.children();
1606
1607                         $clone.css( style.name, "" );
1608                         $clonedChildren.css( style.name, "" );
1609
1610                         window.setTimeout( function() {
1611                                 assert.notEqual( $clone.css( style.name ), style.value[ 0 ], "Cloned css was changed" );
1612
1613                                 assert.ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
1614                                         "Clearing clone.css() doesn't affect source.css(): " + style.name +
1615                                         "; result: " + $source.css( style.name ) +
1616                                         "; expected: " + style.value.join( "," ) );
1617
1618                                 assert.ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
1619                                         "Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
1620                                         "; result: " + $children.css( style.name ) +
1621                                         "; expected: " + style.value.join( "," ) );
1622                         }, 100 );
1623                 } );
1624
1625                 window.setTimeout( done, 1000 );
1626         }
1627 );
1628
1629 QUnit.test( "Don't append px to CSS \"order\" value (trac-14049)", function( assert ) {
1630         assert.expect( 1 );
1631
1632         var $elem = jQuery( "<div></div>" );
1633
1634         $elem.css( "order", 2 );
1635         assert.equal( $elem.css( "order" ), "2", "2 on order" );
1636 } );
1637
1638 QUnit.test( "Do not throw on frame elements from css method (trac-15098)", function( assert ) {
1639         assert.expect( 1 );
1640
1641         var frameWin, frameDoc,
1642                 frameElement = document.createElement( "iframe" ),
1643                 frameWrapDiv = document.createElement( "div" );
1644
1645         frameWrapDiv.appendChild( frameElement );
1646         document.body.appendChild( frameWrapDiv );
1647         frameWin = frameElement.contentWindow;
1648         frameDoc = frameWin.document;
1649         frameDoc.open();
1650         frameDoc.write( "<!doctype html><html><body><div>Hi</div></body></html>" );
1651         frameDoc.close();
1652
1653         frameWrapDiv.style.display = "none";
1654
1655         try {
1656                 jQuery( frameDoc.body ).css( "direction" );
1657                 assert.ok( true, "It didn't throw" );
1658         } catch ( _ ) {
1659                 assert.ok( false, "It did throw" );
1660         }
1661 } );
1662
1663 ( function() {
1664         var vendorPrefixes = [ "Webkit", "Moz", "ms" ];
1665
1666         QUnit.test( "Don't default to a cached previously used wrong prefixed name (gh-2015)", function( assert ) {
1667
1668                 // Note: this test needs a property we know is only supported in a prefixed version
1669                 // by at least one of our main supported browsers. This may get out of date so let's
1670                 // use -(webkit|moz)-appearance as well as those two are not on a standards track.
1671                 var appearanceName, transformName, elem, elemStyle,
1672                         transformVal = "translate(5px, 2px)",
1673                         emptyStyle = document.createElement( "div" ).style;
1674
1675                 if ( "appearance" in emptyStyle ) {
1676                         appearanceName = "appearance";
1677                 } else {
1678                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1679                                 var prefixedProp = prefix + "Appearance";
1680                                 if ( prefixedProp in emptyStyle ) {
1681                                         appearanceName = prefixedProp;
1682                                 }
1683                         } );
1684                 }
1685
1686                 if ( "transform" in emptyStyle ) {
1687                         transformName = "transform";
1688                 } else {
1689                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1690                                 var prefixedProp = prefix + "Transform";
1691                                 if ( prefixedProp in emptyStyle ) {
1692                                         transformName = prefixedProp;
1693                                 }
1694                         } );
1695                 }
1696
1697                 assert.expect( !!appearanceName + !!transformName + 1 );
1698
1699                 elem = jQuery( "<div></div>" )
1700                         .css( {
1701                                 msAppearance: "none",
1702                                 appearance: "none",
1703
1704                                 // Only the ms prefix is used to make sure we haven't e.g. set
1705                                 // webkitTransform ourselves in the test.
1706                                 msTransform: transformVal,
1707                                 transform: transformVal
1708                         } );
1709                 elemStyle = elem[ 0 ].style;
1710
1711                 if ( appearanceName ) {
1712                         assert.equal( elemStyle[ appearanceName ], "none", "setting properly-prefixed appearance" );
1713                 }
1714                 if ( transformName ) {
1715                         assert.equal( elemStyle[ transformName ], transformVal, "setting properly-prefixed transform" );
1716                 }
1717                 assert.equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
1718         } );
1719
1720         QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version", function( assert ) {
1721                 assert.expect( 1 );
1722
1723                 var elem = jQuery( "<div></div>" ),
1724                         style = elem[ 0 ].style;
1725                 style.MozFakeProperty = "old value";
1726                 elem.css( "fakeProperty", "new value" );
1727
1728                 assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
1729         } );
1730
1731 } )();
1732
1733 // IE doesn't support CSS variables.
1734 QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
1735
1736         jQuery( "#qunit-fixture" ).append(
1737                 "<style>\n" +
1738                 "    .test__customProperties {\n" +
1739                 "        --prop1:val1;\n" +
1740                 "        --prop2: val2;\n" +
1741                 "        --prop3:   val3;\n" +
1742                 "        --prop4:val4 ;\n" +
1743                 "        --prop5:val5   ;\n" +
1744                 "        --prop6: val6 ;\n" +
1745                 "        --prop7:   val7   ;\n" +
1746                 "        --prop8:\"val8\";\n" +
1747                 "        --prop9:'val9';\n" +
1748                 "        --prop10:\f\r\n\t val10 \f\r\n\t;\n" +
1749                 "        --prop11:\u000C\u000D\u000A\u0009\u0020val11\u0020\u0009\u000A\u000D\u000C;\n" +
1750                 "        --prop12:\u000Bval12\u000B;\n" +
1751                 "        --space: ;\n" +
1752                 "        --empty:;\n" +
1753                 "    }\n" +
1754                 "</style>"
1755         );
1756
1757         var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1758                 $elem = jQuery( "<div>" ).addClass( "test__customProperties" )
1759                         .appendTo( "#qunit-fixture" ),
1760                 webkitOrBlink = /\webkit\b/i.test( navigator.userAgent ),
1761                 expected = 20;
1762
1763         if ( webkitOrBlink ) {
1764                 expected -= 2;
1765         }
1766         assert.expect( expected );
1767
1768         div.css( "--color", "blue" );
1769         assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
1770
1771         div.css( "--color", "yellow" );
1772         assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
1773
1774         div.css( { "--color": "red" } );
1775         assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
1776
1777         div.css( { "--mixedCase": "green" } );
1778         div.css( { "--mixed-case": "red" } );
1779         assert.equal( div.css( "--mixedCase" ), "green",
1780                 "Modified CSS custom property with mixed case" );
1781
1782         div.css( { "--theme-dark": "purple" } );
1783         div.css( { "--themeDark": "red" } );
1784         assert.equal( div.css( "--theme-dark" ), "purple",
1785                 "Modified CSS custom property with dashed name" );
1786
1787         assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
1788
1789         assert.equal( $elem.css( "--prop2" ), "val2", "Preceding whitespace trimmed" );
1790         assert.equal( $elem.css( "--prop3" ), "val3", "Multiple preceding whitespace trimmed" );
1791         assert.equal( $elem.css( "--prop4" ), "val4", "Following whitespace trimmed" );
1792         assert.equal( $elem.css( "--prop5" ), "val5", "Multiple Following whitespace trimmed" );
1793         assert.equal( $elem.css( "--prop6" ), "val6", "Preceding and Following whitespace trimmed" );
1794         assert.equal( $elem.css( "--prop7" ), "val7", "Multiple preceding and following whitespace trimmed" );
1795
1796         // Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+
1797         // Chrome treats single quotes as double ones.
1798         // Safari treats double quotes as single ones.
1799         if ( !webkitOrBlink ) {
1800                 assert.equal( $elem.css( "--prop8" ), "\"val8\"", "Works with double quotes" );
1801                 assert.equal( $elem.css( "--prop9" ), "'val9'", "Works with single quotes" );
1802         }
1803
1804         assert.equal( $elem.css( "--prop10" ), "val10", "Multiple preceding and following escaped unicode whitespace trimmed" );
1805         assert.equal( $elem.css( "--prop11" ), "val11", "Multiple preceding and following unicode whitespace trimmed" );
1806         assert.equal( $elem.css( "--prop12" ), "\u000Bval12\u000B", "Multiple preceding and following non-CSS whitespace reserved" );
1807         assert.equal( $elem.css( "--space" ), undefined );
1808         assert.equal( $elem.css( "--empty" ), undefined );
1809         assert.equal( $elem.css( "--nonexistent" ), undefined );
1810 } );
1811
1812 // IE doesn't support CSS variables.
1813 QUnit.testUnlessIE( "Don't append px to CSS vars", function( assert ) {
1814
1815         assert.expect( 3 );
1816
1817         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1818
1819         $div
1820                 .css( "--a", 3 )
1821                 .css( "--line-height", 4 )
1822                 .css( "--lineHeight", 5 );
1823
1824         assert.equal( $div.css( "--a" ), "3", "--a: 3" );
1825         assert.equal( $div.css( "--line-height" ), "4", "--line-height: 4" );
1826         assert.equal( $div.css( "--lineHeight" ), "5", "--lineHeight: 5" );
1827 } );
1828
1829 // Support: IE 11+
1830 // This test requires Grid to be *not supported* to work.
1831 if ( QUnit.isIE ) {
1832         // Make sure explicitly provided IE vendor prefix (`-ms-`) is not converted
1833         // to a non-working `Ms` prefix in JavaScript.
1834         QUnit.test( "IE vendor prefixes are not mangled", function( assert ) {
1835                 assert.expect( 1 );
1836
1837                 var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1838
1839                 div.css( "-ms-grid-row", "1" );
1840
1841                 assert.strictEqual( div.css( "-ms-grid-row" ), "1", "IE vendor prefixing" );
1842         } );
1843 }
1844
1845 }