Skip to content

Commit a3876d7

Browse files
author
Nicholas C. Zakas
committed
Fixed up width/height properties for box model rule (fixes #8)
1 parent e149b63 commit a3876d7

File tree

8 files changed

+312
-154
lines changed

8 files changed

+312
-154
lines changed

‎build/csslint-node.js‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9635,47 +9635,62 @@ CSSLint.addRule({
96359635
//initialization
96369636
init: function(parser, reporter){
96379637
var rule = this,
9638-
propertiesToCheck = {
9638+
widthProperties = {
96399639
border: 1,
96409640
"border-left": 1,
9641-
"border-right": 1,
9641+
"border-right": 1,
9642+
padding: 1,
9643+
"padding-left": 1,
9644+
"padding-right": 1
9645+
},
9646+
heightProperties = {
9647+
border: 1,
96429648
"border-bottom": 1,
96439649
"border-top": 1,
96449650
padding: 1,
9645-
"padding-left": 1,
9646-
"padding-right": 1,
96479651
"padding-bottom": 1,
9648-
"padding-top": 1
9652+
"padding-top": 1
96499653
},
96509654
properties;
96519655

96529656
parser.addListener("startrule", function(event){
9653-
properties = {
9657+
properties = {
96549658
};
96559659
});
96569660

96579661
parser.addListener("property", function(event){
9658-
var name = event.property;
9662+
var name = event.property.text.toLowerCase();
96599663

9660-
if (propertiesToCheck[name]){
9661-
properties[name] = { line: name.line, col: name.col };
9664+
if (heightProperties[name] || widthProperties){
9665+
if (event.value != "0"){
9666+
properties[name] = { line: name.line, col: name.col };
9667+
}
96629668
} else {
96639669
if (name == "width" || name == "height"){
9664-
properties._flagProperty = name.text;
9670+
properties[name] = 1;
96659671
}
96669672
}
96679673

96689674
});
96699675

96709676
parser.addListener("endrule", function(event){
96719677
var prop;
9672-
if (properties._flagProperty){
9673-
for (prop in propertiesToCheck){
9674-
if (propertiesToCheck.hasOwnProperty(prop) && properties[prop]){
9675-
reporter.warn("Broken box model: using " + properties._flagProperty + " with " + prop + ".", properties[prop].line, properties[prop].col, rule);
9678+
if (properties["height"]){
9679+
for (prop in heightProperties){
9680+
if (heightProperties.hasOwnProperty(prop) && properties[prop]){
9681+
reporter.warn("Broken box model: using height with " + prop + ".", properties[prop].line, properties[prop].col, rule);
96769682
}
9677-
}
9683+
}
9684+
}
9685+
9686+
if (properties["width"]){
9687+
for (prop in widthProperties){
9688+
if (widthProperties.hasOwnProperty(prop) && properties[prop]){
9689+
reporter.warn("Broken box model: using width with " + prop + ".", properties[prop].line, properties[prop].col, rule);
9690+
}
9691+
}
96789692
}
9693+
96799694
});
96809695
}
96819696

‎build/csslint-rhino.js‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9636,47 +9636,62 @@ CSSLint.addRule({
96369636
//initialization
96379637
init: function(parser, reporter){
96389638
var rule = this,
9639-
propertiesToCheck = {
9639+
widthProperties = {
96409640
border: 1,
96419641
"border-left": 1,
9642-
"border-right": 1,
9642+
"border-right": 1,
9643+
padding: 1,
9644+
"padding-left": 1,
9645+
"padding-right": 1
9646+
},
9647+
heightProperties = {
9648+
border: 1,
96439649
"border-bottom": 1,
96449650
"border-top": 1,
96459651
padding: 1,
9646-
"padding-left": 1,
9647-
"padding-right": 1,
96489652
"padding-bottom": 1,
9649-
"padding-top": 1
9653+
"padding-top": 1
96509654
},
96519655
properties;
96529656

96539657
parser.addListener("startrule", function(event){
9654-
properties = {
9658+
properties = {
96559659
};
96569660
});
96579661

96589662
parser.addListener("property", function(event){
9659-
var name = event.property;
9663+
var name = event.property.text.toLowerCase();
96609664

9661-
if (propertiesToCheck[name]){
9662-
properties[name] = { line: name.line, col: name.col };
9665+
if (heightProperties[name] || widthProperties){
9666+
if (event.value != "0"){
9667+
properties[name] = { line: name.line, col: name.col };
9668+
}
96639669
} else {
96649670
if (name == "width" || name == "height"){
9665-
properties._flagProperty = name.text;
9671+
properties[name] = 1;
96669672
}
96679673
}
96689674

96699675
});
96709676

96719677
parser.addListener("endrule", function(event){
96729678
var prop;
9673-
if (properties._flagProperty){
9674-
for (prop in propertiesToCheck){
9675-
if (propertiesToCheck.hasOwnProperty(prop) && properties[prop]){
9676-
reporter.warn("Broken box model: using " + properties._flagProperty + " with " + prop + ".", properties[prop].line, properties[prop].col, rule);
9679+
if (properties["height"]){
9680+
for (prop in heightProperties){
9681+
if (heightProperties.hasOwnProperty(prop) && properties[prop]){
9682+
reporter.warn("Broken box model: using height with " + prop + ".", properties[prop].line, properties[prop].col, rule);
96779683
}
9678-
}
9684+
}
9685+
}
9686+
9687+
if (properties["width"]){
9688+
for (prop in widthProperties){
9689+
if (widthProperties.hasOwnProperty(prop) && properties[prop]){
9690+
reporter.warn("Broken box model: using width with " + prop + ".", properties[prop].line, properties[prop].col, rule);
9691+
}
9692+
}
96799693
}
9694+
96809695
});
96819696
}
96829697

‎build/csslint-tests.js‎

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -39,32 +39,43 @@
3939
Assert.areEqual("Broken box model: using width with padding.", result.messages[0].message);
4040
},
4141

42+
"Using width when padding is zero should not result in a warning": function(){
43+
var result = CSSLint.verify(".foo { width: 100px; padding: 0; }", { "box-model": 1 });
44+
Assert.areEqual(0, result.messages.length);
45+
},
46+
4247
"Using width and padding-left should result in a warning": function(){
4348
var result = CSSLint.verify(".foo { width: 100px; padding-left: 10px; }", { "box-model": 1 });
4449
Assert.areEqual(1, result.messages.length);
4550
Assert.areEqual("warning", result.messages[0].type);
4651
Assert.areEqual("Broken box model: using width with padding-left.", result.messages[0].message);
4752
},
4853

54+
"Using width when padding-left is zero should not result in a warning": function(){
55+
var result = CSSLint.verify(".foo { width: 100px; padding-left: 0; }", { "box-model": 1 });
56+
Assert.areEqual(0, result.messages.length);
57+
},
58+
4959
"Using width and padding-right should result in a warning": function(){
5060
var result = CSSLint.verify(".foo { width: 100px; padding-right: 10px; }", { "box-model": 1 });
5161
Assert.areEqual(1, result.messages.length);
5262
Assert.areEqual("warning", result.messages[0].type);
5363
Assert.areEqual("Broken box model: using width with padding-right.", result.messages[0].message);
5464
},
65+
66+
"Using width when padding-right is zero should not result in a warning": function(){
67+
var result = CSSLint.verify(".foo { width: 100px; padding-right: 0; }", { "box-model": 1 });
68+
Assert.areEqual(0, result.messages.length);
69+
},
5570

56-
"Using width and padding-top should result in a warning": function(){
71+
"Using width and padding-top should not result in a warning": function(){
5772
var result = CSSLint.verify(".foo { width: 100px; padding-top: 10px; }", { "box-model": 1 });
58-
Assert.areEqual(1, result.messages.length);
59-
Assert.areEqual("warning", result.messages[0].type);
60-
Assert.areEqual("Broken box model: using width with padding-top.", result.messages[0].message);
73+
Assert.areEqual(0, result.messages.length);
6174
},
6275

63-
"Using width and padding-bottom should result in a warning": function(){
76+
"Using width and padding-bottom should not result in a warning": function(){
6477
var result = CSSLint.verify(".foo { width: 100px; padding-bottom: 10px; }", { "box-model": 1 });
65-
Assert.areEqual(1, result.messages.length);
66-
Assert.areEqual("warning", result.messages[0].type);
67-
Assert.areEqual("Broken box model: using width with padding-bottom.", result.messages[0].message);
78+
Assert.areEqual(0, result.messages.length);
6879
},
6980

7081
"Using width and border should result in a warning": function(){
@@ -81,25 +92,31 @@
8192
Assert.areEqual("Broken box model: using width with border-left.", result.messages[0].message);
8293
},
8394

95+
"Using width when border-left is zero should not result in a warning": function(){
96+
var result = CSSLint.verify(".foo { width: 100px; border-left: 0; }", { "box-model": 1 });
97+
Assert.areEqual(0, result.messages.length);
98+
},
99+
84100
"Using width and border-right should result in a warning": function(){
85101
var result = CSSLint.verify(".foo { width: 100px; border-right: 10px; }", { "box-model": 1 });
86102
Assert.areEqual(1, result.messages.length);
87103
Assert.areEqual("warning", result.messages[0].type);
88104
Assert.areEqual("Broken box model: using width with border-right.", result.messages[0].message);
89105
},
90106

91-
"Using width and border-top should result in a warning": function(){
107+
"Using width when border-right is zero should not result in a warning": function(){
108+
var result = CSSLint.verify(".foo { width: 100px; border-right: 0; }", { "box-model": 1 });
109+
Assert.areEqual(0, result.messages.length);
110+
},
111+
112+
"Using width and border-top should not result in a warning": function(){
92113
var result = CSSLint.verify(".foo { width: 100px; border-top: 10px; }", { "box-model": 1 });
93-
Assert.areEqual(1, result.messages.length);
94-
Assert.areEqual("warning", result.messages[0].type);
95-
Assert.areEqual("Broken box model: using width with border-top.", result.messages[0].message);
114+
Assert.areEqual(0, result.messages.length);
96115
},
97116

98-
"Using width and border-bottom should result in a warning": function(){
117+
"Using width and border-bottom should not result in a warning": function(){
99118
var result = CSSLint.verify(".foo { width: 100px; border-bottom: 10px; }", { "box-model": 1 });
100-
Assert.areEqual(1, result.messages.length);
101-
Assert.areEqual("warning", result.messages[0].type);
102-
Assert.areEqual("Broken box model: using width with border-bottom.", result.messages[0].message);
119+
Assert.areEqual(0, result.messages.length);
103120
},
104121

105122
"Using height and padding should result in a warning": function(){
@@ -109,18 +126,19 @@
109126
Assert.areEqual("Broken box model: using height with padding.", result.messages[0].message);
110127
},
111128

112-
"Using height and padding-left should result in a warning": function(){
129+
"Using height when padding is zero should not result in a warning": function(){
130+
var result = CSSLint.verify(".foo { height: 100px; padding: 0; }", { "box-model": 1 });
131+
Assert.areEqual(0, result.messages.length);
132+
},
133+
134+
"Using height and padding-left should not result in a warning": function(){
113135
var result = CSSLint.verify(".foo { height: 100px; padding-left: 10px; }", { "box-model": 1 });
114-
Assert.areEqual(1, result.messages.length);
115-
Assert.areEqual("warning", result.messages[0].type);
116-
Assert.areEqual("Broken box model: using height with padding-left.", result.messages[0].message);
136+
Assert.areEqual(0, result.messages.length);
117137
},
118138

119-
"Using height and padding-right should result in a warning": function(){
139+
"Using height and padding-right should not result in a warning": function(){
120140
var result = CSSLint.verify(".foo { height: 100px; padding-right: 10px; }", { "box-model": 1 });
121-
Assert.areEqual(1, result.messages.length);
122-
Assert.areEqual("warning", result.messages[0].type);
123-
Assert.areEqual("Broken box model: using height with padding-right.", result.messages[0].message);
141+
Assert.areEqual(0, result.messages.length);
124142
},
125143

126144
"Using height and padding-top should result in a warning": function(){
@@ -130,32 +148,38 @@
130148
Assert.areEqual("Broken box model: using height with padding-top.", result.messages[0].message);
131149
},
132150

151+
"Using height when padding-top is zero should not result in a warning": function(){
152+
var result = CSSLint.verify(".foo { height: 100px; padding-top: 0; }", { "box-model": 1 });
153+
Assert.areEqual(0, result.messages.length);
154+
},
155+
133156
"Using height and padding-bottom should result in a warning": function(){
134157
var result = CSSLint.verify(".foo { height: 100px; padding-bottom: 10px; }", { "box-model": 1 });
135158
Assert.areEqual(1, result.messages.length);
136159
Assert.areEqual("warning", result.messages[0].type);
137160
Assert.areEqual("Broken box model: using height with padding-bottom.", result.messages[0].message);
138161
},
139162

163+
"Using height when padding-bottom is zero should not result in a warning": function(){
164+
var result = CSSLint.verify(".foo { height: 100px; padding-bottom: 0; }", { "box-model": 1 });
165+
Assert.areEqual(0, result.messages.length);
166+
},
167+
140168
"Using height and border should result in a warning": function(){
141169
var result = CSSLint.verify(".foo { height: 100px; border: 10px; }", { "box-model": 1 });
142170
Assert.areEqual(1, result.messages.length);
143171
Assert.areEqual("warning", result.messages[0].type);
144172
Assert.areEqual("Broken box model: using height with border.", result.messages[0].message);
145173
},
146174

147-
"Using height and border-left should result in a warning": function(){
175+
"Using height and border-left should not result in a warning": function(){
148176
var result = CSSLint.verify(".foo { height: 100px; border-left: 10px; }", { "box-model": 1 });
149-
Assert.areEqual(1, result.messages.length);
150-
Assert.areEqual("warning", result.messages[0].type);
151-
Assert.areEqual("Broken box model: using height with border-left.", result.messages[0].message);
177+
Assert.areEqual(0, result.messages.length);
152178
},
153179

154-
"Using height and border-right should result in a warning": function(){
180+
"Using height and border-right should not result in a warning": function(){
155181
var result = CSSLint.verify(".foo { height: 100px; border-right: 10px; }", { "box-model": 1 });
156-
Assert.areEqual(1, result.messages.length);
157-
Assert.areEqual("warning", result.messages[0].type);
158-
Assert.areEqual("Broken box model: using height with border-right.", result.messages[0].message);
182+
Assert.areEqual(0, result.messages.length);
159183
},
160184

161185
"Using height and border-top should result in a warning": function(){
@@ -165,11 +189,21 @@
165189
Assert.areEqual("Broken box model: using height with border-top.", result.messages[0].message);
166190
},
167191

192+
"Using height when border-top is zero should not result in a warning": function(){
193+
var result = CSSLint.verify(".foo { height: 100px; border-top: 0; }", { "box-model": 1 });
194+
Assert.areEqual(0, result.messages.length);
195+
},
196+
168197
"Using height and border-bottom should result in a warning": function(){
169198
var result = CSSLint.verify(".foo { height: 100px; border-bottom: 10px; }", { "box-model": 1 });
170199
Assert.areEqual(1, result.messages.length);
171200
Assert.areEqual("warning", result.messages[0].type);
172201
Assert.areEqual("Broken box model: using height with border-bottom.", result.messages[0].message);
202+
},
203+
204+
"Using height when border-bottom is zero should not result in a warning": function(){
205+
var result = CSSLint.verify(".foo { height: 100px; border-bottom: 0; }", { "box-model": 1 });
206+
Assert.areEqual(0, result.messages.length);
173207
}
174208

175209
}));

0 commit comments

Comments
 (0)