styling-css-03-b

Verify the capability to handle combinations of simple 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 class 'mummy') of circle, a rectangle and an irregular polygon. A style on the group makes all the children have blue fill by inheritance, which is overridden by a more specific selector that makes all circle, rect, and polygon descendents have green fill. Thus, any blue fill displayed is incorrect.

In the upper test, the selector 'immediate child' selects all elements of class 'thischild' which are immediate children of the elements of class 'mummy'. The rectangle and the polygon are of class'thischild' but the polygon is not an immediate child so must not be selected. The rectangle must be red, the circle and polygon must be green.

In the lower test, the 'adjacent sibling' selector matches elements of class 'secundus' which are adjacent to a previous sibling of class 'primus'; this makes the rectangle in the second test red. The first-child pseudoclass matches circles which are the first child of elements of class 'mummy' and if correctly selected this circle will be filled red. (The circle in the upper test is not the first child). The rectangle should also be red, with 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.