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
styling-css-01-b Test that viewer handles combinations of the simple CSS2 selectors: ancestor, child, sibling. rect { fill: red } .warning { fill: red } .bar {fill: green} Rectangle should be red not green This tests element (GI) selectors: <rect /> and the selector rect Circle should be red not green; rectangle still red This tests class selectors: <circle class="warning" /> and the selector .warning $Revision: 1.3 $ |

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