Is there a CSS syntax test suite?

Question

I'm writing a custom CSS parser and want to use it to style graphical elements in my application (not HTML). I want to make sure that this conforms to the usual CSS behavior when it comes to precedence of selectors, the "cascade", etc..

Is there a comprehensive CSS test suite I can use for this project?

My CSS has most of the regular syntax features (e.g. matches "tag" names, ids, classes, pseudoclasses) and will share many of the formatting options with HTML's CSS, but also have different ones, as appropriate for the kind of "documents" I'm styling.

I've been looking for a CSS test suite to check my implementation, but the only ones I could find, like the W3C test suite, are primarily concerned with the visual representation of the document. I'm looking for something that is machine-readable or easy to adapt, and exercises the CSS engine rather than the layout engine. Something like (pseudo-test-specification):

Stylesheet
    blah.blub { color: red; }
    .blub { color: blue; }

+ Document
    <blah class="blub" />

=> Expected result:
    <blah class="blub" style="color: red" />

or

assert selector "#blub" matches element "moo#blub"
assert selector "blah#blub" does not match element "moo#blub"
...

I'd also like to test the behavior of CSS shorthands (e.g. line vs line-color), in cases I've implemented them identical to HTML's. For example

line: 1px solid blue;
line-color: red;

results in a "1px solid red" line. Any ideas?

Answer 1

I doubt there is a css selector test suite that works only on the CSS. Since CSS is developed to be a companion technology (not saying it can't be used elsewhere, but it's not common) the test suites focus on that relationship and usually run in the browser, such as this one.

A general purpose test suite for CSS selectors would have to be little more than a syntax checker. Unless the styles are applied to something you will not be able to see if the CSS parser worked right, right?

But the suite above gives some 500 tests for different CSS3 selectors (including older versions as well since they are still part of CSS3) and you should be able to use that as a specification for your implementation at least.

If you use an external library to handle the HTML you could plug your CSS parser in and use existing HTML/CSS suites to test the parser engine. But this might be too much work? If not, have a look at Chromium and see if their design is modular enough to allow for plugging in an eternal CSS parser ...

Answer 2

How about using a headless web browser such as PhantomJS and then using a JS library that has a CSS engine, such as jQuery.

That way you can write your CSS, then write HTML and check the styles of those HTML elements using jQuery's .css() function?

Also I believe PhantomJS can take screenshots of a page, that could be a nice visual sanity check.