test/unit/css.js

   1 if ( jQuery.css ) {
   2
   3 QUnit.module( "css", { teardown: moduleTeardown } );
   4
   5 QUnit.test( "css(String|Hash)", function( assert ) {
   6         assert.expect( 42 );
   7
   8         assert.equal( jQuery( "#qunit-fixture" ).css( "display" ), "block", "Check for css property \"display\"" );
   9
  10         var $child, div, div2, width, height, child, prctval, checkval, old;
  11
  12         $child = jQuery( "#nothiddendivchild" ).css( { "width": "20%", "height": "20%" } );
  13         assert.notEqual( $child.css( "width" ), "20px", "Retrieving a width percentage on the child of a hidden div returns percentage" );
  14         assert.notEqual( $child.css( "height" ), "20px", "Retrieving a height percentage on the child of a hidden div returns percentage" );
  15
  16         div = jQuery( "<div/>" );
  17
  18         // These should be "auto" (or some better value)
  19         // temporarily provide "0px" for backwards compat
  20         assert.equal( div.css( "width" ), "0px", "Width on disconnected node." );
  21         assert.equal( div.css( "height" ), "0px", "Height on disconnected node." );
  22
  23         div.css( { "width": 4, "height": 4 } );
  24
  25         assert.equal( div.css( "width" ), "4px", "Width on disconnected node." );
  26         assert.equal( div.css( "height" ), "4px", "Height on disconnected node." );
  27
  28         div2 = jQuery( "<div style='display:none;'><input type='text' style='height:20px;'/><textarea style='height:20px;'/><div style='height:20px;'></div></div>" ).appendTo( "body" );
  29
  30         assert.equal( div2.find( "input" ).css( "height" ), "20px", "Height on hidden input." );
  31         assert.equal( div2.find( "textarea" ).css( "height" ), "20px", "Height on hidden textarea." );
  32         assert.equal( div2.find( "div" ).css( "height" ), "20px", "Height on hidden div." );
  33
  34         div2.remove();
  35
  36         // handle negative numbers by setting to zero #11604
  37         jQuery( "#nothiddendiv" ).css( { "width": 1, "height": 1 } );
  38
  39         width = parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) );
  40         height = parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) );
  41         jQuery( "#nothiddendiv" ).css( { "overflow":"hidden", "width": -1, "height": -1 } );
  42         assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) ), 0, "Test negative width set to 0" );
  43         assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) ), 0, "Test negative height set to 0" );
  44
  45         assert.equal( jQuery( "<div style='display: none;'/>" ).css( "display" ), "none", "Styles on disconnected nodes" );
  46
  47         jQuery( "#floatTest" ).css( { "float": "right" } );
  48         assert.equal( jQuery( "#floatTest" ).css( "float" ), "right", "Modified CSS float using \"float\": Assert float is right" );
  49         jQuery( "#floatTest" ).css( { "font-size": "30px" } );
  50         assert.equal( jQuery( "#floatTest" ).css( "font-size" ), "30px", "Modified CSS font-size: Assert font-size is 30px" );
  51         jQuery.each( "0,0.25,0.5,0.75,1".split( "," ), function( i, n ) {
  52                 jQuery( "#foo" ).css( { "opacity": n } );
  53
  54                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a String" );
  55                 jQuery( "#foo" ).css( { "opacity": parseFloat( n ) } );
  56                 assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a Number" );
  57         } );
  58         jQuery( "#foo" ).css( { "opacity": "" } );
  59         assert.equal( jQuery( "#foo" ).css( "opacity" ), "1", "Assert opacity is 1 when set to an empty String" );
  60
  61         assert.equal( jQuery( "#empty" ).css( "opacity" ), "0", "Assert opacity is accessible" );
  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.test( "hide hidden elements (bug #7141)", function( assert ) {
 645         assert.expect( 3 );
 646
 647         var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
 648         assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
 649         div.hide();
 650         assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
 651         div.show();
 652         assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
 653
 654         div.remove();
 655 } );
 656
 657 QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
 658         assert.expect( 1 );
 659
 660         var div = jQuery( "<div />" ),
 661                 fixture = jQuery( "#qunit-fixture" );
 662
 663         fixture.append( div );
 664
 665         div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
 666         assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
 667 } );
 668
 669 QUnit.test( "show/hide 3.0, default display", function( assert ) {
 670
 671         assert.expect( 36 );
 672
 673         var i,
 674                 $elems = jQuery( "<div/>" )
 675                         .appendTo( "#qunit-fixture" )
 676                         .html( "<div data-expected-display='block'/>" +
 677                                 "<span data-expected-display='inline'/>" +
 678                                 "<ul><li data-expected-display='list-item'/></ul>" )
 679                         .find( "[data-expected-display]" );
 680
 681         $elems.each( function() {
 682                 var $elem = jQuery( this ),
 683                         name = this.nodeName,
 684                         expected = this.getAttribute( "data-expected-display" ),
 685                         sequence = [];
 686
 687                 if ( this.className ) {
 688                         name += "." + this.className;
 689                 }
 690                 if ( this.getAttribute( "style" ) ) {
 691                         name += "[style='" + this.getAttribute( "style" ) + "']";
 692                 }
 693                 name += " ";
 694
 695                 for ( i = 0; i < 3; i++ ) {
 696                         sequence.push( ".show()" );
 697                         $elem.show();
 698                         assert.equal( $elem.css( "display" ), expected,
 699                                 name + sequence.join( "" ) + " computed" );
 700                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 701
 702                         sequence.push( ".hide()" );
 703                         $elem.hide();
 704                         assert.equal( $elem.css( "display" ), "none",
 705                                 name + sequence.join( "" ) + " computed" );
 706                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 707                 }
 708         } );
 709 } );
 710
 711 QUnit.test( "show/hide 3.0, default body display", function( assert ) {
 712
 713         assert.expect( 2 );
 714
 715         var hideBody = supportjQuery( "<style>body{display:none}</style>" ).appendTo( document.head ),
 716                 body = jQuery( document.body );
 717
 718         assert.equal( body.css( "display" ), "none", "Correct initial display" );
 719
 720         body.show();
 721
 722         assert.equal( body.css( "display" ), "block", "Correct display after .show()" );
 723
 724         hideBody.remove();
 725 } );
 726
 727 QUnit.test( "show/hide 3.0, cascade display", function( assert ) {
 728
 729         assert.expect( 36 );
 730
 731         var i,
 732                 $elems = jQuery( "<div/>" )
 733                         .appendTo( "#qunit-fixture" )
 734                         .html( "<span class='block'/><div class='inline'/><div class='list-item'/>" )
 735                         .children();
 736
 737         $elems.each( function() {
 738                 var $elem = jQuery( this ),
 739                         name = this.nodeName,
 740                         sequence = [];
 741
 742                 if ( this.className ) {
 743                         name += "." + this.className;
 744                 }
 745                 if ( this.getAttribute( "style" ) ) {
 746                         name += "[style='" + this.getAttribute( "style" ) + "']";
 747                 }
 748                 name += " ";
 749
 750                 for ( i = 0; i < 3; i++ ) {
 751                         sequence.push( ".show()" );
 752                         $elem.show();
 753                         assert.equal( $elem.css( "display" ), this.className,
 754                                 name + sequence.join( "" ) + " computed" );
 755                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 756
 757                         sequence.push( ".hide()" );
 758                         $elem.hide();
 759                         assert.equal( $elem.css( "display" ), "none",
 760                                 name + sequence.join( "" ) + " computed" );
 761                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 762                 }
 763         } );
 764 } );
 765
 766 QUnit.test( "show/hide 3.0, inline display", function( assert ) {
 767
 768         assert.expect( 96 );
 769
 770         var i,
 771                 $elems = jQuery( "<div/>" )
 772                         .appendTo( "#qunit-fixture" )
 773                         .html( "<span data-expected-display='block' style='display:block'/>" +
 774                                 "<span class='list-item' data-expected-display='block' style='display:block'/>" +
 775                                 "<div data-expected-display='inline' style='display:inline'/>" +
 776                                 "<div class='list-item' data-expected-display='inline' style='display:inline'/>" +
 777                                 "<ul>" +
 778                                         "<li data-expected-display='block' style='display:block'/>" +
 779                                         "<li class='inline' data-expected-display='block' style='display:block'/>" +
 780                                         "<li data-expected-display='inline' style='display:inline'/>" +
 781                                         "<li class='block' data-expected-display='inline' style='display:inline'/>" +
 782                                 "</ul>" )
 783                         .find( "[data-expected-display]" );
 784
 785         $elems.each( function() {
 786                 var $elem = jQuery( this ),
 787                         name = this.nodeName,
 788                         expected = this.getAttribute( "data-expected-display" ),
 789                         sequence = [];
 790
 791                 if ( this.className ) {
 792                         name += "." + this.className;
 793                 }
 794                 if ( this.getAttribute( "style" ) ) {
 795                         name += "[style='" + this.getAttribute( "style" ) + "']";
 796                 }
 797                 name += " ";
 798
 799                 for ( i = 0; i < 3; i++ ) {
 800                         sequence.push( ".show()" );
 801                         $elem.show();
 802                         assert.equal( $elem.css( "display" ), expected,
 803                                 name + sequence.join( "" ) + " computed" );
 804                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 805
 806                         sequence.push( ".hide()" );
 807                         $elem.hide();
 808                         assert.equal( $elem.css( "display" ), "none",
 809                                 name + sequence.join( "" ) + " computed" );
 810                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 811                 }
 812         } );
 813 } );
 814
 815 QUnit.test( "show/hide 3.0, cascade hidden", function( assert ) {
 816
 817         assert.expect( 72 );
 818
 819         var i,
 820                 $elems = jQuery( "<div/>" )
 821                         .appendTo( "#qunit-fixture" )
 822                         .html( "<div class='hidden' data-expected-display='block'/>" +
 823                                 "<div class='hidden' data-expected-display='block' style='display:none'/>" +
 824                                 "<span class='hidden' data-expected-display='inline'/>" +
 825                                 "<span class='hidden' data-expected-display='inline' style='display:none'/>" +
 826                                 "<ul>" +
 827                                         "<li class='hidden' data-expected-display='list-item'/>" +
 828                                         "<li class='hidden' data-expected-display='list-item' style='display:none'/>" +
 829                                 "</ul>" )
 830                         .find( "[data-expected-display]" );
 831
 832         $elems.each( function() {
 833                 var $elem = jQuery( this ),
 834                         name = this.nodeName,
 835                         expected = this.getAttribute( "data-expected-display" ),
 836                         sequence = [];
 837
 838                 if ( this.className ) {
 839                         name += "." + this.className;
 840                 }
 841                 if ( this.getAttribute( "style" ) ) {
 842                         name += "[style='" + this.getAttribute( "style" ) + "']";
 843                 }
 844                 name += " ";
 845
 846                 for ( i = 0; i < 3; i++ ) {
 847                         sequence.push( ".hide()" );
 848                         $elem.hide();
 849                         assert.equal( $elem.css( "display" ), "none",
 850                                 name + sequence.join( "" ) + " computed" );
 851                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 852
 853                         sequence.push( ".show()" );
 854                         $elem.show();
 855                         assert.equal( $elem.css( "display" ), expected,
 856                                 name + sequence.join( "" ) + " computed" );
 857                         assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
 858                 }
 859         } );
 860 } );
 861
 862 QUnit.test( "show/hide 3.0, inline hidden", function( assert ) {
 863
 864         assert.expect( 84 );
 865
 866         var i,
 867                 $elems = jQuery( "<div/>" )
 868                         .appendTo( "#qunit-fixture" )
 869                         .html( "<span data-expected-display='inline' style='display:none'/>" +
 870                                 "<span class='list-item' data-expected-display='list-item' style='display:none'/>" +
 871                                 "<div data-expected-display='block' style='display:none'/>" +
 872                                 "<div class='list-item' data-expected-display='list-item' style='display:none'/>" +
 873                                 "<ul>" +
 874                                         "<li data-expected-display='list-item' style='display:none'/>" +
 875                                         "<li class='block' data-expected-display='block' style='display:none'/>" +
 876                                         "<li class='inline' data-expected-display='inline' style='display:none'/>" +
 877                                 "</ul>" )
 878                         .find( "[data-expected-display]" );
 879
 880         $elems.each( function() {
 881                 var $elem = jQuery( this ),
 882                         name = this.nodeName,
 883                         expected = this.getAttribute( "data-expected-display" ),
 884                         sequence = [];
 885
 886                 if ( this.className ) {
 887                         name += "." + this.className;
 888                 }
 889                 if ( this.getAttribute( "style" ) ) {
 890                         name += "[style='" + this.getAttribute( "style" ) + "']";
 891                 }
 892                 name += " ";
 893
 894                 for ( i = 0; i < 3; i++ ) {
 895                         sequence.push( ".hide()" );
 896                         $elem.hide();
 897                         assert.equal( $elem.css( "display" ), "none",
 898                                 name + sequence.join( "" ) + " computed" );
 899                         assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
 900
 901                         sequence.push( ".show()" );
 902                         $elem.show();
 903                         assert.equal( $elem.css( "display" ), expected,
 904                                 name + sequence.join( "" ) + " computed" );
 905                         assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
 906                 }
 907         } );
 908 } );
 909
 910 }
 911
 912 QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "toggle()", function( assert ) {
 913         assert.expect( 9 );
 914         var div, oldHide,
 915                 x = jQuery( "#foo" );
 916
 917         assert.ok( x.is( ":visible" ), "is visible" );
 918         x.toggle();
 919         assert.ok( x.is( ":hidden" ), "is hidden" );
 920         x.toggle();
 921         assert.ok( x.is( ":visible" ), "is visible again" );
 922
 923         x.toggle( true );
 924         assert.ok( x.is( ":visible" ), "is visible" );
 925         x.toggle( false );
 926         assert.ok( x.is( ":hidden" ), "is hidden" );
 927         x.toggle( true );
 928         assert.ok( x.is( ":visible" ), "is visible again" );
 929
 930         div = jQuery( "<div style='display:none'><div></div></div>" ).appendTo( "#qunit-fixture" );
 931         x = div.find( "div" );
 932         assert.strictEqual( x.toggle().css( "display" ), "none", "is hidden" );
 933         assert.strictEqual( x.toggle().css( "display" ), "block", "is visible" );
 934
 935         // Ensure hide() is called when toggled (#12148)
 936         oldHide = jQuery.fn.hide;
 937         jQuery.fn.hide = function() {
 938                 assert.ok( true, name + " method called on toggle" );
 939                 return oldHide.apply( this, arguments );
 940         };
 941         x.toggle( name === "show" );
 942         jQuery.fn.hide = oldHide;
 943 } );
 944
 945 QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "detached toggle()", function( assert ) {
 946         assert.expect( 6 );
 947         var detached = jQuery( "<p><a/><p>" ).find( "*" ).addBack(),
 948                 hiddenDetached = jQuery( "<p><a/></p>" ).find( "*" ).addBack().css( "display", "none" ),
 949                 cascadeHiddenDetached = jQuery( "<p><a/></p>" ).find( "*" ).addBack().addClass( "hidden" );
 950
 951         detached.toggle();
 952         detached.appendTo( "#qunit-fixture" );
 953         assert.equal( detached[ 0 ].style.display, "none", "detached element" );
 954         assert.equal( detached[ 1 ].style.display, "none", "element in detached tree" );
 955
 956         hiddenDetached.toggle();
 957         hiddenDetached.appendTo( "#qunit-fixture" );
 958         assert.equal( hiddenDetached[ 0 ].style.display, "", "detached, hidden element" );
 959         assert.equal( hiddenDetached[ 1 ].style.display, "", "hidden element in detached tree" );
 960
 961         cascadeHiddenDetached.toggle();
 962         cascadeHiddenDetached.appendTo( "#qunit-fixture" );
 963         assert.equal( cascadeHiddenDetached[ 0 ].style.display, "none",
 964                 "detached, cascade-hidden element" );
 965         assert.equal( cascadeHiddenDetached[ 1 ].style.display, "none",
 966                 "cascade-hidden element in detached tree" );
 967 } );
 968
 969 QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function( assert ) {
 970         assert.expect( 4 );
 971
 972         var $checkedtest = jQuery( "#checkedtest" );
 973         jQuery.css( $checkedtest[ 0 ], "height" );
 974
 975         assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
 976         assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
 977         assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
 978         assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
 979 } );
 980
 981 QUnit.test( "internal ref to elem.runtimeStyle (bug #7608)", function( assert ) {
 982         assert.expect( 1 );
 983         var result = true;
 984
 985         try {
 986                 jQuery( "#foo" ).css( { "width": "0%" } ).css( "width" );
 987         } catch ( e ) {
 988                 result = false;
 989         }
 990
 991         assert.ok( result, "elem.runtimeStyle does not throw exception" );
 992 } );
 993
 994 QUnit.test( "computed margins (trac-3333; gh-2237)", function( assert ) {
 995         assert.expect( 2 );
 996
 997         var $div = jQuery( "#foo" ),
 998                 $child = jQuery( "#en" );
 999
1000         $div.css( {
1001                 "width": "1px",
1002                 "marginRight": 0
1003         } );
1004         assert.equal( $div.css( "marginRight" ), "0px",
1005                 "marginRight correctly calculated with a width and display block" );
1006
1007         $div.css( {
1008                 position: "absolute",
1009                 top: 0,
1010                 left: 0,
1011                 width: "100px"
1012         } );
1013         $child.css( {
1014                 width: "50px",
1015                 margin: "auto"
1016         } );
1017         assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
1018 } );
1019
1020 QUnit.test( "box model properties incorrectly returning % instead of px, see #10639 and #12088", function( assert ) {
1021         assert.expect( 2 );
1022
1023         var container = jQuery( "<div/>" ).width( 400 ).appendTo( "#qunit-fixture" ),
1024                 el = jQuery( "<div/>" ).css( { "width": "50%", "marginRight": "50%" } ).appendTo( container ),
1025                 el2 = jQuery( "<div/>" ).css( { "width": "50%", "minWidth": "300px", "marginLeft": "25%" } ).appendTo( container );
1026
1027         assert.equal( el.css( "marginRight" ), "200px", "css('marginRight') returning % instead of px, see #10639" );
1028         assert.equal( el2.css( "marginLeft" ), "100px", "css('marginLeft') returning incorrect pixel value, see #12088" );
1029 } );
1030
1031 QUnit.test( "jQuery.cssProps behavior, (bug #8402)", function( assert ) {
1032         assert.expect( 2 );
1033
1034         var div = jQuery( "<div>" ).appendTo( document.body ).css( {
1035                 "position": "absolute",
1036                 "top": 0,
1037                 "left": 10
1038         } );
1039         jQuery.cssProps.top = "left";
1040         assert.equal( div.css( "top" ), "10px", "the fixed property is used when accessing the computed style" );
1041         div.css( "top", "100px" );
1042         assert.equal( div[ 0 ].style.left, "100px", "the fixed property is used when setting the style" );
1043
1044         // cleanup jQuery.cssProps
1045         jQuery.cssProps.top = undefined;
1046 } );
1047
1048 QUnit.test( "widows & orphans #8936", function( assert ) {
1049
1050         var $p = jQuery( "<p>" ).appendTo( "#qunit-fixture" );
1051
1052         assert.expect( 2 );
1053
1054         $p.css( {
1055                 "widows": 3,
1056                 "orphans": 3
1057         } );
1058
1059         assert.equal( $p.css( "widows" ) || jQuery.style( $p[ 0 ], "widows" ), 3, "widows correctly set to 3" );
1060         assert.equal( $p.css( "orphans" ) || jQuery.style( $p[ 0 ], "orphans" ), 3, "orphans correctly set to 3" );
1061
1062         $p.remove();
1063 } );
1064
1065 QUnit.test( "can't get css for disconnected in IE<9, see #10254 and #8388", function( assert ) {
1066         assert.expect( 2 );
1067         var span, div;
1068
1069         span = jQuery( "<span/>" ).css( "background-image", "url(" + baseURL + "1x1.jpg)" );
1070         assert.notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see #10254" );
1071
1072         div = jQuery( "<div/>" ).css( "top", 10 );
1073         assert.equal( div.css( "top" ), "10px", "can't get top in IE<9, see #8388" );
1074 } );
1075
1076 QUnit.test( "Ensure styles are retrieving from parsed html on document fragments", function( assert ) {
1077         assert.expect( 1 );
1078
1079         var $span = jQuery(
1080                 jQuery.parseHTML( "<span style=\"font-family: Cuprum,sans-serif; font-size: 14px; color: #999999;\">some text</span>" )
1081         );
1082
1083         assert.equal( $span.css( "font-size" ), "14px", "Font-size retrievable on parsed HTML node" );
1084 } );
1085
1086 QUnit.test( "can't get background-position in IE<9, see #10796", function( assert ) {
1087         var div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" ),
1088                 units = [
1089                         "0 0",
1090                         "12px 12px",
1091                         "13px 12em",
1092                         "12em 13px",
1093                         "12em center",
1094                         "+12em center",
1095                         "12.2em center",
1096                         "center center"
1097                 ],
1098                 l = units.length,
1099                 i = 0;
1100
1101         assert.expect( l );
1102
1103         for ( ; i < l; i++ ) {
1104                 div.css( "background-position", units [ i ] );
1105                 assert.ok( div.css( "background-position" ), "can't get background-position in IE<9, see #10796" );
1106         }
1107 } );
1108
1109 if ( jQuery.fn.offset ) {
1110         QUnit.test( "percentage properties for left and top should be transformed to pixels, see #9505", function( assert ) {
1111                 assert.expect( 2 );
1112                 var parent = jQuery( "<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>" ).appendTo( "#qunit-fixture" ),
1113                         div = jQuery( "<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>" ).appendTo( parent );
1114
1115                 assert.equal( div.css( "top" ), "100px", "position properties not transformed to pixels, see #9505" );
1116                 assert.equal( div.css( "left" ), "100px", "position properties not transformed to pixels, see #9505" );
1117         } );
1118 }
1119
1120 QUnit.test( "Do not append px (#9548, #12990, #2792)", function( assert ) {
1121         assert.expect( 3 );
1122
1123         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
1124
1125         $div.css( "fill-opacity", 1 );
1126
1127         assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
1128
1129         $div.css( "column-count", 1 );
1130         if ( $div.css( "column-count" ) !== undefined ) {
1131                 assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" );
1132         } else {
1133                 assert.ok( true, "No support for column-count CSS property" );
1134         }
1135
1136         $div.css( "animation-iteration-count", 2 );
1137         if ( $div.css( "animation-iteration-count" ) !== undefined ) {
1138                 // if $div.css( "animation-iteration-count" ) return "1",
1139                 // it actually return the default value of animation-iteration-count
1140                 assert.equal( $div.css( "animation-iteration-count" ), 2, "Do not append px to 'animation-iteration-count'" );
1141         } else {
1142                 assert.ok( true, "No support for animation-iteration-count CSS property" );
1143         }
1144 } );
1145
1146 QUnit.test( "css('width') and css('height') should respect box-sizing, see #11004", function( assert ) {
1147         assert.expect( 4 );
1148
1149         var el_dis = jQuery( "<div style='width:300px;height:300px;margin:2px;padding:2px;box-sizing:border-box;'>test</div>" ),
1150                 el = el_dis.clone().appendTo( "#qunit-fixture" );
1151
1152         assert.equal( el.css( "width" ), el.css( "width", el.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing, see #11004" );
1153         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" );
1154         assert.equal( el.css( "height" ), el.css( "height", el.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing, see #11004" );
1155         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" );
1156 } );
1157
1158 testIframe(
1159         "css('width') should work correctly before document ready (#14084)",
1160         "css/cssWidthBeforeDocReady.html",
1161         function( assert, jQuery, window, document, cssWidthBeforeDocReady ) {
1162                 assert.expect( 1 );
1163                 assert.strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
1164         }
1165 );
1166
1167 testIframe(
1168         "css('width') should work correctly with browser zooming",
1169         "css/cssWidthBrowserZoom.html",
1170         function( assert, jQuery, window, document, cssWidthBrowserZoom ) {
1171                 assert.expect( 1 );
1172                 assert.strictEqual( cssWidthBrowserZoom, "100px", "elem.css('width') works correctly with browser zoom" );
1173         }
1174 );
1175
1176 ( function() {
1177         var supportsFractionalGBCR,
1178                 qunitFixture = document.getElementById( "qunit-fixture" ),
1179                 div = document.createElement( "div" );
1180         div.style.width = "3.3px";
1181         qunitFixture.appendChild( div );
1182         supportsFractionalGBCR = div.getBoundingClientRect().width.toFixed( 1 ) === "3.3";
1183         qunitFixture.removeChild( div );
1184
1185         QUnit.test( "css('width') and css('height') should return fractional values for nodes in the document", function( assert ) {
1186                 if ( !supportsFractionalGBCR ) {
1187                         assert.expect( 1 );
1188                         assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
1189                         return;
1190                 }
1191
1192                 assert.expect( 2 );
1193
1194                 var el = jQuery( "<div class='test-div'></div>" ).appendTo( "#qunit-fixture" );
1195                 jQuery( "<style>.test-div { width: 33.3px; height: 88.8px; }</style>" ).appendTo( "#qunit-fixture" );
1196
1197                 assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
1198                         "css('width') should return fractional values" );
1199                 assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
1200                         "css('height') should return fractional values" );
1201         } );
1202
1203         QUnit.test( "css('width') and css('height') should return fractional values for disconnected nodes", function( assert ) {
1204                 if ( !supportsFractionalGBCR ) {
1205                         assert.expect( 1 );
1206                         assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
1207                         return;
1208                 }
1209
1210                 assert.expect( 2 );
1211
1212                 var el = jQuery( "<div style='width: 33.3px; height: 88.8px;'></div>" );
1213
1214                 assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
1215                         "css('width') should return fractional values" );
1216                 assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
1217                         "css('height') should return fractional values" );
1218         } );
1219 } )();
1220
1221 QUnit.test( "certain css values of 'normal' should be convertable to a number, see #8627", function( assert ) {
1222         assert.expect( 3 );
1223
1224         var el = jQuery( "<div style='letter-spacing:normal;font-weight:normal;'>test</div>" ).appendTo( "#qunit-fixture" );
1225
1226         assert.ok( !isNaN( parseFloat( el.css( "letterSpacing" ) ) ), "css('letterSpacing') not convertable to number, see #8627" );
1227         assert.ok( !isNaN( parseFloat( el.css( "fontWeight" ) ) ), "css('fontWeight') not convertable to number, see #8627" );
1228         assert.equal( typeof el.css( "fontWeight" ), "string", ".css() returns a string" );
1229 } );
1230
1231 // Support: IE 9 only
1232 // Only run this test in IE9
1233 if ( document.documentMode === 9 ) {
1234         QUnit.test( ".css('filter') returns a string in IE9, see #12537", function( assert ) {
1235                 assert.expect( 1 );
1236
1237                 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')." );
1238         } );
1239 }
1240
1241 QUnit.test( "cssHooks - expand", function( assert ) {
1242         assert.expect( 15 );
1243         var result,
1244                 properties = {
1245                         margin: [ "marginTop", "marginRight", "marginBottom", "marginLeft" ],
1246                         borderWidth: [ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ],
1247                         padding: [ "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ]
1248                 };
1249
1250         jQuery.each( properties, function( property, keys ) {
1251                 var hook = jQuery.cssHooks[ property ],
1252                         expected = {};
1253                 jQuery.each( keys, function( _, key ) {
1254                         expected[ key ] = 10;
1255                 } );
1256                 result = hook.expand( 10 );
1257                 assert.deepEqual( result, expected, property + " expands properly with a number" );
1258
1259                 jQuery.each( keys, function( _, key ) {
1260                         expected[ key ] = "10px";
1261                 } );
1262                 result = hook.expand( "10px" );
1263                 assert.deepEqual( result, expected, property + " expands properly with '10px'" );
1264
1265                 expected[ keys[ 1 ] ] = expected[ keys[ 3 ] ] = "20px";
1266                 result = hook.expand( "10px 20px" );
1267                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px'" );
1268
1269                 expected[ keys[ 2 ] ] = "30px";
1270                 result = hook.expand( "10px 20px 30px" );
1271                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
1272
1273                 expected[ keys[ 3 ] ] = "40px";
1274                 result = hook.expand( "10px 20px 30px 40px" );
1275                 assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
1276
1277         } );
1278
1279 } );
1280
1281 QUnit.test( "css opacity consistency across browsers (#12685)", function( assert ) {
1282         assert.expect( 3 );
1283
1284         var el,
1285                 fixture = jQuery( "#qunit-fixture" );
1286
1287         // Append style element
1288         jQuery( "<style>.opacity_t12685 { opacity: 0.1; }</style>" ).appendTo( fixture );
1289
1290         el = jQuery( "<div class='opacity_t12685'></div>" ).appendTo( fixture );
1291
1292         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "opacity from style sheet" );
1293         el.css( "opacity", 0.3 );
1294         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 30, "override opacity" );
1295         el.css( "opacity", "" );
1296         assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "remove opacity override" );
1297 } );
1298
1299 QUnit[ jQuery.find.compile ? "test" : "skip" ]( ":visible/:hidden selectors", function( assert ) {
1300         assert.expect( 17 );
1301
1302         var $div, $table, $a;
1303
1304         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1305         jQuery( "#nothiddendiv" ).css( { display: "none" } );
1306         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1307         jQuery( "#nothiddendiv" ).css( { "display": "block" } );
1308         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1309         assert.ok( !jQuery( window ).is( ":visible" ), "Calling is(':visible') on window does not throw an exception (#10267)." );
1310         assert.ok( !jQuery( document ).is( ":visible" ), "Calling is(':visible') on document does not throw an exception (#10267)." );
1311
1312         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
1313         jQuery( "#nothiddendiv" ).css( "display", "none" );
1314         assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
1315         jQuery( "#nothiddendiv" ).css( "display", "block" );
1316         assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
1317
1318         assert.ok( jQuery( "#siblingspan" ).is( ":visible" ), "Span with no content is visible" );
1319         $div = jQuery( "<div><span></span></div>" ).appendTo( "#qunit-fixture" );
1320         assert.equal( $div.find( ":visible" ).length, 1, "Span with no content is visible" );
1321         $div.css( { width: 0, height: 0, overflow: "hidden" } );
1322         assert.ok( $div.is( ":visible" ), "Div with width and height of 0 is still visible (gh-2227)" );
1323
1324         // Safari 6-7 and iOS 6-7 report 0 width for br elements
1325         // When newer browsers propagate, re-enable this test
1326         // $br = jQuery( "<br/>" ).appendTo( "#qunit-fixture" );
1327         // ok( $br.is( ":visible" ), "br element is visible" );
1328
1329         $table = jQuery( "#table" );
1330         $table.html( "<tr><td style='display:none'>cell</td><td>cell</td></tr>" );
1331         assert.equal( jQuery( "#table td:visible" ).length, 1, "hidden cell is not perceived as visible (#4512). Works on table elements" );
1332         $table.css( "display", "none" ).html( "<tr><td>cell</td><td>cell</td></tr>" );
1333         assert.equal( jQuery( "#table td:visible" ).length, 0, "hidden cell children not perceived as visible (#4512)" );
1334
1335         assert.t( "Is Visible", "#qunit-fixture div:visible:lt(2)", [ "foo", "nothiddendiv" ] );
1336         assert.t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
1337         assert.t( "Is Hidden", "#form input:hidden", [ "hidden1", "hidden2" ] );
1338
1339         $a = jQuery( "<a href='#'><h1>Header</h1></a>" ).appendTo( "#qunit-fixture" );
1340         assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
1341 } );
1342
1343 QUnit.test( "Keep the last style if the new one isn't recognized by the browser (#14836)", function( assert ) {
1344         assert.expect( 1 );
1345
1346         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "fake value" );
1347         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting an unrecognized value" );
1348 } );
1349
1350 // Support: Edge 14 - 15
1351 // Edge collapses whitespace-only values when setting a style property and
1352 // there is no easy way for us to work around it. Just skip the test there
1353 // and hope for the better future.
1354 QUnit[ /\bedge\//i.test( navigator.userAgent ) ? "skip" : "test" ](
1355         "Keep the last style if the new one is a non-empty whitespace (gh-3204)",
1356         function( assert ) {
1357         assert.expect( 1 );
1358
1359         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", " " );
1360         assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting to a space" );
1361 } );
1362
1363 QUnit.test( "Reset the style if set to an empty string", function( assert ) {
1364         assert.expect( 1 );
1365         var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "" );
1366
1367         // Some browsers return an empty string; others "static". Both those cases mean the style
1368         // was reset successfully so accept them both.
1369         assert.equal( el.css( "position" ) || "static", "static",
1370                 "The style can be reset by setting to an empty string" );
1371 } );
1372
1373 QUnit.test(
1374         "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)",
1375         24,
1376         function( assert ) {
1377                 var done = assert.async();
1378                 var styles = [ {
1379                                 name: "backgroundAttachment",
1380                                 value: [ "fixed" ],
1381                                 expected: [ "scroll" ]
1382                         }, {
1383                                 name: "backgroundColor",
1384                                 value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
1385                                 expected: [ "transparent" ]
1386                         }, {
1387
1388                                 // Firefox returns auto's value
1389                                 name: "backgroundImage",
1390                                 value: [ "url('test.png')", "url(" + baseURL + "test.png)", "url(\"" + baseURL + "test.png\")" ],
1391                                 expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
1392                         }, {
1393                                 name: "backgroundPosition",
1394                                 value: [ "5% 5%" ],
1395                                 expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
1396                         }, {
1397
1398                                 // Firefox returns no-repeat
1399                                 name: "backgroundRepeat",
1400                                 value: [ "repeat-y" ],
1401                                 expected: [ "repeat", "no-repeat" ]
1402                         }, {
1403                                 name: "backgroundClip",
1404                                 value: [ "padding-box" ],
1405                                 expected: [ "border-box" ]
1406                         }, {
1407                                 name: "backgroundOrigin",
1408                                 value: [ "content-box" ],
1409                                 expected: [ "padding-box" ]
1410                         }, {
1411                                 name: "backgroundSize",
1412                                 value: [ "80px 60px" ],
1413                                 expected: [ "auto auto" ]
1414                 } ];
1415
1416                 jQuery.each( styles, function( index, style ) {
1417                         var $clone, $clonedChildren,
1418                                 $source = jQuery( "#firstp" ),
1419                                 source = $source[ 0 ],
1420                                 $children = $source.children();
1421
1422                         style.expected = style.expected.concat( [ "", "auto" ] );
1423
1424                         if ( source.style[ style.name ] === undefined ) {
1425                                 assert.ok( true, style.name +  ": style isn't supported and therefore not an issue" );
1426                                 assert.ok( true );
1427
1428                                 return true;
1429                         }
1430
1431                         $source.css( style.name, style.value[ 0 ] );
1432                         $children.css( style.name, style.value[ 0 ] );
1433
1434                         $clone = $source.clone();
1435                         $clonedChildren = $clone.children();
1436
1437                         $clone.css( style.name, "" );
1438                         $clonedChildren.css( style.name, "" );
1439
1440                         window.setTimeout( function() {
1441                                 assert.notEqual( $clone.css( style.name ), style.value[ 0 ], "Cloned css was changed" );
1442
1443                                 assert.ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
1444                                         "Clearing clone.css() doesn't affect source.css(): " + style.name +
1445                                         "; result: " + $source.css( style.name ) +
1446                                         "; expected: " + style.value.join( "," ) );
1447
1448                                 assert.ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
1449                                         "Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
1450                                         "; result: " + $children.css( style.name ) +
1451                                         "; expected: " + style.value.join( "," ) );
1452                         }, 100 );
1453                 } );
1454
1455                 window.setTimeout( done, 1000 );
1456         }
1457 );
1458
1459 // Support: IE <=10 only
1460 // We have to jump through the hoops here in order to test work with "order" CSS property,
1461 // that some browsers do not support. This test is not, strictly speaking, correct,
1462 // but it's the best that we can do.
1463 ( function() {
1464         var style = document.createElement( "div" ).style,
1465                 exist = "order" in style || "WebkitOrder" in style;
1466
1467         if ( exist ) {
1468                 QUnit.test( "Don't append px to CSS \"order\" value (#14049)", function( assert ) {
1469                         assert.expect( 1 );
1470
1471                         var $elem = jQuery( "<div/>" );
1472
1473                         $elem.css( "order", 2 );
1474                         assert.equal( $elem.css( "order" ), "2", "2 on order" );
1475                 } );
1476         }
1477 } )();
1478
1479 QUnit.test( "Do not throw on frame elements from css method (#15098)", function( assert ) {
1480         assert.expect( 1 );
1481
1482         var frameWin, frameDoc,
1483                 frameElement = document.createElement( "iframe" ),
1484                 frameWrapDiv = document.createElement( "div" );
1485
1486         frameWrapDiv.appendChild( frameElement );
1487         document.body.appendChild( frameWrapDiv );
1488         frameWin = frameElement.contentWindow;
1489         frameDoc = frameWin.document;
1490         frameDoc.open();
1491         frameDoc.write( "<!doctype html><html><body><div>Hi</div></body></html>" );
1492         frameDoc.close();
1493
1494         frameWrapDiv.style.display = "none";
1495
1496         try {
1497                 jQuery( frameDoc.body ).css( "direction" );
1498                 assert.ok( true, "It didn't throw" );
1499         } catch ( _ ) {
1500                 assert.ok( false, "It did throw" );
1501         }
1502 } );
1503
1504 ( function() {
1505         var vendorPrefixes = [ "Webkit", "Moz", "ms" ];
1506
1507         function resetCssPropsFor( name ) {
1508                 delete jQuery.cssProps[ name ];
1509                 jQuery.each( vendorPrefixes, function( index, prefix ) {
1510                         delete jQuery.cssProps[ prefix + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
1511                 } );
1512         }
1513
1514         QUnit.test( "Don't default to a cached previously used wrong prefixed name (gh-2015)", function( assert ) {
1515
1516                 // Note: this test needs a property we know is only supported in a prefixed version
1517                 // by at least one of our main supported browsers. This may get out of date so let's
1518                 // use -(webkit|moz)-appearance as well as those two are not on a standards track.
1519                 var appearanceName, transformName, elem, elemStyle,
1520                         transformVal = "translate(5px, 2px)",
1521                         emptyStyle = document.createElement( "div" ).style;
1522
1523                 if ( "appearance" in emptyStyle ) {
1524                         appearanceName = "appearance";
1525                 } else {
1526                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1527                                 var prefixedProp = prefix + "Appearance";
1528                                 if ( prefixedProp in emptyStyle ) {
1529                                         appearanceName = prefixedProp;
1530                                 }
1531                         } );
1532                 }
1533
1534                 if ( "transform" in emptyStyle ) {
1535                         transformName = "transform";
1536                 } else {
1537                         jQuery.each( vendorPrefixes, function( index, prefix ) {
1538                                 var prefixedProp = prefix + "Transform";
1539                                 if ( prefixedProp in emptyStyle ) {
1540                                         transformName = prefixedProp;
1541                                 }
1542                         } );
1543                 }
1544
1545                 assert.expect( !!appearanceName + !!transformName + 1 );
1546
1547                 resetCssPropsFor( "appearance" );
1548                 resetCssPropsFor( "transform" );
1549
1550                 elem = jQuery( "<div/>" )
1551                         .css( {
1552                                 msAppearance: "none",
1553                                 appearance: "none",
1554
1555                                 // Only the ms prefix is used to make sure we haven't e.g. set
1556                                 // webkitTransform ourselves in the test.
1557                                 msTransform: transformVal,
1558                                 transform: transformVal
1559                         } );
1560                 elemStyle = elem[ 0 ].style;
1561
1562                 if ( appearanceName ) {
1563                         assert.equal( elemStyle[ appearanceName ], "none", "setting properly-prefixed appearance" );
1564                 }
1565                 if ( transformName ) {
1566                         assert.equal( elemStyle[ transformName ], transformVal, "setting properly-prefixed transform" );
1567                 }
1568                 assert.equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
1569         } );
1570
1571         QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version", function( assert ) {
1572                 assert.expect( 1 );
1573
1574                 var elem = jQuery( "<div/>" ),
1575                         style = elem[ 0 ].style;
1576                 style.MozFakeProperty = "old value";
1577                 elem.css( "fakeProperty", "new value" );
1578
1579                 assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
1580         } );
1581
1582 } )();
1583
1584 ( function() {
1585         var supportsCssVars,
1586                 elem = jQuery( "<div>" ).appendTo( document.body ),
1587                 div = elem[ 0 ];
1588
1589         div.style.setProperty( "--prop", "value" );
1590         supportsCssVars = !!getComputedStyle( div ).getPropertyValue( "--prop" );
1591         elem.remove();
1592
1593         QUnit[ supportsCssVars ? "test" : "skip" ]( "css(--customProperty)", function( assert ) {
1594                 jQuery( "#qunit-fixture" ).append(
1595                         "<style>\n" +
1596                         "    .test__customProperties {\n" +
1597                         "        --prop1:val1;\n" +
1598                         "        --prop2: val2;\n" +
1599                         "        --prop3:val3 ;\n" +
1600                         "        --prop4:\"val4\";\n" +
1601                         "        --prop5:'val5';\n" +
1602                         "    }\n" +
1603                         "</style>"
1604                 );
1605
1606                 var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1607                         $elem = jQuery( "<div>" ).addClass( "test__customProperties" )
1608                                 .appendTo( "#qunit-fixture" ),
1609                         webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
1610                                 !/\firefox\b/i.test( navigator.userAgent ) &&
1611                                 !/\edge\b/i.test( navigator.userAgent ),
1612                         oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
1613                                 /\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ||
1614                                 /iphone os (?:9|10)_/i.test( navigator.userAgent ) ),
1615                         expected = 10;
1616
1617                 if ( webkit ) {
1618                         expected -= 2;
1619                 }
1620                 if ( oldSafari ) {
1621                         expected -= 2;
1622                 }
1623                 assert.expect( expected );
1624
1625                 div.css( "--color", "blue" );
1626                 assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
1627
1628                 div.css( "--color", "yellow" );
1629                 assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
1630
1631                 div.css( { "--color": "red" } );
1632                 assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
1633
1634                 div.css( { "--mixedCase": "green" } );
1635                 assert.equal( div.css( "--mixedCase" ), "green",
1636                         "Modified CSS custom property with mixed case" );
1637
1638                 div.css( { "--theme-dark": "purple" } );
1639                 assert.equal( div.css( "--theme-dark" ), "purple",
1640                         "Modified CSS custom property with dashed name" );
1641
1642                 assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
1643
1644                 // Support: Safari 9.1-10.0 only
1645                 // Safari collapses whitespaces & quotes. Ignore it.
1646                 if ( !oldSafari ) {
1647                         assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
1648                         assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
1649                 }
1650
1651                 // Support: Chrome 49-55, Safari 9.1-10.0
1652                 // Chrome treats single quotes as double ones.
1653                 // Safari treats double quotes as single ones.
1654                 if ( !webkit ) {
1655                         assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
1656                         assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
1657                 }
1658         } );
1659 } )();
1660
1661 }