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

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
   3 <!--======================================================================-->
   4 <!--=  Copyright 2000 World Wide Web Consortium, (Massachusetts          =-->
   5 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   6 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   7 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   8 <!--======================================================================-->
   9 <!-- =====================================================================-->
  10 <!-- style-selector-BE-02.svg                                             -->
  11 <!-- renamed for 1.1 suite to styling-css-02-b.svg                        -->
  12 <!-- Author : Chris lilley,  22-Feb-2000                                  -->
  13 <!-- Modified for svg 1.1 by Ola Andersson, 07-Mar-2002                   -->
  14 <!-- Revised for Mobile Profiles: Jun Fujisawa 16-Jul-2002                -->
  15 <!--======================================================================-->
  16 <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">
  17   <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  18     <OperatorScript version="$Revision: 1.4 $" testname="styling-css-02-b.svg">
  19       <Paragraph>
  20             Verify the basic capability to handle CSS2 selectors. The style sheet is contained in a style
  21             element in the SVG file. The picture is in two halves. In each half there is a group of circle, a
  22             rectangle and an irregular polygon. A style on the group makes all the children have green fill.
  23          </Paragraph>
  24       <Paragraph>
  25             In the upper test, the selector is ID. The two 'rect' elements have id="one" and id="two"
  26             respectively and the selector #one, #two selects the rectangles and gives them a red fill.
  27             The rectangle should be red, with the circle and polygon green.
  28             </Paragraph>
  29       <Paragraph>
  30             In the lower test, the selector is on an arbitrary attribute. The transform attribute has a
  31             value of "scale(2)" on the circle in the lower test, and if correctly selected this circle will be
  32             filled red (if the transform itself fails, the circle will be in the wrong position at the wrong size).
  33             The rectangle should also be red. The polygon has a points attribute and is a child of an
  34             element with id="x" so the selecto #x [points] matches, making the polygon green.
  35          </Paragraph>
  36       <Paragraph>
  37             The rendered picture should match the reference image exactly, except for possible
  38             variations in the labelling text (per CSS2 rules).
  39          </Paragraph>
  40       <Paragraph>
  41             This tests uses 'g', 'circle', 'rect' and 'polygon' elements, as well as
  42             fill (solid CSS1 named colors), font-family ("Arial"), and
  43             font-size properties within the 'style' attribute and style element.
  44          </Paragraph>
  45     </OperatorScript>
  46   </SVGTestCase>
  47   <title id="test-title">styling-css-02-b</title>
  48   <desc id="test-desc">
  49       Test that viewer handles combinations of the simple
  50       CSS2 selectors: ancestor, child, sibling.</desc>
  51   <!--======================================================================-->
  52   <!--Content of Test Case follows...                  =====================-->
  53   <!--======================================================================-->
  54   <g id="test-body-content">
  55     <defs>
  56       <style type="text/css"><![CDATA[
  57  #one, #two { fill: red }
  58  [transform="scale(2)"] { fill: red }
  59  #x [points] { fill: green }
  60 ]]></style>
  61     </defs>
  62     <!-- ====================================================================== -->
  63     <!-- ID selectors selectors  ============================================== -->
  64     <!-- ====================================================================== -->
  65     <text style="font-family:Arial;font-size:12;" x="40" y="14">Rectangle should be red not green</text>
  66     <text style="font-family:Arial;font-size:12;" x="40" y="36">This tests
  67 id selectors: &lt;rect id="one" /&gt; and the selector #one</text>
  68     <g style="fill: green">
  69       <circle cx="160" cy="100" r="30"/>
  70       <rect id="one" x="220" y="80" width="60" height="40"/>
  71       <polygon points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
  72     </g>
  73     <!-- ====================================================================== -->
  74     <!-- attribute selectors  ================================================= -->
  75     <!-- ====================================================================== -->
  76     <g transform="translate(0, 150)">
  77       <text style="font-family:Arial;font-size:12;" x="40" y="14">Circle should be red not green; rectangle still red</text>
  78       <text style="font-family:Arial;font-size:12;" x="40" y="36">This tests
  79 attribute selectors: &lt;circle transform="scale(2)" /&gt; </text>
  80       <text style="font-family:Arial;font-size:12;" x="40" y="58">
  81 and the selector [transform="scale(2)"]</text>
  82       <g style="fill: blue" id="x">
  83         <circle transform="scale(2)" cx="80" cy="50" r="15"/>
  84         <rect id="two" x="220" y="80" width="60" height="40"/>
  85         <polygon points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
  86       </g>
  87     </g>
  88   </g>
  89   <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.4 $</text>
  90   <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  91 </svg>