<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<!--======================================================================-->
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, Institut National de Recherche en =-->
<!--= Informatique et en Automatique, Keio University). All Rights =-->
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<!-- =====================================================================-->
<!-- style-selector-BE-03.svg -->
<!-- renamed for 1.1 suite to styling-css-03-b.svg -->
<!-- Author : Chris lilley, 22-Feb-2000 -->
<!-- Modified for svg 1.1 by Ola Andersson, 07-Mar-2002 -->
<!-- Revised for Mobile Profiles: Jun Fujisawa 16-Jul-2002 -->
<!--======================================================================-->
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
<OperatorScript version="$Revision: 1.1 $" testname="styling-css-03-b.svg">
<Paragraph>
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.
</Paragraph>
<Paragraph>
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.</Paragraph>
<Paragraph>
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.
</Paragraph>
<Paragraph>
The rendered picture should match the reference image exactly, except for possible
variations in the labelling text (per CSS2 rules).
</Paragraph>
<Paragraph>
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.
</Paragraph>
</OperatorScript>
</SVGTestCase>
<title id="test-title">styling-css-03-b</title>
<desc id="test-desc">
Test that viewer handles combinations of the simple
CSS2 selectors: ancestor, child, sibling.</desc>
<!--======================================================================-->
<!--Content of Test Case follows... =====================-->
<!--======================================================================-->
<g id="test-body-content">
<defs>
<style type="text/css"><![CDATA[
.mummy circle, .mummy rect, .mummy polygon
{ fill: green} /* all shapes green */
.mummy > .thischild { fill: red } /* top rect red */
.primus + .secundus { fill: red } /* bottom rect red */
.mummy circle:first-child { fill: red} /* bottom circle red */
.mummy { fill: blue } /* make failure of ancestor selector obvious */
/* .gap { stroke: black; stroke-width: 3px } */ /* too complex for BE */
]]></style>
</defs>
<!-- ====================================================================== -->
<!-- child selectors ============================================== -->
<!-- ====================================================================== -->
<text style="font-family:Arial;font-size:12;" x="40" y="14">Rectangle should be red not green</text>
<text style="font-family:Arial;font-size:12;" x="40" y="36">This tests
ancestor selectors and child selectors</text>
<g class="mummy">
<rect class="thischild" x="220" y="80" width="60" height="40"/>
<circle cx="160" cy="100" r="30"/>
<g class="generation gap">
<polygon class="thischild" points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
</g>
</g>
<!-- ====================================================================== -->
<!-- sibling and first-child selectors ================================== -->
<!-- ====================================================================== -->
<g transform="translate(0, 150)">
<text style="font-family:Arial;font-size:12;" x="40" y="14">Circle should be red not green; rectangle still red</text>
<text style="font-family:Arial;font-size:12;" x="40" y="36">This tests
ancestor, immediate-sibling and first-child selectors</text>
<g class="mummy">
<circle class="primus" cx="160" cy="100" r="30"/>
<rect class="secundus" x="220" y="80" width="60" height="40"/>
<polygon class="tertius" points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
</g>
</g>
</g>
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.1 $</text>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
</svg>
Codebase Browser
chromium