third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/pservers-grad-12-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 <!--                                                                       -->
  12 <!-- gradPatt-radialGradient-BE-05.svg                              -->
  13 <!-- renamed for 1.1 suite to pservers-grad-12-b.svg                                -->
  14 <!--                                                                       -->
  15 <!-- Test that the viewer can handle the gradientUnits attribute on        -->
  16 <!-- radial gradients.                                                     -->
  17 <!--                                                                       -->
  18 <!-- Author : Haroon Sheikh  07-Mar-2000                                   -->
  19 <!--          1.1 revision by Rick Graham                                  -->
  20 <!--                                                                       -->
  21 <!-- History:                                                              -->
  22 <!--  26-May-2000, JF:  Serial#3 PNG created (SVG unchanged).              -->
  23 <!--                    objectBoundingBox radial gradient now elliptical.  -->
  24 <!--                    (Serial#2 apparently wasn't ever documented)       -->
  25 <!--  07-Mar-2000, HSS: Serial#1 created.                                  -->
  26 <!--  26-Apr-2000,  DJ: Removed "should". be to BE                         -->
  27 <!--  03-Aug-2000, LH=" update DOCTYPE for CR DTD, 20000802" ser# .         -->
  28 <!--  16-Aug-2000, LH="rename" ser#4.                                      -->
  29 <!--                                                                       -->
  30 <!-- ===================================================================== -->
  31 <!--======================================================================-->
  32 <!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
  33 <!--= log messages, and therefore is no longer in the preceding preamble.=-->
  34 <!--======================================================================-->
  35 <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">
  36     <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  37                 <OperatorScript version="$Revision: 1.7 $" testname="pservers-grad-12-b.svg">
  38                         <Paragraph>
  39                                 Test that the viewer can handle the gradientUnits attribute on radial gradients.
  40                                 It tests the following values of gradientUnits : default (objectBoundingBox), objectBoundingBox,
  41                                 and userSpaceOnUse.
  42                         </Paragraph>
  43                         <Paragraph>
  44                                 From top-down the appearance of objects is as follows.
  45                         </Paragraph>
  46                         <Paragraph>
  47                                 The first rectangle uses the default attributes on the radialGradient element.
  48                                 Therefore the radial gradient should be relative to the object bounding box. It should appear
  49                                 from the center of the viewport (blue) to the edges of the viewport (red).
  50                                 The rectangle is wider than tall so it the gradient should be elliptical, not circular.
  51                         </Paragraph>
  52                         <Paragraph>
  53                                 The next rectangle uses gradientUnits=objectBoundingBox. The radial gradient should
  54                                 travel from a center of 20%, 20% of the rectangle with a radius of 50%.
  55                         </Paragraph>
  56                         <Paragraph>
  57                                 The last rectangle uses gradientUnits=userSpaceOnUse. The rectangle element is given it's
  58                                 own transformation and the gradient is assumed to be in this user space.
  59                                 The gradient should appear in the center of the rectangle as a radial gradient from red (center) to blue (edge).
  60                         </Paragraph>
  61                         <Paragraph>
  62                                 The rendered picture should match the reference image exactly, except for possible
  63                                 variations in the labelling text (per CSS2 rules).
  64                         </Paragraph>
  65         </OperatorScript>
  66     </SVGTestCase>
  67         <title id="test-title">pservers-grad-12-b.svg</title>
  68         <desc id="test-desc">Test that the viewer can handle the gradientUnits attribute on radial gradients.</desc>
  69         <!--======================================================================-->
  70         <!--Content of Test Case follows...                  =====================-->
  71         <!--======================================================================-->
  72         <g id="test-body-content">
  73                 <text font-family="Arial" font-size="15"  x="10" y="25">Testing gradientUnits attribute</text>
  74                 <!-- ====================================================================== -->
  75                 <!-- Radial gradient with default attributes on <radial gradient> element.  -->
  76                 <!-- ====================================================================== -->
  77                 <radialGradient id="Grad1">
  78                         <stop stop-color="blue"  offset="0"/>
  79                         <stop stop-color="red"  offset="1"/>
  80                 </radialGradient>
  81                 <rect x="10" y="35" width="460" height="50" fill="url(#Grad1)" />
  82                 <text font-family="Arial" font-size="12"  x="10" y="100">Radial gradient with default attributes (from blue to red)</text>
  83                 <text font-family="Arial" font-size="12"  x="10" y="115">Gradient is blue at the object center and red at the object edges</text>
  84                 <!-- ====================================================================== -->
  85                 <!-- Radial gradient with gradientUnits=objectBoundingBox          ======== -->
  86                 <!-- ====================================================================== -->
  87                 <radialGradient id="Grad2" gradientUnits="objectBoundingBox" cx=".2" cy=".2" fx=".2" fy=".2" r=".5">
  88                         <stop stop-color="blue"  offset="0"/>
  89                         <stop stop-color="red"  offset="1"/>
  90                 </radialGradient>
  91                 <rect x="10" y="125" width="460" height="50" fill="url(#Grad2)" />
  92                 <text font-family="Arial" font-size="12"  x="10" y="190">gradientUnits=objectBoundingBox</text>
  93                 <text font-family="Arial" font-size="12"  x="10" y="205">cx=.2, cy=.2, r=.5, fx=.2 fy=.2</text>
  94                 <!-- ====================================================================== -->
  95                 <!-- Gradient using gradientUnits="userSpaceOnUse"                          -->
  96                 <!-- ====================================================================== -->
  97                 <radialGradient id="Grad3" cx="25" cy="215" r="25" fx="25" fy="215" gradientUnits="userSpaceOnUse">
  98                         <stop stop-color="red"  offset="0"/>
  99                         <stop stop-color="blue"  offset="1"/>
 100                 </radialGradient>
 101                 <rect transform="translate(10, 260) rotate(-90)" x="0" y="0" width="50" height="460" fill="url(#Grad3)" />
 102                 <text font-family="Arial" font-size="12"  x="10" y="275">gradientUnits=userSpaceOnUse</text>
 103                 <text font-family="Arial" font-size="12"  x="10" y="290">Gradient is red to blue radial gradiant from center to horizontal bounds</text>
 104         </g>
 105
 106
 107         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
 108         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 109 </svg>
 110