third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html - Issue 1592593002: Web Animations: Animate d presentation attribute using InterpolableValue

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html

Issue 1592593002: Web Animations: Animate d presentation attribute using InterpolableValue (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 years, 11 months 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 | « no previous file | third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation-expected.txt » ('j') | third_party/WebKit/Source/core/animation/CSSPathInterpolationType.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <meta charset="UTF-8">	2 <meta charset="UTF-8">

3 <style>	3 <style>

4 .parent {	4 .parent {

5 cx: 100px;	5 cx: 100px;

6 }	6 }

7 .target {	7 .target {

8 font-size: 16px;	8 font-size: 16px;

9 cx: 50px;	9 cx: 50px;

10 }	10 }

(...skipping 278 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
289 {at: 1, is: "path('m 0 0 t 30 70')"},	289 {at: 1, is: "path('m 0 0 t 30 70')"},

290 {at: 1.4, is: "path('m 0 0 t 34 78')"},	290 {at: 1.4, is: "path('m 0 0 t 34 78')"},

291 ]);	291 ]);

292	292

293 // Mix relative and non-relative	293 // Mix relative and non-relative

294 assertInterpolation({	294 assertInterpolation({

295 property: 'd',	295 property: 'd',

296 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",	296 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",

297 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z')"	297 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z')"

298 }, [	298 }, [

299 {at: -0.4, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 120 20 Z')"},	299 {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 60 -180 Z')"},

300 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},	300 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},

301 {at: 0.2, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 240 140 Z')"},	301 {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 120 -60 Z')"},

302 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 120 20 Z')"},	302 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')"},

303 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 200 100 Z')"},	303 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 200 100 Z')"},

304 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 280 180 Z')"},	304 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 240 180 Z')"},

305 ]);	305 ]);

306	306

307 assertInterpolation({	307 assertInterpolation({

308 property: 'd',	308 property: 'd',

309 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",	309 from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",

310 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')"	310 to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')"

311 }, [	311 }, [

312 {at: -0.4, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 160 100 Z')"},	312 {at: -0.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},

313 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},	313 {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},

314 {at: 0.2, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 220 100 Z')"},	314 {at: 0.2, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},

315 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 60 -100 Z')"},	315 {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},

316 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},	316 {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},

317 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 140 -100 Z')"},	317 {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},

318 ]);	318 ]);

319	319

320 assertInterpolation({	320 assertInterpolation({

321 property: 'd',	321 property: 'd',

322 from: "path('m 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120')",	322 from: "path('m 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120')",

323 to: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')"	323 to: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')"

324 }, [	324 }, [

325 {at: -0.4, is: "path('m -30 -20 l 20 30 Z l 90 100 Z m 90 100 l 90 60 Z t 90 1 60')"},	325 {at: -0.4, is: "path('M -30 -20 L -10 10 Z L 52 68 Z M 72 84 L 162 144 Z T 126 220')"},

326 {at: 0, is: "path('m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120')"},	326 {at: 0, is: "path('m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120')"},

327 {at: 0.2, is: "path('m 30 40 l 20 30 Z l 30 40 Z m 60 70 l 90 60 Z t 60 100')" },	327 {at: 0.2, is: "path('M 30 40 L 50 70 Z L 64 86 Z M 84 108 L 174 168 Z T 162 22 0')"},

328 {at: 0.6, is: "path('M 70 80 L 90 110 Z L 80 110 Z M 120 160 L 210 220 Z T 250 280')"},	328 {at: 0.6, is: "path('M 70 80 L 90 110 Z L 72 98 Z M 92 124 L 182 184 Z T 186 2 20')"},

329 {at: 1, is: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 21 0 220')"},	329 {at: 1, is: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 21 0 220')"},

330 {at: 1.4, is: "path('M 150 160 L 170 190 Z L 80 110 Z M 80 120 L 170 180 Z T 1 70 160')"}	330 {at: 1.4, is: "path('M 150 160 L 170 190 Z L 88 122 Z M 108 156 L 198 216 Z T 234 220')"}
	alancutter (OOO until 2018) 2016/01/15 05:16:44 Why are these values changing? Why are these values changing? Eric Willigers 2016/01/18 06:19:54 When moveto commands (M or m) appear in the path, Show quoted text On 2016/01/15 05:16:44, alancutter wrote: > Why are these values changing? When moveto commands (M or m) appear in the path, the path interpolation functions consumeSingleCoordinate and consumeInterpolableSingleCoordinate correctly set the initial point of the current subpath. The next closepath command (Z or z) resets the current point back to this initial point. By contrast, SVGPathBlender (used by Chrome SMIL, and by CSS animations 'd' before this patch) processes moveto commands in essentially the same way lineto commands are processed. Our 'from' value is equivalent to path('M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220') (using Snap: https://jsfiddle.net/ericwilligers/Laxcwaqh/ ) so in absolute coordinates the last number is 220 for both 'from' and 'to', and hence also for all offsets. Created crbug.com/578727
331 ]);	331 ]);

332	332

333 assertInterpolation({	333 assertInterpolation({

334 property: 'd',	334 property: 'd',

335 from: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')",	335 from: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')",

336 to: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')"	336 to: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')"

337 }, [	337 }, [

338 {at: -0.4, is: "path('m -30 -20 c 44 58 34 68 84 78 c 82 88 132 98 112 118')"} ,	338 {at: -0.4, is: "path('M -30 -20 C 14 38 4 48 54 58 C 136 146 186 156 166 176') "},

339 {at: 0, is: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')"},	339 {at: 0, is: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')"},

340 {at: 0.2, is: "path('m 30 40 c 38 46 28 56 78 66 c 94 106 144 116 124 136')"},	340 {at: 0.2, is: "path('M 30 40 C 68 86 58 96 108 106 C 202 212 252 222 232 242') "},

341 {at: 0.6, is: "path('M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 28 6')"},	341 {at: 0.6, is: "path('M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 28 6')"},

342 {at: 1, is: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 3 30')"},	342 {at: 1, is: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 3 30')"},

343 {at: 1.4, is: "path('M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374')"}	343 {at: 1.4, is: "path('M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374')"}

344 ]);	344 ]);

345	345

346 assertInterpolation({	346 assertInterpolation({

347 property: 'd',	347 property: 'd',

348 from: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')",	348 from: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')",

349 to: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"	349 to: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"

350 }, [	350 }, [

351 {at: -0.4, is: "path('m -30 -20 q 34 68 44 58 q 116 90 106 100')"},	351 {at: -0.4, is: "path('M -30 -20 Q 4 48 14 38 Q 130 128 120 138')"},

352 {at: 0, is: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')"},	352 {at: 0, is: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')"},

353 {at: 0.2, is: "path('m 30 40 q 28 56 38 46 q 92 60 82 70')"},	353 {at: 0.2, is: "path('M 30 40 Q 58 96 68 86 Q 160 146 150 156')"},

354 {at: 0.6, is: "path('M 70 80 Q 94 128 104 118 Q 180 158 170 168')"},	354 {at: 0.6, is: "path('M 70 80 Q 94 128 104 118 Q 180 158 170 168')"},

355 {at: 1, is: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"},	355 {at: 1, is: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"},

356 {at: 1.4, is: "path('M 150 160 Q 166 192 176 182 Q 220 182 210 192')"}	356 {at: 1.4, is: "path('M 150 160 Q 166 192 176 182 Q 220 182 210 192')"}

357 ]);	357 ]);

358	358

359 assertInterpolation({	359 assertInterpolation({

360 property: 'd',	360 property: 'd',

361 from: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')",	361 from: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')",

362 to: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"	362 to: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"

363 }, [	363 }, [

364 {at: -0.4, is: "path('m -30 -20 s 34 68 44 58 s 116 90 106 100')"},	364 {at: -0.4, is: "path('M -30 -20 S 4 48 14 38 S 130 128 120 138')"},

365 {at: 0, is: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')"},	365 {at: 0, is: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')"},

366 {at: 0.2, is: "path('m 30 40 s 28 56 38 46 s 92 60 82 70')"},	366 {at: 0.2, is: "path('M 30 40 S 58 96 68 86 S 160 146 150 156')"},

367 {at: 0.6, is: "path('M 70 80 S 94 128 104 118 S 180 158 170 168')"},	367 {at: 0.6, is: "path('M 70 80 S 94 128 104 118 S 180 158 170 168')"},

368 {at: 1, is: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"},	368 {at: 1, is: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"},

369 {at: 1.4, is: "path('M 150 160 S 166 192 176 182 S 220 182 210 192')"}	369 {at: 1.4, is: "path('M 150 160 S 166 192 176 182 S 220 182 210 192')"}

370 ]);	370 ]);

371	371

372 assertInterpolation({	372 assertInterpolation({

373 property: 'd',	373 property: 'd',

374 from: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')",	374 from: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')",

375 to: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"	375 to: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"

376 }, [	376 }, [

377 {at: -0.4, is: "path('m -30 -20 h 34 v 48 h 22 v 36 l 90 104')"},	377 {at: -0.4, is: "path('M -30 -20 H 4 V 28 H 26 V 64 L 116 168')"},

378 {at: 0, is: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')"},	378 {at: 0, is: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')"},

379 {at: 0.2, is: "path('m 30 40 h 28 v 36 h 64 v 72 l 60 68')"},	379 {at: 0.2, is: "path('M 30 40 H 58 V 76 H 122 V 148 L 182 216')"},

380 {at: 0.6, is: "path('M 70 80 H 94 V 108 H 186 V 204 L 226 248')"},	380 {at: 0.6, is: "path('M 70 80 H 94 V 108 H 186 V 204 L 226 248')"},

381 {at: 1, is: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"},	381 {at: 1, is: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"},

382 {at: 1.4, is: "path('M 150 160 H 166 V 172 H 314 V 316 L 314 312')"}	382 {at: 1.4, is: "path('M 150 160 H 166 V 172 H 314 V 316 L 314 312')"}

383 ]);	383 ]);

384	384

385 assertInterpolation({	385 assertInterpolation({

386 property: 'd',	386 property: 'd',

387 from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')",	387 from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')",

388 to: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"	388 to: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"

389 }, [	389 }, [

390 {at: -0.4, is: "path('m 6 16 a -10 0 10 1 0 28 42 a 90 100 10 1 1 196 70')"},	390 {at: -0.4, is: "path('M 6 16 A -10 0 10 1 0 34 58 A 90 100 10 1 1 230 128')"},

391 {at: 0, is: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')"},	391 {at: 0, is: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')"},

392 {at: 0.2, is: "path('m 12 22 a 20 30 40 1 0 46 54 a 120 130 40 1 1 112 40')"},	392 {at: 0.2, is: "path('M 12 22 A 20 30 40 1 0 58 76 A 120 130 40 1 1 170 116')"} ,

393 {at: 0.6, is: "path('M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108')"} ,	393 {at: 0.6, is: "path('M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108')"} ,

394 {at: 1, is: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"},	394 {at: 1, is: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"},

395 {at: 1.4, is: "path('M 24 34 A 80 90 100 0 1 106 112 A 180 190 100 0 1 50 92') "}	395 {at: 1.4, is: "path('M 24 34 A 80 90 100 0 1 106 112 A 180 190 100 0 1 50 92') "}

396 ]);	396 ]);

397	397

398 </script>	398 </script>

399 </body>	399 </body>

400 </html>	400 </html>

OLD	NEW