third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/pservers-grad-04-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-stop-BE-06.svg                                              -->
  12 <!-- renamed for 1.1 suite to pservers-grad-04-b.svg                          -->
  13 <!-- Author : Haroon Sheikh  07-Mar-2000                                  -->
  14 <!-- Revised for 1.1 : Jun Fujisawa 19-Feb-2002                           -->
  15 <!--======================================================================-->
  16 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" viewBox="0 0 480 360" width="100%" height="100%" version="1.1" baseProfile="basic">
  17         <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  18                 <OperatorScript version="$Revision: 1.7 $" testname="pservers-grad-04-b.svg">
  19                         <Paragraph>
  20                                 Test that checks the capability of the stop element in linear and radial
  21                                 gradients.
  22                         </Paragraph>
  23                         <Paragraph>
  24                                 The first rectangle has a linear gradient fill with a vector starting at top left
  25                                 and going to bottom right. The stop colors are at 20% spacing apart and are in the
  26                                 following order : violet, blue, lime, yellow, orange, red.
  27                                 Because the gradient vector vector goes from (0,0) to (1,1) in object bounding box space
  28                                 and because the object bounding box has a larger width than height, the gradient vector
  29                                 is skewed off of a pure 45 degree angle. The gradient stripes are also skewed
  30                                 so that they are no longer perpendicular to the gradient vector.
  31                         </Paragraph>
  32                         <Paragraph>
  33                                 The next rectangle has a radial gradient fill with a multi-color stops from innermost
  34                                 to outermost in the following order : black, yellow, red, blue, white, 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                 </OperatorScript>
  41         </SVGTestCase>
  42         <title id="test-title">pservers-grad-04-b</title>
  43         <desc id="test-desc">Test that checks the capability of the stop element in linear and radial gradients.</desc>
  44         <!--======================================================================-->
  45         <!--Content of Test Case follows...                  =====================-->
  46         <!--======================================================================-->
  47         <g id="test-body-content">
  48                 <!-- ====================================================================== -->
  49                 <!-- Very simple black to red radial gradient                      ======== -->
  50                 <!-- ====================================================================== -->
  51                 <linearGradient id="Grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
  52                         <stop stop-color="rgb(238,130,238)"  offset="0"/>
  53                         <stop stop-color="blue"  offset="0.2"/>
  54                         <stop stop-color="lime"  offset="0.4"/>
  55                         <stop stop-color="yellow"  offset="0.6"/>
  56                         <stop stop-color="rgb(255,165,0)"  offset="0.8"/>
  57                         <stop stop-color="red"  offset="1"/>
  58                 </linearGradient>
  59                 <rect x="20" y="20" width="440" height="80" fill="url(#Grad1)" />
  60                 <text font-family="Arial" font-size="30" x="20" y="130">Multi-color linear gradient.</text>
  61                 <!-- ====================================================================== -->
  62                 <!-- Radial gradient on the stroke of a rectangle                  ======== -->
  63                 <!-- ====================================================================== -->
  64                 <radialGradient id="Grad2" gradientUnits="userSpaceOnUse" cx="240" cy="210" r="220" fx="240" fy="210">
  65                         <stop stop-color="black"  offset="0"/>
  66                         <stop stop-color="yellow"  offset="0.2"/>
  67                         <stop stop-color="red"  offset="0.4"/>
  68                         <stop stop-color="blue"  offset="0.6"/>
  69                         <stop stop-color="white"  offset="0.8"/>
  70                         <stop stop-color="green"  offset="1"/>
  71                 </radialGradient>
  72                 <rect x="20" y="150" width="440" height="80" fill="url(#Grad2)" stroke-width="40"/>
  73                 <text font-family="Arial" font-size="30" x="20" y="260">Multi-color radial gradient.</text>
  74         </g>
  75         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
  76         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  77 </svg>