8000 Add better outline support · CSSLint/csslint@f07ea26 · GitHub
Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f07ea26

Browse files
author
Frank van Gemeren
committed
Add better outline support
1 parent 6b1d395 commit f07ea26

File tree

8 files changed

+200
-42
lines changed

8 files changed

+200
-42
lines changed

‎dist/csslint-node.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1820,7 +1820,7 @@ CSSLint.addRule({
18201820
// rule information
18211821
id: "outline-none",
18221822
name: "Disallow outline: none",
1823-
desc: "Use of outline: none or outline: 0 should be limited to :focus rules.",
1823+
desc: "Use of outline: none | 0 | transparent should be limited to :focus rules and resulting elements should be visible.",
18241824
url: "https://github.com/CSSLint/csslint/wiki/Disallow-outline%3Anone",
18251825
browsers: "All",
18261826
tags: ["Accessibility"],
@@ -1838,7 +1838,8 @@ CSSLint.addRule({
18381838
col: event.col,
18391839
selectors: event.selectors,
18401840
propCount: 0,
1841-
outline: false
1841+
outline: false,
1842+
potentiallyInvisibleElement: false
18421843
};
18431844
} else {
18441845
lastRule = null;
@@ -1850,7 +1851,7 @@ CSSLint.addRule({
18501851
if (lastRule.outline) {
18511852
if (lastRule.selectors.toString().toLowerCase().indexOf(":focus") === -1) {
18521853
reporter.report("Outlines should only be modified using :focus.", lastRule.line, lastRule.col, rule);
1853-
} else if (lastRule.propCount === 1) {
1854+
} else if (lastRule.propCount === 1 || lastRule.potentiallyInvisibleElement === true) {
18541855
reporter.report("Outlines shouldn't be hidden unless other visual changes are made.", lastRule.line, lastRule.col, rule);
18551856
}
18561857
}
@@ -1865,13 +1866,23 @@ CSSLint.addRule({
18651866
parser.addListener("startviewport", startRule);
18661867

18671868
parser.addListener("property", function(event) {
1869+
18681870
var name = event.property.text.toLowerCase(),
1869-
value = event.value;
1871+
valueString = event.value.toString().toLowerCase();
18701872

18711873
if (lastRule) {
18721874
lastRule.propCount++;
1873-
if (name === "outline" && (value.toString() === "none" || value.toString() === "0")) {
1874-
lastRule.outline = true;
1875+
1876+
if (valueString.indexOf("none") !== -1 || valueString.indexOf("0") !== -1 || valueString.indexOf("transparent") !== -1) {
1877+
if (name === "outline") {
1878+
lastRule.outline = true;
1879+
}
1880+
else {
1881+
// these properties must not be 0, none, or transparent when outline is already one of those values
1882+
if (name.indexOf("border") >= 0) {
1883+
lastRule.potentiallyInvisibleElement = true;
1884+
}
1885+
}
18751886
}
18761887
}
18771888

‎dist/csslint-rhino.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9378,7 +9378,7 @@ CSSLint.addRule({
93789378
// rule information
93799379
id: "outline-none",
93809380
name: "Disallow outline: none",
9381-
desc: "Use of outline: none or outline: 0 should be limited to :focus rules.",
9381+
desc: "Use of outline: none | 0 | transparent should be limited to :focus rules and resulting elements should be visible.",
93829382
url: "https://github.com/CSSLint/csslint/wiki/Disallow-outline%3Anone",
93839383
browsers: "All",
93849384
tags: ["Accessibility"],
@@ -9396,7 +9396,8 @@ CSSLint.addRule({
93969396
col: event.col,
93979397
selectors: event.selectors,
93989398
propCount: 0,
9399-
outline: false
9399+
outline: false,
9400+
potentiallyInvisibleElement: false
94009401
};
94019402
} else {
94029403
lastRule = null;
@@ -9408,7 +9409,7 @@ CSSLint.addRule({
94089409
if (lastRule.outline) {
94099410
if (lastRule.selectors.toString().toLowerCase().indexOf(":focus") === -1) {
94109411
reporter.report("Outlines should only be modified using :focus.", lastRule.line, lastRule.col, rule);
9411-
} else if (lastRule.propCount === 1) {
9412+
} else if (lastRule.propCount === 1 || lastRule.potentiallyInvisibleElement === true) {
94129413
reporter.report("Outlines shouldn't be hidden unless other visual changes are made.", lastRule.line, lastRule.col, rule);
94139414
}
94149415
}
@@ -9423,13 +9424,23 @@ CSSLint.addRule({
94239424
parser.addListener("startviewport", startRule);
94249425

94259426
parser.addListener("property", function(event) {
9427+
94269428
var name = event.property.text.toLowerCase(),
9427-
value = event.value;
9429+
valueString = event.value.toString().toLowerCase();
94289430

94299431
if (lastRule) {
94309432
lastRule.propCount++;
9431-
if (name === "outline" && (value.toString() === "none" || value.toString() === "0")) {
9432-
lastRule.outline = true;
9433+
9434+
if (valueString.indexOf("none") !== -1 || valueString.indexOf("0") !== -1 || valueString.indexOf("transparent") !== -1) {
9435+
if (name === "outline") {
9436+
lastRule.outline = true;
9437+
}
9438+
else {
9439+
// these properties must not be 0, none, or transparent when outline is already one of those values
9440+
if (name.indexOf("border") >= 0) {
9441+
lastRule.potentiallyInvisibleElement = true;
9442+
}
9443+
}
94339444
}
94349445
}
94359446

‎dist/csslint-tests.js‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3096,6 +3096,13 @@ background: -o-linear-gradient(top, #1e5799 ,#2989d8 ,#207cca ,#7db9e8 );
30963096
Assert.areEqual("Outlines should only be modified using :focus.", result.messages[0].message);
30973097
},
30983098

3099+
"Using outline: transparent should result in a warning": function() {
3100+
var result = CSSLint.verify(".foo { outline: transparent}", { "outline-none": 1 });
3101+
Assert.areEqual(1, result.messages.length);
3102+
Assert.areEqual("warning", result.messages[0].type);
3103+
Assert.areEqual("Outlines should only be modified using :focus.", result.messages[0].message);
3104+
},
3105+
30993106
"Using outline: 0 should result in a warning": function() {
31003107
var result = CSSLint.verify(".foo { outline: 0; }", { "outline-none": 1 });
31013108
Assert.areEqual(1, result.messages.length);
@@ -3117,16 +3124,55 @@ background: -o-linear-gradient(top, #1e5799 ,#2989d8 ,#207cca ,#7db9e8 );
31173124
Assert.areEqual("Outlines shouldn't be hidden unless other visual changes are made.", result.messages[0].message);
31183125
},
31193126

3120-
"Using outline: none with :focus and another property should not result in a warning": function() {
3127+
"Using outline: transparent alone with :focus should result in a warning": function() {
3128+
var result = CSSLint.verify(".foo:focus { outline: transparent; }", { "outline-none": 1 });
3129+
Assert.areEqual(1, result.messages.length);
3130+
Assert.areEqual("warning", result.messages[0].type);
3131+
Assert.areEqual("Outlines shouldn't be hidden unless other visual changes are made.", result.messages[0].message);
3132+
},
3133+
3134+
"Using outline: none with :focus and another visible property should not result in a warning": function() {
31213135
var result = CSSLint.verify(".foo:focus { outline: none; border: 1px solid black; }", { "outline-none": 1 });
31223136
Assert.areEqual(0, result.messages.length);
31233137
},
31243138

3125-
"Using outline: 0 with :focus and another property should not result in a warning": function() {
3139+
"Using outline: 0 with :focus and another visible property should not result in a warning": function() {
31263140
var result = CSSLint.verify(".foo:focus { outline: 0; border: 1px solid black;}", { "outline-none": 1 });
31273141
Assert.areEqual(0, result.messages.length);
3128-
}
3142+
},
3143+
3144+
"Using outline: 1px solid transparent; with :focus should result in a warning": function() {
3145+
var result = CSSLint.verify(".foo:focus { outline: 1px solid transparent;}", { "outline-none": 1 });
3146+
Assert.areEqual(1, result.messages.length);
3147+
Assert.areEqual("warning", result.messages[0].type);
3148+
Assert.areEqual("Outlines shouldn't be hidden unless other visual changes are made.", result.messages[0].message);
3149+
},
31293150

3151+
"Using outline: 0 with :focus and another transparent property should result in a warning": function() {
3152+
var result = CSSLint.verify(".foo:focus { outline: 0; border: 1px solid transparent;}", { "outline-none": 1 });
3153+
Assert.areEqual(1, result.messages.length);
3154+
Assert.areEqual("warning", result.messages[0].type);
3155+
Assert.areEqual("Outlines shouldn't be hidden unless other visual changes are made.", result.messages[0].message);
3156+
},
3157+
3158+
"Using outline: 0 with :focus and another zeroed property should result in a warning": function() {
3159+
var result = CSSLint.verify(".foo:focus { outline: 0; border: 0 solid black;}", { "outline-none": 1 });
3160+
Assert.areEqual(1, result.messages.length);
3161+
Assert.areEqual("warning", result.messages[0].type);
3162+
Assert.areEqual("Outlines shouldn't be hidden unless other visual changes are made.", result.messages[0].message);
3163+
},
3164+
3165+
"Using outline: 0 red; with :focus should result in a warning": function() {
3166+
var result = CSSLint.verify(".foo:focus { outline: 0 red;}", { "outline-none": 1 });
3167+
Assert.areEqual(1, result.messages.length);
3168+
Assert.areEqual("warning", result.messages[0].type);
3169+
Assert.areEqual("Outlines shouldn't be hidden unless other visual changes are made.", result.messages[0].message);
3170+
},
3171+
3172+
"Using outline: 0 with :focus and another zeroed property that does not affect rendering should not result in a warning": function() {
3173+
var result = CSSLint.verify(".foo:focus { outline: 0; margin: 0;}", { "outline-none": 1 });
3174+
Assert.areEqual(0, result.messages.length);
3175+
}
31303176
}));
31313177

31323178
})();

‎dist/csslint-worker.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9374,7 +9374,7 @@ CSSLint.addRule({
93749374
// rule information
93759375
id: "outline-none",
93769376
name: "Disallow outline: none",
9377-
desc: "Use of outline: none or outline: 0 should be limited to :focus rules.",
9377+
desc: "Use of outline: none | 0 | transparent should be limited to :focus rules and resulting elements should be visible.",
93789378
url: "https://github.com/CSSLint/csslint/wiki/Disallow-outline%3Anone",
93799379
browsers: "All",
93809380
tags: ["Accessibility"],
@@ -9392,7 +9392,8 @@ CSSLint.addRule({
93929392
col: event.col,
93939393
selectors: event.selectors,
93949394
propCount: 0,
9395-
outline: false
9395+
outline: false,
9396+
potentiallyInvisibleElement: false
93969397
};
93979398
} else {
93989399
lastRule = null;
@@ -9404,7 +9405,7 @@ CSSLint.addRule({
94049405
if (lastRule.outline) {
94059406
if (lastRule.selectors.toString().toLowerCase().indexOf(":focus") === -1) {
94069407
reporter.report("Outlines should only be modified using :focus.", lastRule.line, lastRule.col, rule);
9407-
} else if (lastRule.propCount === 1) {
9408+
} else if (lastRule.propCount === 1 || lastRule.potentiallyInvisibleElement === true) {
94089409
reporter.report("Outlines shouldn't be hidden unless other visual changes are made.", lastRule.line, lastRule.col, rule);
94099410
}
94109411
}
@@ -9419,13 +9420,23 @@ CSSLint.addRule({
94199420
parser.addListener("startviewport", startRule);
94209421

94219422
parser.addListener("property", function(event) {
9423+
94229424
var name = event.property.text.toLowerCase(),
9423-
value = event.value;
9425+
valueString = event.value.toString().toLowerCase();
94249426

94259427
if (lastRule) {
94269428
lastRule.propCount++;
9427-
if (name === "outline" && (value.toString() === "none" || value.toString() === "0")) {
9428-
lastRule.outline = true;
9429+
9430+
if (valueString.indexOf("none") !== -1 || valueString.indexOf("0") !== -1 || valueString.indexOf("transparent") !== -1) {
9431+
if (name === "outline") {
9432+
lastRule.outline = true;
9433+
}
9434+
else {
9435+
// these properties must not be 0, none, or transparent when outline is already one of those values
9436+
if (name.indexOf("border") >= 0) {
9437+
lastRule.potentiallyInvisibleElement = true;
9438+
}
9439+
}
94299440
}
94309441
}
94319442

‎dist/csslint-wsh.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9378,7 +9378,7 @@ CSSLint.addRule({
93789378
// rule information
93799379
id: "outline-none",
93809380
name: "Disallow outline: none",
9381-
desc: "Use of outline: none or outline: 0 should be limited to :focus rules.",
9381+
desc: "Use of outline: none | 0 | transparent should be limited to :focus rules and resulting elements should be visible.",
93829382
url: "https://github.com/CSSLint/csslint/wiki/Disallow-outline%3Anone",
93839383
browsers: "All",
93849384
tags: ["Accessibility"],
@@ -9396,7 +9396,8 @@ CSSLint.addRule({
93969396
col: event.col,
93979397
selectors: event.selectors,
93989398
propCount: 0,
9399-
outline: false
9399+
outline: false,
9400+
potentiallyInvisibleElement: false
94009401
};
94019402
} else {
94029403
lastRule = null;
@@ -9408,7 +9409,7 @@ CSSLint.addRule({
94089409
if (lastRule.outline) {
94099410
if (lastRule.selectors.toString().toLowerCase().indexOf(":focus") === -1) {
94109411
reporter.report("Outlines should only be modified using :focus.", lastRule.line, lastRule.col, rule);
9411-
} else if (lastRule.propCount === 1) {
9412+
} else if (lastRule.propCount === 1 || lastRule.potentiallyInvisibleElement === true) {
94129413
reporter.report("Outlines shouldn't be hidden unless other visual changes are made.", lastRule.line, lastRule.col, rule);
94139414
}
94149415
}
@@ -9423,13 +9424,23 @@ CSSLint.addRule({
94239424
parser.addListener("startviewport", startRule);
94249425

94259426
parser.addListener("property", function(event) {
9427+
94269428
var name = event.property.text.toLowerCase(),
9427-
value = event.value;
9429+
valueString = event.value.toString().toLowerCase();
94289430

94299431
if (lastRule) {
94309432
lastRule.propCount++;
9431-
if (name === "outline" && (value.toString() === "none" || value.toString() === "0")) {
9432-
lastRule.outline = true;
9433+
9434+
if (valueString.indexOf("none") !== -1 || valueString.indexOf("0") !== -1 || valueString.indexOf("transparent") !== -1) {
9435+
if (name === "outline") {
9436+
lastRule.outline = true;
9437+
}
9438+
else {
9439+
// these properties must not be 0, none, or transparent when outline is already one of those values
9440+
if (name.indexOf("border") >= 0) {
9441+
lastRule.potentiallyInvisibleElement = true;
9442+
}
9443+
}
94339444
}
94349445
}
94359446

‎dist/csslint.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9378,7 +9378,7 @@ CSSLint.addRule({
93789378
// rule information
93799379
id: "outline-none",
93809380
name: "Disallow outline: none",
9381-
desc: "Use of outline: none or outline: 0 should be limited to :focus rules.",
9381+
desc: "Use of outline: none | 0 | transparent should be limited to :focus rules and resulting elements should be visible.",
93829382
url: "https://github.com/CSSLint/csslint/wiki/Disallow-outline%3Anone",
93839383
browsers: "All",
93849384
tags: ["Accessibility"],
@@ -9396,7 +9396,8 @@ CSSLint.addRule({
93969396
col: event.col,
93979397
selectors: event.selectors,
93989398
propCount: 0,
9399-
outline: false
9399+
outline: false,
9400+
potentiallyInvisibleElement: false
94009401
};
94019402
} else {
94029403
lastRule = null;
@@ -9408,7 +9409,7 @@ CSSLint.addRule({
94089409
if (lastRule.outline) {
94099410
if (lastRule.selectors.toString().toLowerCase().indexOf(":focus") === -1) {
94109411
reporter.report("Outlines should only be modified using :focus.", lastRule.line, lastRule.col, rule);
9411-
} else if (lastRule.propCount === 1) {
9412+
} else if (lastRule.propCount === 1 || lastRule.potentiallyInvisibleElement === true) {
94129413
reporter.report("Outlines shouldn't be hidden unless other visual changes are made.", lastRule.line, lastRule.col, rule);
94139414
}
94149415
}
@@ -9423,13 +9424,23 @@ CSSLint.addRule({
94239424
parser.addListener("startviewport", startRule);
94249425

94259426
parser.addListener("property", function(event) {
9427+
94269428
var name = event.property.text.toLowerCase(),
9427-
value = event.value;
9429+
valueString = event.value.toString().toLowerCase();
94289430

94299431
if (lastRule) {
94309432
lastRule.propCount++;
9431-
if (name === "outline" && (value.toString() === "none" || value.toString() === "0")) {
9432-
lastRule.outline = true;
9433+
9434+
if (valueString.indexOf("none") !== -1 || valueString.indexOf("0") !== -1 || valueString.indexOf("transparent") !== -1) {
9435+
if (name === "outline") {
9436+
lastRule.outline = true< 71E3 span class=pl-kos>;
9437+
}
9438+
else {
9439+
// these properties must not be 0, none, or transparent when outline is already one of those values
9440+
if (name.indexOf("border") >= 0) {
9441+
lastRule.potentiallyInvisibleElement = true;
9442+
}
9443+
}
94339444
}
94349445
}
94359446

0 commit comments

Comments
 (0)
</