test/unit/dimensions.js

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