Elementary Cascade

If you have any comments to make regarding this test, e-mail ian@hixie.ch.

Prerequisites

Browsers that are subjected to this test should support the CSS color and font-weight properties, grouping CSS selectors (a, b, c { }), the HTML STYLE element, and the HTML LINK element method of importing stylesheets.

1. Cascading Rules

    .easy { color: red; background: yellow none; }
    .easy { color: green; background: white none; }

The next statement, which has class=easy, should therefore be green:

Should be green.

See section 6.4.1.4 of CSS2.

2. Cascading Stylesheets

There are six stylesheets linked in to this document. In the following list, every item should be green.

1. Should be green.
2. Should be green.
3. Should be green.
4. Should be green.
5. Should be green.
6. Should be green.

3. Cascading Properties

    .props { font-weight: bold; }
    .props { color: green; background: white none; }

The next statement (class=props) should be green and bold:

Should be green and bold.

4. Cascading Specificity

    /* in sheet x1.css: */
    OL .xa, OL .xb { color: green; background: white none; }  
    .xc { color: red; background: yellow none; }   

    /* in sheet x2.css: */
    .xa { color: red; background: yellow none; }   
    OL .xc { color: green; background: white none; }  

    /* in style element: */
    .xb { color: red; background: yellow none; }   

The next few tests should be green:

1. Should be green.
2. Should be green.
3. Should be green.

Submit Results

Up to the Evil Tests Page.

This page is maintained by Ian Hickson (ian@hixie.ch).

Last updated in September 1999.