third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1-SE/struct-use-11-f.svg

   1 <svg id="svg-root" width="100%" height="100%"
   2   viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
   3   xmlns:xlink="http://www.w3.org/1999/xlink">
   4   <!--======================================================================-->
   5   <!--=  Copyright 2008 World Wide Web Consortium, (Massachusetts          =-->
   6   <!--=  Institute of Technology, European Research Consortium for         =-->
   7   <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
   8   <!--=  All Rights Reserved.                                              =-->
   9   <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  10   <!--======================================================================-->
  11   <d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
  12     template-version="1.4" reviewer="CL" author="Microsoft" status="accepted"
  13     version="$Revision: 1.2 $" testname="$RCSfile: struct-use-11-f.svg,v $">
  14     <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">
  15       <p>
  16         CSS selectors that apply to an element referenced via 'use' also apply to the 'use' instance.
  17       </p>
  18       <p>
  19         A 'style' block contains all CSS rules. Various CSS selectors are applied to 'circle' elements. A unique 'class' selector is
  20         used for all cases to ensure that the selectors don't interfere with each other. For each 'circle', there is a corresponding
  21         'use' instance. For structure-related rules, a 'g' tag is used.
  22       </p>
  23     </d:testDescription>
  24     <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
  25       <p>
  26         Run the test. No interaction required.
  27       </p>
  28     </d:operatorScript>
  29     <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
  30       <p>
  31         Test passes if twelve blue circles and no black circles are visible on the page.
  32       </p>
  33     </d:passCriteria>
  34   </d:SVGTestCase>
  35   <title id="test-title">$RCSfile: struct-use-11-f.svg,v $</title>
  36   <defs>
  37     <font-face
  38       font-family="SVGFreeSansASCII"
  39       unicode-range="U+0-7F">
  40       <font-face-src>
  41         <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
  42       </font-face-src>
  43     </font-face>
  44   </defs>
  45   <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
  46
  47     <style type="text/css"><![CDATA[
  48         #testId.test1
  49         {
  50             fill: blue;
  51         }
  52         *.test2
  53         {
  54             fill: blue;
  55         }
  56         circle.test3
  57         {
  58             fill: blue;
  59         }
  60         .descendant circle.test4
  61         {
  62             fill: blue;
  63         }
  64         .child > circle.test5
  65         {
  66             fill: blue;
  67         }
  68         .test6:first-child
  69         {
  70             fill: blue;
  71         }
  72         .sibling + circle.test7
  73         {
  74             fill: blue;
  75         }
  76         circle[cx].test8
  77         {
  78             fill: blue;
  79         }
  80         circle[cx="50"].test9
  81         {
  82             fill: blue;
  83         }
  84         circle[foo~="warning1"].test10
  85         {
  86             fill: blue;
  87         }
  88         circle[lang|="en"].test11
  89         {
  90             fill: blue;
  91         }
  92         .test12 {
  93             fill: blue
  94          }
  95         .twochildren:first-child
  96         {
  97             fill: black;
  98         }]]>
  99     </style>
 100     <defs>
 101         <circle cx="50" cy="50" r="48" id="testId" class="test1" />
 102         <circle cx="50" cy="50" r="48" id="testClass" class="test2" />
 103         <circle cx="50" cy="50" r="48" id="testType" class="test3" />
 104         <g class="descendant">
 105             <circle cx="50" cy="50" r="48" id="testDescendant" class="test4" />
 106         </g>
 107         <g class="child">
 108             <circle cx="50" cy="50" r="48" id="testChild" class="test5" />
 109         </g>
 110         <g>
 111             <circle cx="50" cy="50" r="48" id="testFirstChild" class="test6" />
 112         </g>
 113         <g class="sibling"></g>
 114         <circle cx="50" cy="50" r="48" id="testSibling" class="test7" />
 115         <circle cx="50" cy="50" r="48" id="testAttribute" class="test8" />
 116         <circle cx="50" cy="50" r="48" id="testAttributeWithValue" class="test9" />
 117         <circle cx="50" cy="50" r="48" id="testAttributeWithSpaceSeparatedValueList" class="test10" foo="warning1 warning2" />
 118         <circle cx="50" cy="50" r="48" id="testAttributeWithHyphenSeparatedValueList" class="test11" lang="en-us" />
 119         <g class="twochildren">
 120             <circle cx="50" cy="50" r="48" id="notFirstChild" display="none" />
 121             <circle cx="50" cy="50" r="48" id="testFirstChild2" class="test12" />
 122         </g>
 123     </defs>
 124     <use xlink:href="#testId" x="0" y="0" />
 125     <use xlink:href="#testClass" x="96" y="0" />
 126     <use xlink:href="#testType" x="192" y="0" />
 127     <use xlink:href="#testDescendant" x="288" y="0" />
 128     <use xlink:href="#testChild" x="0" y="100" />
 129     <use xlink:href="#testFirstChild" x="96" y="100" />
 130     <use xlink:href="#testSibling" x="192" y="100" />
 131     <use xlink:href="#testAttribute" x="288" y="100" />
 132     <use xlink:href="#testAttributeWithValue" x="0" y="200" />
 133     <use xlink:href="#testAttributeWithSpaceSeparatedValueList" x="96" y="200" />
 134     <use xlink:href="#testAttributeWithHyphenSeparatedValueList" x="192" y="200" />
 135     <use xlink:href="#testFirstChild2" x="288" y="200" />
 136
 137   </g>
 138   <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
 139     <text id="revision" x="10" y="340" stroke="none"
 140       fill="black">$Revision: 1.2 $</text>
 141   </g>
 142   <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 143   <!-- comment out this watermark once the test is approved -->
 144   <!--
 145   <g id="draft-watermark">
 146     <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
 147     <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
 148       text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
 149   </g>
 150   -->
 151 </svg>