1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--======================================================================-->
<!--= SVG 1.1 2nd Edition Test Case =-->
<!--======================================================================-->
<!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, European Research Consortium for =-->
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
<!--= All Rights Reserved. =-->
<!--= See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
template-version="1.4" reviewer="SVGWG" author="Chris lilley" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: styling-css-03-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS">
<p>
Test ancestor, child and sibling selectors.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if all six shapes have a green fill.
</p>
</d:passCriteria>
<!--
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 green, 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 green. 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 green. (The circle in the upper test is not
the first child).
-->
</d:SVGTestCase>
<title id="test-title">$RCSfile: styling-css-03-b.svg,v $</title>
<defs>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
</font-face-src>
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<style type="text/css">
.mummy {fill: green } /* least specific */
.mummy rect { fill: red} /* more specific, make rect red */
.mummy > .thischild { fill: green } /* even more specific, rect green */
.child {fill: red}
.gap > .thischild { fill: green}
.daddy {fill: red }
.daddy > .tertius {fill: green} /* bottom poly green */
.primus + .secundus { fill: green } /* bottom rect green */
.daddy :first-child { fill: green} /* bottom circle green */
</style>
</defs>
<text style="font-family:SVGFreeSansASCII;font-size:12px;" x="40" y="36">
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="child">
<g class="generation gap">
<polygon class="thischild" points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
</g>
</g>
</g>
<g transform="translate(0, 150)">
<text style="font-family:SVGFreeSansASCII;font-size:12px;" x="40" y="36">
ancestor, immediate-sibling and first-child selectors:
</text>
<g class="daddy">
<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>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.6 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
<!-- comment out this watermark once the test is approved -->
<!--<g id="draft-watermark">
<rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
<text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>-->
</svg>
|
