LayoutTests/svg/W3C-SVG-1.1/styling-css-02-b.svg

<?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-02.svg                                             -->
<!-- renamed for 1.1 suite to styling-css-02-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.4 $" testname="styling-css-02-b.svg">
      <Paragraph>
            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. 
         </Paragraph>
      <Paragraph>
            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. 
            </Paragraph>
      <Paragraph>
            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. 
         </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-02-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[
 #one, #two { fill: red }
 [transform="scale(2)"] { fill: red }
 #x [points] { fill: green }
]]></style>
    </defs>
    <!-- ====================================================================== -->
    <!-- ID selectors 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 
id selectors: &lt;rect id="one" /&gt; and the selector #one</text>
    <g style="fill: green">
      <circle cx="160" cy="100" r="30"/>
      <rect id="one" x="220" y="80" width="60" height="40"/>
      <polygon points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
    </g>
    <!-- ====================================================================== -->
    <!-- attribute 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 
attribute selectors: &lt;circle transform="scale(2)" /&gt; </text>
      <text style="font-family:Arial;font-size:12;" x="40" y="58">
and the selector [transform="scale(2)"]</text>
      <g style="fill: blue" id="x">
        <circle transform="scale(2)" cx="80" cy="50" r="15"/>
        <rect id="two" x="220" y="80" width="60" height="40"/>
        <polygon 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.4 $</text>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
</svg>