test/unit/css.js

   1 module("css", { teardown: moduleTeardown });
   2
   3 test("css(String|Hash)", function() {
   4         expect( 44 );
   5
   6         equal( jQuery("#qunit-fixture").css("display"), "block", "Check for css property \"display\"");
   7
   8         ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible");
   9         jQuery("#nothiddendiv").css({display: "none"});
  10         ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden");
  11         jQuery("#nothiddendiv").css({display: "block"});
  12         ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
  13         ok( jQuery(window).is(":visible"), "Calling is(':visible') on window does not throw an error in IE.");
  14         ok( jQuery(document).is(":visible"), "Calling is(':visible') on document does not throw an error in IE.");
  15
  16         var div = jQuery( "<div>" );
  17
  18         // These should be "auto" (or some better value)
  19         // temporarily provide "0px" for backwards compat
  20         equal( div.css("width"), "0px", "Width on disconnected node." );
  21         equal( div.css("height"), "0px", "Height on disconnected node." );
  22
  23         div.css({ width: 4, height: 4 });
  24
  25         equal( div.css("width"), "4px", "Width on disconnected node." );
  26         equal( div.css("height"), "4px", "Height on disconnected node." );
  27
  28         var 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         equal( div2.find("input").css("height"), "20px", "Height on hidden input." );
  31         equal( div2.find("textarea").css("height"), "20px", "Height on hidden textarea." );
  32         equal( div2.find("div").css("height"), "20px", "Height on hidden textarea." );
  33
  34         div2.remove();
  35
  36         // handle negative numbers by ignoring #1599, #4216
  37         jQuery("#nothiddendiv").css( {width: 1, height: 1} );
  38
  39         var width = parseFloat(jQuery("#nothiddendiv").css("width")), height = parseFloat(jQuery("#nothiddendiv").css("height"));
  40         jQuery("#nothiddendiv").css({ width: -1, height: -1 });
  41         equal( parseFloat(jQuery("#nothiddendiv").css("width")), width, "Test negative width ignored");
  42         equal( parseFloat(jQuery("#nothiddendiv").css("height")), height, "Test negative height ignored");
  43
  44         equal( jQuery("<div style='display: none;'>").css("display"), "none", "Styles on disconnected nodes");
  45
  46         jQuery("#floatTest").css({"float": "right"});
  47         equal( jQuery("#floatTest").css("float"), "right", "Modified CSS float using \"float\": Assert float is right");
  48         jQuery("#floatTest").css({"font-size": "30px"});
  49         equal( jQuery("#floatTest").css("font-size"), "30px", "Modified CSS font-size: Assert font-size is 30px");
  50         jQuery.each("0,0.25,0.5,0.75,1".split(","), function(i, n) {
  51                 jQuery("#foo").css({opacity: n});
  52
  53                 equal( jQuery("#foo").css("opacity"), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a String" );
  54                 jQuery("#foo").css({opacity: parseFloat(n)});
  55                 equal( jQuery("#foo").css("opacity"), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a Number" );
  56         });
  57         jQuery("#foo").css({opacity: ""});
  58         equal( jQuery("#foo").css("opacity"), "1", "Assert opacity is 1 when set to an empty String" );
  59
  60         equal( jQuery("#empty").css("opacity"), "0", "Assert opacity is accessible via filter property set in stylesheet in IE" );
  61         jQuery("#empty").css({ opacity: "1" });
  62         equal( jQuery("#empty").css("opacity"), "1", "Assert opacity is taken from style attribute when set vs stylesheet in IE with filters" );
  63         jQuery.support.opacity ?
  64                 ok(true, "Requires the same number of tests"):
  65                 ok( ~jQuery("#empty")[0].currentStyle.filter.indexOf("gradient"), "Assert setting opacity doesn't overwrite other filters of the stylesheet in IE" );
  66
  67         div = jQuery("#nothiddendiv");
  68         var child = jQuery("#nothiddendivchild");
  69
  70         equal( parseInt(div.css("fontSize")), 16, "Verify fontSize px set." );
  71         equal( parseInt(div.css("font-size")), 16, "Verify fontSize px set." );
  72         equal( parseInt(child.css("fontSize")), 16, "Verify fontSize px set." );
  73         equal( parseInt(child.css("font-size")), 16, "Verify fontSize px set." );
  74
  75         child.css("height", "100%");
  76         equal( child[0].style.height, "100%", "Make sure the height is being set correctly." );
  77
  78         child.attr("class", "em");
  79         equal( parseInt(child.css("fontSize")), 32, "Verify fontSize em set." );
  80
  81         // Have to verify this as the result depends upon the browser's CSS
  82         // support for font-size percentages
  83         child.attr("class", "prct");
  84         var prctval = parseInt(child.css("fontSize")), checkval = 0;
  85         if ( prctval === 16 || prctval === 24 ) {
  86                 checkval = prctval;
  87         }
  88
  89         equal( prctval, checkval, "Verify fontSize % set." );
  90
  91         equal( typeof child.css("width"), "string", "Make sure that a string width is returned from css('width')." );
  92
  93         var old = child[0].style.height;
  94
  95         // Test NaN
  96         child.css("height", parseFloat("zoo"));
  97         equal( child[0].style.height, old, "Make sure height isn't changed on NaN." );
  98
  99         // Test null
 100         child.css("height", null);
 101         equal( child[0].style.height, old, "Make sure height isn't changed on null." );
 102
 103         old = child[0].style.fontSize;
 104
 105         // Test NaN
 106         child.css("font-size", parseFloat("zoo"));
 107         equal( child[0].style.fontSize, old, "Make sure font-size isn't changed on NaN." );
 108
 109         // Test null
 110         child.css("font-size", null);
 111         equal( child[0].style.fontSize, old, "Make sure font-size isn't changed on null." );
 112 });
 113
 114 test("css() explicit and relative values", function() {
 115         expect(29);
 116         var $elem = jQuery("#nothiddendiv");
 117
 118         $elem.css({ width: 1, height: 1, paddingLeft: "1px", opacity: 1 });
 119         equal( $elem.width(), 1, "Initial css set or width/height works (hash)" );
 120         equal( $elem.css("paddingLeft"), "1px", "Initial css set of paddingLeft works (hash)" );
 121         equal( $elem.css("opacity"), "1", "Initial css set of opacity works (hash)" );
 122
 123         $elem.css({ width: "+=9" });
 124         equal( $elem.width(), 10, "'+=9' on width (hash)" );
 125
 126         $elem.css({ width: "-=9" });
 127         equal( $elem.width(), 1, "'-=9' on width (hash)" );
 128
 129         $elem.css({ width: "+=9px" });
 130         equal( $elem.width(), 10, "'+=9px' on width (hash)" );
 131
 132         $elem.css({ width: "-=9px" });
 133         equal( $elem.width(), 1, "'-=9px' on width (hash)" );
 134
 135         $elem.css( "width", "+=9" );
 136         equal( $elem.width(), 10, "'+=9' on width (params)" );
 137
 138         $elem.css( "width", "-=9" ) ;
 139         equal( $elem.width(), 1, "'-=9' on width (params)" );
 140
 141         $elem.css( "width", "+=9px" );
 142         equal( $elem.width(), 10, "'+=9px' on width (params)" );
 143
 144         $elem.css( "width", "-=9px" );
 145         equal( $elem.width(), 1, "'-=9px' on width (params)" );
 146
 147         $elem.css( "width", "-=-9px" );
 148         equal( $elem.width(), 10, "'-=-9px' on width (params)" );
 149
 150         $elem.css( "width", "+=-9px" );
 151         equal( $elem.width(), 1, "'+=-9px' on width (params)" );
 152
 153         $elem.css({ paddingLeft: "+=4" });
 154         equal( $elem.css("paddingLeft"), "5px", "'+=4' on paddingLeft (hash)" );
 155
 156         $elem.css({ paddingLeft: "-=4" });
 157         equal( $elem.css("paddingLeft"), "1px", "'-=4' on paddingLeft (hash)" );
 158
 159         $elem.css({ paddingLeft: "+=4px" });
 160         equal( $elem.css("paddingLeft"), "5px", "'+=4px' on paddingLeft (hash)" );
 161
 162         $elem.css({ paddingLeft: "-=4px" });
 163         equal( $elem.css("paddingLeft"), "1px", "'-=4px' on paddingLeft (hash)" );
 164
 165         $elem.css({ "padding-left": "+=4" });
 166         equal( $elem.css("paddingLeft"), "5px", "'+=4' on padding-left (hash)" );
 167
 168         $elem.css({ "padding-left": "-=4" });
 169         equal( $elem.css("paddingLeft"), "1px", "'-=4' on padding-left (hash)" );
 170
 171         $elem.css({ "padding-left": "+=4px" });
 172         equal( $elem.css("paddingLeft"), "5px", "'+=4px' on padding-left (hash)" );
 173
 174         $elem.css({ "padding-left": "-=4px" });
 175         equal( $elem.css("paddingLeft"), "1px", "'-=4px' on padding-left (hash)" );
 176
 177         $elem.css( "paddingLeft", "+=4" );
 178         equal( $elem.css("paddingLeft"), "5px", "'+=4' on paddingLeft (params)" );
 179
 180         $elem.css( "paddingLeft", "-=4" );
 181         equal( $elem.css("paddingLeft"), "1px", "'-=4' on paddingLeft (params)" );
 182
 183         $elem.css( "padding-left", "+=4px" );
 184         equal( $elem.css("paddingLeft"), "5px", "'+=4px' on padding-left (params)" );
 185
 186         $elem.css( "padding-left", "-=4px" );
 187         equal( $elem.css("paddingLeft"), "1px", "'-=4px' on padding-left (params)" );
 188
 189         $elem.css({ opacity: "-=0.5" });
 190         equal( $elem.css("opacity"), "0.5", "'-=0.5' on opacity (hash)" );
 191
 192         $elem.css({ opacity: "+=0.5" });
 193         equal( $elem.css("opacity"), "1", "'+=0.5' on opacity (hash)" );
 194
 195         $elem.css( "opacity", "-=0.5" );
 196         equal( $elem.css("opacity"), "0.5", "'-=0.5' on opacity (params)" );
 197
 198         $elem.css( "opacity", "+=0.5" );
 199         equal( $elem.css("opacity"), "1", "'+=0.5' on opacity (params)" );
 200 });
 201
 202 test("css(String, Object)", function() {
 203         expect(22);
 204
 205         ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible");
 206         jQuery("#nothiddendiv").css("display", "none");
 207         ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden");
 208         jQuery("#nothiddendiv").css("display", "block");
 209         ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
 210
 211         jQuery("#nothiddendiv").css("top", "-1em");
 212         ok( jQuery("#nothiddendiv").css("top"), -16, "Check negative number in EMs." );
 213
 214         jQuery("#floatTest").css("float", "left");
 215         equal( jQuery("#floatTest").css("float"), "left", "Modified CSS float using \"float\": Assert float is left");
 216         jQuery("#floatTest").css("font-size", "20px");
 217         equal( jQuery("#floatTest").css("font-size"), "20px", "Modified CSS font-size: Assert font-size is 20px");
 218
 219         jQuery.each("0,0.25,0.5,0.75,1".split(","), function(i, n) {
 220                 jQuery("#foo").css("opacity", n);
 221                 equal( jQuery("#foo").css("opacity"), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a String" );
 222                 jQuery("#foo").css("opacity", parseFloat(n));
 223                 equal( jQuery("#foo").css("opacity"), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a Number" );
 224         });
 225         jQuery("#foo").css("opacity", "");
 226         equal( jQuery("#foo").css("opacity"), "1", "Assert opacity is 1 when set to an empty String" );
 227
 228         // using contents will get comments regular, text, and comment nodes
 229         var j = jQuery("#nonnodes").contents();
 230         j.css("overflow", "visible");
 231         equal( j.css("overflow"), "visible", "Check node,textnode,comment css works" );
 232         // opera sometimes doesn't update 'display' correctly, see #2037
 233         jQuery("#t2037")[0].innerHTML = jQuery("#t2037")[0].innerHTML;
 234         equal( jQuery("#t2037 .hidden").css("display"), "none", "Make sure browser thinks it is hidden" );
 235
 236         var div = jQuery("#nothiddendiv"),
 237                 display = div.css("display"),
 238                 ret = div.css("display", undefined);
 239
 240         equal( ret, div, "Make sure setting undefined returns the original set." );
 241         equal( div.css("display"), display, "Make sure that the display wasn't changed." );
 242
 243         // Test for Bug #5509
 244         var success = true;
 245         try {
 246                 jQuery("#foo").css("backgroundColor", "rgba(0, 0, 0, 0.1)");
 247         }
 248         catch (e) {
 249                 success = false;
 250         }
 251         ok( success, "Setting RGBA values does not throw Error" );
 252 });
 253
 254 if ( !jQuery.support.opacity ) {
 255         test("css(String, Object) for MSIE", function() {
 256                 // for #1438, IE throws JS error when filter exists but doesn't have opacity in it
 257                 jQuery("#foo").css("filter", "progid:DXImageTransform.Microsoft.Chroma(color='red');");
 258                 equal( jQuery("#foo").css("opacity"), "1", "Assert opacity is 1 when a different filter is set in IE, #1438" );
 259
 260                 var filterVal = "progid:DXImageTransform.Microsoft.Alpha(opacity=30) progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
 261                 var filterVal2 = "progid:DXImageTransform.Microsoft.alpha(opacity=100) progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
 262                 var filterVal3 = "progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
 263                 jQuery("#foo").css("filter", filterVal);
 264                 equal( jQuery("#foo").css("filter"), filterVal, "css('filter', val) works" );
 265                 jQuery("#foo").css("opacity", 1);
 266                 equal( jQuery("#foo").css("filter"), filterVal2, "Setting opacity in IE doesn't duplicate opacity filter" );
 267                 equal( jQuery("#foo").css("opacity"), 1, "Setting opacity in IE with other filters works" );
 268                 jQuery("#foo").css("filter", filterVal3).css("opacity", 1);
 269                 ok( jQuery("#foo").css("filter").indexOf(filterVal3) !== -1, "Setting opacity in IE doesn't clobber other filters" );
 270         });
 271
 272         test( "Setting opacity to 1 properly removes filter: style (#6652)", function() {
 273                 var rfilter = /filter:[^;]*/i,
 274                         test = jQuery( "#t6652" ).css( "opacity", 1 ),
 275                         test2 = test.find( "div" ).css( "opacity", 1 );
 276
 277                 function hasFilter( elem ) {
 278                         var match = rfilter.exec( elem[0].style.cssText );
 279                         if ( match ) {
 280                                 return true;
 281                         }
 282                         return false;
 283                 }
 284                 expect( 2 );
 285                 ok( !hasFilter( test ), "Removed filter attribute on element without filter in stylesheet" );
 286                 ok( hasFilter( test2 ), "Filter attribute remains on element that had filter in stylesheet" );
 287         });
 288 }
 289
 290 test("css(String, Function)", function() {
 291         expect(3);
 292
 293         var sizes = ["10px", "20px", "30px"];
 294
 295         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 296                                  "<div class='cssFunction'></div>" +
 297                                  "<div class='cssFunction'></div></div>")
 298                 .appendTo("body");
 299
 300         var index = 0;
 301
 302         jQuery("#cssFunctionTest div").css("font-size", function() {
 303                 var size = sizes[index];
 304                 index++;
 305                 return size;
 306         });
 307
 308         index = 0;
 309
 310         jQuery("#cssFunctionTest div").each(function() {
 311                 var computedSize = jQuery(this).css("font-size")
 312                 var expectedSize = sizes[index]
 313                 equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 314                 index++;
 315         });
 316
 317         jQuery("#cssFunctionTest").remove();
 318 });
 319
 320 test("css(String, Function) with incoming value", function() {
 321         expect(3);
 322
 323         var sizes = ["10px", "20px", "30px"];
 324
 325         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 326                                  "<div class='cssFunction'></div>" +
 327                                  "<div class='cssFunction'></div></div>")
 328                 .appendTo("body");
 329
 330         var index = 0;
 331
 332         jQuery("#cssFunctionTest div").css("font-size", function() {
 333                 var size = sizes[index];
 334                 index++;
 335                 return size;
 336         });
 337
 338         index = 0;
 339
 340         jQuery("#cssFunctionTest div").css("font-size", function(i, computedSize) {
 341                 var expectedSize = sizes[index]
 342                 equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 343                 index++;
 344                 return computedSize;
 345         });
 346
 347         jQuery("#cssFunctionTest").remove();
 348 });
 349
 350 test("css(Object) where values are Functions", function() {
 351         expect(3);
 352
 353         var sizes = ["10px", "20px", "30px"];
 354
 355         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 356                                  "<div class='cssFunction'></div>" +
 357                                  "<div class='cssFunction'></div></div>")
 358                 .appendTo("body");
 359
 360         var index = 0;
 361
 362         jQuery("#cssFunctionTest div").css({fontSize: function() {
 363                 var size = sizes[index];
 364                 index++;
 365                 return size;
 366         }});
 367
 368         index = 0;
 369
 370         jQuery("#cssFunctionTest div").each(function() {
 371                 var computedSize = jQuery(this).css("font-size")
 372                 var expectedSize = sizes[index]
 373                 equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 374                 index++;
 375         });
 376
 377         jQuery("#cssFunctionTest").remove();
 378 });
 379
 380 test("css(Object) where values are Functions with incoming values", function() {
 381         expect(3);
 382
 383         var sizes = ["10px", "20px", "30px"];
 384
 385         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" +
 386                                  "<div class='cssFunction'></div>" +
 387                                  "<div class='cssFunction'></div></div>")
 388                 .appendTo("body");
 389
 390         var index = 0;
 391
 392         jQuery("#cssFunctionTest div").css({fontSize: function() {
 393                 var size = sizes[index];
 394                 index++;
 395                 return size;
 396         }});
 397
 398         index = 0;
 399
 400         jQuery("#cssFunctionTest div").css({"font-size": function(i, computedSize) {
 401                 var expectedSize = sizes[index]
 402                 equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
 403                 index++;
 404                 return computedSize;
 405         }});
 406
 407         jQuery("#cssFunctionTest").remove();
 408 });
 409
 410 test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function () {
 411         expect(4);
 412
 413         var $checkedtest = jQuery("#checkedtest");
 414         // IE6 was clearing "checked" in jQuery.css(elem, "height");
 415         jQuery.css($checkedtest[0], "height");
 416         ok( !! jQuery(":radio:first", $checkedtest).attr("checked"), "Check first radio still checked." );
 417         ok( ! jQuery(":radio:last", $checkedtest).attr("checked"), "Check last radio still NOT checked." );
 418         ok( !! jQuery(":checkbox:first", $checkedtest).attr("checked"), "Check first checkbox still checked." );
 419         ok( ! jQuery(":checkbox:last", $checkedtest).attr("checked"), "Check last checkbox still NOT checked." );
 420 });
 421
 422 test(":visible selector works properly on table elements (bug #4512)", function () {
 423         expect(1);
 424
 425         jQuery("#table").html("<tr><td style='display:none'>cell</td><td>cell</td></tr>");
 426         equal(jQuery("#table td:visible").length, 1, "hidden cell is not perceived as visible");
 427 });
 428
 429 test(":visible selector works properly on children with a hidden parent (bug #4512)", function () {
 430         expect(1);
 431         jQuery("#table").css("display", "none").html("<tr><td>cell</td><td>cell</td></tr>");
 432         equal(jQuery("#table td:visible").length, 0, "hidden cell children not perceived as visible");
 433 });
 434
 435 test("internal ref to elem.runtimeStyle (bug #7608)", function () {
 436         expect(1);
 437         var result = true;
 438
 439         try {
 440                 jQuery("#foo").css( { width: "0%" } ).css("width");
 441         } catch (e) {
 442                 result = false;
 443         }
 444
 445         ok( result, "elem.runtimeStyle does not throw exception" );
 446 });
 447
 448 test("marginRight computed style (bug #3333)", function() {
 449         expect(1);
 450
 451         var $div = jQuery("#foo");
 452         $div.css({
 453                 width: "1px",
 454                 marginRight: 0
 455         });
 456
 457         equal($div.css("marginRight"), "0px", "marginRight correctly calculated with a width and display block");
 458 });
 459
 460 test("jQuery.cssProps behavior, (bug #8402)", function() {
 461         var div = jQuery( "<div>" ).appendTo(document.body).css({
 462                 position: "absolute",
 463                 top: 0,
 464                 left: 10
 465         });
 466         jQuery.cssProps.top = "left";
 467         equal( div.css("top"), "10px", "the fixed property is used when accessing the computed style");
 468         div.css("top", "100px");
 469         equal( div[0].style.left, "100px", "the fixed property is used when setting the style");
 470         // cleanup jQuery.cssProps
 471         jQuery.cssProps.top = undefined;
 472 });
 473
 474 test("widows & orphans #8936", function () {
 475
 476         var $p = jQuery("<p>").appendTo("#qunit-fixture");
 477
 478         if ( "widows" in $p[0].style ) {
 479                 expect(4);
 480                 $p.css({
 481                         widows: 0,
 482                         orphans: 0
 483                 });
 484
 485                 equal( $p.css("widows") || jQuery.style( $p[0], "widows" ), 0, "widows correctly start with value 0");
 486                 equal( $p.css("orphans") || jQuery.style( $p[0], "orphans" ), 0, "orphans correctly start with value 0");
 487
 488                 $p.css({
 489                         widows: 3,
 490                         orphans: 3
 491                 });
 492
 493                 equal( $p.css("widows") || jQuery.style( $p[0], "widows" ), 3, "widows correctly set to 3");
 494                 equal( $p.css("orphans") || jQuery.style( $p[0], "orphans" ), 3, "orphans correctly set to 3");
 495         } else {
 496
 497                 expect(1);
 498                 ok( true, "jQuery does not attempt to test for style props that definitely don't exist in older versions of IE");
 499         }
 500
 501
 502         $p.remove();
 503 });
 504
 505 test("can't get css for disconnected in IE<9, see #10254 and #8388", function() {
 506         expect( 2 );
 507         var span = jQuery( "<span/>" ).css( "background-image", "url(http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif)" );
 508         notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see #10254" );
 509
 510         var div = jQuery( "<div/>" ).css( "top", 10 );
 511         equal( div.css( "top" ), "10px", "can't get top in IE<9, see #8388" );
 512 });
 513
 514 test("Do not append px to 'fill-opacity' #9548", 1, function() {
 515
 516         var $div = jQuery("<div>").appendTo("#qunit-fixture");
 517
 518         $div.css("fill-opacity", 0).animate({ "fill-opacity": 1.0 }, 0, function () {
 519                 equal( jQuery(this).css("fill-opacity"), 1, "Do not append px to 'fill-opacity'");
 520         });
 521
 522 });