test/unit/dimensions.js

   1 (function() {
   2
   3 if ( !jQuery.fn.width ) {
   4         return;
   5 }
   6
   7 module("dimensions", { teardown: moduleTeardown });
   8
   9 function pass( val ) {
  10         return val;
  11 }
  12
  13 function fn( val ) {
  14         return function() {
  15                 return val;
  16         };
  17 }
  18
  19 /*
  20         ======== local reference =======
  21         pass and fn can be used to test passing functions to setters
  22         See testWidth below for an example
  23
  24         pass( value );
  25                 This function returns whatever value is passed in
  26
  27         fn( value );
  28                 Returns a function that returns the value
  29 */
  30
  31 function testWidth( val ) {
  32         expect(9);
  33         var $div, blah;
  34
  35         $div = jQuery("#nothiddendiv");
  36         $div.width( val(30) );
  37         equal($div.width(), 30, "Test set to 30 correctly");
  38         $div.hide();
  39         equal($div.width(), 30, "Test hidden div");
  40         $div.show();
  41         $div.width( val(-1) ); // handle negative numbers by setting to 0 #11604
  42         equal($div.width(), 0, "Test negative width normalized to 0");
  43         $div.css("padding", "20px");
  44         equal($div.width(), 0, "Test padding specified with pixels");
  45         $div.css("border", "2px solid #fff");
  46         equal($div.width(), 0, "Test border specified with pixels");
  47
  48         $div.css({ "display": "", "border": "", "padding": "" });
  49
  50         jQuery("#nothiddendivchild").css({ "width": 20, "padding": "3px", "border": "2px solid #fff" });
  51         equal(jQuery("#nothiddendivchild").width(), 20, "Test child width with border and padding");
  52         jQuery("#nothiddendiv, #nothiddendivchild").css({ "border": "", "padding": "", "width": "" });
  53
  54         blah = jQuery("blah");
  55         equal( blah.width( val(10) ), blah, "Make sure that setting a width on an empty set returns the set." );
  56         equal( blah.width(), null, "Make sure 'null' is returned on an empty set");
  57
  58         equal( jQuery(window).width(), document.documentElement.clientWidth, "Window width is equal to width reported by window/document." );
  59
  60         QUnit.expectJqData( this, $div[0], "olddisplay" );
  61 }
  62
  63 test("width()", function() {
  64         testWidth( pass );
  65 });
  66
  67 test("width(Function)", function() {
  68         testWidth( fn );
  69 });
  70
  71 test("width(Function(args))", function() {
  72         expect( 2 );
  73
  74         var $div = jQuery("#nothiddendiv");
  75         $div.width( 30 ).width(function(i, width) {
  76                 equal( width, 30, "Make sure previous value is correct." );
  77                 return width + 1;
  78         });
  79
  80         equal( $div.width(), 31, "Make sure value was modified correctly." );
  81 });
  82
  83 function testHeight( val ) {
  84         expect(9);
  85
  86         var $div, blah;
  87
  88         $div = jQuery("#nothiddendiv");
  89         $div.height( val(30) );
  90         equal($div.height(), 30, "Test set to 30 correctly");
  91         $div.hide();
  92         equal($div.height(), 30, "Test hidden div");
  93         $div.show();
  94         $div.height( val(-1) ); // handle negative numbers by setting to 0 #11604
  95         equal($div.height(), 0, "Test negative height normalized to 0");
  96         $div.css("padding", "20px");
  97         equal($div.height(), 0, "Test padding specified with pixels");
  98         $div.css("border", "2px solid #fff");
  99         equal($div.height(), 0, "Test border specified with pixels");
 100
 101         $div.css({ "display": "", "border": "", "padding": "", "height": "1px" });
 102
 103         jQuery("#nothiddendivchild").css({ "height": 20, "padding": "3px", "border": "2px solid #fff" });
 104         equal(jQuery("#nothiddendivchild").height(), 20, "Test child height with border and padding");
 105         jQuery("#nothiddendiv, #nothiddendivchild").css({ "border": "", "padding": "", "height": "" });
 106
 107         blah = jQuery("blah");
 108         equal( blah.height( val(10) ), blah, "Make sure that setting a height on an empty set returns the set." );
 109         equal( blah.height(), null, "Make sure 'null' is returned on an empty set");
 110
 111         equal( jQuery(window).height(), document.documentElement.clientHeight, "Window width is equal to width reported by window/document." );
 112
 113         QUnit.expectJqData( this, $div[0], "olddisplay" );
 114 }
 115
 116 test("height()", function() {
 117         testHeight( pass );
 118 });
 119
 120 test("height(Function)", function() {
 121         testHeight( fn );
 122 });
 123
 124 test("height(Function(args))", function() {
 125         expect( 2 );
 126
 127         var $div = jQuery("#nothiddendiv");
 128         $div.height( 30 ).height(function(i, height) {
 129                 equal( height, 30, "Make sure previous value is correct." );
 130                 return height + 1;
 131         });
 132
 133         equal( $div.height(), 31, "Make sure value was modified correctly." );
 134 });
 135
 136 test("innerWidth()", function() {
 137         expect( 6 );
 138
 139         var $div, div,
 140                 $win = jQuery( window ),
 141                 $doc = jQuery( document );
 142
 143         equal( jQuery( window ).innerWidth(), $win.width(), "Test on window" );
 144         equal( jQuery( document ).innerWidth(), $doc.width(), "Test on document" );
 145
 146         $div = jQuery( "#nothiddendiv" );
 147         $div.css({
 148                 "margin": 10,
 149                 "border": "2px solid #fff",
 150                 "width": 30
 151         });
 152
 153         equal( $div.innerWidth(), 30, "Test with margin and border" );
 154         $div.css( "padding", "20px" );
 155         equal( $div.innerWidth(), 70, "Test with margin, border and padding" );
 156         $div.hide();
 157         equal( $div.innerWidth(), 70, "Test hidden div" );
 158
 159         // reset styles
 160         $div.css({ "display": "", "border": "", "padding": "", "width": "", "height": "" });
 161
 162         div = jQuery( "<div>" );
 163
 164         // Temporarily require 0 for backwards compat - should be auto
 165         equal( div.innerWidth(), 0, "Make sure that disconnected nodes are handled." );
 166
 167         div.remove();
 168         QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
 169 });
 170
 171 test("innerHeight()", function() {
 172         expect( 6 );
 173
 174         var $div, div,
 175                 $win = jQuery( window ),
 176                 $doc = jQuery( document );
 177
 178         equal( jQuery( window ).innerHeight(), $win.height(), "Test on window" );
 179         equal( jQuery( document ).innerHeight(), $doc.height(), "Test on document" );
 180
 181         $div = jQuery( "#nothiddendiv" );
 182         $div.css({
 183                 "margin": 10,
 184                 "border": "2px solid #fff",
 185                 "height": 30
 186         });
 187
 188         equal( $div.innerHeight(), 30, "Test with margin and border" );
 189         $div.css( "padding", "20px" );
 190         equal( $div.innerHeight(), 70, "Test with margin, border and padding" );
 191         $div.hide();
 192         equal( $div.innerHeight(), 70, "Test hidden div" );
 193
 194         // reset styles
 195         $div.css({ "display": "", "border": "", "padding": "", "width": "", "height": "" });
 196
 197         div = jQuery( "<div>" );
 198
 199         // Temporarily require 0 for backwards compat - should be auto
 200         equal( div.innerHeight(), 0, "Make sure that disconnected nodes are handled." );
 201
 202         div.remove();
 203         QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
 204 });
 205
 206 test("outerWidth()", function() {
 207         expect( 11 );
 208
 209         var $div, div,
 210                 $win = jQuery( window ),
 211                 $doc = jQuery( document );
 212
 213         equal( jQuery( window ).outerWidth(), $win.width(), "Test on window without margin option" );
 214         equal( jQuery( window ).outerWidth( true ), $win.width(), "Test on window with margin option" );
 215         equal( jQuery( document ).outerWidth(), $doc.width(), "Test on document without margin option" );
 216         equal( jQuery( document ).outerWidth( true ), $doc.width(), "Test on document with margin option" );
 217
 218         $div = jQuery( "#nothiddendiv" );
 219         $div.css( "width", 30 );
 220
 221         equal( $div.outerWidth(), 30, "Test with only width set" );
 222         $div.css( "padding", "20px" );
 223         equal( $div.outerWidth(), 70, "Test with padding" );
 224         $div.css( "border", "2px solid #fff" );
 225         equal( $div.outerWidth(), 74, "Test with padding and border" );
 226         $div.css( "margin", "10px" );
 227         equal( $div.outerWidth(), 74, "Test with padding, border and margin without margin option" );
 228         $div.css( "position", "absolute" );
 229         equal( $div.outerWidth( true ), 94, "Test with padding, border and margin with margin option" );
 230         $div.hide();
 231         equal( $div.outerWidth( true ), 94, "Test hidden div with padding, border and margin with margin option" );
 232
 233         // reset styles
 234         $div.css({ "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" });
 235
 236         div = jQuery( "<div>" );
 237
 238         // Temporarily require 0 for backwards compat - should be auto
 239         equal( div.outerWidth(), 0, "Make sure that disconnected nodes are handled." );
 240
 241         div.remove();
 242         QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
 243 });
 244
 245 test("child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height()  see #9441 #9300", function() {
 246         expect(16);
 247
 248         // setup html
 249         var $divNormal = jQuery("<div>").css({ "width": "100px", "height": "100px", "border": "10px solid white", "padding": "2px", "margin": "3px" }),
 250                 $divChild = $divNormal.clone(),
 251                 $divUnconnected = $divNormal.clone(),
 252                 $divHiddenParent = jQuery("<div>").css( "display", "none" ).append( $divChild ).appendTo("body");
 253         $divNormal.appendTo("body");
 254
 255         // tests that child div of a hidden div works the same as a normal div
 256         equal( $divChild.width(), $divNormal.width(), "child of a hidden element width() is wrong see #9441" );
 257         equal( $divChild.innerWidth(), $divNormal.innerWidth(), "child of a hidden element innerWidth() is wrong see #9441" );
 258         equal( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #9441" );
 259         equal( $divChild.outerWidth(true), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #9300" );
 260
 261         equal( $divChild.height(), $divNormal.height(), "child of a hidden element height() is wrong see #9441" );
 262         equal( $divChild.innerHeight(), $divNormal.innerHeight(), "child of a hidden element innerHeight() is wrong see #9441" );
 263         equal( $divChild.outerHeight(), $divNormal.outerHeight(), "child of a hidden element outerHeight() is wrong see #9441" );
 264         equal( $divChild.outerHeight(true), $divNormal.outerHeight( true ), "child of a hidden element outerHeight( true ) is wrong see #9300" );
 265
 266         // tests that child div of an unconnected div works the same as a normal div
 267         equal( $divUnconnected.width(), $divNormal.width(), "unconnected element width() is wrong see #9441" );
 268         equal( $divUnconnected.innerWidth(), $divNormal.innerWidth(), "unconnected element innerWidth() is wrong see #9441" );
 269         equal( $divUnconnected.outerWidth(), $divNormal.outerWidth(), "unconnected element outerWidth() is wrong see #9441" );
 270         equal( $divUnconnected.outerWidth(true), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #9300" );
 271
 272         equal( $divUnconnected.height(), $divNormal.height(), "unconnected element height() is wrong see #9441" );
 273         equal( $divUnconnected.innerHeight(), $divNormal.innerHeight(), "unconnected element innerHeight() is wrong see #9441" );
 274         equal( $divUnconnected.outerHeight(), $divNormal.outerHeight(), "unconnected element outerHeight() is wrong see #9441" );
 275         equal( $divUnconnected.outerHeight(true), $divNormal.outerHeight( true ), "unconnected element outerHeight( true ) is wrong see #9300" );
 276
 277         // teardown html
 278         $divHiddenParent.remove();
 279         $divNormal.remove();
 280 });
 281
 282 test("getting dimensions shouldn't modify runtimeStyle see #9233", function() {
 283         expect( 1 );
 284
 285         var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
 286                 div = $div.get( 0 ),
 287                 runtimeStyle = div.runtimeStyle;
 288
 289         if ( runtimeStyle ) {
 290                 div.runtimeStyle.marginLeft = "12em";
 291                 div.runtimeStyle.left = "11em";
 292         }
 293
 294         $div.outerWidth( true );
 295
 296         if ( runtimeStyle ) {
 297                 equal( div.runtimeStyle.left, "11em", "getting dimensions modifies runtimeStyle, see #9233" );
 298         } else {
 299                 ok( true, "this browser doesn't support runtimeStyle, see #9233" );
 300         }
 301
 302         $div.remove();
 303 });
 304
 305 test( "table dimensions", 2, function() {
 306         var table = jQuery("<table><colgroup><col/><col/></colgroup><tbody><tr><td></td><td>a</td></tr><tr><td></td><td>a</td></tr></tbody></table>").appendTo("#qunit-fixture"),
 307                 tdElem = table.find("td").first(),
 308                 colElem = table.find("col").first().width( 300 );
 309
 310         table.find("td").css({ "margin": 0, "padding": 0 });
 311
 312         equal( tdElem.width(), tdElem.width(), "width() doesn't alter dimension values of empty cells, see #11293" );
 313         equal( colElem.width(), 300, "col elements have width(), see #12243" );
 314 });
 315
 316 test("box-sizing:border-box child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height()  see #10413", function() {
 317         expect(16);
 318
 319         // setup html
 320         var $divNormal = jQuery("<div>").css({ "boxSizing": "border-box", "width": "100px", "height": "100px", "border": "10px solid white", "padding": "2px", "margin": "3px" }),
 321                 $divChild = $divNormal.clone(),
 322                 $divUnconnected = $divNormal.clone(),
 323                 $divHiddenParent = jQuery("<div>").css( "display", "none" ).append( $divChild ).appendTo("body");
 324         $divNormal.appendTo("body");
 325
 326         // tests that child div of a hidden div works the same as a normal div
 327         equal( $divChild.width(), $divNormal.width(), "child of a hidden element width() is wrong see #10413" );
 328         equal( $divChild.innerWidth(), $divNormal.innerWidth(), "child of a hidden element innerWidth() is wrong see #10413" );
 329         equal( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #10413" );
 330         equal( $divChild.outerWidth(true), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #10413" );
 331
 332         equal( $divChild.height(), $divNormal.height(), "child of a hidden element height() is wrong see #10413" );
 333         equal( $divChild.innerHeight(), $divNormal.innerHeight(), "child of a hidden element innerHeight() is wrong see #10413" );
 334         equal( $divChild.outerHeight(), $divNormal.outerHeight(), "child of a hidden element outerHeight() is wrong see #10413" );
 335         equal( $divChild.outerHeight(true), $divNormal.outerHeight( true ), "child of a hidden element outerHeight( true ) is wrong see #10413" );
 336
 337         // tests that child div of an unconnected div works the same as a normal div
 338         equal( $divUnconnected.width(), $divNormal.width(), "unconnected element width() is wrong see #10413" );
 339         equal( $divUnconnected.innerWidth(), $divNormal.innerWidth(), "unconnected element innerWidth() is wrong see #10413" );
 340         equal( $divUnconnected.outerWidth(), $divNormal.outerWidth(), "unconnected element outerWidth() is wrong see #10413" );
 341         equal( $divUnconnected.outerWidth(true), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #10413" );
 342
 343         equal( $divUnconnected.height(), $divNormal.height(), "unconnected element height() is wrong see #10413" );
 344         equal( $divUnconnected.innerHeight(), $divNormal.innerHeight(), "unconnected element innerHeight() is wrong see #10413" );
 345         equal( $divUnconnected.outerHeight(), $divNormal.outerHeight(), "unconnected element outerHeight() is wrong see #10413" );
 346         equal( $divUnconnected.outerHeight(true), $divNormal.outerHeight( true ), "unconnected element outerHeight( true ) is wrong see #10413" );
 347
 348         // teardown html
 349         $divHiddenParent.remove();
 350         $divNormal.remove();
 351 });
 352
 353 test("outerHeight()", function() {
 354         expect( 11 );
 355
 356         var $div, div,
 357                 $win = jQuery( window ),
 358                 $doc = jQuery( document );
 359
 360         equal( jQuery( window ).outerHeight(), $win.height(), "Test on window without margin option" );
 361         equal( jQuery( window ).outerHeight( true ), $win.height(), "Test on window with margin option" );
 362         equal( jQuery( document ).outerHeight(), $doc.height(), "Test on document without margin option" );
 363         equal( jQuery( document ).outerHeight( true ), $doc.height(), "Test on document with margin option" );
 364
 365         $div = jQuery( "#nothiddendiv" );
 366         $div.css( "height", 30 );
 367
 368         equal( $div.outerHeight(), 30, "Test with only width set" );
 369         $div.css( "padding", "20px" );
 370         equal( $div.outerHeight(), 70, "Test with padding" );
 371         $div.css( "border", "2px solid #fff" );
 372         equal( $div.outerHeight(), 74, "Test with padding and border" );
 373         $div.css( "margin", "10px" );
 374         equal( $div.outerHeight(), 74, "Test with padding, border and margin without margin option" );
 375         equal( $div.outerHeight( true ), 94, "Test with padding, border and margin with margin option" );
 376         $div.hide();
 377         equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
 378
 379         // reset styles
 380         $div.css({ "display": "", "border": "", "padding": "", "width": "", "height": "" });
 381
 382         div = jQuery( "<div>" );
 383
 384         // Temporarily require 0 for backwards compat - should be auto
 385         equal( div.outerHeight(), 0, "Make sure that disconnected nodes are handled." );
 386
 387         div.remove();
 388         QUnit.expectJqData( this, $div[ 0 ], "olddisplay" );
 389 });
 390
 391 test("passing undefined is a setter #5571", function() {
 392         expect(4);
 393         equal(jQuery("#nothiddendiv").height(30).height(undefined).height(), 30, ".height(undefined) is chainable (#5571)");
 394         equal(jQuery("#nothiddendiv").height(30).innerHeight(undefined).height(), 30, ".innerHeight(undefined) is chainable (#5571)");
 395         equal(jQuery("#nothiddendiv").height(30).outerHeight(undefined).height(), 30, ".outerHeight(undefined) is chainable (#5571)");
 396         equal(jQuery("#nothiddendiv").width(30).width(undefined).width(), 30, ".width(undefined) is chainable (#5571)");
 397 });
 398
 399 test( "getters on non elements should return null", function() {
 400         expect( 8 );
 401
 402         var nonElem = jQuery("notAnElement");
 403
 404         strictEqual( nonElem.width(), null, ".width() is not null (#12283)" );
 405         strictEqual( nonElem.innerWidth(), null, ".innerWidth() is not null (#12283)" );
 406         strictEqual( nonElem.outerWidth(), null, ".outerWidth() is not null (#12283)" );
 407         strictEqual( nonElem.outerWidth( true ), null, ".outerWidth(true) is not null (#12283)" );
 408
 409         strictEqual( nonElem.height(), null, ".height() is not null (#12283)" );
 410         strictEqual( nonElem.innerHeight(), null, ".innerHeight() is not null (#12283)" );
 411         strictEqual( nonElem.outerHeight(), null, ".outerHeight() is not null (#12283)" );
 412         strictEqual( nonElem.outerHeight( true ), null, ".outerHeight(true) is not null (#12283)" );
 413 });
 414
 415 test("setters with and without box-sizing:border-box", function(){
 416         expect(20);
 417
 418         // Support: Android 2.3 (-webkit-box-sizing).
 419         var el_bb = jQuery("<div style='width:114px;height:114px;margin:5px;padding:3px;border:4px solid white;-webkit-box-sizing:border-box;box-sizing:border-box;'>test</div>").appendTo("#qunit-fixture"),
 420                 el = jQuery("<div style='width:100px;height:100px;margin:5px;padding:3px;border:4px solid white;'>test</div>").appendTo("#qunit-fixture"),
 421                 expected = 100;
 422
 423         equal( el_bb.width( 101 ).width(), expected + 1, "test border-box width(int) by roundtripping" );
 424         equal( el_bb.innerWidth( 108 ).width(), expected + 2, "test border-box innerWidth(int) by roundtripping" );
 425         equal( el_bb.outerWidth( 117 ).width(), expected + 3, "test border-box outerWidth(int) by roundtripping" );
 426         equal( el_bb.outerWidth( 118, false ).width(), expected + 4, "test border-box outerWidth(int, false) by roundtripping" );
 427         equal( el_bb.outerWidth( 129, true ).width(), expected + 5, "test border-box innerWidth(int, true) by roundtripping" );
 428
 429         equal( el_bb.height( 101 ).height(), expected + 1, "test border-box height(int) by roundtripping" );
 430         equal( el_bb.innerHeight( 108 ).height(), expected + 2, "test border-box innerHeight(int) by roundtripping" );
 431         equal( el_bb.outerHeight( 117 ).height(), expected + 3, "test border-box outerHeight(int) by roundtripping" );
 432         equal( el_bb.outerHeight( 118, false ).height(), expected + 4, "test border-box outerHeight(int, false) by roundtripping" );
 433         equal( el_bb.outerHeight( 129, true ).height(), expected + 5, "test border-box innerHeight(int, true) by roundtripping" );
 434
 435         equal( el.width( 101 ).width(), expected + 1, "test border-box width(int) by roundtripping" );
 436         equal( el.innerWidth( 108 ).width(), expected + 2, "test border-box innerWidth(int) by roundtripping" );
 437         equal( el.outerWidth( 117 ).width(), expected + 3, "test border-box outerWidth(int) by roundtripping" );
 438         equal( el.outerWidth( 118, false ).width(), expected + 4, "test border-box outerWidth(int, false) by roundtripping" );
 439         equal( el.outerWidth( 129, true ).width(), expected + 5, "test border-box innerWidth(int, true) by roundtripping" );
 440
 441         equal( el.height( 101 ).height(), expected + 1, "test border-box height(int) by roundtripping" );
 442         equal( el.innerHeight( 108 ).height(), expected + 2, "test border-box innerHeight(int) by roundtripping" );
 443         equal( el.outerHeight( 117 ).height(), expected + 3, "test border-box outerHeight(int) by roundtripping" );
 444         equal( el.outerHeight( 118, false ).height(), expected + 4, "test border-box outerHeight(int, false) by roundtripping" );
 445         equal( el.outerHeight( 129, true ).height(), expected + 5, "test border-box innerHeight(int, true) by roundtripping" );
 446 });
 447
 448 testIframe( "dimensions/documentLarge", "window vs. large document", function( jQuery, window, document ) {
 449         expect(2);
 450
 451         ok( jQuery( document ).height() > jQuery( window ).height(), "document height is larger than window height" );
 452         ok( jQuery( document ).width() > jQuery( window ).width(), "document width is larger than window width" );
 453 });
 454
 455 test( "allow modification of coordinates argument (gh-1848)", 1, function() {
 456         var offsetTop,
 457                 element = jQuery( "<div/>" ).appendTo( "#qunit-fixture" );
 458
 459         element.offset(function( index, coords ) {
 460                 coords.top = 100;
 461
 462                 return coords;
 463         });
 464
 465         offsetTop = element.offset().top;
 466         ok( Math.abs(offsetTop - 100) < 0.02,
 467                 "coordinates are modified (got offset.top: " +  offsetTop + ")");
 468 });
 469
 470 })();