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?

Jonas Schubert Erlandsson · Accepted Answer · 2013-02-22 21:45:56Z

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 ...

answered Feb 22, 2013 at 21:45

Jonas Schubert Erlandsson

4,0701 gold badge26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BoltClock Over a year ago

The question specifically mentions the use of a host language other than HTML. So there is a host language present (i.e. the OP isn't working with CSS alone), and it is not HTML.

jdm Over a year ago

I'm not using it with a markup language at all. I want to use CSS to style diagrams, legends, textboxes etc. that appear in my application. There is a kind of DOM, though, and as an analogy you can think of one window as a "document", with each element a "tag". (The way you're supposed to style things now btw. is via a crazy mixture of C++ methods (you have to write "scripts"), global functions, and a point and click interface.) And yeah, now I'm trying to get CSS syntax and semantics (rule precedence etc.) right. Presentation is mostly a matter of mapping the rules to the old C++ interface.

BoltClock Over a year ago

@jdm: That still counts as a host language if I'm not wrong - you don't need a markup language per se, just something with DOM-like concepts (as you have mentioned) that are compatible with CSS.

Jonas Schubert Erlandsson Over a year ago

Since you have a DOM like structure I imagine you'll have to extract things like classes and ids from that dom and then feed that into the CSS parser/styler. Where these ids and classes comes from is not really relevant (or at least shouldn't be) to the CSS parser. So using something existing, such as a browser or phantomJS, to test it would be your best bet...

Ahmed Nuaman · Accepted Answer · 2013-02-22 21:56:22Z

1

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.

answered Feb 22, 2013 at 21:56

Ahmed Nuaman

13.4k16 gold badges58 silver badges88 bronze badges

1 Comment

jdm Over a year ago

That's actually pretty clever, why reinvent the wheel! However I think I'll still go for my small custom CSS engine, since I won't need a JS interpreter / web browser anywhere else in the project, and the program is already pretty bloated.

Collectives™ on Stack Overflow

Is there a CSS syntax test suite?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related