diff --git a/src/rules/ltr-properties.js b/src/rules/ltr-properties.js new file mode 100644 index 00000000..5dd16b97 --- /dev/null +++ b/src/rules/ltr-properties.js @@ -0,0 +1,73 @@ +/* + * Rule: Detects properties for LTR text styling the require equivalent RTL styling. + */ +CSSLint.addRule({ + + //rule information + id: "ltr-properties", + name: "LTR properties", + desc: "Detects properties for LTR text styling the require equivalent RTL styling.", + browsers: "All", + + //initialization + init: function(parser, reporter){ + "use strict"; + var properties = { + "border-left": 1, + "border-right": 1, + "border-top-right-radius": 1, + "border-top-left-radius": 1, + "border-bottom-right-radius": 1, + "border-bottom-left-radius": 1, + "padding-left": 1, + "padding-right": 1, + "margin-left": 1, + "margin-right": 1, + "text-align": 1, + background: 1, + "background-position": 1, + left: 1, + right: 1 + }, + potentialProperties = { + float: { + left: 1, + right: 1, + }, + clear: { + left: 1, + right: 1, + }, + }, + potentialMultipleValueProperties = { + padding: 1, + margin: 1, + border: 1, + "border-radius": 1, + }; + + parser.addListener("property", function(event){ + var rule = this, + name = event.property.toString().toLowerCase(), + value = event.value.toString(), + line = event.line, + col = event.col; + + // These properties always affect RTL. + if (properties[name]){ + reporter.report("Using " + name + " could require an equivalent rule for RTL styling.", line, col, rule); + } + // These properties could affect RTL, if they have four values. + else if (potentialMultipleValueProperties[name] && event.value.parts.length === 4){ + reporter.report("Using " + name + " in this way could require an equivalent rule for RTL styling.", line, col, rule); + } + // These properties could affect RTL, if they have certain values. + else if(potentialProperties[name]) { + var property = potentialProperties[name]; + if(property[value]) { + reporter.report("Using " + name + " in this way could require an equivalent rule for RTL styling.", line, col, rule); + } + } + }); + } +}); diff --git a/tests/rules/ltr-properties.js b/tests/rules/ltr-properties.js new file mode 100644 index 00000000..3661130d --- /dev/null +++ b/tests/rules/ltr-properties.js @@ -0,0 +1,56 @@ +(function(){ + "use strict"; + var Assert = YUITest.Assert; + + YUITest.TestRunner.add(new YUITest.TestCase({ + + name: "LTR property detection", + + "Using padding-right should result in a warning": function(){ + var result = CSSLint.verify(".foo { padding-right: 10px; }", { "ltr-properties": 1 }); + Assert.areEqual(1, result.messages.length); + Assert.areEqual("warning", result.messages[0].type); + Assert.areEqual("Using padding-right could require an equivalent rule for RTL styling.", result.messages[0].message); + }, + + "Using padding: 0 1px 0 2px should result in a warning": function(){ + var result = CSSLint.verify(".foo { padding: 0 1px 0 2px; }", { "ltr-properties": 1 }); + Assert.areEqual(1, result.messages.length); + Assert.areEqual("warning", result.messages[0].type); + Assert.areEqual("Using padding in this way could require an equivalent rule for RTL styling.", result.messages[0].message); + }, + + "Using float: left should result in a warning": function(){ + var result = CSSLint.verify(".foo { float: left; }", { "ltr-properties": 1 }); + Assert.areEqual(1, result.messages.length); + Assert.areEqual("warning", result.messages[0].type); + Assert.areEqual("Using float in this way could require an equivalent rule for RTL styling.", result.messages[0].message); + }, + + "Using font-size should result no warning": function(){ + var result = CSSLint.verify(".foo { font-size: 10px; }", { "ltr-properties": 1 }); + Assert.areEqual(0, result.messages.length); + }, + + "Using padding: 10px should result no warning": function(){ + var result = CSSLint.verify(".foo { padding: 0; }", { "ltr-properties": 1 }); + Assert.areEqual(0, result.messages.length); + }, + + "Using border-radius: 2px should result no warning": function(){ + var result = CSSLint.verify(".foo { padding: 0; }", { "ltr-properties": 1 }); + Assert.areEqual(0, result.messages.length); + }, + + "Using margin: 0 1px should result no warning": function(){ + var result = CSSLint.verify(".foo { margin: 0 1px; }", { "ltr-properties": 1 }); + Assert.areEqual(0, result.messages.length); + }, + + "Using clear: none should result no warning": function(){ + var result = CSSLint.verify(".foo { float: none; }", { "ltr-properties": 1 }); + Assert.areEqual(0, result.messages.length); + }, + })); + +})();