third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/pservers-grad-05-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-stop-BE-10.svg                                              -->
  13 <!-- renamed for 1.1 suite to pservers-grad-05-b.svg                          -->
  14 <!--                                                                      -->
  15 <!-- Test that checks the capability of the stop-opacity in linear and    -->
  16 <!-- radial gradients.                                                    -->
  17 <!--                                                                      -->
  18 <!--                                                                      -->
  19 <!-- Author : Haroon Sheikh  14-Mar-2000                                  -->
  20 <!-- Revised for 1.1 : Jun Fujisawa 19-Feb-2002                           -->
  21 <!--                                                                      -->
  22 <!-- History:                                                             -->
  23 <!--  14-Mar-2000, HSS: Serial#1 created.                                 -->
  24 <!--  14-Mar-2000, LH=" fixed minor typos" ser#2.                         -->
  25 <!--  19-May-2000, JF: swapped a couple of opacities for radial test      -->
  26 <!--                   to make effect more visible; ser#3                 -->
  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 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">
  36         <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  37                 <OperatorScript version="$Revision: 1.7 $" testname="pservers-grad-05-b.svg">
  38                         <Paragraph>
  39                                 Test that checks the capability of the stop opacity in linear and radial
  40                                 gradients.
  41                         </Paragraph>
  42                         <Paragraph>
  43                                 There are two tests which contains rectangles with gradients using stop-opacity properties.
  44                                 A cyan color text string "Background" is put behind both of the rectangles to help
  45                                 demonstrate the opacity concept.
  46                                 From top-down the appearance of objects is as follows.
  47                         </Paragraph>
  48                         <Paragraph>
  49                                 The first rectangle has a linear gradient fill with a vector starting at top left
  50                                 and going to bottom right. The stop colors are at 20% spacing apart and are in the
  51                                 following order : violet, blue, lime, yellow, orange, red.
  52                                 Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1
  53                                 Because the gradient vector vector goes from (0,0) to (1,1) in object bounding box space
  54                                 and because the object bounding box has a larger width than height, the gradient vector
  55                                 is skewed off of a pure 45 degree angle. The gradient stripes are also skewed
  56                                 so that they are no longer perpendicular to the gradient vector.
  57                         </Paragraph>
  58                         <Paragraph>
  59                                 The next rectangle has a radial gradient fill with a multi-color stops from innermost
  60                                 to outermost in the following order : black, yellow, red, blue, white, green.
  61                                 Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1
  62                         </Paragraph>
  63                         <Paragraph>
  64                                 The rendered picture should match the reference image exactly, except for possible
  65                                 variations in the labelling text (per CSS2 rules).
  66                         </Paragraph>
  67                 </OperatorScript>
  68         </SVGTestCase>
  69         <title id="test-title">pservers-grad-05-b</title>
  70         <desc id="test-desc">Test that checks the capability of the stop opacity in linear and radial gradients.</desc>
  71         <!--======================================================================-->
  72         <!--Content of Test Case follows...                  =====================-->
  73         <!--======================================================================-->
  74         <g id="test-body-content">
  75                 <!-- ====================================================================== -->
  76                 <!-- Very simple black to red radial gradient                      ======== -->
  77                 <!-- ====================================================================== -->
  78                 <text font-family="Arial" font-size="60" fill="aqua" x="70" y="80">Background</text>
  79                 <linearGradient id="Grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
  80                         <stop stop-color="rgb(238,130,238)" stop-opacity="1"  offset="0"/>
  81                         <stop stop-color="blue" stop-opacity="0"  offset="0.2"/>
  82                         <stop stop-color="lime" stop-opacity="0.5"  offset="0.4"/>
  83                         <stop stop-color="yellow" stop-opacity="0.2"  offset="0.6"/>
  84                         <stop stop-color="rgb(255,165,0)" stop-opacity="0.8"  offset="0.8"/>
  85                         <stop stop-color="red" stop-opacity="1"  offset="1"/>
  86                 </linearGradient>
  87                 <rect x="20" y="20" width="440" height="80" fill="url(#Grad1)" />
  88                 <!-- ====================================================================== -->
  89                 <!-- Radial gradient on the stroke of a rectangle                  ======== -->
  90                 <!-- ====================================================================== -->
  91                 <text font-family="Arial" font-size="60" fill="aqua" x="70" y="210">Background</text>
  92                 <radialGradient id="Grad2" gradientUnits="userSpaceOnUse" cx="240" cy="210" r="220" fx="240" fy="210">
  93                         <stop stop-color="black" stop-opacity="1"  offset="0"/>
  94                         <stop stop-color="yellow" stop-opacity="0"  offset="0.2"/>
  95                         <stop stop-color="red" stop-opacity="0.5"  offset="0.4"/>
  96                         <stop stop-color="blue" stop-opacity="0.2"  offset="0.6"/>
  97                         <stop stop-color="white" stop-opacity="0.8"  offset="0.8"/>
  98                         <stop stop-color="green" stop-opacity="1"  offset="1"/>
  99                 </radialGradient>
 100                 <rect x="20" y="150" width="440" height="80" fill="url(#Grad2)" stroke-width="40" />
 101         </g>
 102         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
 103         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 104 </svg>