third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1-SE/paths-dom-02-f.svg - Issue 1416273002: Remove SVGPathElement.pathSegList and related interfaces

Side by Side Diff: third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1-SE/paths-dom-02-f.svg

Issue 1416273002: Remove SVGPathElement.pathSegList and related interfaces (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Rebase. Created 5 years, 1 month ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/platform/win/svg/dom/SVGPathSegList-xml-dom-synchronization2-expected.txt ('k') | third_party/WebKit/LayoutTests/svg/custom/global-constructors-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <svg version="1.1" baseProfile="full" onload="CreatePath();setTimeout('AnimatePa th();', 0);" id="svg-root"

2 width="100%" height="100%" viewBox="0 0 480 360"

3 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

4 <!--======================================================================-->

5 <!--= SVG 1.1 2nd Edition Test Case =-->

6 <!--======================================================================-->

7 <!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =-->

8 <!--= Institute of Technology, European Research Consortium for =-->

9 <!--= Informatics and Mathematics (ERCIM), Keio University). =-->

10 <!--= All Rights Reserved. =-->

11 <!--= See http://www.w3.org/Consortium/Legal/. =-->

12 <!--======================================================================-->

13 <d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"

14 template-version="1.4" reviewer="[reviewer]" author="ED" status="created"

15 version="$Revision: 1.5 $" testname="$RCSfile: paths-dom-02-f.svg,v $">

16 <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3. org/TR/SVG11/paths.html#DOMInterfaces">

17 <p>

18 This test is designed to test the PathSegList interface. At first a fl ower-like shape with 6 petals should be displayed.

19 The roundness and number of petals are then animated using script.

20 </p>

21 </d:testDescription>

22 <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">

23 <p>

24 The roundness of the petals is animated from star-like sharp petals to s oftly rounded petals and back again, and is repeated like that until the animati on stops.

25 The number of petals should increase one by one until the flower has a t otal of 12 petals, and then go back one by one until it has 6 petals, then incre ase again one by one until the flower has 9 petals.

26 Then the animation will stop. The rendered image should look exactly lik e the reference image.

27 </p>

28 <p>

29 If the flower is clicked after the animation has finished, it will resta rt the animation and repeat it for some time.

30 </p>

31 </d:operatorScript>

32 <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">

33 <p>

34 [[Describe the pass criteria of the test here. The pass criteria is what

35 should be displayed when the test is run.]]

36 </p>

37 </d:passCriteria>

38 </d:SVGTestCase>

39 <title id="test-title">$RCSfile: paths-dom-02-f.svg,v $</title>

40 <defs>

41 <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">

42 <font-face-src>

43 <font-face-uri xlink:href="../custom/resources/SVGFreeSans.svg#ascii"/>

44 </font-face-src>

45 </font-face>

46 </defs>

47 <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size= "18">

48 <script><![CDATA[

49 if (window.testRunner)

50 testRunner.waitUntilDone();

51 var offset_angle = 90;

52 var current_shift = 0;

53 var shift_inc = 1;

54 var THRESHOLD = 60;

55 var segments_added = 0;

56 var seg_diff = 1;

57 var adjust_count = 0;

58 var anim_count = 0;

59 var adjust_count_max = 8;

60 var anim_count_max = 10;

61 var stopped = false;

62

63 function DegToRad(degs)

64 {

65 return (degs * Math.PI) / 180;

66 }

67

68 function CreatePath()

69 {

70 var pathelm = document.getElementById("mypath");

71 var pathlist = pathelm.pathSegList;

72

73 var move = pathelm.createSVGPathSegMovetoAbs(240 + 30 * Math.cos(DegToRad( offset_angle - 30)),

74 180 + 30 * Math.sin(DegToRad(offset_angle - 30)));

75 pathlist.appendItem(move);

76

77 var angle = offset_angle;

78 for (var i = 0; i < 6; i++)

79 {

80 var x, y, xcp, ycp;

81

82 x = 240 + 30 * Math.cos(DegToRad(angle + 30));

83 y = 180 + 30 * Math.sin(DegToRad(angle + 30));

84

85 xcp = 240 + 120 * Math.cos(DegToRad(angle));

86 ycp = 180 + 120 * Math.sin(DegToRad(angle));

87

88 var curve = pathelm.createSVGPathSegCurvetoCubicAbs(x, y,

89 xcp, ycp,

90 xcp, ycp);

91

92 pathlist.appendItem(curve);

93

94 angle += 60;

95 }

96

97 pathlist.appendItem(pathelm.createSVGPathSegClosePath());

98 setTimeout('AdjustPath()', 0);

99 }

100

101 function AddSegment()

102 {

103 var pathelm = document.getElementById("mypath");

104 var pathlist = pathelm.pathSegList;

105

106 var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close

107 var angle = offset_angle;

108 var inc_angle = 360/(segments+1);

109 var shift_v_x, shift_v_y, xcp, ycp;

110

111 var move = pathlist.getItem(0);

112 move.x = 240 + 30 * Math.cos(DegToRad(offset_angle - inc_angle/2));

113 move.y = 180 + 30 * Math.sin(DegToRad(offset_angle - inc_angle/2));

114

115 for (var i = 0; i < segments; i++)

116 {

117 var curve = pathlist.getItem(1+i);

118

119 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));

120 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));

121

122 xcp = 240 + 120 * Math.cos(DegToRad(angle));

123 ycp = 180 + 120 * Math.sin(DegToRad(angle));

124

125 curve.x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2));

126 curve.y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2));

127

128 curve.x1 = xcp - shift_v_x;

129 curve.y1 = ycp - shift_v_y;

130

131 curve.x2 = xcp + shift_v_x;

132 curve.y2 = ycp + shift_v_y;

133

134 angle += inc_angle;

135 }

136

137 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));

138 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));

139

140 xcp = 240 + 120 * Math.cos(DegToRad(angle));

141 ycp = 180 + 120 * Math.sin(DegToRad(angle));

142

143 var x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2));

144 var y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2));

145

146 var curve = pathelm.createSVGPathSegCurvetoCubicAbs(x, y,

147 xcp - shift_v_x,

148 ycp - shift_v_y,

149 xcp + shift_v_x,

150 ycp + shift_v_y);

151

152 pathlist.insertItemBefore(curve, pathlist.numberOfItems-1);

153 }

154

155 function RemoveSegment()

156 {

157 var pathelm = document.getElementById("mypath");

158 var pathlist = pathelm.pathSegList;

159

160 var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close

161 var angle = offset_angle;

162 var inc_angle = 360/(segments-1);

163 var shift_v_x, shift_v_y, xcp, ycp;

164

165 var move = pathlist.getItem(0);

166 move.x = 240 + 30 * Math.cos(DegToRad(offset_angle - inc_angle/2));

167 move.y = 180 + 30 * Math.sin(DegToRad(offset_angle - inc_angle/2));

168

169 for (var i = 0; i < segments-1; i++)

170 {

171 var curve = pathlist.getItem(1+i);

172

173 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));

174 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));

175

176 xcp = 240 + 120 * Math.cos(DegToRad(angle));

177 ycp = 180 + 120 * Math.sin(DegToRad(angle));

178

179 curve.x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2));

180 curve.y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2));

181

182 curve.x1 = xcp - shift_v_x;

183 curve.y1 = ycp - shift_v_y;

184

185 curve.x2 = xcp + shift_v_x;

186 curve.y2 = ycp + shift_v_y;

187

188 angle += inc_angle;

189 }

190

191 pathlist.removeItem(pathlist.numberOfItems-2);

192 }

193

194 function AdjustPath()

195 {

196 if (seg_diff > 0)

197 {

198 AddSegment();

199 }

200 else

201 {

202 RemoveSegment();

203 }

204

205 segments_added += seg_diff;

206

207 if (segments_added > 5)

208 seg_diff = -1;

209 else if (segments_added <= 0)

210 seg_diff = 1;

211

212 if(adjust_count < adjust_count_max)

213 {

214 adjust_count++;

215 setTimeout('AdjustPath()', 0);

216 }

217 }

218

219 function AnimatePath()

220 {

221 var pathelm = document.getElementById("mypath");

222 var pathlist = pathelm.pathSegList;

223

224 var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close

225 var angle = offset_angle;

226 var inc_angle = 360/segments;

227 for (var i = 0; i < segments; i++)

228 {

229 var curve = pathlist.getItem(1+i);

230

231 var shift_v_x, shift_v_y, xcp, ycp;

232

233 shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));

234 shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));

235

236 xcp = 240 + 120 * Math.cos(DegToRad(angle));

237 ycp = 180 + 120 * Math.sin(DegToRad(angle));

238

239 curve.x1 = xcp - shift_v_x;

240 curve.y1 = ycp - shift_v_y;

241

242 curve.x2 = xcp + shift_v_x;

243 curve.y2 = ycp + shift_v_y;

244

245 angle += inc_angle;

246 }

247

248 current_shift += shift_inc;

249 if (current_shift >= THRESHOLD \|\| current_shift < 0)

250 shift_inc = -shift_inc;

251

252 if(adjust_count >= adjust_count_max)

253 {

254 anim_count++;

255 }

256

257 if(anim_count < anim_count_max)

258 setTimeout('AnimatePath();', 0);

259 else {

260 document.getElementById("mypath").addEventListener("click", function fun c() { adjust_count_max=32768;anim_count_max=32768; AdjustPath(); AnimatePath(); }, false);

261 if (window.testRunner)

262 testRunner.notifyDone();

263 }

264 }

265

266 ]]></script>

267 <path d="" id="mypath" stroke="black" fill="blue"/>

268 </g>

269 <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">

270 <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.5 $</text>

271 </g>

272 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke= "#000"/>

273 <!-- comment out this watermark once the test is approved -->

274 <g id="draft-watermark">

275 <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-w idth="1"/>

276 <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size ="20" x="240"

277 text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white" >DRAFT</text>

278 </g>

279 </svg>

OLD	NEW