Skip to content

Commit dd2ae0f

Browse files
author
Nicholas C. Zakas
committed
Ensure width: 100% is okay when box-sizing is specified (fixes #5)
1 parent a3876d7 commit dd2ae0f

File tree

8 files changed

+152
-20
lines changed

8 files changed

+152
-20
lines changed

‎build/csslint-node.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10396,16 +10396,31 @@ CSSLint.addRule({
1039610396

1039710397
//initialization
1039810398
init: function(parser, reporter){
10399-
var rule = this;
10399+
var rule = this,
10400+
width100,
10401+
boxsizing;
10402+
10403+
parser.addListener("startrule", function(event){
10404+
width100 = null;
10405+
boxsizing = false;
10406+
});
1040010407

1040110408
parser.addListener("property", function(event){
10402-
var name = event.property,
10409+
var name = event.property.text.toLowerCase(),
1040310410
value = event.value;
1040410411

1040510412
if (name == "width" && value == "100%"){
10406-
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", name.line, name.col, rule);
10413+
width100 = event.property;
10414+
} else if (name == "box-sizing" || /\-(?:webkit|ms|moz)\-box-sizing/.test(name)){ //means you know what you're doing
10415+
boxsizing = true;
1040710416
}
1040810417
});
10418+
10419+
parser.addListener("endrule", function(event){
10420+
if (width100 && !boxsizing){
10421+
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", width100.line, width100.col, rule);
10422+
}
10423+
});
1040910424
}
1041010425

1041110426
});

‎build/csslint-rhino.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10397,16 +10397,31 @@ CSSLint.addRule({
1039710397

1039810398
//initialization
1039910399
init: function(parser, reporter){
10400-
var rule = this;
10400+
var rule = this,
10401+
width100,
10402+
boxsizing;
10403+
10404+
parser.addListener("startrule", function(event){
10405+
width100 = null;
10406+
boxsizing = false;
10407+
});
1040110408

1040210409
parser.addListener("property", function(event){
10403-
var name = event.property,
10410+
var name = event.property.text.toLowerCase(),
1040410411
value = event.value;
1040510412

1040610413
if (name == "width" && value == "100%"){
10407-
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", name.line, name.col, rule);
10414+
width100 = event.property;
10415+
} else if (name == "box-sizing" || /\-(?:webkit|ms|moz)\-box-sizing/.test(name)){ //means you know what you're doing
10416+
boxsizing = true;
1040810417
}
1040910418
});
10419+
10420+
parser.addListener("endrule", function(event){
10421+
if (width100 && !boxsizing){
10422+
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", width100.line, width100.col, rule);
10423+
}
10424+
});
1041010425
}
1041110426

1041210427
});

‎build/csslint-tests.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -832,7 +832,28 @@ background: -ms-linear-gradient(top, #1e5799 ,#2989d8 ,#207cca ,#7db9e8 );
832832
"Using width: 100px should not result in a warning": function(){
833833
var result = CSSLint.verify("h1 { width: 100px; }", { "width-100": 1 });
834834
Assert.areEqual(0, result.messages.length);
835-
}
835+
},
836+
837+
"Using width: 100% and box-sizing should not result in a warning": function(){
838+
var result = CSSLint.verify("h1 { width: 100%; box-sizing: content-box; }", { "width-100": 1 });
839+
Assert.areEqual(0, result.messages.length);
840+
},
841+
842+
"Using width: 100% and -moz-box-sizing should not result in a warning": function(){
843+
var result = CSSLint.verify("h1 { width: 100%; -moz-box-sizing: content-box; }", { "width-100": 1 });
844+
Assert.areEqual(0, result.messages.length);
845+
},
846+
847+
"Using width: 100% and -webkit-box-sizing should not result in a warning": function(){
848+
var result = CSSLint.verify("h1 { width: 100%; -webkit-box-sizing: content-box; }", { "width-100": 1 });
849+
Assert.areEqual(0, result.messages.length);
850+
},
851+
852+
"Using width: 100% and -ms-box-sizing should not result in a warning": function(){
853+
var result = CSSLint.verify("h1 { width: 100%; -ms-box-sizing: content-box; }", { "width-100": 1 });
854+
Assert.areEqual(0, result.messages.length);
855+
}
856+
836857
}));
837858

838859
})();

‎build/csslint-worker.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10396,16 +10396,31 @@ CSSLint.addRule({
1039610396

1039710397
//initialization
1039810398
init: function(parser, reporter){
10399-
var rule = this;
10399+
var rule = this,
10400+
width100,
10401+
boxsizing;
10402+
10403+
parser.addListener("startrule", function(event){
10404+
width100 = null;
10405+
boxsizing = false;
10406+
});
1040010407

1040110408
parser.addListener("property", function(event){
10402-
var name = event.property,
10409+
var name = event.property.text.toLowerCase(),
1040310410
value = event.value;
1040410411

1040510412
if (name == "width" && value == "100%"){
10406-
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", name.line, name.col, rule);
10413+
width100 = event.property;
10414+
} else if (name == "box-sizing" || /\-(?:webkit|ms|moz)\-box-sizing/.test(name)){ //means you know what you're doing
10415+
boxsizing = true;
1040710416
}
1040810417
});
10418+
10419+
parser.addListener("endrule", function(event){
10420+
if (width100 && !boxsizing){
10421+
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", width100.line, width100.col, rule);
10422+
}
10423+
});
1040910424
}
1041010425

1041110426
});

‎build/csslint.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10397,16 +10397,31 @@ CSSLint.addRule({
1039710397

1039810398
//initialization
1039910399
init: function(parser, reporter){
10400-
var rule = this;
10400+
var rule = this,
10401+
width100,
10402+
boxsizing;
10403+
10404+
parser.addListener("startrule", function(event){
10405+
width100 = null;
10406+
boxsizing = false;
10407+
});
1040110408

1040210409
parser.addListener("property", function(event){
10403-
var name = event.property,
10410+
var name = event.property.text.toLowerCase(),
1040410411
value = event.value;
1040510412

1040610413
if (name == "width" && value == "100%"){
10407-
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", name.line, name.col, rule);
10414+
width100 = event.property;
10415+
} else if (name == "box-sizing" || /\-(?:webkit|ms|moz)\-box-sizing/.test(name)){ //means you know what you're doing
10416+
boxsizing = true;
1040810417
}
1040910418
});
10419+
10420+
parser.addListener("endrule", function(event){
10421+
if (width100 && !boxsizing){
10422+
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", width100.line, width100.col, rule);
10423+
}
10424+
});
1041010425
}
1041110426

1041210427
});

‎build/npm/lib/csslint-node.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10396,16 +10396,31 @@ CSSLint.addRule({
1039610396

1039710397
//initialization
1039810398
init: function(parser, reporter){
10399-
var rule = this;
10399+
var rule = this,
10400+
width100,
10401+
boxsizing;
10402+
10403+
parser.addListener("startrule", function(event){
10404+
width100 = null;
10405+
boxsizing = false;
10406+
});
1040010407

1040110408
parser.addListener("property", function(event){
10402-
var name = event.property,
10409+
var name = event.property.text.toLowerCase(),
1040310410
value = event.value;
1040410411

1040510412
if (name == "width" && value == "100%"){
10406-
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", name.line, name.col, rule);
10413+
width100 = event.property;
10414+
} else if (name == "box-sizing" || /\-(?:webkit|ms|moz)\-box-sizing/.test(name)){ //means you know what you're doing
10415+
boxsizing = true;
1040710416
}
1040810417
});
10418+
10419+
parser.addListener("endrule", function(event){
10420+
if (width100 && !boxsizing){
10421+
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", width100.line, width100.col, rule);
10422+
}
10423+
});
1040910424
}
1041010425

1041110426
});

‎src/rules/width-100.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,31 @@ CSSLint.addRule({
1212

1313
//initialization
1414
init: function(parser, reporter){
15-
var rule = this;
15+
var rule = this,
16+
width100,
17+
boxsizing;
18+
19+
parser.addListener("startrule", function(event){
20+
width100 = null;
21+
boxsizing = false;
22+
});
1623

1724
parser.addListener("property", function(event){
18-
var name = event.property,
25+
var name = event.property.text.toLowerCase(),
1926
value = event.value;
2027

2128
if (name == "width" && value == "100%"){
22-
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", name.line, name.col, rule);
29+
width100 = event.property;
30+
} else if (name == "box-sizing" || /\-(?:webkit|ms|moz)\-box-sizing/.test(name)){ //means you know what you're doing
31+
boxsizing = true;
2332
}
2433
});
34+
35+
parser.addListener("endrule", function(event){
36+
if (width100 && !boxsizing){
37+
reporter.warn("Elements with a width of 100% may not appear as you expect inside of other elements.", width100.line, width100.col, rule);
38+
}
39+
});
2540
}
2641

2742
});

‎tests/rules/width-100.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,28 @@
1717
"Using width: 100px should not result in a warning": function(){
1818
var result = CSSLint.verify("h1 { width: 100px; }", { "width-100": 1 });
1919
Assert.areEqual(0, result.messages.length);
20-
}
20+
},
21+
22+
"Using width: 100% and box-sizing should not result in a warning": function(){
23+
var result = CSSLint.verify("h1 { width: 100%; box-sizing: content-box; }", { "width-100": 1 });
24+
Assert.areEqual(0, result.messages.length);
25+
},
26+
27+
"Using width: 100% and -moz-box-sizing should not result in a warning": function(){
28+
var result = CSSLint.verify("h1 { width: 100%; -moz-box-sizing: content-box; }", { "width-100": 1 });
29+
Assert.areEqual(0, result.messages.length);
30+
},
31+
32+
"Using width: 100% and -webkit-box-sizing should not result in a warning": function(){
33+
var result = CSSLint.verify("h1 { width: 100%; -webkit-box-sizing: content-box; }", { "width-100": 1 });
34+
Assert.areEqual(0, result.messages.length);
35+
},
36+
37+
"Using width: 100% and -ms-box-sizing should not result in a warning": function(){
38+
var result = CSSLint.verify("h1 { width: 100%; -ms-box-sizing: content-box; }", { "width-100": 1 });
39+
Assert.areEqual(0, result.messages.length);
40+
}
41+
2142
}));
2243

2344
})();

0 commit comments

Comments
 (0)