Fixed wrapping of elements that hold text nodes. Thanks to David Flanagan for the...
[jquery.git] / test / unit / css.js
1 module("css");
2
3 test("css(String|Hash)", function() {
4         expect(23);
5
6         equals( jQuery('#main').css("display"), 'none', '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         var width = parseFloat(jQuery('#nothiddendiv').css('width')), height = parseFloat(jQuery('#nothiddendiv').css('height'));
16         jQuery('#nothiddendiv').css({ width: -1, height: -1 });
17         equals( parseFloat(jQuery('#nothiddendiv').css('width')), width, 'Test negative width ignored')
18         equals( parseFloat(jQuery('#nothiddendiv').css('height')), height, 'Test negative height ignored')
19
20         jQuery('#floatTest').css({styleFloat: 'right'});
21         equals( jQuery('#floatTest').css('styleFloat'), 'right', 'Modified CSS float using "styleFloat": Assert float is right');
22         jQuery('#floatTest').css({cssFloat: 'left'});
23         equals( jQuery('#floatTest').css('cssFloat'), 'left', 'Modified CSS float using "cssFloat": Assert float is left');
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
43 test("css(String, Object)", function() {
44         expect(21);
45         ok( jQuery('#nothiddendiv').is(':visible'), 'Modifying CSS display: Assert element is visible');
46         jQuery('#nothiddendiv').css("display", 'none');
47         ok( !jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is hidden');
48         jQuery('#nothiddendiv').css("display", 'block');
49         ok( jQuery('#nothiddendiv').is(':visible'), 'Modified CSS display: Assert element is visible');
50
51         jQuery('#floatTest').css('styleFloat', 'left');
52         equals( jQuery('#floatTest').css('styleFloat'), 'left', 'Modified CSS float using "styleFloat": Assert float is left');
53         jQuery('#floatTest').css('cssFloat', 'right');
54         equals( jQuery('#floatTest').css('cssFloat'), 'right', 'Modified CSS float using "cssFloat": Assert float is right');
55         jQuery('#floatTest').css('float', 'left');
56         equals( jQuery('#floatTest').css('float'), 'left', 'Modified CSS float using "float": Assert float is left');
57         jQuery('#floatTest').css('font-size', '20px');
58         equals( jQuery('#floatTest').css('font-size'), '20px', 'Modified CSS font-size: Assert font-size is 20px');
59
60         jQuery.each("0,0.25,0.5,0.75,1".split(','), function(i, n) {
61                 jQuery('#foo').css('opacity', n);
62                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a String" );
63                 jQuery('#foo').css('opacity', parseFloat(n));
64                 equals( jQuery('#foo').css('opacity'), parseFloat(n), "Assert opacity is " + parseFloat(n) + " as a Number" );
65         });
66         jQuery('#foo').css('opacity', '');
67         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when set to an empty String" );
68         // for #1438, IE throws JS error when filter exists but doesn't have opacity in it
69         if (jQuery.browser.msie) {
70                 jQuery('#foo').css("filter", "progid:DXImageTransform.Microsoft.Chroma(color='red');");
71         }
72         equals( jQuery('#foo').css('opacity'), '1', "Assert opacity is 1 when a different filter is set in IE, #1438" );
73
74         // using contents will get comments regular, text, and comment nodes
75         var j = jQuery("#nonnodes").contents();
76         j.css("padding-left", "1px");
77         equals( j.css("padding-left"), "1px", "Check node,textnode,comment css works" );
78
79         // opera sometimes doesn't update 'display' correctly, see #2037
80         jQuery("#t2037")[0].innerHTML = jQuery("#t2037")[0].innerHTML
81         equals( jQuery("#t2037 .hidden").css("display"), "none", "Make sure browser thinks it is hidden" );
82 });
83
84 test("css(String, Function)", function() {
85         try { 
86                 expect(3);
87                 
88                 var sizes = ["10px", "20px", "30px"];
89         
90                 jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" + 
91                                          "<div class='cssFunction'></div>" + 
92                                          "<div class='cssFunction'></div></div>")
93                         .appendTo("body");
94         
95                 var index = 0;
96         
97                 jQuery("#cssFunctionTest div").css("font-size", function() {
98                         var size = sizes[index];
99                         index++;
100                         return size;
101                 });
102                 
103                 index = 0;
104                 
105                 jQuery("#cssFunctionTest div").each(function() {
106                         var computedSize = jQuery(this).css("font-size")
107                         var expectedSize = sizes[index]
108                         equals( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
109                         index++;
110                 });
111                 
112         } finally {
113                 jQuery("#cssFunctionTest").remove();
114         }
115 });
116
117 test("css(Object) where values are Functions", function() {
118         try { 
119                 expect(3);
120                 
121                 var sizes = ["10px", "20px", "30px"];
122         
123                 jQuery("<div id='cssFunctionTest'><div class='cssFunction'></div>" + 
124                                          "<div class='cssFunction'></div>" + 
125                                          "<div class='cssFunction'></div></div>")
126                         .appendTo("body");
127         
128                 var index = 0;
129         
130                 jQuery("#cssFunctionTest div").css({fontSize: function() {
131                         var size = sizes[index];
132                         index++;
133                         return size;
134                 }});
135                 
136                 index = 0;
137                 
138                 jQuery("#cssFunctionTest div").each(function() {
139                         var computedSize = jQuery(this).css("font-size")
140                         var expectedSize = sizes[index]
141                         equals( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
142                         index++;
143                 });
144                 
145         } finally {
146                 jQuery("#cssFunctionTest").remove();
147         }
148 });
149
150 test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function () {
151         expect(4);
152
153         var $checkedtest = jQuery("#checkedtest");
154         // IE6 was clearing "checked" in jQuery.css(elem, "height");
155         jQuery.css($checkedtest[0], "height");
156         ok( !! jQuery(":radio:first", $checkedtest).attr("checked"), "Check first radio still checked." );
157         ok( ! jQuery(":radio:last", $checkedtest).attr("checked"), "Check last radio still NOT checked." );
158         ok( !! jQuery(":checkbox:first", $checkedtest).attr("checked"), "Check first checkbox still checked." );
159         ok( ! jQuery(":checkbox:last", $checkedtest).attr("checked"), "Check last checkbox still NOT checked." );
160 });