third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/pservers-grad-11-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 <!--======================================================================-->
   5 <!--=  Copyright 2000 World Wide Web Consortium, (Massachusetts          =-->
   6 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   7 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   8 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   9 <!--======================================================================-->
  10 <!-- ===================================================================== -->
  11 <!-- gradPatt-radialGr-BE-04.svg                                     -->
  12 <!-- renamed for 1.1 suite to pservers-grad-11-b.svg                                -->
  13 <!-- Author : Haroon Sheikh  07-Mar-2000                                   -->
  14 <!--          1.1 revision by Rick Graham                                  -->
  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.7 $" testname="pservers-grad-11-b.svg">
  19                         <Paragraph>
  20                                 Test that the viewer has basic capability to handle radial gradients
  21                                 on fills and stroke of objects and text.
  22                         </Paragraph>
  23                         <Paragraph>
  24                                 This test uses the following elements : &lt;radialGradient&gt;, &lt;stop&gt;
  25                                 and the following properties : stop-color, fill:url(#  ), stroke(url# )
  26                         </Paragraph>
  27                         <Paragraph>
  28                                 From top-down (left to right) the appearance of objects is as follows.
  29                         </Paragraph>
  30                         <Paragraph>
  31                                 The top left rectangle  should be a radial gradient from black(in) to red(outside).
  32                                 The gradiant is applied to the fill of the rectangle.
  33                         </Paragraph>
  34                         <Paragraph>
  35                                 The next rectangle has no fill, but has a thick stroke on which the gradient is
  36                                 applied. The gradient goes from red(in) to yellow (out).
  37                         </Paragraph>
  38                         <Paragraph>
  39                                 The next item is a text with a radial gradient on the fill. The gradient goes
  40                                 from black (in) to yellow (out).
  41                         </Paragraph>
  42                         <Paragraph>
  43                                 The last item is a text with a 2 user unit stroke on which a black (in) to red
  44                                 (out) linear gradient is applied.
  45                         </Paragraph>
  46                         <Paragraph>
  47                                 The rendered picture should match the reference image exactly, except for possible
  48                                 variations in the labelling text (per CSS2 rules).
  49                         </Paragraph>
  50         </OperatorScript>
  51     </SVGTestCase>
  52         <title id="test-title">pservers-grad-11-b.svg</title>
  53         <desc id="test-desc">Test that the viewer has basic capability to handle radial gradients on fills and stroke of objects and text. This means it needs to understand the following elements : &lt;radialGradient&gt;, &lt;stop&gt; and the following properties : stop-color, fill:url(# ), stroke(url# )</desc>
  54         <!--======================================================================-->
  55         <!--Content of Test Case follows...                  =====================-->
  56         <!--======================================================================-->
  57         <g id="test-body-content">
  58                 <!-- ====================================================================== -->
  59                 <!-- Very simple black to red radial gradient                      ======== -->
  60                 <!-- ====================================================================== -->
  61                 <radialGradient gradientUnits="userSpaceOnUse" id="Grad1" cx="75" cy="100" r="130" fx="75" fy="100">
  62                         <stop stop-color="black"  offset="0"/>
  63                         <stop stop-color="red"  offset="1"/>
  64                 </radialGradient>
  65                 <rect x="10" y="10" width="210" height="140" fill="url(#Grad1)" />
  66                 <text font-family="Arial" font-size="12"  x="10" y="165">Radial gradient on fill of rectangle</text>
  67                 <!-- ====================================================================== -->
  68                 <!-- Radial gradient on the stroke of a rectangle                  ======== -->
  69                 <!-- ====================================================================== -->
  70                 <radialGradient id="Grad2" gradientUnits="userSpaceOnUse" cx="295" cy="100" r="150" fx="295" fy="100">
  71                         <stop stop-color="red"  offset="0"/>
  72                         <stop stop-color="yellow"  offset="1"/>
  73                 </radialGradient>
  74                 <rect x="250" y="30" width="170" height="100" fill="none" stroke="url(#Grad2)" stroke-width="40" />
  75                 <text font-family="Arial" font-size="12"  x="230" y="165">Radial gradient on stroke of rectangle</text>
  76                 <!-- ====================================================================== -->
  77                 <!-- Gradient on fill of text                                      ======== -->
  78                 <!-- ====================================================================== -->
  79                 <radialGradient id="Grad3" gradientUnits="userSpaceOnUse" cx="225" cy="180" r="90" fx="225" fy="180">
  80                         <stop stop-color="black"  offset="0"/>
  81                         <stop stop-color="yellow"  offset="1"/>
  82                 </radialGradient>
  83                 <text font-family="Arial" font-size="50" fill="url(#Grad3)"  x="10" y="210">Gradient on text fill</text>
  84                 <text font-family="Arial" font-size="12"  x="10" y="225">Radial gradient on text, black to yellow</text>
  85                 <!-- ====================================================================== -->
  86                 <!-- Gradient on stroke of text                                    ======== -->
  87                 <!-- ====================================================================== -->
  88                 <radialGradient id="Grad4" gradientUnits="userSpaceOnUse" cx="225" cy="245" r="90" fx="225" fy="245">
  89                         <stop stop-color="black"  offset="0"/>
  90                         <stop stop-color="red"  offset="1"/>
  91                 </radialGradient>
  92                 <text font-family="Arial" font-size="45" fill="none" stroke="url(#Grad4)" stroke-width="2"  x="10" y="270">Gradient on text stroke</text>
  93                 <text font-family="Arial" font-size="12"  x="10" y="285">Radial gradient on stroke of text, black to red</text>
  94         </g>
  95
  96
  97         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
  98         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  99 </svg>
 100