Make sure that we don't try to use a detached node (that was in a fragment) as a...
[jquery.git] / 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({ 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 });