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("width()", function() {
 236         expect(6);
 237
 238         var $div = jQuery("#nothiddendiv");
 239         $div.width(30);
 240         equals($div.width(), 30, "Test set to 30 correctly");
 241         $div.hide();
 242         equals($div.width(), 30, "Test hidden div");
 243         $div.show();
 244         $div.width(-1); // handle negative numbers by ignoring #1599
 245         equals($div.width(), 30, "Test negative width ignored");
 246         $div.css("padding", "20px");
 247         equals($div.width(), 30, "Test padding specified with pixels");
 248         $div.css("border", "2px solid #fff");
 249         equals($div.width(), 30, "Test border specified with pixels");
 250         //$div.css("padding", "2em");
 251         //equals($div.width(), 30, "Test padding specified with ems");
 252         //$div.css("border", "1em solid #fff");
 253         //DISABLED - Opera 9.6 fails this test, returns 8
 254         //equals($div.width(), 30, "Test border specified with ems");
 255         //$div.css("padding", "2%");
 256         //equals($div.width(), 30, "Test padding specified with percent");
 257
 258         $div.css({ display: "", border: "", padding: "" });
 259
 260         jQuery("#nothiddendivchild").css({ padding: "3px", border: "2px solid #fff" });
 261         equals(jQuery("#nothiddendivchild").width(), 20, "Test child width with border and padding");
 262         jQuery("#nothiddendiv, #nothiddendivchild").css({ border: "", padding: "", width: "" });
 263 });
 264
 265 test("height()", function() {
 266         expect(5);
 267
 268         var $div = jQuery("#nothiddendiv");
 269         $div.height(30);
 270         equals($div.height(), 30, "Test set to 30 correctly");
 271         $div.hide();
 272         equals($div.height(), 30, "Test hidden div");
 273         $div.show();
 274         $div.height(-1); // handle negative numbers by ignoring #1599
 275         equals($div.height(), 30, "Test negative height ignored");
 276         $div.css("padding", "20px");
 277         equals($div.height(), 30, "Test padding specified with pixels");
 278         $div.css("border", "2px solid #fff");
 279         equals($div.height(), 30, "Test border specified with pixels");
 280         //$div.css("padding", "2em");
 281         //equals($div.height(), 30, "Test padding specified with ems");
 282         //$div.css("border", "1em solid #fff");
 283         //DISABLED - Opera 9.6 fails this test, returns 8
 284         //equals($div.height(), 30, "Test border specified with ems");
 285         //$div.css("padding", "2%");
 286         //equals($div.height(), 30, "Test padding specified with percent");
 287
 288         $div.css({ display: "", border: "", padding: "", height: "1px" });
 289 });
 290
 291 test("addClass(String)", function() {
 292         expect(2);
 293         var div = jQuery("div");
 294         div.addClass("test");
 295         var pass = true;
 296         for ( var i = 0; i < div.size(); i++ ) {
 297          if ( div.get(i).className.indexOf("test") == -1 ) pass = false;
 298         }
 299         ok( pass, "Add Class" );
 300
 301         // using contents will get regular, text, and comment nodes
 302         var j = jQuery("#nonnodes").contents();
 303         j.addClass("asdf");
 304         ok( j.hasClass("asdf"), "Check node,textnode,comment for addClass" );
 305 });
 306
 307 test("removeClass(String) - simple", function() {
 308         expect(5);
 309
 310         var $divs = jQuery('div');
 311
 312         $divs.addClass("test").removeClass("test");
 313
 314         ok( !$divs.is('.test'), "Remove Class" );
 315
 316         reset();
 317
 318         $divs.addClass("test").addClass("foo").addClass("bar");
 319         $divs.removeClass("test").removeClass("bar").removeClass("foo");
 320
 321         ok( !$divs.is('.test,.bar,.foo'), "Remove multiple classes" );
 322
 323         reset();
 324
 325         // Make sure that a null value doesn't cause problems
 326         $divs.eq(0).addClass("test").removeClass(null);
 327         ok( $divs.eq(0).is('.test'), "Null value passed to removeClass" );
 328
 329         $divs.eq(0).addClass("test").removeClass("");
 330         ok( $divs.eq(0).is('.test'), "Empty string passed to removeClass" );
 331
 332         // using contents will get regular, text, and comment nodes
 333         var j = jQuery("#nonnodes").contents();
 334         j.removeClass("asdf");
 335         ok( !j.hasClass("asdf"), "Check node,textnode,comment for removeClass" );
 336 });
 337
 338 test("toggleClass(String)", function() {
 339         expect(6);
 340         var e = jQuery("#firstp");
 341         ok( !e.is(".test"), "Assert class not present" );
 342         e.toggleClass("test");
 343         ok( e.is(".test"), "Assert class present" );
 344         e.toggleClass("test");
 345         ok( !e.is(".test"), "Assert class not present" );
 346
 347         e.toggleClass("test", false);
 348         ok( !e.is(".test"), "Assert class not present" );
 349         e.toggleClass("test", true);
 350         ok( e.is(".test"), "Assert class present" );
 351         e.toggleClass("test", false);
 352         ok( !e.is(".test"), "Assert class not present" );
 353 });
 354
 355 test("removeAttr(String", function() {
 356         expect(1);
 357         equals( jQuery('#mark').removeAttr("class")[0].className, "", "remove class" );
 358 });
 359
 360 test("jQuery.className", function() {
 361         expect(6);
 362         var x = jQuery("<p>Hi</p>")[0];
 363         var c = jQuery.className;
 364         c.add(x, "hi");
 365         equals( x.className, "hi", "Check single added class" );
 366         c.add(x, "foo bar");
 367         equals( x.className, "hi foo bar", "Check more added classes" );
 368         c.remove(x);
 369         equals( x.className, "", "Remove all classes" );
 370         c.add(x, "hi foo bar");
 371         c.remove(x, "foo");
 372         equals( x.className, "hi bar", "Check removal of one class" );
 373         ok( c.has(x, "hi"), "Check has1" );
 374         ok( c.has(x, "bar"), "Check has2" );
 375 });