third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/styling-css-01-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-01.svg                                             -->
  11 <!-- renamed for 1.1 suite to styling-css-01-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.3 $" testname="styling-css-01-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 the element name. All 'rect' elements are selected and
  26             made to have a red fill. (This selects the 'rect' in the lower test as well, and thus makes it red).
  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 the class attribute. There is a class of "warning" on
  31             the circle in the lower test, and if correctly selected this circle will be filled red. The rectangle
  32             should also be red. The polygon has class="foo bar baz" and there is a matching
  33             selector ".bar" so it should be  green.
  34          </Paragraph>
  35       <Paragraph>
  36             The rendered picture should match the reference image exactly, except for possible
  37             variations in the labelling text (per CSS2 rules).
  38          </Paragraph>
  39       <Paragraph>
  40             This tests uses 'g', 'circle', 'rect' and 'polygon' elements, as well as
  41             fill (solid CSS1 named colors), font-family ("Arial"), and
  42             font-size properties within the 'style' attribute and style element.
  43          </Paragraph>
  44     </OperatorScript>
  45   </SVGTestCase>
  46   <title id="test-title">styling-css-01-b</title>
  47   <desc id="test-desc">
  48       Test that viewer handles combinations of the simple
  49       CSS2 selectors: ancestor, child, sibling.</desc>
  50   <!--======================================================================-->
  51   <!--Content of Test Case follows...                  =====================-->
  52   <!--======================================================================-->
  53   <g id="test-body-content">
  54     <defs>
  55       <defs>
  56         <style type="text/css"><![CDATA[
  57                                  rect { fill: red }
  58                                  .warning { fill: red }
  59                                  .bar {fill: green}
  60                                 ]]></style>
  61       </defs>
  62     </defs>
  63     <!-- ====================================================================== -->
  64     <!-- Element (GI) selectors  =============================================== -->
  65     <!-- ====================================================================== -->
  66     <text style="font-family:Arial;font-size:12;" x="40" y="14">Rectangle should be red not green</text>
  67     <text style="font-family:Arial;font-size:12;" x="40" y="36">This tests
  68                         element (GI) selectors: &lt;rect /&gt; and the selector rect</text>
  69     <g style="fill: green">
  70       <circle cx="160" cy="100" r="30"/>
  71       <rect x="220" y="80" width="60" height="40"/>
  72       <polygon points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
  73     </g>
  74     <!-- ====================================================================== -->
  75     <!-- class selectors  =============================================== -->
  76     <!-- ====================================================================== -->
  77     <g transform="translate(0, 150)">
  78       <text style="font-family:Arial;font-size:12;" x="40" y="14">Circle should be red not green; rectangle still red</text>
  79       <text style="font-family:Arial;font-size:12;" x="40" y="36">This tests
  80                                 class selectors: &lt;circle class="warning" /&gt; </text>
  81       <text style="font-family:Arial;font-size:12;" x="40" y="58">
  82                                 and the selector .warning</text>
  83       <g style="fill: blue">
  84         <circle class="warning" cx="160" cy="100" r="30"/>
  85         <rect x="220" y="80" width="60" height="40"/>
  86         <polygon class="foo bar baz" points="300,100, 320,120, 340,110, 360,120, 390,90, 340,70"/>
  87       </g>
  88     </g>
  89   </g>
  90   <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.3 $</text>
  91   <!-- style attribute to override the test style rules and keep them simple -->
  92   <rect id="test-frame" style="fill: none;stroke:#000" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  93 </svg>