Fixed bug with box model rule (fixes CSSLint#135)

Author: Nicholas C. Zakas

CHANGELOG

@@ -1,5 +1,6 @@
 Next (not yet released)
 
+* Fixed bug with box model rule (fixes #135)
 * Added rule to check property name against list of known properties (fixes #136)
 * Ensure consistency across error messages (fixes #89)
 * Updated parser to handle CSS escaping (fixes #97)

src/rules/box-model.js

@@ -40,7 +40,7 @@ CSSLint.addRule({
 
             if (heightProperties[name] || widthProperties[name]){
                 if (!/^0\S*$/.test(event.value) && !(name == "border" && event.value == "none")){
-                    properties[name] = { line: event.property.line, col: event.property.col };
+                    properties[name] = { line: event.property.line, col: event.property.col, value: event.value };
                 }
             } else {
                 if (name == "width" || name == "height"){
@@ -55,15 +55,26 @@ CSSLint.addRule({
             if (properties["height"]){
                 for (prop in heightProperties){
                     if (heightProperties.hasOwnProperty(prop) && properties[prop]){
-                        reporter.warn("Broken box model: using height with " + prop + ".", properties[prop].line, properties[prop].col, rule);
+                    
+                        //special case for padding
+                        if (prop == "padding" && properties[prop].value.parts.length == 2 && properties[prop].value.parts[0].value == 0){
+                            //noop
+                        } else {
+                            reporter.warn("Broken box model: using height with " + prop + ".", properties[prop].line, properties[prop].col, rule);
+                        }
                     }
                 }
             }
 
             if (properties["width"]){
                 for (prop in widthProperties){
                     if (widthProperties.hasOwnProperty(prop) && properties[prop]){
-                        reporter.warn("Broken box model: using width with " + prop + ".", properties[prop].line, properties[prop].col, rule);
+
+                        if (prop == "padding" && properties[prop].value.parts.length == 2 && properties[prop].value.parts[1].value == 0){
+                            //noop
+                        } else {
+                            reporter.warn("Broken box model: using width with " + prop + ".", properties[prop].line, properties[prop].col, rule);
+                        }
                     }
                 }
             }

tests/rules/box-model.js

@@ -52,6 +52,11 @@
             var result = CSSLint.verify(".foo { width: 100px; padding-bottom: 10px; }", { "box-model": 1 });
             Assert.areEqual(0, result.messages.length);
         },
+        
+        "Using width and padding-to-bottom should not result in a warning": function(){
+            var result = CSSLint.verify(".foo { width: 100px; padding: 10px 0; }", { "box-model": 1 });
+            Assert.areEqual(0, result.messages.length);
+        },            
 
         "Using width and border should result in a warning": function(){
             var result = CSSLint.verify(".foo { width: 100px; border: 10px; }", { "box-model": 1 });
@@ -115,6 +120,11 @@
             var result = CSSLint.verify(".foo { height: 100px; padding-right: 10px; }", { "box-model": 1 });
             Assert.areEqual(0, result.messages.length);
         },
+        
+        "Using height and padding-left-right should not result in a warning": function(){
+            var result = CSSLint.verify(".foo { height: 100px; padding: 0 10px; }", { "box-model": 1 });
+            Assert.areEqual(0, result.messages.length);
+        },    
 
         "Using height and padding-top should result in a warning": function(){
             var result = CSSLint.verify(".foo { height: 100px; padding-top: 10px; }", { "box-model": 1 });