test/unit/attributes.js

   1 test("attr(String)", function() {
   2         expect(27);
   3         equals( jQuery('#text1').attr('value'), "Test", 'Check for value attribute' );
   4         equals( jQuery('#text1').attr('value', "Test2").attr('defaultValue'), "Test", 'Check for defaultValue attribute' );
   5         equals( jQuery('#text1').attr('type'), "text", 'Check for type attribute' );
   6         equals( jQuery('#radio1').attr('type'), "radio", 'Check for type attribute' );
   7         equals( jQuery('#check1').attr('type'), "checkbox", 'Check for type attribute' );
   8         equals( jQuery('#simon1').attr('rel'), "bookmark", 'Check for rel attribute' );
   9         equals( jQuery('#google').attr('title'), "Google!", 'Check for title attribute' );
  10         equals( jQuery('#mark').attr('hreflang'), "en", 'Check for hreflang attribute' );
  11         equals( jQuery('#en').attr('lang'), "en", 'Check for lang attribute' );
  12         equals( jQuery('#simon').attr('class'), "blog link", 'Check for class attribute' );
  13         equals( jQuery('#name').attr('name'), "name", 'Check for name attribute' );
  14         equals( jQuery('#text1').attr('name'), "action", 'Check for name attribute' );
  15         ok( jQuery('#form').attr('action').indexOf("formaction") >= 0, 'Check for action attribute' );
  16         equals( jQuery('#text1').attr('maxlength'), '30', 'Check for maxlength attribute' );
  17         equals( jQuery('#text1').attr('maxLength'), '30', 'Check for maxLength attribute' );
  18         equals( jQuery('#area1').attr('maxLength'), '30', 'Check for maxLength attribute' );
  19         equals( jQuery('#select2').attr('selectedIndex'), 3, 'Check for selectedIndex attribute' );
  20         equals( jQuery('#foo').attr('nodeName').toUpperCase(), 'DIV', 'Check for nodeName attribute' );
  21         equals( jQuery('#foo').attr('tagName').toUpperCase(), 'DIV', 'Check for tagName attribute' );
  22
  23         jQuery('<a id="tAnchor5"></a>').attr('href', '#5').appendTo('#main'); // using innerHTML in IE causes href attribute to be serialized to the full path
  24         equals( jQuery('#tAnchor5').attr('href'), "#5", 'Check for non-absolute href (an anchor)' );
  25
  26         equals( jQuery("<option/>").attr("selected"), false, "Check selected attribute on disconnected element." );
  27
  28
  29         // Related to [5574] and [5683]
  30         var body = document.body, $body = jQuery(body);
  31
  32         ok( $body.attr('foo') === undefined, 'Make sure that a non existent attribute returns undefined' );
  33         ok( $body.attr('nextSibling') === null, 'Make sure a null expando returns null' );
  34
  35         body.setAttribute('foo', 'baz');
  36         equals( $body.attr('foo'), 'baz', 'Make sure the dom attribute is retrieved when no expando is found' );
  37
  38         body.foo = 'bar';
  39         equals( $body.attr('foo'), 'bar', 'Make sure the expando is preferred over the dom attribute' );
  40
  41         $body.attr('foo','cool');
  42         equals( $body.attr('foo'), 'cool', 'Make sure that setting works well when both expando and dom attribute are available' );
  43
  44         body.foo = undefined;
  45         ok( $body.attr('foo') === undefined, 'Make sure the expando is preferred over the dom attribute, even if undefined' );
  46
  47         body.removeAttribute('foo'); // Cleanup
  48 });
  49
  50 if ( !isLocal ) {
  51         test("attr(String) in XML Files", function() {
  52                 expect(2);
  53                 stop();
  54                 jQuery.get("data/dashboard.xml", function(xml) {
  55                         equals( jQuery("locations", xml).attr("class"), "foo", "Check class attribute in XML document" );
  56                         equals( jQuery("location", xml).attr("for"), "bar", "Check for attribute in XML document" );
  57                         start();
  58                 });
  59         });
  60 }
  61
  62 test("attr(String, Function)", function() {
  63         expect(2);
  64         equals( jQuery('#text1').attr('value', function() { return this.id })[0].value, "text1", "Set value from id" );
  65         equals( jQuery('#text1').attr('title', function(i) { return i }).attr('title'), "0", "Set value with an index");
  66 });
  67
  68 test("attr(Hash)", function() {
  69         expect(1);
  70         var pass = true;
  71         jQuery("div").attr({foo: 'baz', zoo: 'ping'}).each(function(){
  72                 if ( this.getAttribute('foo') != "baz" && this.getAttribute('zoo') != "ping" ) pass = false;
  73         });
  74         ok( pass, "Set Multiple Attributes" );
  75 });
  76
  77 test("attr(String, Object)", function() {
  78         expect(21);
  79         var div = jQuery("div").attr("foo", "bar"),
  80                 fail = false;
  81         for ( var i = 0; i < div.size(); i++ ) {
  82                 if ( div.get(i).getAttribute('foo') != "bar" ){
  83                         fail = i;
  84                         break;
  85                 }
  86         }
  87         equals( fail, false, "Set Attribute, the #"+fail+" element didn't get the attribute 'foo'" );
  88
  89         ok( jQuery("#foo").attr({"width": null}), "Try to set an attribute to nothing" );
  90
  91         jQuery("#name").attr('name', 'something');
  92         equals( jQuery("#name").attr('name'), 'something', 'Set name attribute' );
  93         jQuery("#check2").attr('checked', true);
  94         equals( document.getElementById('check2').checked, true, 'Set checked attribute' );
  95         jQuery("#check2").attr('checked', false);
  96         equals( document.getElementById('check2').checked, false, 'Set checked attribute' );
  97         jQuery("#text1").attr('readonly', true);
  98         equals( document.getElementById('text1').readOnly, true, 'Set readonly attribute' );
  99         jQuery("#text1").attr('readonly', false);
 100         equals( document.getElementById('text1').readOnly, false, 'Set readonly attribute' );
 101         jQuery("#name").attr('maxlength', '5');
 102         equals( document.getElementById('name').maxLength, '5', 'Set maxlength attribute' );
 103         jQuery("#name").attr('maxLength', '10');
 104         equals( document.getElementById('name').maxLength, '10', 'Set maxlength attribute' );
 105
 106         // for #1070
 107         jQuery("#name").attr('someAttr', '0');
 108         equals( jQuery("#name").attr('someAttr'), '0', 'Set attribute to a string of "0"' );
 109         jQuery("#name").attr('someAttr', 0);
 110         equals( jQuery("#name").attr('someAttr'), 0, 'Set attribute to the number 0' );
 111         jQuery("#name").attr('someAttr', 1);
 112         equals( jQuery("#name").attr('someAttr'), 1, 'Set attribute to the number 1' );
 113
 114         // using contents will get comments regular, text, and comment nodes
 115         var j = jQuery("#nonnodes").contents();
 116
 117         j.attr("name", "attrvalue");
 118         equals( j.attr("name"), "attrvalue", "Check node,textnode,comment for attr" );
 119         j.removeAttr("name");
 120
 121         reset();
 122
 123         var type = jQuery("#check2").attr('type');
 124         var thrown = false;
 125         try {
 126                 jQuery("#check2").attr('type','hidden');
 127         } catch(e) {
 128                 thrown = true;
 129         }
 130         ok( thrown, "Exception thrown when trying to change type property" );
 131         equals( type, jQuery("#check2").attr('type'), "Verify that you can't change the type of an input element" );
 132
 133         var check = document.createElement("input");
 134         var thrown = true;
 135         try {
 136                 jQuery(check).attr('type','checkbox');
 137         } catch(e) {
 138                 thrown = false;
 139         }
 140         ok( thrown, "Exception thrown when trying to change type property" );
 141         equals( "checkbox", jQuery(check).attr('type'), "Verify that you can change the type of an input element that isn't in the DOM" );
 142
 143         var check = jQuery("<input />");
 144         var thrown = true;
 145         try {
 146                 check.attr('type','checkbox');
 147         } catch(e) {
 148                 thrown = false;
 149         }
 150         ok( thrown, "Exception thrown when trying to change type property" );
 151         equals( "checkbox", check.attr('type'), "Verify that you can change the type of an input element that isn't in the DOM" );
 152
 153         var button = jQuery("#button");
 154         var thrown = false;
 155         try {
 156                 button.attr('type','submit');
 157         } catch(e) {
 158                 thrown = true;
 159         }
 160         ok( thrown, "Exception thrown when trying to change type property" );
 161         equals( "button", button.attr('type'), "Verify that you can't change the type of a button element" );
 162 });
 163
 164 if ( !isLocal ) {
 165         test("attr(String, Object) - Loaded via XML document", function() {
 166                 expect(2);
 167                 stop();
 168                 jQuery.get('data/dashboard.xml', function(xml) {
 169                         var titles = [];
 170                         jQuery('tab', xml).each(function() {
 171                                 titles.push(jQuery(this).attr('title'));
 172                         });
 173                         equals( titles[0], 'Location', 'attr() in XML context: Check first title' );
 174                         equals( titles[1], 'Users', 'attr() in XML context: Check second title' );
 175                         start();
 176                 });
 177         });
 178 }
 179
 180 test("attr('tabindex')", function() {
 181         expect(8);
 182
 183         // elements not natively tabbable
 184         equals(jQuery('#listWithTabIndex').attr('tabindex'), 5, 'not natively tabbable, with tabindex set to 0');
 185         equals(jQuery('#divWithNoTabIndex').attr('tabindex'), undefined, 'not natively tabbable, no tabindex set');
 186
 187         // anchor with href
 188         equals(jQuery('#linkWithNoTabIndex').attr('tabindex'), 0, 'anchor with href, no tabindex set');
 189         equals(jQuery('#linkWithTabIndex').attr('tabindex'), 2, 'anchor with href, tabindex set to 2');
 190         equals(jQuery('#linkWithNegativeTabIndex').attr('tabindex'), -1, 'anchor with href, tabindex set to -1');
 191
 192         // anchor without href
 193         equals(jQuery('#linkWithNoHrefWithNoTabIndex').attr('tabindex'), undefined, 'anchor without href, no tabindex set');
 194         equals(jQuery('#linkWithNoHrefWithTabIndex').attr('tabindex'), 1, 'anchor without href, tabindex set to 2');
 195         equals(jQuery('#linkWithNoHrefWithNegativeTabIndex').attr('tabindex'), -1, 'anchor without href, no tabindex set');
 196 });
 197
 198 test("attr('tabindex', value)", function() {
 199         expect(9);
 200
 201         var element = jQuery('#divWithNoTabIndex');
 202         equals(element.attr('tabindex'), undefined, 'start with no tabindex');
 203
 204         // set a positive string
 205         element.attr('tabindex', '1');
 206         equals(element.attr('tabindex'), 1, 'set tabindex to 1 (string)');
 207
 208         // set a zero string
 209         element.attr('tabindex', '0');
 210         equals(element.attr('tabindex'), 0, 'set tabindex to 0 (string)');
 211
 212         // set a negative string
 213         element.attr('tabindex', '-1');
 214         equals(element.attr('tabindex'), -1, 'set tabindex to -1 (string)');
 215
 216         // set a positive number
 217         element.attr('tabindex', 1);
 218         equals(element.attr('tabindex'), 1, 'set tabindex to 1 (number)');
 219
 220         // set a zero number
 221         element.attr('tabindex', 0);
 222         equals(element.attr('tabindex'), 0, 'set tabindex to 0 (number)');
 223
 224         // set a negative number
 225         element.attr('tabindex', -1);
 226         equals(element.attr('tabindex'), -1, 'set tabindex to -1 (number)');
 227
 228         element = jQuery('#linkWithTabIndex');
 229         equals(element.attr('tabindex'), 2, 'start with tabindex 2');
 230
 231         element.attr('tabindex', -1);
 232         equals(element.attr('tabindex'), -1, 'set negative tabindex');
 233 });
 234
 235 test("css(String|Hash)", function() {
 236         expect(19);
 237
 238         equals( jQuery('#main').css("display"), 'none', 'Check for css property "display"');
 239
 240         ok( jQuery('#nothiddendiv').is(':visible'), 'Modifying CSS display: Assert element is visible');
 241         jQuery('#nothiddendiv').css({display: 'none'});
 242         ok( !jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is hidden');
 243         jQuery('#nothiddendiv').css({display: 'block'});
 244         ok( jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is visible');
 245
 246         jQuery('#floatTest').css({styleFloat: 'right'});
 247         equals( jQuery('#floatTest').css('styleFloat'), 'right', 'Modified CSS float using "styleFloat": Assert float is right');
 248         jQuery('#floatTest').css({cssFloat: 'left'});
 249         equals( jQuery('#floatTest').css('cssFloat'), 'left', 'Modified CSS float using "cssFloat": Assert float is left');
 250         jQuery('#floatTest').css({'float': 'right'});
 251         equals( jQuery('#floatTest').css('float'), 'right', 'Modified CSS float using "float": Assert float is right');
 252         jQuery('#floatTest').css({'font-size': '30px'});
 253         equals( jQuery('#floatTest').css('font-size'), '30px', 'Modified CSS font-size: Assert font-size is 30px');
 254
 255         jQuery.each("0,0.25,0.5,0.75,1".split(','), function(i, n) {
 256                 jQuery('#foo').css({opacity: n});
 257                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a String" );
 258                 jQuery('#foo').css({opacity: parseFloat(n)});
 259                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a Number" );
 260         });
 261         jQuery('#foo').css({opacity: ''});
 262         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when set to an empty String" );
 263 });
 264
 265 test("css(String, Object)", function() {
 266         expect(21);
 267         ok( jQuery('#nothiddendiv').is(':visible'), 'Modifying CSS display: Assert element is visible');
 268         jQuery('#nothiddendiv').css("display", 'none');
 269         ok( !jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is hidden');
 270         jQuery('#nothiddendiv').css("display", 'block');
 271         ok( jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is visible');
 272
 273         jQuery('#floatTest').css('styleFloat', 'left');
 274         equals( jQuery('#floatTest').css('styleFloat'), 'left', 'Modified CSS float using "styleFloat": Assert float is left');
 275         jQuery('#floatTest').css('cssFloat', 'right');
 276         equals( jQuery('#floatTest').css('cssFloat'), 'right', 'Modified CSS float using "cssFloat": Assert float is right');
 277         jQuery('#floatTest').css('float', 'left');
 278         equals( jQuery('#floatTest').css('float'), 'left', 'Modified CSS float using "float": Assert float is left');
 279         jQuery('#floatTest').css('font-size', '20px');
 280         equals( jQuery('#floatTest').css('font-size'), '20px', 'Modified CSS font-size: Assert font-size is 20px');
 281
 282         jQuery.each("0,0.25,0.5,0.75,1".split(','), function(i, n) {
 283                 jQuery('#foo').css('opacity', n);
 284                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a String" );
 285                 jQuery('#foo').css('opacity', parseFloat(n));
 286                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a Number" );
 287         });
 288         jQuery('#foo').css('opacity', '');
 289         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when set to an empty String" );
 290         // for #1438, IE throws JS error when filter exists but doesn't have opacity in it
 291         if (jQuery.browser.msie) {
 292                 jQuery('#foo').css("filter", "progid:DXImageTransform.Microsoft.Chroma(color='red');");
 293         }
 294         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when a different filter is set in IE, #1438" );
 295
 296         // using contents will get comments regular, text, and comment nodes
 297         var j = jQuery("#nonnodes").contents();
 298         j.css("padding-left", "1px");
 299         equals( j.css("padding-left"), "1px", "Check node,textnode,comment css works" );
 300
 301         // opera sometimes doesn't update 'display' correctly, see #2037
 302         jQuery("#t2037")[0].innerHTML = jQuery("#t2037")[0].innerHTML
 303         equals( jQuery("#t2037 .hidden").css("display"), "none", "Make sure browser thinks it is hidden" );
 304 });
 305
 306 test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function () {
 307         expect(4);
 308
 309         var $checkedtest = jQuery("#checkedtest");
 310         // IE6 was clearing "checked" in jQuery.css(elem, "height");
 311         jQuery.css($checkedtest[0], "height");
 312         ok( !! jQuery(":radio:first", $checkedtest).attr("checked"), "Check first radio still checked." );
 313         ok( ! jQuery(":radio:last", $checkedtest).attr("checked"), "Check last radio still NOT checked." );
 314         ok( !! jQuery(":checkbox:first", $checkedtest).attr("checked"), "Check first checkbox still checked." );
 315         ok( ! jQuery(":checkbox:last", $checkedtest).attr("checked"), "Check last checkbox still NOT checked." );
 316 });
 317
 318 test("width()", function() {
 319         expect(6);
 320
 321         var $div = jQuery("#nothiddendiv");
 322         $div.width(30);
 323         equals($div.width(), 30, "Test set to 30 correctly");
 324         $div.hide();
 325         equals($div.width(), 30, "Test hidden div");
 326         $div.show();
 327         $div.width(-1); // handle negative numbers by ignoring #1599
 328         equals($div.width(), 30, "Test negative width ignored");
 329         $div.css("padding", "20px");
 330         equals($div.width(), 30, "Test padding specified with pixels");
 331         $div.css("border", "2px solid #fff");
 332         equals($div.width(), 30, "Test border specified with pixels");
 333         //$div.css("padding", "2em");
 334         //equals($div.width(), 30, "Test padding specified with ems");
 335         //$div.css("border", "1em solid #fff");
 336         //DISABLED - Opera 9.6 fails this test, returns 8
 337         //equals($div.width(), 30, "Test border specified with ems");
 338         //$div.css("padding", "2%");
 339         //equals($div.width(), 30, "Test padding specified with percent");
 340
 341         $div.css({ display: "", border: "", padding: "" });
 342
 343         jQuery("#nothiddendivchild").css({ padding: "3px", border: "2px solid #fff" });
 344         equals(jQuery("#nothiddendivchild").width(), 20, "Test child width with border and padding");
 345         jQuery("#nothiddendiv, #nothiddendivchild").css({ border: "", padding: "", width: "" });
 346 });
 347
 348 test("height()", function() {
 349         expect(5);
 350
 351         var $div = jQuery("#nothiddendiv");
 352         $div.height(30);
 353         equals($div.height(), 30, "Test set to 30 correctly");
 354         $div.hide();
 355         equals($div.height(), 30, "Test hidden div");
 356         $div.show();
 357         $div.height(-1); // handle negative numbers by ignoring #1599
 358         equals($div.height(), 30, "Test negative height ignored");
 359         $div.css("padding", "20px");
 360         equals($div.height(), 30, "Test padding specified with pixels");
 361         $div.css("border", "2px solid #fff");
 362         equals($div.height(), 30, "Test border specified with pixels");
 363         //$div.css("padding", "2em");
 364         //equals($div.height(), 30, "Test padding specified with ems");
 365         //$div.css("border", "1em solid #fff");
 366         //DISABLED - Opera 9.6 fails this test, returns 8
 367         //equals($div.height(), 30, "Test border specified with ems");
 368         //$div.css("padding", "2%");
 369         //equals($div.height(), 30, "Test padding specified with percent");
 370
 371         $div.css({ display: "", border: "", padding: "", height: "1px" });
 372 });
 373
 374 test("addClass(String)", function() {
 375         expect(2);
 376         var div = jQuery("div");
 377         div.addClass("test");
 378         var pass = true;
 379         for ( var i = 0; i < div.size(); i++ ) {
 380          if ( div.get(i).className.indexOf("test") == -1 ) pass = false;
 381         }
 382         ok( pass, "Add Class" );
 383
 384         // using contents will get regular, text, and comment nodes
 385         var j = jQuery("#nonnodes").contents();
 386         j.addClass("asdf");
 387         ok( j.hasClass("asdf"), "Check node,textnode,comment for addClass" );
 388 });
 389
 390 test("removeClass(String) - simple", function() {
 391         expect(5);
 392
 393         var $divs = jQuery('div');
 394
 395         $divs.addClass("test").removeClass("test");
 396
 397         ok( !$divs.is('.test'), "Remove Class" );
 398
 399         reset();
 400
 401         $divs.addClass("test").addClass("foo").addClass("bar");
 402         $divs.removeClass("test").removeClass("bar").removeClass("foo");
 403
 404         ok( !$divs.is('.test,.bar,.foo'), "Remove multiple classes" );
 405
 406         reset();
 407
 408         // Make sure that a null value doesn't cause problems
 409         $divs.eq(0).addClass("test").removeClass(null);
 410         ok( $divs.eq(0).is('.test'), "Null value passed to removeClass" );
 411
 412         $divs.eq(0).addClass("test").removeClass("");
 413         ok( $divs.eq(0).is('.test'), "Empty string passed to removeClass" );
 414
 415         // using contents will get regular, text, and comment nodes
 416         var j = jQuery("#nonnodes").contents();
 417         j.removeClass("asdf");
 418         ok( !j.hasClass("asdf"), "Check node,textnode,comment for removeClass" );
 419 });
 420
 421 test("toggleClass(String)", function() {
 422         expect(6);
 423         var e = jQuery("#firstp");
 424         ok( !e.is(".test"), "Assert class not present" );
 425         e.toggleClass("test");
 426         ok( e.is(".test"), "Assert class present" );
 427         e.toggleClass("test");
 428         ok( !e.is(".test"), "Assert class not present" );
 429
 430         e.toggleClass("test", false);
 431         ok( !e.is(".test"), "Assert class not present" );
 432         e.toggleClass("test", true);
 433         ok( e.is(".test"), "Assert class present" );
 434         e.toggleClass("test", false);
 435         ok( !e.is(".test"), "Assert class not present" );
 436 });
 437
 438 test("removeAttr(String", function() {
 439         expect(1);
 440         equals( jQuery('#mark').removeAttr("class")[0].className, "", "remove class" );
 441 });
 442
 443 test("jQuery.className", function() {
 444         expect(6);
 445         var x = jQuery("<p>Hi</p>")[0];
 446         var c = jQuery.className;
 447         c.add(x, "hi");
 448         equals( x.className, "hi", "Check single added class" );
 449         c.add(x, "foo bar");
 450         equals( x.className, "hi foo bar", "Check more added classes" );
 451         c.remove(x);
 452         equals( x.className, "", "Remove all classes" );
 453         c.add(x, "hi foo bar");
 454         c.remove(x, "foo");
 455         equals( x.className, "hi bar", "Check removal of one class" );
 456         ok( c.has(x, "hi"), "Check has1" );
 457         ok( c.has(x, "bar"), "Check has2" );
 458 });