?  search:
summary | log | graphiclog1 | graphiclog2 | commit | commitdiff | tree | refs | edit | fork
blame | history | raw | HEAD
Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / svg / W3C-SVG-1.1 / paths-data-01-t.svg
blobda8d7d023c47eb6ee4a384cf84d4cbeb97b9cffe
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.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 <!-- paths-data-01-t.svg -->
12 <!-- 1.1 revision by Christophe Jolif -->
13 <!-- -->
14 <!-- Test that the viewer has the basic capability to handle the 'path' -->
15 <!-- element and its data (d) attribute in combination with the cubic -->
16 <!-- Bezier curveto commands, C, c, S, s (plus Mm and Zz). -->
17 <!-- -->
18 <!-- Author : Lofton Henderson, 29-Feb-2000 (based on work -->
19 <!-- of Mark Sgarlato, Adobe). -->
20 <!-- -->
21 <!-- History: -->
22 <!-- 29-Feb-2000, LRH, Ser#1 created. -->
23 <!-- 12-Mar-2000, LH, fix test-framing rect; ser#2 -->
24 <!-- 03-Aug-2000, LH: update DOCTYPE for CR DTD, 20000802" ser# . -->
25 <!-- 15-Nov-2000, LH: add missing test-body-content group. -->
26 <!-- -->
27 <!-- ===================================================================== -->
28 <!--======================================================================-->
29 <!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
30 <!--= log messages, and therefore is no longer in the preceding preamble.=-->
31 <!--======================================================================-->
32 <svg version="1.1" baseProfile="tiny" 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">
33 <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
34 <!--nav data here-->
35 <OperatorScript version="$Revision: 1.6 $" testname="paths-data-01-t.svg">
36 <Paragraph>
37 Test that the viewer has the basic capability to handle the 'path'
38 element and its data (d) attribute in combination with the cubic
39 Bezier curveto commands, C, c, S, s (plus Mm and Zz).
40 </Paragraph>
41 <Paragraph>
42 There are 8 subtests, each composed from the cubic Bezier path commands per
43 the label by the subtest. On-curve control points (i.e., the curve position)
44 are marked by small blue squares. Subtests are filled, or stroked, or
45 both, using simple style properties and colors.
46 </Paragraph>
47 <Paragraph>
48 The rendered picture should match the reference image exactly, except for possible
49 variations in the labelling text (per CSS2 rules).
50 </Paragraph>
51 <Paragraph>
52 The test uses the 'rect' element, as well as basic fill (solid primary colors),
53 stroke (primary color 1-pixel lines), font-family (Arial) and font-size properties.
54 </Paragraph>
55 </OperatorScript>
56 </SVGTestCase>
57 <title id="test-title">paths-data-01-t</title>
58 <desc id="test-desc">Test that the viewer has the basic capability to handle the 'path' element and data (d) attribute in combination with the cubic Bezier curveto, both regular and shorthand/smooth forms - C, c, S, s (along with Mm and Zz).</desc>
59 <!--======================================================================-->
60 <!--Content of Test Case follows... =====================-->
61 <!--======================================================================-->
62 <g id="test-body-content">
63 <!-- ====================================================================== -->
64 <!-- First Curve "X" that has subpath utilizing M, C, S, m, c, & s ======== -->
65 <!-- ====================================================================== -->
66 <text font-family="Arial" font-size="12" x="100" y="14">Cubic bezier curves drawn with commands:</text>
67 <path id="X_curve_MCSmcs" fill="#FF0000" stroke="#00C000" d=" M 210 130 C 145 130 110 80 110 80 S 75 25 10 25 m 0 105 c 65 0 100 -50 100 -50 s 35 -55 100 -55 "/>
68 <!-- ====================================================================== -->
69 <!-- Markers for path control points ===================================== -->
70 <!-- ====================================================================== -->
71 <rect x="208" y="128" width="4" height="4" fill="#4A83FF" stroke="none"/>
72 <rect x="108" y="78" width="4" height="4" fill="#4A83FF" stroke="none"/>
73 <rect x="8" y="23" width="4" height="4" fill="#4A83FF" stroke="none"/>
74 <rect x="8" y="128" width="4" height="4" fill="#4A83FF" stroke="none"/>
75 <rect x="108" y="78" width="4" height="4" fill="#4A83FF" stroke="none"/>
76 <rect x="208" y="23" width="4" height="4" fill="#4A83FF" stroke="none"/>
77 <text font-family="Arial" font-size="12" x="5" y="82">M, C, S, m, c, s</text>
78 <!-- ====================================================================== -->
79 <!-- Infinity using M, c, c, c, C & z ===================================== -->
80 <!-- ====================================================================== -->
81 <path id="Infinity_McccCz" fill="none" stroke="#000000" d=" M 240 90 c 0 30 7 50 50 0 c 43 -50 50 -30 50 0 c 0 83 -68 -34 -90 -30 C 240 60 240 90 240 90 z "/>
82 <!-- ====================================================================== -->
83 <!-- Markers for path control points ====================================== -->
84 <!-- ====================================================================== -->
85 <rect x="238" y="88" width="4" height="4" fill="#4A83FF" stroke="none"/>
86 <rect x="288" y="88" width="4" height="4" fill="#4A83FF" stroke="none"/>
87 <rect x="338" y="88" width="4" height="4" fill="#4A83FF" stroke="none"/>
88 <rect x="248" y="58" width="4" height="4" fill="#4A83FF" stroke="none"/>
89 <text font-family="Arial" font-size="12" x="253" y="50">M, c, c, c, C, z</text>
90 <!-- ====================================================================== -->
91 <!-- Horizontal line utilizing M, C & Z =================================== -->
92 <!-- ====================================================================== -->
93 <path id="Line_MCZ" fill="none" stroke="#000000" d="M80 170 C100 170 160 170 180 170Z"/>
94 <!-- ====================================================================== -->
95 <!-- Markers for path control points ====================================== -->
96 <!-- ====================================================================== -->
97 <rect x="78" y="168" width="4" height="4" fill="#4A83FF" stroke="none"/>
98 <rect x="178" y="168" width="4" height="4" fill="#4A83FF" stroke="none"/>
99 <text font-family="Arial" font-size="12" x="110" y="190">M, C, Z</text>
100 <!-- ====================================================================== -->
101 <!-- Inverted V using M, C, c & Z ========================================= -->
102 <!-- ====================================================================== -->
103 <path id="Inv_V_MCcZ" fill="#00C000" stroke="none" d="M5 260 C40 260 60 175 55 160 c -5 15 15 100 50 100Z"/>
104 <!-- ====================================================================== -->
105 <!-- Markers for path control points ====================================== -->
106 <!-- ====================================================================== -->
107 <rect x="3" y="258" width="4" height="4" fill="#4A83FF" stroke="none"/>
108 <rect x="53" y="158" width="4" height="4" fill="#4A83FF" stroke="none"/>
109 <rect x="103" y="258" width="4" height="4" fill="#4A83FF" stroke="none"/>
110 <text font-family="Arial" font-size="12" x="85" y="220">M, C, c, Z</text>
111 <!-- ====================================================================== -->
112 <!-- Remembrance Ribbon using m, c & s ==================================== -->
113 <!-- ====================================================================== -->
114 <path id="Rem_Rib_mcs" fill="none" stroke="#000000" d="m 200 260 c 50 -40 50 -100 25 -100 s -25 60 25 100 "/>
115 <!-- ====================================================================== -->
116 <!-- Markers for path control points ====================================== -->
117 <!-- ====================================================================== -->
118 <rect x="198" y="258" width="4" height="4" fill="#4A83FF" stroke="none"/>
119 <rect x="223" y="158" width="4" height="4" fill="#4A83FF" stroke="none"/>
120 <rect x="248" y="258" width="4" height="4" fill="#4A83FF" stroke="none"/>
121 <text font-family="Arial" font-size="12" x="165" y="210">m, c, s</text>
122 <!-- ====================================================================== -->
123 <!-- 90 degree arc using M & C ============================================ -->
124 <!-- ====================================================================== -->
125 <path id="Arc_MC" fill="#0000FF" stroke="#000000" d=" M 360 100 C 420 90 460 140 450 190"/>
126 <!-- ====================================================================== -->
127 <!-- Markers for path control points ====================================== -->
128 <!-- ====================================================================== -->
129 <rect x="358" y="98" width="4" height="4" fill="#4A83FF" stroke="none"/>
130 <rect x="448" y="188" width="4" height="4" fill="#4A83FF" stroke="none"/>
131 <text font-family="Arial" font-size="12" x="360" y="150">M, C</text>
132 <!-- ====================================================================== -->
133 <!-- Circle using M, c, s, s, s & z ======================================= -->
134 <!-- ====================================================================== -->
135 <path id="Circle_Mcssz" fill="#FFFF00" stroke="#000000" d="M360 210 c 0 20 -16 36 -36 36 s -36 -16 -36 -36 s 16 -36 36 -36 s 36 16 36 36 z "/>
136 <!-- ====================================================================== -->
137 <!-- Markers for path control points ====================================== -->
138 <!-- ====================================================================== -->
139 <rect x="358" y="208" width="4" height="4" fill="#4A83FF" stroke="none"/>
140 <rect x="322" y="244" width="4" height="4" fill="#4A83FF" stroke="none"/>
141 <rect x="286" y="208" width="4" height="4" fill="#4A83FF" stroke="none"/>
142 <rect x="322" y="172" width="4" height="4" fill="#4A83FF" stroke="none"/>
143 <text font-family="Arial" font-size="12" x="290" y="265">M, c, s, s, s, z</text>
144 <!-- ====================================================================== -->
145 <!-- Inverted horseshoe using m, c & z ==================================== -->
146 <!-- ====================================================================== -->
147 <path id="Horseshoe_Mcs" fill="#F0F0F0" stroke="#FF0000" d="m 360 325 c -40 -60 95 -100 80 0 z "/>
148 <!-- ====================================================================== -->
149 <!-- Markers for path control points ====================================== -->
150 <!-- ====================================================================== -->
151 <rect x="358" y="323" width="4" height="4" fill="#4A83FF" stroke="none"/>
152 <rect x="438" y="323" width="4" height="4" fill="#4A83FF" stroke="none"/>
153 <text font-family="Arial" font-size="12" x="380" y="340">m, c, z</text>
154 </g>
155 <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
156 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
157 </svg>
158