Full version, Basic version

Specification link: 6.7 Styling with CSS

struct-use-05-b ← index → styling-css-02-b

# styling-css-01-b
SVG Image | PNG Image

Verify the basic capability to handle CSS2 selectors. The style sheet is contained in a style element in the SVG file. The picture is in two halves. In each half there is a group of circle, a rectangle and an irregular polygon. A style on the group makes all the children have green fill.

In the upper test, the selector is the element name. All 'rect' elements are selected and made to have a red fill. (This selects the 'rect' in the lower test as well, and thus makes it red). The rectangle should be red, with the circle and polygon green.

In the lower test, the selector is on the class attribute. There is a class of "warning" on the circle in the lower test, and if correctly selected this circle will be filled red. The rectangle should also be red. The polygon has class="foo bar baz" and there is a matching selector ".bar" so it should be green.

The rendered picture should match the reference image exactly, except for possible variations in the labelling text (per CSS2 rules).

This tests uses 'g', 'circle', 'rect' and 'polygon' elements, as well as fill (solid CSS1 named colors), font-family ("Arial"), and font-size properties within the 'style' attribute and style element.

struct-use-05-b ← index → styling-css-02-b

Distributed under both the W3C Test Suite License and the W3C 3-clause BSD License.
To contribute to a W3C Test Suite, see the policies and contribution forms.