styling-css-03-b-manual.svg

<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 &gt; .thischild { fill: green }     /* even more specific,  rect green */

        .child {fill: red}

        .gap &gt; .thischild { fill: green}

        .daddy {fill: red }

        .daddy &gt; .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>