test cases

[Németh Balázs]

Some time ago I started to write a css validator in javascript. That was long before csslint. For that I created a css file with a lot of errors to see, how browsers and my validatror handles them. I entered this test file to css lint, and it did not recognize some of the errors, and it showed a warning where it should not, or should show other kind of warning. So for the common good I will share this test cases here...

invalid values, that the validator has missed:

color: rgb(1, 2, 300); /* warning, number above 255 should be interpreted as 255 */
color: rgb(1, 2, -1); /* warning, numbers below 0 should be interpreted as 0 */

border-left-color: gold; /* invalid: no such named color */
border-right-color: #33ff5; /* invalid: missing a digit */
border-top-color: #123efg; /* invalid: not haxanumeric */

width: -1px; /* invalid: width cannot be negative */

border-top-width: -1px; /* invalid: cannot be negative */

padding: -10px; /* invalid: cannot be negative */

padding-left: -1%; /* invalid: cannot be negative */

margin: 0 10px 0 5; /* invalid: missing unit after number 5 */

margin-right: 111.1%; /* warning: over 100% */

font-size: -10px; /* invalid: cannot be negative */

letter-spacing: 0.5px; /* warning: only firefox can render not whole pixels */

text-decoration: underlie; /* invalid: typo */

max-width: -1px; /* invalid: cannot be negative */

outline-style: hidden; /* invalid, it could be none */

border-spacing: -1; /* invalid: cannot be negative */

tr, col, rowgroup, colgroup { border: solid; }  /* ivalid: rows, columns, row groups, and column groups cannot have borders */

orphans: 0; /* invalid: only positive values are allowed */

widows: -1; /* invalid: only positive values are allowed */

p:first-line a { } /* invalid: pseudo-elements can only occur at the end of a selector */

valid values that gave errors:

background-position: left;

background-position: right;

border-color: currentColor;

Thats all.

[Nicholas Zakas]

Hi Nemeth,

Thanks for that. The validation is CSS Lint is based on my parser
(https://github.com/nzakas/parser-lib). The validation is also far
from complete due to the complexities of validating CSS. Feel free to
file bugs on the parser for specific cases.

-N

--

______________________________
Nicholas C. Zakas
@slicknet

Author, Professional JavaScript for Web Developers
Buy it at Amazon.com:
http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3

[Nicole Sullivan]

Do you mean he should open a separate bug for each line?

[Nicholas Zakas]

No, logical groupings of lines. For example, -1px is invalid for width and height, so that's actually the same bug.