test/unit/dimensions.js

   1 module("dimensions", { teardown: moduleTeardown });
   2
   3 function pass( val ) {
   4         return val;
   5 }
   6
   7 function fn( val ) {
   8         return function(){ return val; };
   9 }
  10
  11 function testWidth( val ) {
  12         expect(8);
  13
  14         var $div = jQuery("#nothiddendiv");
  15         $div.width( val(30) );
  16         equals($div.width(), 30, "Test set to 30 correctly");
  17         $div.hide();
  18         equals($div.width(), 30, "Test hidden div");
  19         $div.show();
  20         $div.width( val(-1) ); // handle negative numbers by ignoring #1599
  21         equals($div.width(), 30, "Test negative width ignored");
  22         $div.css("padding", "20px");
  23         equals($div.width(), 30, "Test padding specified with pixels");
  24         $div.css("border", "2px solid #fff");
  25         equals($div.width(), 30, "Test border specified with pixels");
  26
  27         $div.css({ display: "", border: "", padding: "" });
  28
  29         jQuery("#nothiddendivchild").css({ width: 20, padding: "3px", border: "2px solid #fff" });
  30         equals(jQuery("#nothiddendivchild").width(), 20, "Test child width with border and padding");
  31         jQuery("#nothiddendiv, #nothiddendivchild").css({ border: "", padding: "", width: "" });
  32
  33         var blah = jQuery("blah");
  34         equals( blah.width( val(10) ), blah, "Make sure that setting a width on an empty set returns the set." );
  35         equals( blah.width(), null, "Make sure 'null' is returned on an empty set");
  36
  37         jQuery.removeData($div[0], 'olddisplay', true);
  38 }
  39
  40 test("width()", function() {
  41         testWidth( pass );
  42 });
  43
  44 test("width() with function", function() {
  45         testWidth( fn );
  46 });
  47
  48 test("width() with function args", function() {
  49         expect( 2 );
  50
  51         var $div = jQuery("#nothiddendiv");
  52         $div.width( 30 ).width(function(i, width) {
  53                 equals( width, 30, "Make sure previous value is corrrect." );
  54                 return width + 1;
  55         });
  56
  57         equals( $div.width(), 31, "Make sure value was modified correctly." );
  58 });
  59
  60 function testHeight( val ) {
  61         expect(8);
  62
  63         var $div = jQuery("#nothiddendiv");
  64         $div.height( val(30) );
  65         equals($div.height(), 30, "Test set to 30 correctly");
  66         $div.hide();
  67         equals($div.height(), 30, "Test hidden div");
  68         $div.show();
  69         $div.height( val(-1) ); // handle negative numbers by ignoring #1599
  70         equals($div.height(), 30, "Test negative height ignored");
  71         $div.css("padding", "20px");
  72         equals($div.height(), 30, "Test padding specified with pixels");
  73         $div.css("border", "2px solid #fff");
  74         equals($div.height(), 30, "Test border specified with pixels");
  75
  76         $div.css({ display: "", border: "", padding: "", height: "1px" });
  77
  78         jQuery("#nothiddendivchild").css({ height: 20, padding: "3px", border: "2px solid #fff" });
  79         equals(jQuery("#nothiddendivchild").height(), 20, "Test child height with border and padding");
  80         jQuery("#nothiddendiv, #nothiddendivchild").css({ border: "", padding: "", height: "" });
  81
  82         var blah = jQuery("blah");
  83         equals( blah.height( val(10) ), blah, "Make sure that setting a height on an empty set returns the set." );
  84         equals( blah.height(), null, "Make sure 'null' is returned on an empty set");
  85
  86         jQuery.removeData($div[0], 'olddisplay', true);
  87 }
  88
  89 test("height()", function() {
  90         testHeight( pass );
  91 });
  92
  93 test("height() with function", function() {
  94         testHeight( fn );
  95 });
  96
  97 test("height() with function args", function() {
  98         expect( 2 );
  99
 100         var $div = jQuery("#nothiddendiv");
 101         $div.height( 30 ).height(function(i, height) {
 102                 equals( height, 30, "Make sure previous value is corrrect." );
 103                 return height + 1;
 104         });
 105
 106         equals( $div.height(), 31, "Make sure value was modified correctly." );
 107 });
 108
 109 test("innerWidth()", function() {
 110         expect(4);
 111
 112         var $div = jQuery("#nothiddendiv");
 113         // set styles
 114         $div.css({
 115                 margin: 10,
 116                 border: "2px solid #fff",
 117                 width: 30
 118         });
 119
 120         equals($div.innerWidth(), 30, "Test with margin and border");
 121         $div.css("padding", "20px");
 122         equals($div.innerWidth(), 70, "Test with margin, border and padding");
 123         $div.hide();
 124         equals($div.innerWidth(), 70, "Test hidden div");
 125
 126         // reset styles
 127         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
 128
 129         var div = jQuery( "<div>" );
 130
 131         // Temporarily require 0 for backwards compat - should be auto
 132         equals( div.innerWidth(), 0, "Make sure that disconnected nodes are handled." );
 133
 134         div.remove();
 135         jQuery.removeData($div[0], 'olddisplay', true);
 136 });
 137
 138 test("innerHeight()", function() {
 139         expect(4);
 140
 141         var $div = jQuery("#nothiddendiv");
 142         // set styles
 143         $div.css({
 144                 margin: 10,
 145                 border: "2px solid #fff",
 146                 height: 30
 147         });
 148
 149         equals($div.innerHeight(), 30, "Test with margin and border");
 150         $div.css("padding", "20px");
 151         equals($div.innerHeight(), 70, "Test with margin, border and padding");
 152         $div.hide();
 153         equals($div.innerHeight(), 70, "Test hidden div");
 154
 155         // reset styles
 156         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
 157
 158         var div = jQuery( "<div>" );
 159
 160         // Temporarily require 0 for backwards compat - should be auto
 161         equals( div.innerHeight(), 0, "Make sure that disconnected nodes are handled." );
 162
 163         div.remove();
 164         jQuery.removeData($div[0], 'olddisplay', true);
 165 });
 166
 167 test("outerWidth()", function() {
 168         expect(7);
 169
 170         var $div = jQuery("#nothiddendiv");
 171         $div.css("width", 30);
 172
 173         equals($div.outerWidth(), 30, "Test with only width set");
 174         $div.css("padding", "20px");
 175         equals($div.outerWidth(), 70, "Test with padding");
 176         $div.css("border", "2px solid #fff");
 177         equals($div.outerWidth(), 74, "Test with padding and border");
 178         $div.css("margin", "10px");
 179         equals($div.outerWidth(), 74, "Test with padding, border and margin without margin option");
 180         $div.css("position", "absolute");
 181         equals($div.outerWidth(true), 94, "Test with padding, border and margin with margin option");
 182         $div.hide();
 183         equals($div.outerWidth(true), 94, "Test hidden div with padding, border and margin with margin option");
 184
 185         // reset styles
 186         $div.css({ position: "", display: "", border: "", padding: "", width: "", height: "" });
 187
 188         var div = jQuery( "<div>" );
 189
 190         // Temporarily require 0 for backwards compat - should be auto
 191         equals( div.outerWidth(), 0, "Make sure that disconnected nodes are handled." );
 192
 193         div.remove();
 194         jQuery.removeData($div[0], 'olddisplay', true);
 195 });
 196
 197 test("outerHeight()", function() {
 198         expect(7);
 199
 200         var $div = jQuery("#nothiddendiv");
 201         $div.css("height", 30);
 202
 203         equals($div.outerHeight(), 30, "Test with only width set");
 204         $div.css("padding", "20px");
 205         equals($div.outerHeight(), 70, "Test with padding");
 206         $div.css("border", "2px solid #fff");
 207         equals($div.outerHeight(), 74, "Test with padding and border");
 208         $div.css("margin", "10px");
 209         equals($div.outerHeight(), 74, "Test with padding, border and margin without margin option");
 210         equals($div.outerHeight(true), 94, "Test with padding, border and margin with margin option");
 211         $div.hide();
 212         equals($div.outerHeight(true), 94, "Test hidden div with padding, border and margin with margin option");
 213
 214         // reset styles
 215         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
 216
 217         var div = jQuery( "<div>" );
 218
 219         // Temporarily require 0 for backwards compat - should be auto
 220         equals( div.outerHeight(), 0, "Make sure that disconnected nodes are handled." );
 221
 222         div.remove();
 223         jQuery.removeData($div[0], 'olddisplay', true);
 224 });