test/unit/css.js

   1 if ( jQuery.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/>" );
  17
  18         // These should be "auto" (or some better value)
  19         // temporarily provide "0px" for backwards compat
  20         assert.equal( div.css( "width" ), "0px", "Width on disconnected node." );
  21         assert.equal( div.css( "height" ), "0px", "Height on disconnected node." );
  22
  23         div.css( { "width": 4, "height": 4 } );
  24
  25         assert.equal( div.css( "width" ), "4px", "Width on disconnected node." );
  26         assert.equal( div.css( "height" ), "4px", "Height on disconnected node." );
  27
  28         div2 = jQuery( "<div style='display:none;'><input type='text' style='height:20px;'/><textarea style='height:20px;'/><div style='height:20px;'></div></div>" ).appendTo( "body" );
  29
  30         assert.equal( div2.find( "input" ).css( "height" ), "20px", "Height on hidden input." );
  31         assert.equal( div2.find( "textarea" ).css( "height" ), "20px", "Height on hidden textarea." );
  32         assert.equal( div2.find( "div" ).css( "height" ), "20px", "Height on hidden div." );
  33
  34         div2.remove();
  35
  36         // handle negative numbers by setting to zero #11604
  37         jQuery( "#nothiddendiv" ).css( { "width": 1, "height": 1 } );
  38
  39         width = parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) );
  40         height = parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) );
  41         jQuery( "#nothiddendiv" ).css( { "overflow":"hidden", "width": -1, "height": -1 } );
  42         assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) ), 0, "Test negative width set to 0" );
  43         assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) ), 0, "Test negative height set to 0" );
  44
  45         assert.equal( jQuery( "<div style='display: none;'/>" ).css( "display" ), "none", "Styles on disconnected nodes" );
  46
  47         jQuery( "#floatTest" ).css( { "float": "right" } );
  48         assert.equal( jQuery( "#floatTest" ).css( "float" ), "right", "Modified CSS float using \"float\": Assert float is right" );
  49         jQuery( "#floatTest" ).css( { "font-size": "30px" } );
  50         assert.equal( jQuery( "#floatTest" ).css( "font-size" ), "30px", "Modified CSS font-size: Assert font-size is 30px" );
  51         jQuery.each( "0,0.25,0.5,0.75,1".split( "," ), function( i, n ) {
  52                 jQuery( "#foo" ).css( { "opacity": n } );
  53
  54                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a String" );
  55                 jQuery( "#foo" ).css( { "opacity": parseFloat( n ) } );
  56                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a Number" );
  57         } );
  58         jQuery( "#foo" ).css( { "opacity": "" } );
  59         assert.equal( jQuery( "#foo" ).css( "opacity" ), "1", "Assert opacity is 1 when set to an empty String" );
  60
  61         assert.equal( jQuery( "#empty" ).css( "opacity" ), "0", "Assert opacity is accessible" );
  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/>" ).css( { position: "absolute", "z-index": 1000 } ).appendTo( "#qunit-fixture" );
 115         assert.strictEqual( div.css( "z-index" ), "1000",
 116                 "Make sure that a string z-index is returned from css('z-index') (#14432)." );
 117 } );
 118
 119 QUnit.test( "css() explicit and relative values", function( assert ) {
 120         assert.expect( 29 );
 121
 122         var $elem = jQuery( "#nothiddendiv" );
 123
 124         $elem.css( { "width": 1, "height": 1, "paddingLeft": "1px", "opacity": 1 } );
 125         assert.equal( $elem.css( "width" ), "1px", "Initial css set or width/height works (hash)" );
 126         assert.equal( $elem.css( "paddingLeft" ), "1px", "Initial css set of paddingLeft works (hash)" );
 127         assert.equal( $elem.css( "opacity" ), "1", "Initial css set of opacity works (hash)" );
 128
 129         $elem.css( { width: "+=9" } );
 130         assert.equal( $elem.css( "width" ), "10px", "'+=9' on width (hash)" );
 131
 132         $elem.css( { "width": "-=9" } );
 133         assert.equal( $elem.css( "width" ), "1px", "'-=9' on width (hash)" );
 134
 135         $elem.css( { "width": "+=9px" } );
 136         assert.equal( $elem.css( "width" ), "10px", "'+=9px' on width (hash)" );
 137
 138         $elem.css( { "width": "-=9px" } );
 139         assert.equal( $elem.css( "width" ), "1px", "'-=9px' on width (hash)" );
 140
 141         $elem.css( "width", "+=9" );
 142         assert.equal( $elem.css( "width" ), "10px", "'+=9' on width (params)" );
 143
 144         $elem.css( "width", "-=9" );
 145         assert.equal( $elem.css( "width" ), "1px", "'-=9' on width (params)" );
 146
 147         $elem.css( "width", "+=9px" );
 148         assert.equal( $elem.css( "width" ), "10px", "'+=9px' on width (params)" );
 149
 150         $elem.css( "width", "-=9px" );
 151         assert.equal( $elem.css( "width" ), "1px", "'-=9px' on width (params)" );
 152
 153         $elem.css( "width", "-=-9px" );
 154         assert.equal( $elem.css( "width" ), "10px", "'-=-9px' on width (params)" );
 155
 156         $elem.css( "width", "+=-9px" );
 157         assert.equal( $elem.css( "width" ), "1px", "'+=-9px' on width (params)" );
 158
 159         $elem.css( { "paddingLeft": "+=4" } );
 160         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on paddingLeft (hash)" );
 161
 162         $elem.css( { "paddingLeft": "-=4" } );
 163         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on paddingLeft (hash)" );
 164
 165         $elem.css( { "paddingLeft": "+=4px" } );
 166         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on paddingLeft (hash)" );
 167
 168         $elem.css( { "paddingLeft": "-=4px" } );
 169         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on paddingLeft (hash)" );
 170
 171         $elem.css( { "padding-left": "+=4" } );
 172         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on padding-left (hash)" );
 173
 174         $elem.css( { "padding-left": "-=4" } );
 175         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on padding-left (hash)" );
 176
 177         $elem.css( { "padding-left": "+=4px" } );
 178         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on padding-left (hash)" );
 179
 180         $elem.css( { "padding-left": "-=4px" } );
 181         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on padding-left (hash)" );
 182
 183         $elem.css( "paddingLeft", "+=4" );
 184         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on paddingLeft (params)" );
 185
 186         $elem.css( "paddingLeft", "-=4" );
 187         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on paddingLeft (params)" );
 188
 189         $elem.css( "padding-left", "+=4px" );
 190         assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on padding-left (params)" );
 191
 192         $elem.css( "padding-left", "-=4px" );
 193         assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on padding-left (params)" );
 194
 195         $elem.css( { "opacity": "-=0.5" } );
 196         assert.equal( $elem.css( "opacity" ), "0.5", "'-=0.5' on opacity (hash)" );
 197
 198         $elem.css( { "opacity": "+=0.5" } );
 199         assert.equal( $elem.css( "opacity" ), "1", "'+=0.5' on opacity (hash)" );
 200
 201         $elem.css( "opacity", "-=0.5" );
 202         assert.equal( $elem.css( "opacity" ), "0.5", "'-=0.5' on opacity (params)" );
 203
 204         $elem.css( "opacity", "+=0.5" );
 205         assert.equal( $elem.css( "opacity" ), "1", "'+=0.5' on opacity (params)" );
 206 } );
 207
 208 QUnit.test( "css() non-px relative values (gh-1711)", function( assert ) {
 209         assert.expect( 17 );
 210
 211         var cssCurrent,
 212                 units = {},
 213                 $child = jQuery( "#nothiddendivchild" ),
 214                 add = function( prop, val, unit ) {
 215                         var difference,
 216                                 adjustment = ( val < 0 ? "-=" : "+=" ) + Math.abs( val ) + unit,
 217                                 message = prop + ": " + adjustment,
 218                                 cssOld = cssCurrent,
 219                                 expected = cssOld + val * units[ prop ][ unit ];
 220
 221                         // Apply change
 222                         $child.css( prop, adjustment );
 223                         cssCurrent = parseFloat( $child.css( prop ) );
 224                         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/>" )
 279                         .css( { position: "absolute", width: "400px", fontSize: "4px" } )
 280                         .appendTo( "#qunit-fixture" ),
 281                 $el = jQuery( "<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 (#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 (#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 // .show(), .hide(), can be excluded from the build
 491 if ( jQuery.fn.show && jQuery.fn.hide ) {
 492
 493 QUnit.test( "show()", function( assert ) {
 494
 495         assert.expect( 18 );
 496
 497         var hiddendiv, div, pass, test;
 498                 hiddendiv = jQuery( "div.hidden" );
 499
 500         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
 501
 502         hiddendiv.css( "display", "block" );
 503         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
 504
 505         hiddendiv.show();
 506         assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
 507
 508         hiddendiv.css( "display", "" );
 509
 510         pass = true;
 511         div = jQuery( "#qunit-fixture div" );
 512         div.show().each( function() {
 513                 if ( this.style.display === "none" ) {
 514                         pass = false;
 515                 }
 516         } );
 517         assert.ok( pass, "Show" );
 518
 519         jQuery(
 520                 "<div id='show-tests'>" +
 521                 "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
 522                 "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
 523                 "<ul><li></li></ul></div>"
 524         ).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
 525
 526         test = {
 527                 "div": "block",
 528                 "p": "block",
 529                 "a": "inline",
 530                 "code": "inline",
 531                 "pre": "block",
 532                 "span": "inline",
 533                 "table": "table",
 534                 "thead": "table-header-group",
 535                 "tbody": "table-row-group",
 536                 "tr": "table-row",
 537                 "th": "table-cell",
 538                 "td": "table-cell",
 539                 "ul": "block",
 540                 "li": "list-item"
 541         };
 542
 543         jQuery.each( test, function( selector, expected ) {
 544                 var elem = jQuery( selector, "#show-tests" ).show();
 545                 assert.equal( elem.css( "display" ), expected, "Show using correct display type for " + selector );
 546         } );
 547
 548         // Make sure that showing or hiding a text node doesn't cause an error
 549         jQuery( "<div>test</div> text <span>test</span>" ).show().remove();
 550         jQuery( "<div>test</div> text <span>test</span>" ).hide().remove();
 551 } );
 552
 553 QUnit.test( "show/hide detached nodes", function( assert ) {
 554         assert.expect( 19 );
 555
 556         var div, span, tr;
 557
 558         div = jQuery( "<div>" ).hide();
 559         assert.equal( div.css( "display" ), "none", "hide() updates inline style of a detached div" );
 560         div.appendTo( "#qunit-fixture" );
 561         assert.equal( div.css( "display" ), "none",
 562                 "A hidden-while-detached div is hidden after attachment" );
 563         div.show();
 564         assert.equal( div.css( "display" ), "block",
 565                 "A hidden-while-detached div can be shown after attachment" );
 566
 567         div = jQuery( "<div class='hidden'>" );
 568         div.show().appendTo( "#qunit-fixture" );
 569         assert.equal( div.css( "display" ), "none",
 570                 "A shown-while-detached div can be hidden by the CSS cascade" );
 571
 572         div = jQuery( "<div><div class='hidden'></div></div>" ).children( "div" );
 573         div.show().appendTo( "#qunit-fixture" );
 574         assert.equal( div.css( "display" ), "none",
 575                 "A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
 576
 577         span = jQuery( "<span class='hidden'/>" );
 578         span.show().appendTo( "#qunit-fixture" );
 579         assert.equal( span.css( "display" ), "none",
 580                 "A shown-while-detached span can be hidden by the CSS cascade" );
 581
 582         div = jQuery( "div.hidden" );
 583         div.detach().show();
 584         assert.ok( !div[ 0 ].style.display,
 585                 "show() does not update inline style of a cascade-hidden-before-detach div" );
 586         div.appendTo( "#qunit-fixture" );
 587         assert.equal( div.css( "display" ), "none",
 588                 "A shown-while-detached cascade-hidden div is hidden after attachment" );
 589         div.remove();
 590
 591         span = jQuery( "<span class='hidden'/>" );
 592         span.appendTo( "#qunit-fixture" ).detach().show().appendTo( "#qunit-fixture" );
 593         assert.equal( span.css( "display" ), "none",
 594                 "A shown-while-detached cascade-hidden span is hidden after attachment" );
 595         span.remove();
 596
 597         div = jQuery( document.createElement( "div" ) );
 598         div.show().appendTo( "#qunit-fixture" );
 599         assert.ok( !div[ 0 ].style.display, "A shown-while-detached div has no inline style" );
 600         assert.equal( div.css( "display" ), "block",
 601                 "A shown-while-detached div has default display after attachment" );
 602         div.remove();
 603
 604         div = jQuery( "<div style='display: none'>" );
 605         div.show();
 606         assert.equal( div[ 0 ].style.display, "",
 607                 "show() updates inline style of a detached inline-hidden div" );
 608         div.appendTo( "#qunit-fixture" );
 609         assert.equal( div.css( "display" ), "block",
 610                 "A shown-while-detached inline-hidden div has default display after attachment" );
 611
 612         div = jQuery( "<div><div style='display: none'></div></div>" ).children( "div" );
 613         div.show().appendTo( "#qunit-fixture" );
 614         assert.equal( div.css( "display" ), "block",
 615                 "A shown-while-detached inline-hidden div inside a visible div has default display " +
 616                 "after attachment" );
 617
 618         span = jQuery( "<span style='display: none'/>" );
 619         span.show();
 620         assert.equal( span[ 0 ].style.display, "",
 621                 "show() updates inline style of a detached inline-hidden span" );
 622         span.appendTo( "#qunit-fixture" );
 623         assert.equal( span.css( "display" ), "inline",
 624                 "A shown-while-detached inline-hidden span has default display after attachment" );
 625
 626         div = jQuery( "<div style='display: inline'/>" );
 627         div.show().appendTo( "#qunit-fixture" );
 628         assert.equal( div.css( "display" ), "inline",
 629                 "show() does not update inline style of a detached inline-visible div" );
 630         div.remove();
 631
 632         tr = jQuery( "<tr/>" );
 633         jQuery( "#table" ).append( tr );
 634         tr.detach().hide().show();
 635
 636         assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
 637         tr.remove();
 638
 639         span = jQuery( "<span/>" ).hide().show();
 640         assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
 641         span.remove();
 642 } );
 643
 644 QUnit[ document.body.attachShadow ? "test" : "skip" ]( "show/hide shadow child nodes", function( assert ) {
 645         assert.expect( 28 );
 646         jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
 647         var shadowHost = document.querySelector( "#shadowHost" );
 648         var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
 649         shadowRoot.innerHTML = "" +
 650                 "<style>.hidden{display: none;}</style>" +
 651                 "<div class='hidden' id='shadowdiv'>" +
 652                 "       <p class='hidden' id='shadowp'>" +
 653                 "               <a href='#' class='hidden' id='shadowa'></a>" +
 654                 "       </p>" +
 655                 "       <code class='hidden' id='shadowcode'></code>" +
 656                 "       <pre class='hidden' id='shadowpre'></pre>" +
 657                 "       <span class='hidden' id='shadowspan'></span>" +
 658                 "</div>" +
 659                 "<table class='hidden' id='shadowtable'>" +
 660                 "       <thead class='hidden' id='shadowthead'>" +
 661                 "               <tr class='hidden' id='shadowtr'>" +
 662                 "                       <th class='hidden' id='shadowth'></th>" +
 663                 "               </tr>" +
 664                 "       </thead>" +
 665                 "       <tbody class='hidden' id='shadowtbody'>" +
 666                 "               <tr class='hidden'>" +
 667                 "                       <td class='hidden' id='shadowtd'></td>" +
 668                 "               </tr>" +
 669                 "       </tbody>" +
 670                 "</table>" +
 671                 "<ul class='hidden' id='shadowul'>" +
 672                 "       <li class='hidden' id='shadowli'></li>" +
 673                 "</ul>";
 674
 675         var test = {
 676                 "div": "block",
 677                 "p": "block",
 678                 "a": "inline",
 679                 "code": "inline",
 680                 "pre": "block",
 681                 "span": "inline",
 682                 "table": "table",
 683                 "thead": "table-header-group",
 684                 "tbody": "table-row-group",
 685                 "tr": "table-row",
 686                 "th": "table-cell",
 687                 "td": "table-cell",
 688                 "ul": "block",
 689                 "li": "list-item"
 690         };
 691
 692         jQuery.each( test, function( selector, expected ) {
 693                 var shadowChild = shadowRoot.querySelector( "#shadow" + selector );
 694                 var $shadowChild = jQuery( shadowChild );
 695                 assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
 696                 $shadowChild.show();
 697                 assert.strictEqual( $shadowChild.css( "display" ), expected, "Show using correct display type for " + selector );
 698         } );
 699 } );
 700
 701 QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
 702         assert.expect( 3 );
 703
 704         var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
 705         assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
 706         div.hide();
 707         assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
 708         div.show();
 709         assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
 710
 711         div.remove();
 712 } );
 713
 714 QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
 715         assert.expect( 1 );
 716
 717         var div = jQuery( "<div />" ),
 718                 fixture = jQuery( "#qunit-fixture" );
 719
 720         fixture.append( div );
 721
 722         div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
 723         assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
 724 } );
 725
 726 QUnit.test( "show/hide 3.0, default display", function( assert ) {
 727
 728         assert.expect( 36 );
 729
 730         var i,
 731                 $elems = jQuery( "<div/>" )
 732                         .appendTo( "#qunit-fixture" )
 733                         .html( "<div data-expected-display='block'/>" +
 734                                 "<span data-expected-display='inline'/>" +
 735                                 "<ul><li data-expected-display='list-item'/></ul>" )
 736                         .find( "[data-expected-display]" );
 737
 738         $elems.each( function() {
 739                 var $elem = jQuery( this ),
 740                         name = this.nodeName,
 741                         expected = this.getAttribute( "data-expected-display" ),
 742                         sequence = [];
 743
 744                 if ( this.className ) {
 745                         name += "." + this.className;
 746                 }
 747                 if ( this.getAttribute( "style" ) ) {
 748                         name += "[style='" + this.getAttribute( "style" ) + "']";
 749                 }
 750                 name += " ";
 751
 752                 for ( i = 0; i < 3; i++ ) {
 753                         sequence.push( ".show()" );
 754                         $elem.show();
 755                         assert.equal( $elem.css( "display" ), expected,
 756                                 name + sequence.join( "" ) + " computed" );
 757                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 758
 759                         sequence.push( ".hide()" );
 760                         $elem.hide();
 761                         assert.equal( $elem.css( "display" ), "none",
 762                                 name + sequence.join( "" ) + " computed" );
 763                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 764                 }
 765         } );
 766 } );
 767
 768 QUnit.test( "show/hide 3.0, default body display", function( assert ) {
 769
 770         assert.expect( 2 );
 771
 772         var hideBody = supportjQuery( "<style>body{display:none}</style>" ).appendTo( document.head ),
 773                 body = jQuery( document.body );
 774
 775         assert.equal( body.css( "display" ), "none", "Correct initial display" );
 776
 777         body.show();
 778
 779         assert.equal( body.css( "display" ), "block", "Correct display after .show()" );
 780
 781         hideBody.remove();
 782 } );
 783
 784 QUnit.test( "show/hide 3.0, cascade display", function( assert ) {
 785
 786         assert.expect( 36 );
 787
 788         var i,
 789                 $elems = jQuery( "<div/>" )
 790                         .appendTo( "#qunit-fixture" )
 791                         .html( "<span class='block'/><div class='inline'/><div class='list-item'/>" )
 792                         .children();
 793
 794         $elems.each( function() {
 795                 var $elem = jQuery( this ),
 796                         name = this.nodeName,
 797                         sequence = [];
 798
 799                 if ( this.className ) {
 800                         name += "." + this.className;
 801                 }
 802                 if ( this.getAttribute( "style" ) ) {
 803                         name += "[style='" + this.getAttribute( "style" ) + "']";
 804                 }
 805                 name += " ";
 806
 807                 for ( i = 0; i < 3; i++ ) {
 808                         sequence.push( ".show()" );
 809                         $elem.show();
 810                         assert.equal( $elem.css( "display" ), this.className,
 811                                 name + sequence.join( "" ) + " computed" );
 812                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 813
 814                         sequence.push( ".hide()" );
 815                         $elem.hide();
 816                         assert.equal( $elem.css( "display" ), "none",
 817                                 name + sequence.join( "" ) + " computed" );
 818                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 819                 }
 820         } );
 821 } );
 822
 823 QUnit.test( "show/hide 3.0, inline display", function( assert ) {
 824
 825         assert.expect( 96 );
 826
 827         var i,
 828                 $elems = jQuery( "<div/>" )
 829                         .appendTo( "#qunit-fixture" )
 830                         .html( "<span data-expected-display='block' style='display:block'/>" +
 831                                 "<span class='list-item' data-expected-display='block' style='display:block'/>" +
 832                                 "<div data-expected-display='inline' style='display:inline'/>" +
 833                                 "<div class='list-item' data-expected-display='inline' style='display:inline'/>" +
 834                                 "<ul>" +
 835                                         "<li data-expected-display='block' style='display:block'/>" +
 836                                         "<li class='inline' data-expected-display='block' style='display:block'/>" +
 837                                         "<li data-expected-display='inline' style='display:inline'/>" +
 838                                         "<li class='block' data-expected-display='inline' style='display:inline'/>" +
 839                                 "</ul>" )
 840                         .find( "[data-expected-display]" );
 841
 842         $elems.each( function() {
 843                 var $elem = jQuery( this ),
 844                         name = this.nodeName,
 845                         expected = this.getAttribute( "data-expected-display" ),
 846                         sequence = [];
 847
 848                 if ( this.className ) {
 849                         name += "." + this.className;
 850                 }
 851                 if ( this.getAttribute( "style" ) ) {
 852                         name += "[style='" + this.getAttribute( "style" ) + "']";
 853                 }
 854                 name += " ";
 855
 856                 for ( i = 0; i < 3; i++ ) {
 857                         sequence.push( ".show()" );
 858                         $elem.show();
 859                         assert.equal( $elem.css( "display" ), expected,
 860                                 name + sequence.join( "" ) + " computed" );
 861                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 862
 863                         sequence.push( ".hide()" );
 864                         $elem.hide();
 865                         assert.equal( $elem.css( "display" ), "none",
 866                                 name + sequence.join( "" ) + " computed" );
 867                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 868                 }
 869         } );
 870 } );
 871
 872 QUnit.test( "show/hide 3.0, cascade hidden", function( assert ) {
 873
 874         assert.expect( 72 );
 875
 876         var i,
 877                 $elems = jQuery( "<div/>" )
 878                         .appendTo( "#qunit-fixture" )
 879                         .html( "<div class='hidden' data-expected-display='block'/>" +
 880                                 "<div class='hidden' data-expected-display='block' style='display:none'/>" +
 881                                 "<span class='hidden' data-expected-display='inline'/>" +
 882                                 "<span class='hidden' data-expected-display='inline' style='display:none'/>" +
 883                                 "<ul>" +
 884                                         "<li class='hidden' data-expected-display='list-item'/>" +
 885                                         "<li class='hidden' data-expected-display='list-item' style='display:none'/>" +
 886                                 "</ul>" )
 887                         .find( "[data-expected-display]" );
 888
 889         $elems.each( function() {
 890                 var $elem = jQuery( this ),
 891                         name = this.nodeName,
 892                         expected = this.getAttribute( "data-expected-display" ),
 893                         sequence = [];
 894
 895                 if ( this.className ) {
 896                         name += "." + this.className;
 897                 }
 898                 if ( this.getAttribute( "style" ) ) {
 899                         name += "[style='" + this.getAttribute( "style" ) + "']";
 900                 }
 901                 name += " ";
 902
 903                 for ( i = 0; i < 3; i++ ) {
 904                         sequence.push( ".hide()" );
 905                         $elem.hide();
 906                         assert.equal( $elem.css( "display" ), "none",
 907                                 name + sequence.join( "" ) + " computed" );
 908                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 909
 910                         sequence.push( ".show()" );
 911                         $elem.show();
 912                         assert.equal( $elem.css( "display" ), expected,
 913                                 name + sequence.join( "" ) + " computed" );
 914                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 915                 }
 916         } );
 917 } );
 918
 919 QUnit.test( "show/hide 3.0, inline hidden", function( assert ) {
 920
 921         assert.expect( 84 );
 922
 923         var i,
 924                 $elems = jQuery( "<div/>" )
 925                         .appendTo( "#qunit-fixture" )
 926                         .html( "<span data-expected-display='inline' style='display:none'/>" +
 927                                 "<span class='list-item' data-expected-display='list-item' style='display:none'/>" +
 928                                 "<div data-expected-display='block' style='display:none'/>" +
 929                                 "<div class='list-item' data-expected-display='list-item' style='display:none'/>" +
 930                                 "<ul>" +
 931                                         "<li data-expected-display='list-item' style='display:none'/>" +
 932                                         "<li class='block' data-expected-display='block' style='display:none'/>" +
 933                                         "<li class='inline' data-expected-display='inline' style='display:none'/>" +
 934                                 "</ul>" )
 935                         .find( "[data-expected-display]" );
 936
 937         $elems.each( function() {
 938                 var $elem = jQuery( this ),
 939                         name = this.nodeName,
 940                         expected = this.getAttribute( "data-expected-display" ),
 941                         sequence = [];
 942
 943                 if ( this.className ) {
 944                         name += "." + this.className;
 945                 }
 946                 if ( this.getAttribute( "style" ) ) {
 947                         name += "[style='" + this.getAttribute( "style" ) + "']";
 948                 }
 949                 name += " ";
 950
 951                 for ( i = 0; i < 3; i++ ) {
 952                         sequence.push( ".hide()" );
 953                         $elem.hide();
 954                         assert.equal( $elem.css( "display" ), "none",
 955                                 name + sequence.join( "" ) + " computed" );
 956                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 957
 958                         sequence.push( ".show()" );
 959                         $elem.show();
 960                         assert.equal( $elem.css( "display" ), expected,
 961                                 name + sequence.join( "" ) + " computed" );
 962                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 963                 }
 964         } );
 965 } );
 966
 967 }
 968
 969 QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "toggle()", function( assert ) {
 970         assert.expect( 9 );
 971         var div, oldHide,
 972                 x = jQuery( "#foo" );
 973
 974         assert.ok( x.is( ":visible" ), "is visible" );
 975         x.toggle();
 976         assert.ok( x.is( ":hidden" ), "is hidden" );
 977         x.toggle();
 978         assert.ok( x.is( ":visible" ), "is visible again" );
 979
 980         x.toggle( true );
 981         assert.ok( x.is( ":visible" ), "is visible" );
 982         x.toggle( false );
 983         assert.ok( x.is( ":hidden" ), "is hidden" );
 984         x.toggle( true );
 985         assert.ok( x.is( ":visible" ), "is visible again" );
 986
 987         div = jQuery( "<div style='display:none'><div></div></div>" ).appendTo( "#qunit-fixture" );
 988         x = div.find( "div" );
 989         assert.strictEqual( x.toggle().css( "display" ), "none", "is hidden" );
 990         assert.strictEqual( x.toggle().css( "display" ), "block", "is visible" );
 991
 992         // Ensure hide() is called when toggled (#12148)
 993         oldHide = jQuery.fn.hide;
 994         jQuery.fn.hide = function() {
 995                 assert.ok( true, name + " method called on toggle" );
 996                 return oldHide.apply( this, arguments );
 997         };
 998         x.toggle( name === "show" );
 999         jQuery.fn.hide = oldHide;
1000 } );
1001
1002 QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "detached toggle()", function( assert ) {
1003         assert.expect( 6 );
1004         var detached = jQuery( "<p><a/><p>" ).find( "*" ).addBack(),
1005                 hiddenDetached = jQuery( "<p><a/></p>" ).find( "*" ).addBack().css( "display", "none" ),
1006                 cascadeHiddenDetached = jQuery( "<p><a/></p>" ).find( "*" ).addBack().addClass( "hidden" );
1007
1008         detached.toggle();
1009         detached.appendTo( "#qunit-fixture" );
1010         assert.equal( detached[ 0 ].style.display, "none", "detached element" );
1011         assert.equal( detached[ 1 ].style.display, "none", "element in detached tree" );
1012
1013         hiddenDetached.toggle();
1014         hiddenDetached.appendTo( "#qunit-fixture" );
1015         assert.equal( hiddenDetached[ 0 ].style.display, "", "detached, hidden element" );
1016         assert.equal( hiddenDetached[ 1 ].style.display, "", "hidden element in detached tree" );
1017
1018         cascadeHiddenDetached.toggle();
1019         cascadeHiddenDetached.appendTo( "#qunit-fixture" );
1020         assert.equal( cascadeHiddenDetached[ 0 ].style.display, "none",
1021                 "detached, cascade-hidden element" );
1022         assert.equal( cascadeHiddenDetached[ 1 ].style.display, "none",
1023                 "cascade-hidden element in detached tree" );
1024 } );
1025
1026 QUnit[ jQuery.find.compile && jQuery.fn.toggle && document.body.attachShadow ? "test" : "skip" ]( "shadow toggle()", function( assert ) {
1027         assert.expect( 4 );
1028         jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
1029         var shadowHost = document.querySelector( "#shadowHost" );
1030         var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
1031         shadowRoot.innerHTML = "" +
1032                 "<style>.hidden{display: none;}</style>" +
1033                 "<div id='shadowHiddenChild' class='hidden'></div>" +
1034                 "<div id='shadowChild'></div>";
1035         var shadowChild = shadowRoot.querySelector( "#shadowChild" );
1036         var shadowHiddenChild = shadowRoot.querySelector( "#shadowHiddenChild" );
1037
1038         var $shadowChild = jQuery( shadowChild );
1039         assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
1040         $shadowChild.toggle();
1041         assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
1042
1043         $shadowChild = jQuery( shadowHiddenChild );
1044         assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
1045         $shadowChild.toggle();
1046         assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
1047 } );
1048
1049 QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function( assert ) {
1050         assert.expect( 4 );
1051
1052         var $checkedtest = jQuery( "#checkedtest" );
1053         jQuery.css( $checkedtest[ 0 ], "height" );
1054
1055         assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
1056         assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
1057         assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
1058         assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
1059 } );
1060
1061 QUnit.test( "internal ref to elem.runtimeStyle (bug #7608)", function( assert ) {
1062         assert.expect( 1 );
1063         var result = true;
1064
1065         try {
1066                 jQuery( "#foo" ).css( { "width": "0%" } ).css( "width" );
1067         } catch ( e ) {
1068                 result = false;
1069         }
1070
1071         assert.ok( result, "elem.runtimeStyle does not throw exception" );
1072 } );
1073
1074 QUnit.test( "computed margins (trac-3333; gh-2237)", function( assert ) {
1075         assert.expect( 2 );
1076
1077         var $div = jQuery( "#foo" ),
1078                 $child = jQuery( "#en" );
1079
1080         $div.css( {
1081                 "width": "1px",
1082                 "marginRight": 0
1083         } );
1084         assert.equal( $div.css( "marginRight" ), "0px",
1085                 "marginRight correctly calculated with a width and display block" );
1086
1087         $div.css( {
1088                 position: "absolute",
1089                 top: 0,
1090                 left: 0,
1091                 width: "100px"
1092         } );
1093         $child.css( {
1094                 width: "50px",
1095                 margin: "auto"
1096         } );
1097         assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
1098 } );
1099
1100 QUnit.test( "box model properties incorrectly returning % instead of px, see #10639 and #12088", function( assert ) {
1101         assert.expect( 2 );
1102
1103         var container = jQuery( "<div/>" ).width( 400 ).appendTo( "#qunit-fixture" ),
1104                 el = jQuery( "<div/>" ).css( { "width": "50%", "marginRight": "50%" } ).appendTo( container ),
1105                 el2 = jQuery( "<div/>" ).css( { "width": "50%", "minWidth": "300px", "marginLeft": "25%" } ).appendTo( container );
1106
1107         assert.equal( el.css( "marginRight" ), "200px", "css('marginRight') returning % instead of px, see #10639" );
1108         assert.equal( el2.css( "marginLeft" ), "100px", "css('marginLeft') returning incorrect pixel value, see #12088" );
1109 } );
1110
1111 QUnit.test( "jQuery.cssProps behavior, (bug #8402)", function( assert ) {
1112         assert.expect( 2 );
1113
1114         var div = jQuery( "<div>" ).appendTo( document.body ).css( {
1115                 "position": "absolute",
1116                 "top": 0,
1117                 "left": 10
1118         } );
1119         jQuery.cssProps.top = "left";
1120         assert.equal( div.css( "top" ), "10px", "the fixed property is used when accessing the computed style" );
1121         div.css( "top", "100px" );
1122         assert.equal( div[ 0 ].style.left, "100px", "the fixed property is used when setting the style" );
1123
1124         // cleanup jQuery.cssProps
1125         jQuery.cssProps.top = undefined;
1126 } );
1127
1128 QUnit.test( "widows & orphans #8936", function( assert ) {
1129
1130         var $p = jQuery( "<p>" ).appendTo( "#qunit-fixture" );
1131
1132         assert.expect( 2 );
1133
1134         $p.css( {
1135                 "widows": 3,
1136                 "orphans": 3
1137         } );
1138
1139         assert.equal( $p.css( "widows" ) || jQuery.style( $p[ 0 ], "widows" ), 3, "widows correctly set to 3" );
1140         assert.equal( $p.css( "orphans" ) || jQuery.style( $p[ 0 ], "orphans" ), 3, "orphans correctly set to 3" );
1141
1142         $p.remove();
1143 } );
1144
1145 QUnit.test( "can't get css for disconnected in IE<9, see #10254 and #8388", function( assert ) {
1146         assert.expect( 2 );
1147         var span, div;
1148
1149         span = jQuery( "<span/>" ).css( "background-image", "url(" + baseURL + "1x1.jpg)" );
1150         assert.notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see #10254" );
1151
1152         div = jQuery( "<div/>" ).css( "top", 10 );
1153         assert.equal( div.css( "top" ), "10px", "can't get top in IE<9, see #8388" );
1154 } );
1155
1156 QUnit.test( "Ensure styles are retrieving from parsed html on document fragments", function( assert ) {
1157         assert.expect( 1 );
1158
1159         var $span = jQuery(
1160                 jQuery.parseHTML( "<span style=\"font-family: Cuprum,sans-serif; font-size: 14px; color: #999999;\">some text</span>" )
1161         );
1162
1163         assert.equal( $span.css( "font-size" ), "14px", "Font-size retrievable on parsed HTML node" );
1164 } );
1165
1166 QUnit.test( "can't get background-position in IE<9, see #10796", function( assert ) {
1167         var div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" ),
1168                 units = [
1169                         "0 0",
1170                         "12px 12px",
1171                         "13px 12em",
1172                         "12em 13px",
1173                         "12em center",
1174                         "+12em center",
1175                         "12.2em center",
1176                         "center center"
1177                 ],
1178                 l = units.length,
1179                 i = 0;
1180
1181         assert.expect( l );
1182
1183         for ( ; i < l; i++ ) {
1184                 div.css( "background-position", units [ i ] );
1185                 assert.ok( div.css( "background-position" ), "can't get background-position in IE<9, see #10796" );
1186         }
1187 } );
1188
1189 if ( jQuery.fn.offset ) {
1190         QUnit.test( "percentage properties for left and top should be transformed to pixels, see #9505", function( assert ) {
1191                 assert.expect( 2 );
1192                 var parent = jQuery( "<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>" ).appendTo( "#qunit-fixture" ),
1193                         div = jQuery( "<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>" ).appendTo( parent );
1194
1195                 assert.equal( div.css( "top" ), "100px", "position properties not transformed to pixels, see #9505" );
1196                 assert.equal( div.css( "left" ), "100px", "position properties not transformed to pixels, see #9505" );
1197         } );
1198 }
1199
1200 QUnit.test( "Do not append px (#9548, #12990, #2792)", function( assert ) {
1201         assert.expect( 4 );
1202
1203         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1204
1205         $div.css( "fill-opacity", 1 );
1206         assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
1207
1208         $div.css( "font-size", "27px" );
1209         $div.css( "line-height", 2 );
1210         assert.equal( $div.css( "line-height" ), "54px", "Do not append px to 'line-height'" );
1211
1212         $div.css( "column-count", 1 );
1213         if ( $div.css( "column-count" ) !== undefined ) {
1214                 assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" );
1215         } else {
1216                 assert.ok( true, "No support for column-count CSS property" );
1217         }
1218
1219         $div.css( "animation-iteration-count", 2 );
1220         if ( $div.css( "animation-iteration-count" ) !== undefined ) {
1221                 // if $div.css( "animation-iteration-count" ) return "1",
1222                 // it actually return the default value of animation-iteration-count
1223                 assert.equal( $div.css( "animation-iteration-count" ), 2, "Do not append px to 'animation-iteration-count'" );
1224         } else {
1225                 assert.ok( true, "No support for animation-iteration-count CSS property" );
1226         }
1227 } );
1228
1229
1230 QUnit[
1231         jQuery( "<div/>" )[ 0 ].style.gridArea === "" ?
1232         "test" :
1233         "skip"
1234 ]( "Do not append px to CSS Grid-related properties (gh-4007)", function( assert ) {
1235         assert.expect( 12 );
1236
1237         var prop, value, subProp, subValue, $div,
1238                 gridProps = {
1239                         "grid-area": {
1240                                 "grid-row-start": "2",
1241                                 "grid-row-end": "auto",
1242                                 "grid-column-start": "auto",
1243                                 "grid-column-end": "auto"
1244                         },
1245                         "grid-column": {
1246                                 "grid-column-start": "2",
1247                                 "grid-column-end": "auto"
1248                         },
1249                         "grid-column-end": true,
1250                         "grid-column-start": true,
1251                         "grid-row": {
1252                                 "grid-row-start": "2",
1253                                 "grid-row-end": "auto"
1254                         },
1255                         "grid-row-end": true,
1256                         "grid-row-start": true
1257                 };
1258
1259         for ( prop in gridProps ) {
1260                 $div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" );
1261                 $div.css( prop, 2 );
1262
1263                 value = gridProps[ prop ];
1264
1265                 if ( typeof value === "object" ) {
1266                         for ( subProp in value ) {
1267                                 subValue = value[ subProp ];
1268                                 assert.equal( $div.css( subProp ), subValue,
1269                                         "Do not append px to '" + prop + "' (retrieved " + subProp + ")" );
1270                         }
1271                 } else {
1272                         assert.equal( $div.css( prop ), "2", "Do not append px to '" + prop + "'" );
1273                 }
1274
1275                 $div.remove();
1276         }
1277 } );
1278
1279 QUnit.test( "Do not append px to most properties not accepting integer values", function( assert ) {
1280         assert.expect( 3 );
1281
1282         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1283
1284         $div.css( "font-size", "27px" );
1285
1286         $div.css( "font-size", 2 );
1287         assert.equal( $div.css( "font-size" ), "27px", "Do not append px to 'font-size'" );
1288
1289         $div.css( "fontSize", 2 );
1290         assert.equal( $div.css( "fontSize" ), "27px", "Do not append px to 'fontSize'" );
1291
1292         $div.css( "letter-spacing", "2px" );
1293         $div.css( "letter-spacing", 3 );
1294         assert.equal( $div.css( "letter-spacing" ), "2px", "Do not append px to 'letter-spacing'" );
1295 } );
1296
1297 QUnit.test( "Append px to whitelisted properties", function( assert ) {
1298         var prop,
1299                 $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1300                 whitelist = {
1301                         margin: "marginTop",
1302                         marginTop: undefined,
1303                         marginRight: undefined,
1304                         marginBottom: undefined,
1305                         marginLeft: undefined,
1306                         padding: "paddingTop",
1307                         paddingTop: undefined,
1308                         paddingRight: undefined,
1309                         paddingBottom: undefined,
1310                         paddingLeft: undefined,
1311                         top: undefined,
1312                         right: undefined,
1313                         bottom: undefined,
1314                         left: undefined,
1315                         width: undefined,
1316                         height: undefined,
1317                         minWidth: undefined,
1318                         minHeight: undefined,
1319                         maxWidth: undefined,
1320                         maxHeight: undefined,
1321                         border: "borderTopWidth",
1322                         borderWidth: "borderTopWidth",
1323                         borderTop: "borderTopWidth",
1324                         borderTopWidth: undefined,
1325                         borderRight: "borderRightWidth",
1326                         borderRightWidth: undefined,
1327                         borderBottom: "borderBottomWidth",
1328                         borderBottomWidth: undefined,
1329                         borderLeft: "borderLeftWidth",
1330                         borderLeftWidth: undefined
1331                 };
1332
1333         assert.expect( ( Object.keys( whitelist ).length ) * 2 );
1334
1335         for ( prop in whitelist ) {
1336                 var propToCheck = whitelist[ prop ] || prop,
1337                         kebabProp = prop.replace( /[A-Z]/g, function( match ) {
1338                                 return "-" + match.toLowerCase();
1339                         } ),
1340                         kebabPropToCheck = propToCheck.replace( /[A-Z]/g, function( match ) {
1341                                 return "-" + match.toLowerCase();
1342                         } );
1343                 $div.css( prop, 3 )
1344                         .css( "position", "absolute" )
1345                         .css( "border-style", "solid" );
1346                 assert.equal( $div.css( propToCheck ), "3px", "Append px to '" + prop + "'" );
1347                 $div.css( kebabProp, 3 )
1348                         .css( "position", "absolute" )
1349                         .css( "border-style", "solid" );
1350                 assert.equal( $div.css( kebabPropToCheck ), "3px", "Append px to '" + kebabProp + "'" );
1351         }
1352 } );
1353
1354 QUnit.test( "css('width') and css('height') should respect box-sizing, see #11004", function( assert ) {
1355         assert.expect( 4 );
1356
1357         var el_dis = jQuery( "<div style='width:300px;height:300px;margin:2px;padding:2px;box-sizing:border-box;'>test</div>" ),
1358                 el = el_dis.clone().appendTo( "#qunit-fixture" );
1359
1360         assert.equal( el.css( "width" ), el.css( "width", el.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing, see #11004" );
1361         assert.equal( el_dis.css( "width" ), el_dis.css( "width", el_dis.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing for disconnected element, see #11004" );
1362         assert.equal( el.css( "height" ), el.css( "height", el.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing, see #11004" );
1363         assert.equal( el_dis.css( "height" ), el_dis.css( "height", el_dis.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing for disconnected element, see #11004" );
1364 } );
1365
1366 testIframe(
1367         "css('width') should work correctly before document ready (#14084)",
1368         "css/cssWidthBeforeDocReady.html",
1369         function( assert, jQuery, window, document, cssWidthBeforeDocReady ) {
1370                 assert.expect( 1 );
1371                 assert.strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
1372         }
1373 );
1374
1375 testIframe(
1376         "css('width') should work correctly with browser zooming",
1377         "css/cssWidthBrowserZoom.html",
1378         function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) {
1379                 assert.expect( 2 );
1380                 assert.strictEqual( widthBeforeSet, "100px", "elem.css('width') works correctly with browser zoom" );
1381                 assert.strictEqual( widthAfterSet, "100px", "elem.css('width', val) works correctly with browser zoom" );
1382         }
1383 );
1384
1385 ( function() {
1386         var supportsFractionalGBCR,
1387                 qunitFixture = document.getElementById( "qunit-fixture" ),
1388                 div = document.createElement( "div" );
1389         div.style.width = "3.3px";
1390         qunitFixture.appendChild( div );
1391         supportsFractionalGBCR = div.getBoundingClientRect().width.toFixed( 1 ) === "3.3";
1392         qunitFixture.removeChild( div );
1393
1394         QUnit.test( "css('width') and css('height') should return fractional values for nodes in the document", function( assert ) {
1395                 if ( !supportsFractionalGBCR ) {
1396                         assert.expect( 1 );
1397                         assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
1398                         return;
1399                 }
1400
1401                 assert.expect( 2 );
1402
1403                 var el = jQuery( "<div class='test-div'></div>" ).appendTo( "#qunit-fixture" );
1404                 jQuery( "<style>.test-div { width: 33.3px; height: 88.8px; }</style>" ).appendTo( "#qunit-fixture" );
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( "css('width') and css('height') should return fractional values for disconnected nodes", function( assert ) {
1413                 if ( !supportsFractionalGBCR ) {
1414                         assert.expect( 1 );
1415                         assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
1416                         return;
1417                 }
1418
1419                 assert.expect( 2 );
1420
1421                 var el = jQuery( "<div style='width: 33.3px; height: 88.8px;'></div>" );
1422
1423                 assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
1424                         "css('width') should return fractional values" );
1425                 assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
1426                         "css('height') should return fractional values" );
1427         } );
1428 } )();
1429
1430 QUnit.test( "certain css values of 'normal' should be convertable to a number, see #8627", function( assert ) {
1431         assert.expect( 3 );
1432
1433         var el = jQuery( "<div style='letter-spacing:normal;font-weight:normal;'>test</div>" ).appendTo( "#qunit-fixture" );
1434
1435         assert.ok( !isNaN( parseFloat( el.css( "letterSpacing" ) ) ), "css('letterSpacing') not convertable to number, see #8627" );
1436         assert.ok( !isNaN( parseFloat( el.css( "fontWeight" ) ) ), "css('fontWeight') not convertable to number, see #8627" );
1437         assert.equal( typeof el.css( "fontWeight" ), "string", ".css() returns a string" );
1438 } );
1439
1440 // Support: IE 9 only
1441 // Only run this test in IE9
1442 if ( document.documentMode === 9 ) {
1443         QUnit.test( ".css('filter') returns a string in IE9, see #12537", function( assert ) {
1444                 assert.expect( 1 );
1445
1446                 assert.equal( jQuery( "<div style='-ms-filter:\"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#ECECEC)\";'></div>" ).css( "filter" ), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#ECECEC)", "IE9 returns the correct value from css('filter')." );
1447         } );
1448 }
1449
1450 QUnit.test( "cssHooks - expand", function( assert ) {
1451         assert.expect( 15 );
1452         var result,
1453                 properties = {
1454                         margin: [ "marginTop", "marginRight", "marginBottom", "marginLeft" ],
1455                         borderWidth: [ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ],
1456                         padding: [ "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ]
1457                 };
1458
1459         jQuery.each( properties, function( property, keys ) {
1460                 var hook = jQuery.cssHooks[ property ],
1461                         expected = {};
1462                 jQuery.each( keys, function( _, key ) {
1463                         expected[ key ] = 10;
1464                 } );
1465                 result = hook.expand( 10 );
1466                 assert.deepEqual( result, expected, property + " expands properly with a number" );
1467
1468                 jQuery.each( keys, function( _, key ) {
1469                         expected[ key ] = "10px";
1470                 } );
1471                 result = hook.expand( "10px" );
1472                 assert.deepEqual( result, expected, property + " expands properly with '10px'" );
1473
1474                 expected[ keys[ 1 ] ] = expected[ keys[ 3 ] ] = "20px";
1475                 result = hook.expand( "10px 20px" );
1476                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px'" );
1477
1478                 expected[ keys[ 2 ] ] = "30px";
1479                 result = hook.expand( "10px 20px 30px" );
1480                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
1481
1482                 expected[ keys[ 3 ] ] = "40px";
1483                 result = hook.expand( "10px 20px 30px 40px" );
1484                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
1485
1486         } );
1487
1488 } );
1489
1490 QUnit.test( "css opacity consistency across browsers (#12685)", function( assert ) {
1491         assert.expect( 3 );
1492
1493         var el,
1494                 fixture = jQuery( "#qunit-fixture" );
1495
1496         // Append style element
1497         jQuery( "<style>.opacity_t12685 { opacity: 0.1; }</style>" ).appendTo( fixture );
1498
1499         el = jQuery( "<div class='opacity_t12685'></div>" ).appendTo( fixture );
1500
1501         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "opacity from style sheet" );
1502         el.css( "opacity", 0.3 );
1503         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 30, "override opacity" );
1504         el.css( "opacity", "" );
1505         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "remove opacity override" );
1506 } );
1507
1508 QUnit[ jQuery.find.compile ? "test" : "skip" ]( ":visible/:hidden selectors", function( assert ) {
1509         assert.expect( 17 );
1510
1511         var $div, $table, $a;
1512
1513         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1514         jQuery( "#nothiddendiv" ).css( { display: "none" } );
1515         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1516         jQuery( "#nothiddendiv" ).css( { "display": "block" } );
1517         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1518         assert.ok( !jQuery( window ).is( ":visible" ), "Calling is(':visible') on window does not throw an exception (#10267)." );
1519         assert.ok( !jQuery( document ).is( ":visible" ), "Calling is(':visible') on document does not throw an exception (#10267)." );
1520
1521         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1522         jQuery( "#nothiddendiv" ).css( "display", "none" );
1523         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1524         jQuery( "#nothiddendiv" ).css( "display", "block" );
1525         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1526
1527         assert.ok( jQuery( "#siblingspan" ).is( ":visible" ), "Span with no content is visible" );
1528         $div = jQuery( "<div><span></span></div>" ).appendTo( "#qunit-fixture" );
1529         assert.equal( $div.find( ":visible" ).length, 1, "Span with no content is visible" );
1530         $div.css( { width: 0, height: 0, overflow: "hidden" } );
1531         assert.ok( $div.is( ":visible" ), "Div with width and height of 0 is still visible (gh-2227)" );
1532
1533         // Safari 6-7 and iOS 6-7 report 0 width for br elements
1534         // When newer browsers propagate, re-enable this test
1535         // $br = jQuery( "<br/>" ).appendTo( "#qunit-fixture" );
1536         // assert.ok( $br.is( ":visible" ), "br element is visible" );
1537
1538         $table = jQuery( "#table" );
1539         $table.html( "<tr><td style='display:none'>cell</td><td>cell</td></tr>" );
1540         assert.equal( jQuery( "#table td:visible" ).length, 1, "hidden cell is not perceived as visible (#4512). Works on table elements" );
1541         $table.css( "display", "none" ).html( "<tr><td>cell</td><td>cell</td></tr>" );
1542         assert.equal( jQuery( "#table td:visible" ).length, 0, "hidden cell children not perceived as visible (#4512)" );
1543
1544         assert.t( "Is Visible", "#qunit-fixture div:visible:lt(2)", [ "foo", "nothiddendiv" ] );
1545         assert.t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
1546         assert.t( "Is Hidden", "#form input:hidden", [ "hidden1", "hidden2" ] );
1547
1548         $a = jQuery( "<a href='#'><h1>Header</h1></a>" ).appendTo( "#qunit-fixture" );
1549         assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
1550 } );
1551
1552 QUnit.test( "Keep the last style if the new one isn't recognized by the browser (#14836)", function( assert ) {
1553         assert.expect( 1 );
1554
1555         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "fake value" );
1556         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting an unrecognized value" );
1557 } );
1558
1559 // Support: Edge 14 - 16 only
1560 // Edge collapses whitespace-only values when setting a style property and
1561 // there is no easy way for us to work around it. Just skip the test there
1562 // and hope for the better future.
1563 QUnit[ /\bedge\/16\./i.test( navigator.userAgent ) ? "skip" : "test" ](
1564         "Keep the last style if the new one is a non-empty whitespace (gh-3204)",
1565         function( assert ) {
1566         assert.expect( 1 );
1567
1568         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", " " );
1569         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting to a space" );
1570 } );
1571
1572 QUnit.test( "Reset the style if set to an empty string", function( assert ) {
1573         assert.expect( 1 );
1574         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "" );
1575
1576         // Some browsers return an empty string; others "static". Both those cases mean the style
1577         // was reset successfully so accept them both.
1578         assert.equal( el.css( "position" ) || "static", "static",
1579                 "The style can be reset by setting to an empty string" );
1580 } );
1581
1582 QUnit.test(
1583         "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)",
1584         function( assert ) {
1585                 assert.expect( 24 );
1586                 var done = assert.async();
1587                 var styles = [ {
1588                                 name: "backgroundAttachment",
1589                                 value: [ "fixed" ],
1590                                 expected: [ "scroll" ]
1591                         }, {
1592                                 name: "backgroundColor",
1593                                 value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
1594                                 expected: [ "transparent" ]
1595                         }, {
1596
1597                                 // Firefox returns auto's value
1598                                 name: "backgroundImage",
1599                                 value: [ "url('test.png')", "url(" + baseURL + "test.png)", "url(\"" + baseURL + "test.png\")" ],
1600                                 expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
1601                         }, {
1602                                 name: "backgroundPosition",
1603                                 value: [ "5% 5%" ],
1604                                 expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
1605                         }, {
1606
1607                                 // Firefox returns no-repeat
1608                                 name: "backgroundRepeat",
1609                                 value: [ "repeat-y" ],
1610                                 expected: [ "repeat", "no-repeat" ]
1611                         }, {
1612                                 name: "backgroundClip",
1613                                 value: [ "padding-box" ],
1614                                 expected: [ "border-box" ]
1615                         }, {
1616                                 name: "backgroundOrigin",
1617                                 value: [ "content-box" ],
1618                                 expected: [ "padding-box" ]
1619                         }, {
1620                                 name: "backgroundSize",
1621                                 value: [ "80px 60px" ],
1622                                 expected: [ "auto auto" ]
1623                 } ];
1624
1625                 jQuery.each( styles, function( index, style ) {
1626                         var $clone, $clonedChildren,
1627                                 $source = jQuery( "#firstp" ),
1628                                 source = $source[ 0 ],
1629                                 $children = $source.children();
1630
1631                         style.expected = style.expected.concat( [ "", "auto" ] );
1632
1633                         if ( source.style[ style.name ] === undefined ) {
1634                                 assert.ok( true, style.name +  ": style isn't supported and therefore not an issue" );
1635                                 assert.ok( true );
1636
1637                                 return true;
1638                         }
1639
1640                         $source.css( style.name, style.value[ 0 ] );
1641                         $children.css( style.name, style.value[ 0 ] );
1642
1643                         $clone = $source.clone();
1644                         $clonedChildren = $clone.children();
1645
1646                         $clone.css( style.name, "" );
1647                         $clonedChildren.css( style.name, "" );
1648
1649                         window.setTimeout( function() {
1650                                 assert.notEqual( $clone.css( style.name ), style.value[ 0 ], "Cloned css was changed" );
1651
1652                                 assert.ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
1653                                         "Clearing clone.css() doesn't affect source.css(): " + style.name +
1654                                         "; result: " + $source.css( style.name ) +
1655                                         "; expected: " + style.value.join( "," ) );
1656
1657                                 assert.ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
1658                                         "Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
1659                                         "; result: " + $children.css( style.name ) +
1660                                         "; expected: " + style.value.join( "," ) );
1661                         }, 100 );
1662                 } );
1663
1664                 window.setTimeout( done, 1000 );
1665         }
1666 );
1667
1668 // Support: IE <=10 only
1669 // We have to jump through the hoops here in order to test work with "order" CSS property,
1670 // that some browsers do not support. This test is not, strictly speaking, correct,
1671 // but it's the best that we can do.
1672 ( function() {
1673         var style = document.createElement( "div" ).style,
1674                 exist = "order" in style || "WebkitOrder" in style;
1675
1676         if ( exist ) {
1677                 QUnit.test( "Don't append px to CSS \"order\" value (#14049)", function( assert ) {
1678                         assert.expect( 1 );
1679
1680                         var $elem = jQuery( "<div/>" );
1681
1682                         $elem.css( "order", 2 );
1683                         assert.equal( $elem.css( "order" ), "2", "2 on order" );
1684                 } );
1685         }
1686 } )();
1687
1688 QUnit.test( "Do not throw on frame elements from css method (#15098)", function( assert ) {
1689         assert.expect( 1 );
1690
1691         var frameWin, frameDoc,
1692                 frameElement = document.createElement( "iframe" ),
1693                 frameWrapDiv = document.createElement( "div" );
1694
1695         frameWrapDiv.appendChild( frameElement );
1696         document.body.appendChild( frameWrapDiv );
1697         frameWin = frameElement.contentWindow;
1698         frameDoc = frameWin.document;
1699         frameDoc.open();
1700         frameDoc.write( "<!doctype html><html><body><div>Hi</div></body></html>" );
1701         frameDoc.close();
1702
1703         frameWrapDiv.style.display = "none";
1704
1705         try {
1706                 jQuery( frameDoc.body ).css( "direction" );
1707                 assert.ok( true, "It didn't throw" );
1708         } catch ( _ ) {
1709                 assert.ok( false, "It did throw" );
1710         }
1711 } );
1712
1713 ( function() {
1714         var vendorPrefixes = [ "Webkit", "Moz", "ms" ];
1715
1716         function resetCssPropsFor( name ) {
1717                 delete jQuery.cssProps[ name ];
1718                 jQuery.each( vendorPrefixes, function( index, prefix ) {
1719                         delete jQuery.cssProps[ prefix + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
1720                 } );
1721         }
1722
1723         QUnit.test( "Don't default to a cached previously used wrong prefixed name (gh-2015)", function( assert ) {
1724
1725                 // Note: this test needs a property we know is only supported in a prefixed version
1726                 // by at least one of our main supported browsers. This may get out of date so let's
1727                 // use -(webkit|moz)-appearance as well as those two are not on a standards track.
1728                 var appearanceName, transformName, elem, elemStyle,
1729                         transformVal = "translate(5px, 2px)",
1730                         emptyStyle = document.createElement( "div" ).style;
1731
1732                 if ( "appearance" in emptyStyle ) {
1733                         appearanceName = "appearance";
1734                 } else {
1735                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1736                                 var prefixedProp = prefix + "Appearance";
1737                                 if ( prefixedProp in emptyStyle ) {
1738                                         appearanceName = prefixedProp;
1739                                 }
1740                         } );
1741                 }
1742
1743                 if ( "transform" in emptyStyle ) {
1744                         transformName = "transform";
1745                 } else {
1746                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1747                                 var prefixedProp = prefix + "Transform";
1748                                 if ( prefixedProp in emptyStyle ) {
1749                                         transformName = prefixedProp;
1750                                 }
1751                         } );
1752                 }
1753
1754                 assert.expect( !!appearanceName + !!transformName + 1 );
1755
1756                 resetCssPropsFor( "appearance" );
1757                 resetCssPropsFor( "transform" );
1758
1759                 elem = jQuery( "<div/>" )
1760                         .css( {
1761                                 msAppearance: "none",
1762                                 appearance: "none",
1763
1764                                 // Only the ms prefix is used to make sure we haven't e.g. set
1765                                 // webkitTransform ourselves in the test.
1766                                 msTransform: transformVal,
1767                                 transform: transformVal
1768                         } );
1769                 elemStyle = elem[ 0 ].style;
1770
1771                 if ( appearanceName ) {
1772                         assert.equal( elemStyle[ appearanceName ], "none", "setting properly-prefixed appearance" );
1773                 }
1774                 if ( transformName ) {
1775                         assert.equal( elemStyle[ transformName ], transformVal, "setting properly-prefixed transform" );
1776                 }
1777                 assert.equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
1778         } );
1779
1780         QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version", function( assert ) {
1781                 assert.expect( 1 );
1782
1783                 var elem = jQuery( "<div/>" ),
1784                         style = elem[ 0 ].style;
1785                 style.MozFakeProperty = "old value";
1786                 elem.css( "fakeProperty", "new value" );
1787
1788                 assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
1789         } );
1790
1791 } )();
1792
1793 ( function() {
1794         var supportsCssVars,
1795                 elem = jQuery( "<div>" ).appendTo( document.body ),
1796                 div = elem[ 0 ];
1797
1798         div.style.setProperty( "--prop", "value" );
1799         supportsCssVars = !!getComputedStyle( div ).getPropertyValue( "--prop" );
1800         elem.remove();
1801
1802         QUnit[ supportsCssVars ? "test" : "skip" ]( "css(--customProperty)", function( assert ) {
1803                 jQuery( "#qunit-fixture" ).append(
1804                         "<style>\n" +
1805                         "    .test__customProperties {\n" +
1806                         "        --prop1:val1;\n" +
1807                         "        --prop2: val2;\n" +
1808                         "        --prop3:val3 ;\n" +
1809                         "        --prop4:\"val4\";\n" +
1810                         "        --prop5:'val5';\n" +
1811                         "    }\n" +
1812                         "</style>"
1813                 );
1814
1815                 var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1816                         $elem = jQuery( "<div>" ).addClass( "test__customProperties" )
1817                                 .appendTo( "#qunit-fixture" ),
1818                         webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
1819                                 !/\firefox\b/i.test( navigator.userAgent ) &&
1820                                 !/\edge\b/i.test( navigator.userAgent ),
1821                         oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
1822                                 /\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ||
1823                                 /iphone os (?:9|10)_/i.test( navigator.userAgent ) ),
1824                         expected = 10;
1825
1826                 if ( webkit ) {
1827                         expected -= 2;
1828                 }
1829                 if ( oldSafari ) {
1830                         expected -= 2;
1831                 }
1832                 assert.expect( expected );
1833
1834                 div.css( "--color", "blue" );
1835                 assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
1836
1837                 div.css( "--color", "yellow" );
1838                 assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
1839
1840                 div.css( { "--color": "red" } );
1841                 assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
1842
1843                 div.css( { "--mixedCase": "green" } );
1844                 div.css( { "--mixed-case": "red" } );
1845                 assert.equal( div.css( "--mixedCase" ), "green",
1846                         "Modified CSS custom property with mixed case" );
1847
1848                 div.css( { "--theme-dark": "purple" } );
1849                 div.css( { "--themeDark": "red" } );
1850                 assert.equal( div.css( "--theme-dark" ), "purple",
1851                         "Modified CSS custom property with dashed name" );
1852
1853                 assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
1854
1855                 // Support: Safari 9.1-10.0 only
1856                 // Safari collapses whitespaces & quotes. Ignore it.
1857                 if ( !oldSafari ) {
1858                         assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
1859                         assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
1860                 }
1861
1862                 // Support: Chrome 49-55, Safari 9.1-10.0
1863                 // Chrome treats single quotes as double ones.
1864                 // Safari treats double quotes as single ones.
1865                 if ( !webkit ) {
1866                         assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
1867                         assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
1868                 }
1869         } );
1870
1871         QUnit[ supportsCssVars ? "test" : "skip" ]( "Don't append px to CSS vars", function( assert ) {
1872                 assert.expect( 3 );
1873
1874                 var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1875
1876                 $div
1877                         .css( "--a", 3 )
1878                         .css( "--line-height", 4 )
1879                         .css( "--lineHeight", 5 );
1880
1881                 assert.equal( $div.css( "--a" ), "3", "--a: 3" );
1882                 assert.equal( $div.css( "--line-height" ), "4", "--line-height: 4" );
1883                 assert.equal( $div.css( "--lineHeight" ), "5", "--lineHeight: 5" );
1884         } );
1885 } )();
1886
1887 }
1888
1889 // Support: IE 11+
1890 if ( document.documentMode ) {
1891         // Make sure explicitly provided IE vendor prefix (`-ms-`) is not converted
1892         // to a non-working `Ms` prefix in JavaScript.
1893         QUnit.test( "IE vendor prefixes are not mangled", function( assert ) {
1894                 assert.expect( 1 );
1895
1896                 var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1897
1898                 div.css( "-ms-grid-row", "1" );
1899
1900                 assert.strictEqual( div.css( "-ms-grid-row" ), "1", "IE vendor prefixing" );
1901         } );
1902 }