.cur() doesn't take any boolean parameter since 1.4.3
[jquery.git] / test / unit / css.js
1 module("css");
2
3 test("css(String|Hash)", function() {
4         expect(34);
5
6         equals( jQuery('#main').css("display"), 'block', 'Check for css property "display"');
7
8         ok( jQuery('#nothiddendiv').is(':visible'), 'Modifying CSS display: Assert element is visible');
9         jQuery('#nothiddendiv').css({display: 'none'});
10         ok( !jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is hidden');
11         jQuery('#nothiddendiv').css({display: 'block'});
12         ok( jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is visible');
13
14         // handle negative numbers by ignoring #1599, #4216
15         jQuery('#nothiddendiv').css({ 'width': 1, 'height': 1 });
16
17         var width = parseFloat(jQuery('#nothiddendiv').css('width')), height = parseFloat(jQuery('#nothiddendiv').css('height'));
18         jQuery('#nothiddendiv').css({ width: -1, height: -1 });
19         equals( parseFloat(jQuery('#nothiddendiv').css('width')), width, 'Test negative width ignored')
20         equals( parseFloat(jQuery('#nothiddendiv').css('height')), height, 'Test negative height ignored')
21
22         equals( jQuery('<div style="display: none;">').css('display'), 'none', 'Styles on disconnected nodes');
23
24         jQuery('#floatTest').css({'float': 'right'});
25         equals( jQuery('#floatTest').css('float'), 'right', 'Modified CSS float using "float": Assert float is right');
26         jQuery('#floatTest').css({'font-size': '30px'});
27         equals( jQuery('#floatTest').css('font-size'), '30px', 'Modified CSS font-size: Assert font-size is 30px');
28
29         jQuery.each("0,0.25,0.5,0.75,1".split(','), function(i, n) {
30                 jQuery('#foo').css({opacity: n});
31                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a String" );
32                 jQuery('#foo').css({opacity: parseFloat(n)});
33                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a Number" );
34         });
35         jQuery('#foo').css({opacity: ''});
36         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when set to an empty String" );
37
38         equals( jQuery('#empty').css('opacity'), '0', "Assert opacity is accessible via filter property set in stylesheet in IE" );
39         jQuery('#empty').css({ opacity: '1' });
40         equals( jQuery('#empty').css('opacity'), '1', "Assert opacity is taken from style attribute when set vs stylesheet in IE with filters" );
41
42         var div = jQuery('#nothiddendiv'), child = jQuery('#nothiddendivchild');
43
44         equals( parseInt(div.css("fontSize")), 16, "Verify fontSize px set." );
45         equals( parseInt(div.css("font-size")), 16, "Verify fontSize px set." );
46         equals( parseInt(child.css("fontSize")), 16, "Verify fontSize px set." );
47         equals( parseInt(child.css("font-size")), 16, "Verify fontSize px set." );
48
49         child.css("height", "100%");
50         equals( child[0].style.height, "100%", "Make sure the height is being set correctly." );
51
52         child.attr("class", "em");
53         equals( parseInt(child.css("fontSize")), 32, "Verify fontSize em set." );
54
55         // Have to verify this as the result depends upon the browser's CSS
56         // support for font-size percentages
57         child.attr("class", "prct");
58         var prctval = parseInt(child.css("fontSize")), checkval = 0;
59         if ( prctval === 16 || prctval === 24 ) {
60                 checkval = prctval;
61         }
62
63         equals( prctval, checkval, "Verify fontSize % set." );
64
65         equals( typeof child.css("width"), "string", "Make sure that a string width is returned from css('width')." );
66
67         var old = child[0].style.height;
68
69         // Test NaN
70         child.css("height", parseFloat("zoo"));
71         equals( child[0].style.height, old, "Make sure height isn't changed on NaN." );
72
73         // Test null
74         child.css("height", null);
75         equals( child[0].style.height, old, "Make sure height isn't changed on null." );
76
77         old = child[0].style.fontSize;
78
79         // Test NaN
80         child.css("font-size", parseFloat("zoo"));
81         equals( child[0].style.fontSize, old, "Make sure font-size isn't changed on NaN." );
82
83         // Test null
84         child.css("font-size", null);
85         equals( child[0].style.fontSize, old, "Make sure font-size isn't changed on null." );
86 });
87
88 test("css(String, Object)", function() {
89         expect(22);
90
91         ok( jQuery('#nothiddendiv').is(':visible'), 'Modifying CSS display: Assert element is visible');
92         jQuery('#nothiddendiv').css("display", 'none');
93         ok( !jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is hidden');
94         jQuery('#nothiddendiv').css("display", 'block');
95         ok( jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is visible');
96
97         jQuery("#nothiddendiv").css("top", "-1em");
98         ok( jQuery("#nothiddendiv").css("top"), -16, "Check negative number in EMs." );
99
100         jQuery('#floatTest').css('float', 'left');
101         equals( jQuery('#floatTest').css('float'), 'left', 'Modified CSS float using "float": Assert float is left');
102         jQuery('#floatTest').css('font-size', '20px');
103         equals( jQuery('#floatTest').css('font-size'), '20px', 'Modified CSS font-size: Assert font-size is 20px');
104
105         jQuery.each("0,0.25,0.5,0.75,1".split(','), function(i, n) {
106                 jQuery('#foo').css('opacity', n);
107                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a String" );
108                 jQuery('#foo').css('opacity', parseFloat(n));
109                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a Number" );
110         });
111         jQuery('#foo').css('opacity', '');
112         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when set to an empty String" );
113
114         // using contents will get comments regular, text, and comment nodes
115         var j = jQuery("#nonnodes").contents();
116         j.css("overflow", "visible");
117         equals( j.css("overflow"), "visible", "Check node,textnode,comment css works" );
118         // opera sometimes doesn't update 'display' correctly, see #2037
119         jQuery("#t2037")[0].innerHTML = jQuery("#t2037")[0].innerHTML
120         equals( jQuery("#t2037 .hidden").css("display"), "none", "Make sure browser thinks it is hidden" );
121
122         var div = jQuery("#nothiddendiv"),
123                 display = div.css("display"),
124                 ret = div.css("display", undefined);
125
126         equals( ret, div, "Make sure setting undefined returns the original set." );
127         equals( div.css("display"), display, "Make sure that the display wasn't changed." );
128
129         // Test for Bug #5509
130         var success = true;
131         try {
132                 jQuery('#foo').css("backgroundColor", "rgba(0, 0, 0, 0.1)");
133         }
134         catch (e) {
135                 success = false;
136         }
137         ok( success, "Setting RGBA values does not throw Error" );
138 });
139
140 if ( !jQuery.support.opacity ) {
141   test("css(String, Object) for MSIE", function() {
142     // for #1438, IE throws JS error when filter exists but doesn't have opacity in it
143                 jQuery('#foo').css("filter", "progid:DXImageTransform.Microsoft.Chroma(color='red');");
144         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when a different filter is set in IE, #1438" );
145
146     var filterVal = "progid:DXImageTransform.Microsoft.Alpha(opacity=30) progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
147     var filterVal2 = "progid:DXImageTransform.Microsoft.alpha(opacity=100) progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
148     var filterVal3 = "progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
149     jQuery('#foo').css("filter", filterVal);
150     equals( jQuery('#foo').css("filter"), filterVal, "css('filter', val) works" );
151     jQuery('#foo').css("opacity", 1);
152     equals( jQuery('#foo').css("filter"), filterVal2, "Setting opacity in IE doesn't duplicate opacity filter" );
153     equals( jQuery('#foo').css("opacity"), 1, "Setting opacity in IE with other filters works" );
154     jQuery('#foo').css("filter", filterVal3).css("opacity", 1);
155     ok( jQuery('#foo').css("filter").indexOf(filterVal3) !== -1, "Setting opacity in IE doesn't clobber other filters" );
156   });
157 }
158
159 test("css(String, Function)", function() {
160         expect(3);
161                 
162         var sizes = ["10px", "20px", "30px"];
163         
164         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" + 
165                                  "<div class='cssFunction'></div>" + 
166                                  "<div class='cssFunction'></div></div>")
167                 .appendTo("body");
168         
169         var index = 0;
170         
171         jQuery("#cssFunctionTest div").css("font-size", function() {
172                 var size = sizes[index];
173                 index++;
174                 return size;
175         });
176                 
177         index = 0;
178         
179         jQuery("#cssFunctionTest div").each(function() {
180                 var computedSize = jQuery(this).css("font-size")
181                 var expectedSize = sizes[index]
182                 equals( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
183                 index++;
184         });
185
186         jQuery("#cssFunctionTest").remove();
187 });
188
189 test("css(String, Function) with incoming value", function() {
190         expect(3);
191                 
192         var sizes = ["10px", "20px", "30px"];
193         
194         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" + 
195                                  "<div class='cssFunction'></div>" + 
196                                  "<div class='cssFunction'></div></div>")
197                 .appendTo("body");
198         
199         var index = 0;
200         
201         jQuery("#cssFunctionTest div").css("font-size", function() {
202                 var size = sizes[index];
203                 index++;
204                 return size;
205         });
206                 
207         index = 0;
208         
209         jQuery("#cssFunctionTest div").css("font-size", function(i, computedSize) {
210                 var expectedSize = sizes[index]
211                 equals( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
212                 index++;
213                 return computedSize;
214         });
215
216         jQuery("#cssFunctionTest").remove();
217 });
218
219 test("css(Object) where values are Functions", function() {
220         expect(3);
221                 
222         var sizes = ["10px", "20px", "30px"];
223         
224         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" + 
225                                  "<div class='cssFunction'></div>" + 
226                                  "<div class='cssFunction'></div></div>")
227                 .appendTo("body");
228
229         var index = 0;
230         
231         jQuery("#cssFunctionTest div").css({fontSize: function() {
232                 var size = sizes[index];
233                 index++;
234                 return size;
235         }});
236                 
237         index = 0;
238                 
239         jQuery("#cssFunctionTest div").each(function() {
240                 var computedSize = jQuery(this).css("font-size")
241                 var expectedSize = sizes[index]
242                 equals( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
243                 index++;
244         });
245                 
246         jQuery("#cssFunctionTest").remove();
247 });
248
249 test("css(Object) where values are Functions with incoming values", function() {
250         expect(3);
251                 
252         var sizes = ["10px", "20px", "30px"];
253         
254         jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" + 
255                                  "<div class='cssFunction'></div>" + 
256                                  "<div class='cssFunction'></div></div>")
257                 .appendTo("body");
258
259         var index = 0;
260         
261         jQuery("#cssFunctionTest div").css({fontSize: function() {
262                 var size = sizes[index];
263                 index++;
264                 return size;
265         }});
266                 
267         index = 0;
268                 
269         jQuery("#cssFunctionTest div").css({"font-size": function(i, computedSize) {
270                 var expectedSize = sizes[index]
271                 equals( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
272                 index++;
273                 return computedSize;
274         }});
275                 
276         jQuery("#cssFunctionTest").remove();
277 });
278
279 test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function () {
280         expect(4);
281
282         var $checkedtest = jQuery("#checkedtest");
283         // IE6 was clearing "checked" in jQuery.css(elem, "height");
284         jQuery.css($checkedtest[0], "height");
285         ok( !! jQuery(":radio:first", $checkedtest).attr("checked"), "Check first radio still checked." );
286         ok( ! jQuery(":radio:last", $checkedtest).attr("checked"), "Check last radio still NOT checked." );
287         ok( !! jQuery(":checkbox:first", $checkedtest).attr("checked"), "Check first checkbox still checked." );
288         ok( ! jQuery(":checkbox:last", $checkedtest).attr("checked"), "Check last checkbox still NOT checked." );
289 });
290
291 test(":visible selector works properly on table elements (bug #4512)", function () {
292         expect(1);
293
294         jQuery('#table').html('<tr><td style="display:none">cell</td><td>cell</td></tr>');
295         equals(jQuery('#table td:visible').length, 1, "hidden cell is not perceived as visible");
296 });
297
298 test(":visible selector works properly on children with a hidden parent (bug #4512)", function () {
299         expect(1);
300         jQuery('#table').css('display', 'none').html('<tr><td>cell</td><td>cell</td></tr>');
301         equals(jQuery('#table td:visible').length, 0, "hidden cell children not perceived as visible");
302 });