test/unit/dimensions.js

   1 module("dimensions");
   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(7);
  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 }
  36
  37 test("width()", function() {
  38         testWidth( pass );
  39 });
  40
  41 test("width() with function", function() {
  42         testWidth( fn );
  43 });
  44
  45 test("width() with function args", function() {
  46         expect( 2 );
  47
  48         var $div = jQuery("#nothiddendiv");
  49         $div.width( 30 ).width(function(i, width) {
  50                 equals( width, 30, "Make sure previous value is corrrect." );
  51                 return width + 1;
  52         });
  53
  54         equals( $div.width(), 31, "Make sure value was modified correctly." );
  55 });
  56
  57 function testHeight( val ) {
  58         expect(6);
  59
  60         var $div = jQuery("#nothiddendiv");
  61         $div.height( val(30) );
  62         equals($div.height(), 30, "Test set to 30 correctly");
  63         $div.hide();
  64         equals($div.height(), 30, "Test hidden div");
  65         $div.show();
  66         $div.height( val(-1) ); // handle negative numbers by ignoring #1599
  67         equals($div.height(), 30, "Test negative height ignored");
  68         $div.css("padding", "20px");
  69         equals($div.height(), 30, "Test padding specified with pixels");
  70         $div.css("border", "2px solid #fff");
  71         equals($div.height(), 30, "Test border specified with pixels");
  72
  73         $div.css({ display: "", border: "", padding: "", height: "1px" });
  74
  75         var blah = jQuery("blah");
  76         equals( blah.height( val(10) ), blah, "Make sure that setting a height on an empty set returns the set." );
  77 }
  78
  79 test("height()", function() {
  80         testHeight( pass );
  81 });
  82
  83 test("width() with function", function() {
  84         testHeight( fn );
  85 });
  86
  87 test("height() with function args", function() {
  88         expect( 2 );
  89
  90         var $div = jQuery("#nothiddendiv");
  91         $div.height( 30 ).height(function(i, height) {
  92                 equals( height, 30, "Make sure previous value is corrrect." );
  93                 return height + 1;
  94         });
  95
  96         equals( $div.height(), 31, "Make sure value was modified correctly." );
  97 });
  98
  99 test("innerWidth()", function() {
 100         expect(3);
 101
 102         var $div = jQuery("#nothiddendiv");
 103         // set styles
 104         $div.css({
 105                 margin: 10,
 106                 border: "2px solid #fff",
 107                 width: 30
 108         });
 109
 110         equals($div.innerWidth(), 30, "Test with margin and border");
 111         $div.css("padding", "20px");
 112         equals($div.innerWidth(), 70, "Test with margin, border and padding");
 113         $div.hide();
 114         equals($div.innerWidth(), 70, "Test hidden div");
 115
 116         // reset styles
 117         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
 118 });
 119
 120 test("innerHeight()", function() {
 121         expect(3);
 122
 123         var $div = jQuery("#nothiddendiv");
 124         // set styles
 125         $div.css({
 126                 margin: 10,
 127                 border: "2px solid #fff",
 128                 height: 30
 129         });
 130
 131         equals($div.innerHeight(), 30, "Test with margin and border");
 132         $div.css("padding", "20px");
 133         equals($div.innerHeight(), 70, "Test with margin, border and padding");
 134         $div.hide();
 135         equals($div.innerHeight(), 70, "Test hidden div");
 136
 137         // reset styles
 138         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
 139 });
 140
 141 test("outerWidth()", function() {
 142         expect(6);
 143
 144         var $div = jQuery("#nothiddendiv");
 145         $div.css("width", 30);
 146
 147         equals($div.outerWidth(), 30, "Test with only width set");
 148         $div.css("padding", "20px");
 149         equals($div.outerWidth(), 70, "Test with padding");
 150         $div.css("border", "2px solid #fff");
 151         equals($div.outerWidth(), 74, "Test with padding and border");
 152         $div.css("margin", "10px");
 153         equals($div.outerWidth(), 74, "Test with padding, border and margin without margin option");
 154         $div.css("position", "absolute");
 155         equals($div.outerWidth(true), 94, "Test with padding, border and margin with margin option");
 156         $div.hide();
 157         equals($div.outerWidth(true), 94, "Test hidden div with padding, border and margin with margin option");
 158
 159         // reset styles
 160         $div.css({ position: "", display: "", border: "", padding: "", width: "", height: "" });
 161 });
 162
 163 test("outerHeight()", function() {
 164         expect(6);
 165
 166         var $div = jQuery("#nothiddendiv");
 167         $div.css("height", 30);
 168
 169         equals($div.outerHeight(), 30, "Test with only width set");
 170         $div.css("padding", "20px");
 171         equals($div.outerHeight(), 70, "Test with padding");
 172         $div.css("border", "2px solid #fff");
 173         equals($div.outerHeight(), 74, "Test with padding and border");
 174         $div.css("margin", "10px");
 175         equals($div.outerHeight(), 74, "Test with padding, border and margin without margin option");
 176         equals($div.outerHeight(true), 94, "Test with padding, border and margin with margin option");
 177         $div.hide();
 178         equals($div.outerHeight(true), 94, "Test hidden div with padding, border and margin with margin option");
 179
 180         // reset styles
 181         $div.css({ display: "", border: "", padding: "", width: "", height: "" });
 182 });