Project acronym: QUESTION-HOW
Project Full Title:Quality Engineering
Solutions via Tools, Information and Outreach for the New Highly-enriched
Offerings from W3C: Evolving the Web in Europe
Project/Contract No. IST-2000-28767
Workpackage 1, Deliverable D1.2
Project Manager: Daniel Dardailler
<danield@w3.org>
Author of this document: Daniel Dardailler and Bert
Bos<bbos@w3.org>
Created: 29 August 2002. Last updated: 31 March 2003.
This report describes the work that has been going on in the CSS3 Quality Assurance area. Two projects have been developed: updating the validator and updating the test suite.
In our taxonomy, a validator is a tool that check conformance of Content, while a Test Suite checks conformance of a Program.
The first project consists of updating the CSS validator for CSS level 3.
The CSS validator is a program for checking the correctness of CSS style sheets. It can be downloaded and run on a stand-alone machine, but its most popular incarnation is the on-line service maintained by W3C (http://jigsaw.w3.org/css-validator/).
The validator has been in use for several years already, first for CSS level 1, then, after an upgrade, for CSS level 2, and at the moment CSS level 3 is being developed by a working group of W3C, and thus the validator needs another upgrade. The validator is a Java program as well as a Java "servlet".
The second project entails developing tests and helping others develop tests for the various modules of CSS level 3. There exists a test suite for CSS level 1 (http://www.w3.org/Style/CSS/Test), but no test suite was made for level 2. That means that for level 3 quite a large number of new tests have to be created, not only for new features of level 3, but also for features of level 2 that have not yet been tested.
CSS3 is "Cascading Style Sheets level 3," the third level of the style sheet language for the Web. Compared to level 2, level 3 contains more typographic features, including many for east-asian languages, but also extra options for existing features, such as more control over colors and fonts. CSS3 is at this moment still being developed by W3C. The specification is published in the form of several "modules." Some modules are nearly ready, others are only at the start of their development.
The CSS3 validator work presented here is an evolution of the CSS2 validator.
Here's a mockup of the front page form for the CSS URI based validator.
W3C CSS Validation ServiceValidate documents by URIEnter the URI of a document (HTML with CSS or CSS only) you would like validated:
To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML. |
The application behind this form is a Java program that reads style sheets written by users and compares them against the CSS specifications, pointing out errors in those style sheets and warning for pitfalls.
The CSS validator has architecture that allowed it to check various "profiles" of CSS and the CSS3 validator will add a number of new profiles, as well as fix a small number of bugs.
The profiles are:
All of these profiles define subsets of the full set of CSS features, for use in various contexts. E.g., the "TV profile 1.0" corresponds to the styling properties needed for text display in television applications, as they are defined by various organizations that standardize digital TV.
The work on the CSS3 validator is on-going and we are keeping the code up to date with respect to the modules being developed. Since only a very small part of CSS3 is in a stable state (only the "TV profile 1.0," "Selectors" and "Media Queries" are currently "W3C Candidate Recommendations") , CSS3 as a whole is not yet stable enough for complete testing.
Four more modules (out of about 20 for the whole of CSS3) are expected to enter Candidate Recommendation state in September or October 2002, as well as "CSS 2.1" ("level 2 revision 1"), which is profile of CSS2. No date has been set yet, but it is likely that we wil try to publish an intermediate release of the CSS3 validator when these modules are ready.
Although the validator has not been released yet, people can follow its development and download the code from W3C's public CVS server. Of course, since this code is being worked on almost daily, code downloaded on any particular day might not work at all.
The overall Validator code base is organized in more than 20 modules, each hosting several Java classes. The entire code is available online from the W3C site. Documentation exists on how to extend the validator, add properties, etc. This code is Open Source.
We reproduce here an example of the CSS documentation:
In first, you should create your properties.
To do this, You should extend the class CSS.Properties.CssProperty. If you have some macros, see CSS.Properties.ACssCueBefore for an example.
An example for the name of a property :
CSS2.Printing.CssPageBreakBefore
Then, you should implements the interface org.w3c.css.parser.CssStyle. For an example, you can see org.w3c.css.aural.ACssStyle. In this example, I added aural cascading style sheet to cascading style sheet level 1, so I extends the style Css1Style that implements the CssStyle. Be careful, you must have a public constructor with no parameters in your CssStyle !
An example for the name of your style :
CSS2.Printing.PCssStyle
Create two configuration properties file :
# My parser config : style : CSS2.Printing.PCssStyle properties: CSS2Printing.properties # Note : the file CSS2Printing.properties should be in your style directory. # Activate the CSS2 parser extended-parser : true
# A property # Note : if you want to reuse CSS1 properties, you should add all properties ! # For an example, see AuralProperties.properties page-break-before : CSS2.Printing.CssPageBreakBefore
Now you are ready to parse your properties.
Finally, You should say where the parser can find your properties. This is a sample code to parse your owns properties :
import java.util.Properties; import java.net.URL; import org.w3c.css.parser.CssFouffa; import org.w3c.css.css.StyleSheetParser; import org.w3c.css.css.StyleSheetOrigin; import CSS2.Printing.PCssStyle; class MyStartUp { public static void main(String[] args) { Properties properties = new Properties(); try { Properties config = new Properties(); // try to load the file URL url = PCssStyle.class.getResource("CSS2Printing.properties"); config.load(url.openStream()); // set the parser CssFouffa.loadConfig(config); } catch (Exception e) { System.err.println("MyStartUp: couldn't load properties"); System.err.println(" " + e.toString() ); System.exit(1); } // now the parser is ready ! // create a parser StyleSheetParser parser = new StyleSheetParser(); // parse an URL parser.parseURL(new URL("http://www.w3.org/Style"), StyleSheetOrigin.AUTHOR); // output the result StyleSheetGenerator style = new StyleSheetGenerator("My example", // title parser.getStyleSheet(), // get the style sheet "text"); // output format style.print(System.out); } }
The new validator not only checks the syntax of a style sheet, but also issues warnings for dubious constructs, inconsistent rules, or potential problems (such as mixing relative and absolute units of measurements in certain ways, or a foreground color that is the same as the background color). The warnings and errors are localized, which means that users will get explanations in their own language. Each error also includes alink to the correspondaing passage in the specification.
The CSS validator has seen a steady growth in popularity over the years. At the moment it gets about 5000 requests for validation per day, and the number is still increasing. Recently, one browser (Konqueror) added the CSS validator to its menu bar, so users can check any given Web page with a single click.
Creating a test suite involves more than inventing tests.
Tests should also be easy to use, especially for software developers who need to go through a large test suite often and quickly, sometimes every day. In addition, the tests have to be available in various formats: for browsers on PCs, browsers on phones, on TVs, handhelds, etc. some of which may not even understand HTML.
An example are SVG implementations, which use CSS in combination with SVG. Their tests have therefore to be developed in close cooperation with the CSS working group of W3C, who is responsable for writing the specifications of CSS level 3 and also supervises the tests and controls their publication.
Also, the tests must be available to the public and can run on-line with any browser, or downloaded and run locally.
The CSS3 test suite is in fact several test suites. Like the CSS3 specification itself, the test suite is organized in modules, one for each module of the specification. The CSS working group has published a manual for writers of CSS tests.
The test suite for the "Selectors" module is ready and is available on-line. Since its publication it has been revised once to fix an error. Other test suites are still being developed. The next ones that are expected are those for the "TV profile 1.0," "CSS level 2 revision 1" and the "Media Queries," in the course of the next two months.
For instance, here is an extract from list of the selector test index. Each link point to the real test, a page that use HTML and CSS together to display a particular presentation property. If the tester is using a conformant browser, then the assertion in the test, like "This paragraph should be in green" is verified.
Most of the work of inventing tests is done by members of W3C's CSS working group, under supervision of the W3C personel, and with W3C staff taking care of the production on our Web site. Together with the working group we plan to launch an effort to get more contributions from the public. The already published manual is a part of that effort.
None.
The QH project has provided the necessary resources to jump-start the activity around CSS 3 test tools and we will continue developing these tests in the future til the CSS3 is finalized.
