Is there a CSS syntax test suite?

Question

I am writing my own CSS parser and want to use it to style graphic elements in my application (and not in HTML). I want to make sure that this is consistent with the usual CSS behavior when it comes to selector priorities, cascade, etc.

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

My CSS has most regular syntax functions (for example, matches tag names, identifiers, classes, pseudo-classes) and will share many formatting options using CSS CSS, but also have different styles depending on the type of “documents” I style.

I was looking for a CSS test suite to test my implementation, but the only ones I could find, such as the W3C test suite , primarily concerned the visual presentation of the document. I am looking for something machine-readable or easily adaptable, and use the CSS mechanism, not the layout mechanism. Something like (pseudo-test spec):

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 would also like to check the behavior of CSS shortcuts (e.g. line vs line-color ) in cases where I implemented them identically to HTML. for example

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

leads to the string "1px solid red". Any ideas?

Answer 1

I doubt there is a css selector that only works on CSS. Since CSS is designed as an accompanying technology (not to mention that it cannot be used elsewhere, but it is not a common occurrence), the test suite focuses on these relationships and usually runs in a browser, such as this one .

A common set of test suites for CSS selectors should be a little more than a syntax check. If styles don't apply to something, you won’t be able to see if the CSS parser is working correctly, right?

But the set above contains about 500 tests for different CSS3 selectors (including older versions, since they are still part of CSS3), and you should be able to use this as a specification for your implementation at least.

If you use an external library to process HTML code, you can plug in your CSS parser and use existing HTML / CSS sets to test the parser mechanism. But can it be too much work? If not, take a look at Chromium and see if their design is enough to plug in an eternal CSS parser ...

Answer 2

How about using a dumb web browser like PhantomJS and then using a JS library with a CSS engine like jQuery.

So you can write your CSS, then write HTML and check the styles of these HTML elements using jQuery.css ()?

I also believe that PhantomJS can take screenshots on the page, which can be a good visual check.