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