third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/coords-units-01-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 <!--=  Copyright 2002 World Wide Web Consortium, (Massachusetts          =-->
   5 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   6 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   7 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   8 <!--======================================================================-->
   9 <!-- ===================================================================== -->
  10 <!--                                                                       -->
  11 <!-- coords-units-01-b.svg                                                 -->
  12 <!-- 1.1 revision by Christophe Jolif                                      -->
  13 <!--                                                                       -->
  14 <!-- Validate the processing rules for converting coordinates and          -->
  15 <!-- lengths defined in fractions of the current object's bounding box     -->
  16 <!-- to user space coordinates and length.                                 -->
  17 <!--                                                                       -->
  18 <!-- Author : Vincent Hardy, 29-Feb-2000                                   -->
  19 <!--                                                                       -->
  20 <!-- History:                                                              -->
  21 <!--  29-Feb-2000, VH: Created.  Matches 20000302 SVG spec.                -->
  22 <!--  09-Mar-2000, LH: suite integration (name, editorial, ..), ser#2      -->
  23 <!--  09-Mar-2000, LH: fix framing rect,  ser#3.                           -->
  24 <!--  24-Apr-2000, LH: remove text-anchor,  ser#4.                         -->
  25 <!--  02-Jun-2000, LH: fix fx,fy on radial grads" stroke lines;  ser#5.    -->
  26 <!--  04-Jun-2000, LH: mark "NA" (in -patch) on PNG, for patterns"  ser#6  -->
  27 <!--  03-Aug-2000, LH: update DOCTYPE for CR DTD, 20000802" ser# .         -->
  28 <!--  16-Aug-2000, LH: rename ser#7.                                       -->
  29 <!--  29-Sep-2000, VH: fixed pattern reference problems" ser#8.            -->
  30 <!--  07-Dec-2000, JF: update to Nov. 2 spec, fix other errors.            -->
  31 <!--                                                                       -->
  32 <!-- ===================================================================== -->
  33 <!--======================================================================-->
  34 <!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
  35 <!--= log messages, and therefore is no longer in the preceding preamble.=-->
  36 <!--======================================================================-->
  37 <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">
  38   <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  39 <!--nav data here-->
  40                 <OperatorScript version="$Revision: 1.5 $" testname="coords-units-01-b.svg">
  41       <Paragraph>
  42 Verify the conversion processing of percentage and fraction values relative to
  43 object bounding boxes. This is used when defining linear and radial gradients
  44 as well as patterns.
  45       </Paragraph>
  46       <Paragraph>
  47 The test validates conversion for coordinates, width, height and length. The first
  48 test defines three corresponding linear gradients, which specify coordinates
  49 using percentages for one, fractions for the second and user coordinates for the
  50 third. The second test defines three corresponding radial gradients, which specify
  51 a length (radius) using percentages for the first, fractions for the second and
  52 user space for the third. Finally, the third test defines three corresponding patterns,
  53 which specify their width and height using percentages for the first, fractions for the
  54 second and user space coordinates for the last one.
  55       </Paragraph>
  56       <Paragraph>
  57 The rendered image should match the reference image.  Also, the text may
  58 show minor differences, per CSS2 rules for font selection and matching.
  59       </Paragraph>
  60       <Paragraph>
  61 The test also assumes that linear and radial gradients,
  62 as well as patterns are implemented.
  63       </Paragraph>
  64     </OperatorScript>
  65   </SVGTestCase>
  66   <title id="test-title">coords-units-01-b</title>
  67   <desc id="test-desc">This test validates the processing rules for converting coordinates and length defined in fractions of the current object's bounding box to user space coordinates and length. Note that this test assumes that linear and radial gradients, as well as patterns are implemented.</desc>
  68   <!--======================================================================-->
  69   <!--Content of Test Case follows...                  =====================-->
  70   <!--======================================================================-->
  71   <g id="test-body-content">
  72     <!-- ==================================================================== -->
  73     <!-- The following gradients will be used to fill a rectangle with the    -->
  74     <!-- following geometry in User space: x=0, y=0, width=50 height=20       -->
  75     <!-- The gradient vector, in linearBoundingBox, is defined as: (0%, 0%)   -->
  76     <!-- to (100%, 0%).                                                       -->
  77     <!-- The gradient vector, in linearBoundingBoxFraction, is defined as:    -->
  78     <!-- (0, 0) to (1, 0), which is equivalent.                               -->
  79     <!-- According to the spec, for our rectangle, this corresponds to the    -->
  80     <!-- following user space coordinates:                                    -->
  81     <!-- (0%, 0%) becomes (0, 0) and (100%, 0%) becomes (20, 0)               -->
  82     <!-- These values are used to define the linearUserSpace gradient.        -->
  83     <!-- If the test succeeds, all the gradient should fill the rectangles    -->
  84     <!-- the same way                                                         -->
  85     <!-- ==================================================================== -->
  86     <linearGradient id="linearBoundingBoxPercentage" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
  87       <stop stop-color="red" offset="0"/>
  88       <stop stop-color="blue" offset="1"/>
  89     </linearGradient>
  90     <linearGradient id="linearBoundingBoxFraction" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
  91       <stop stop-color="red" offset="0"/>
  92       <stop stop-color="blue" offset="1"/>
  93     </linearGradient>
  94     <linearGradient id="linearUserSpace" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="50" y2="0">
  95       <stop stop-color="red" offset="0"/>
  96       <stop stop-color="blue" offset="1"/>
  97     </linearGradient>
  98     <!-- Draw Text Comment -->
  99     <text x="30" y="30">Bounding box relative coordinates (percentage and fraction)</text>
 100     <g transform="translate(30, 40)">
 101       <rect x="0" y="0" width="50" height="20" fill="url(#linearBoundingBoxPercentage)"/>
 102       <rect x="0" y="0" width="50" height="20" transform="translate(0, 20)" fill="url(#linearBoundingBoxFraction)"/>
 103       <rect x="0" y="0" width="50" height="20" transform="translate(0, 40)" fill="url(#linearUserSpace)"/>
 104       <line x1="0" y1="20" x2="50" y2="20" stroke="#cccccc" stroke-width="1"/>
 105       <line x1="0" y1="40" x2="50" y2="40" stroke="#cccccc" stroke-width="1"/>
 106       <text x="60" y="15">Percentage</text>
 107       <text x="60" y="35">Fraction</text>
 108       <text x="60" y="55">User Space</text>
 109     </g>
 110     <!-- ==================================================================== -->
 111     <!-- The following gradients will be used to fill a rectangle with the    -->
 112     <!-- following geometry in User space: x=0, y=0, width=60 height=60       -->
 113     <!-- The radial gradient outmost circle, in radialBoundingBox, is defined -->
 114     <!-- as: cx=25% cy=25% r=25%                                              -->
 115     <!-- The radial gradient outmost circle, in radialBoundingBoxFraction, is -->
 116     <!-- defined as: cx=0.25 cy=0.25 and r=0.25                               -->
 117     <!-- These two definition, for our rectangle, should be identical to the  -->
 118     <!-- following radial gradient outmost circle, in radialUserSpace:        -->
 119     <!-- cx=15 cy=15 r=15                                                     -->
 120     <!-- ==================================================================== -->
 121     <radialGradient id="radialBoundingBoxPercentage" gradientUnits="objectBoundingBox" cx="25%" cy="25%" r="25%" fx="25%" fy="25%">
 122       <stop stop-color="red" offset="0"/>
 123       <stop stop-color="blue" offset="1"/>
 124     </radialGradient>
 125     <radialGradient id="radialBoundingBoxFraction" gradientUnits="objectBoundingBox" cx="0.25" cy="0.25" r="0.25" fx="0.25" fy="0.25">
 126       <stop stop-color="red" offset="0"/>
 127       <stop stop-color="blue" offset="1"/>
 128     </radialGradient>
 129     <radialGradient id="radialUserSpace" gradientUnits="userSpaceOnUse" cx="15" cy="15" r="15" fx="15" fy="15">
 130       <stop stop-color="red" offset="0"/>
 131       <stop stop-color="blue" offset="1"/>
 132     </radialGradient>
 133     <!-- Draw Text Comment -->
 134     <text x="30" y="130">Bounding box relative length (percentage and fraction)</text>
 135     <g transform="translate(30, 140)">
 136       <rect x="0" y="0" width="60" height="60" fill="url(#radialBoundingBoxPercentage)"/>
 137       <rect x="0" y="0" width="60" height="60" transform="translate(61, 0)" fill="url(#radialBoundingBoxFraction)"/>
 138       <rect x="0" y="0" width="60" height="60" transform="translate(122, 0)" fill="url(#radialUserSpace)"/>
 139       <text x="0" y="70">Percent.</text>
 140       <text x="61" y="70">Fraction</text>
 141       <text x="122" y="70">User Space</text>
 142     </g>
 143     <!-- ==================================================================== -->
 144     <!-- The following patterns will be used to fill a rectangle, with the    -->
 145     <!-- following geometry in User space: x=0, y=0, width=50 height=30       -->
 146     <!-- The pattern tile, in patterBoundingBoxPercentage, is defined as:     -->
 147     <!-- x=25% y=25% width=50% height=50%                                     -->
 148     <!-- The pattern tile, in patternBoundingBoxFraction, is defined as:      -->
 149     <!-- x=0.25 y=0.25 width=0.50 height=0.50                                 -->
 150     <!-- For our test rectangle, both correspond to the following User space  -->
 151     <!-- coordinates: x=12.5 y=7.5 width=25 height=15                         -->
 152     <!-- These coordinates are use to define the patternUserSpace tile        -->
 153     <!-- ==================================================================== -->
 154     <pattern id="patternBoundingBoxPercentage" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" x="25%" y="25%" width="50%" height="50%">
 155       <circle cx="0.50" cy="0.50" r="0.25" fill="red"/>
 156       <rect x="0.4" y="0.4" width=".2" height=".2" fill="blue"/>
 157     </pattern>
 158     <pattern id="patternBoundingBoxFraction" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" x="0.25" y="0.25" width="0.50" height="0.50">
 159       <circle cx="0.50" cy="0.50" r="0.25" fill="red"/>
 160       <rect x="0.4" y="0.4" width=".2" height=".2" fill="blue"/>
 161     </pattern>
 162     <pattern id="patternUserSpace" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" x="12.5" y="7.5" width="25" height="15">
 163       <circle id="patternContent" cx="25" cy="15" r="10" fill="red"/>
 164       <rect x="20" y="12" width="10" height="6" fill="blue"/>
 165     </pattern>
 166     <!-- Draw Text Comment -->
 167     <text x="30" y="240">Bounding box relative width/height (percentage and fraction)</text>
 168     <g transform="translate(30, 250)">
 169       <rect x="0" y="0" width="50" height="30" fill="url(#patternBoundingBoxPercentage)" stroke="black"/>
 170       <rect x="0" y="0" width="50" height="30" transform="translate(150, 0)" fill="url(#patternBoundingBoxFraction)" stroke="black"/>
 171       <rect x="0" y="0" width="50" height="30" transform="translate(300, 0)" fill="url(#patternUserSpace)" stroke="black"/>
 172       <text x="60" y="20">Percentage</text>
 173       <text x="210" y="20">Fraction</text>
 174       <text x="360" y="20">User Space</text>
 175     </g>
 176     <!-- Test framing rectangle, drawn just inside viewport boundary. -->
 177     <rect x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 178   </g>
 179         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.5 $</text>
 180         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 181 </svg>
 182