Full version, Basic version

Specification link: 6.7 Styling with CSS

styling-css-01-b ← index → styling-css-03-b

# styling-css-02-b
SVG Image | PNG Image
styling-css-02-b Test that viewer handles combinations of the simple CSS2 selectors: ancestor, child, sibling. #one, #two { fill: red } [transform="scale(2)"] { fill: red } #x [points] { fill: green } Rectangle should be red not green This tests id selectors: <rect id="one" /> and the selector #one Circle should be red not green; rectangle still red This tests attribute selectors: <circle transform="scale(2)" /> and the selector [transform="scale(2)"] $Revision: 1.4 $ |

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 ID. The two 'rect' elements have id="one" and id="two" respectively and the selector #one, #two selects the rectangles and gives them a red fill. The rectangle should be red, with the circle and polygon green.

In the lower test, the selector is on an arbitrary attribute. The transform attribute has a value of "scale(2)" on the circle in the lower test, and if correctly selected this circle will be filled red (if the transform itself fails, the circle will be in the wrong position at the wrong size). The rectangle should also be red. The polygon has a points attribute and is a child of an element with id="x" so the selecto #x [points] matches, making the polygon 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.

styling-css-01-b ← index → styling-css-03-b