Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(107)

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1473963004: CSS animation for SVG presentation attribute 'd' (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Oilpan Created 5 years 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/animations/responsive/d-responsive.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html
diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html b/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html
new file mode 100644
index 0000000000000000000000000000000000000000..1766336ec972279b263989d858e37dbb64779171
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/interpolation/svg-d-interpolation.html
@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+.parent {
+ cx: 100px;
+}
+.target {
+ font-size: 16px;
+ cx: 50px;
+}
+.expected {
+ fill: green;
+}
+</style>
+<body>
+<template id="target-template">
+ <svg width="90" height="90">
+ <path class="target" />
+ </svg>
+</template>
+<script src="resources/interpolation-test.js"></script>
+<script>
+'use strict';
+
+// Distinct number of path segments
+assertNoInterpolation({
+ property: 'd',
+ from: "path('m 0 0 h 1 h 2')",
+ to: "path('m 0 0 h 3')"
+});
+
+// Distinct segment types
+assertNoInterpolation({
+ property: 'd',
+ from: "path('m 10 0 h 1')",
+ to: "path('m 20 0 v 2')"
+});
+
+assertNoInterpolation({
+ property: 'd',
+ from: "path('m 1 2 l 3 4 Z')",
+ to: "path('m 1 2 l 3 4')"
+});
+
+// Exercise each segment type
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 Z')",
+ to: "path('m 0 0 Z')"
+}, [
+ {at: -0.4, is: "path('m 0 0 Z')"},
+ {at: 0, is: "path('m 0 0 Z')"},
+ {at: 0.2, is: "path('m 0 0 Z')"},
+ {at: 0.6, is: "path('m 0 0 Z')"},
+ {at: 1, is: "path('m 0 0 Z')"},
+ {at: 1.4, is: "path('m 0 0 Z')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('M 20 50')",
+ to: "path('M 30 70')"
+}, [
+ {at: -0.4, is: "path('M 16 42')"},
+ {at: 0, is: "path('M 20 50')"},
+ {at: 0.2, is: "path('M 22 54')"},
+ {at: 0.6, is: "path('M 26 62')"},
+ {at: 1, is: "path('M 30 70')"},
+ {at: 1.4, is: "path('M 34 78')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 20 50')",
+ to: "path('m 30 70')"
+}, [
+ {at: -0.4, is: "path('m 16 42')"},
+ {at: 0, is: "path('m 20 50')"},
+ {at: 0.2, is: "path('m 22 54')"},
+ {at: 0.6, is: "path('m 26 62')"},
+ {at: 1, is: "path('m 30 70')"},
+ {at: 1.4, is: "path('m 34 78')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 L 20 50')",
+ to: "path('m 0 0 L 30 70')"
+}, [
+ {at: -0.4, is: "path('m 0 0 L 16 42')"},
+ {at: 0, is: "path('m 0 0 L 20 50')"},
+ {at: 0.2, is: "path('m 0 0 L 22 54')"},
+ {at: 0.6, is: "path('m 0 0 L 26 62')"},
+ {at: 1, is: "path('m 0 0 L 30 70')"},
+ {at: 1.4, is: "path('m 0 0 L 34 78')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 l 20 50')",
+ to: "path('m 0 0 l 30 70')"
+}, [
+ {at: -0.4, is: "path('m 0 0 l 16 42')"},
+ {at: 0, is: "path('m 0 0 l 20 50')"},
+ {at: 0.2, is: "path('m 0 0 l 22 54')"},
+ {at: 0.6, is: "path('m 0 0 l 26 62')"},
+ {at: 1, is: "path('m 0 0 l 30 70')"},
+ {at: 1.4, is: "path('m 0 0 l 34 78')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 C 32 42 52 62 12 22')",
+ to: "path('m 0 0 C 37 47 57 67 17 27')",
+}, [
+ {at: -0.4, is: "path('m 0 0 C 30 40 50 60 10 20')"},
+ {at: 0, is: "path('m 0 0 C 32 42 52 62 12 22')"},
+ {at: 0.2, is: "path('m 0 0 C 33 43 53 63 13 23')"},
+ {at: 0.6, is: "path('m 0 0 C 35 45 55 65 15 25')"},
+ {at: 1, is: "path('m 0 0 C 37 47 57 67 17 27')"},
+ {at: 1.4, is: "path('m 0 0 C 39 49 59 69 19 29')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 c 32 42 52 62 12 22')",
+ to: "path('m 0 0 c 37 47 57 67 17 27')"
+}, [
+ {at: -0.4, is: "path('m 0 0 c 30 40 50 60 10 20')"},
+ {at: 0, is: "path('m 0 0 c 32 42 52 62 12 22')"},
+ {at: 0.2, is: "path('m 0 0 c 33 43 53 63 13 23')"},
+ {at: 0.6, is: "path('m 0 0 c 35 45 55 65 15 25')"},
+ {at: 1, is: "path('m 0 0 c 37 47 57 67 17 27')"},
+ {at: 1.4, is: "path('m 0 0 c 39 49 59 69 19 29')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 Q 32 42 52 62')",
+ to: "path('m 0 0 Q 37 47 57 67')"
+}, [
+ {at: -0.4, is: "path('m 0 0 Q 30 40 50 60')"},
+ {at: 0, is: "path('m 0 0 Q 32 42 52 62')"},
+ {at: 0.2, is: "path('m 0 0 Q 33 43 53 63')"},
+ {at: 0.6, is: "path('m 0 0 Q 35 45 55 65')"},
+ {at: 1, is: "path('m 0 0 Q 37 47 57 67')"},
+ {at: 1.4, is: "path('m 0 0 Q 39 49 59 69')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 q 32 42 52 62')",
+ to: "path('m 0 0 q 37 47 57 67')"
+}, [
+ {at: -0.4, is: "path('m 0 0 q 30 40 50 60')"},
+ {at: 0, is: "path('m 0 0 q 32 42 52 62')"},
+ {at: 0.2, is: "path('m 0 0 q 33 43 53 63')"},
+ {at: 0.6, is: "path('m 0 0 q 35 45 55 65')"},
+ {at: 1, is: "path('m 0 0 q 37 47 57 67')"},
+ {at: 1.4, is: "path('m 0 0 q 39 49 59 69')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 A 10 20 30 1 0 40 50')",
+ to: "path('m 0 0 A 60 70 80 0 1 90 100')"
+}, [
+ {at: -0.4, is: "path('m 0 0 A -10 0 10 1 0 20 30')"},
+ {at: 0, is: "path('m 0 0 A 10 20 30 1 0 40 50')"},
+ {at: 0.2, is: "path('m 0 0 A 20 30 40 1 0 50 60')"},
+ {at: 0.6, is: "path('m 0 0 A 40 50 60 0 1 70 80')"},
+ {at: 1, is: "path('m 0 0 A 60 70 80 0 1 90 100')"},
+ {at: 1.4, is: "path('m 0 0 A 80 90 100 0 1 110 120')"},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 a 10 20 30 1 0 40 50')",
+ to: "path('m 0 0 a 60 70 80 0 1 90 100')"
+}, [
+ {at: -0.4, is: "path('m 0 0 a -10 0 10 1 0 20 30')"},
+ {at: 0, is: "path('m 0 0 a 10 20 30 1 0 40 50')"},
+ {at: 0.2, is: "path('m 0 0 a 20 30 40 1 0 50 60')"},
+ {at: 0.6, is: "path('m 0 0 a 40 50 60 0 1 70 80')"},
+ {at: 1, is: "path('m 0 0 a 60 70 80 0 1 90 100')"},
+ {at: 1.4, is: "path('m 0 0 a 80 90 100 0 1 110 120')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 H 10')",
+ to: "path('m 0 0 H 60')"
+}, [
+ {at: -0.4, is: "path('m 0 0 H -10')"},
+ {at: 0, is: "path('m 0 0 H 10')"},
+ {at: 0.2, is: "path('m 0 0 H 20')"},
+ {at: 0.6, is: "path('m 0 0 H 40')"},
+ {at: 1, is: "path('m 0 0 H 60')"},
+ {at: 1.4, is: "path('m 0 0 H 80')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 h 10')",
+ to: "path('m 0 0 h 60')"
+}, [
+ {at: -0.4, is: "path('m 0 0 h -10')"},
+ {at: 0, is: "path('m 0 0 h 10')"},
+ {at: 0.2, is: "path('m 0 0 h 20')"},
+ {at: 0.6, is: "path('m 0 0 h 40')"},
+ {at: 1, is: "path('m 0 0 h 60')"},
+ {at: 1.4, is: "path('m 0 0 h 80')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 V 10')",
+ to: "path('m 0 0 V 60')"
+}, [
+ {at: -0.4, is: "path('m 0 0 V -10')"},
+ {at: 0, is: "path('m 0 0 V 10')"},
+ {at: 0.2, is: "path('m 0 0 V 20')"},
+ {at: 0.6, is: "path('m 0 0 V 40')"},
+ {at: 1, is: "path('m 0 0 V 60')"},
+ {at: 1.4, is: "path('m 0 0 V 80')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 v 10')",
+ to: "path('m 0 0 v 60')"
+}, [
+ {at: -0.4, is: "path('m 0 0 v -10')"},
+ {at: 0, is: "path('m 0 0 v 10')"},
+ {at: 0.2, is: "path('m 0 0 v 20')"},
+ {at: 0.6, is: "path('m 0 0 v 40')"},
+ {at: 1, is: "path('m 0 0 v 60')"},
+ {at: 1.4, is: "path('m 0 0 v 80')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 S 32 42 52 62')",
+ to: "path('m 0 0 S 37 47 57 67')"
+}, [
+ {at: -0.4, is: "path('m 0 0 S 30 40 50 60')"},
+ {at: 0, is: "path('m 0 0 S 32 42 52 62')"},
+ {at: 0.2, is: "path('m 0 0 S 33 43 53 63')"},
+ {at: 0.6, is: "path('m 0 0 S 35 45 55 65')"},
+ {at: 1, is: "path('m 0 0 S 37 47 57 67')"},
+ {at: 1.4, is: "path('m 0 0 S 39 49 59 69')"},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 s 32 42 52 62')",
+ to: "path('m 0 0 s 37 47 57 67')"
+}, [
+ {at: -0.4, is: "path('m 0 0 s 30 40 50 60')"},
+ {at: 0, is: "path('m 0 0 s 32 42 52 62')"},
+ {at: 0.2, is: "path('m 0 0 s 33 43 53 63')"},
+ {at: 0.6, is: "path('m 0 0 s 35 45 55 65')"},
+ {at: 1, is: "path('m 0 0 s 37 47 57 67')"},
+ {at: 1.4, is: "path('m 0 0 s 39 49 59 69')"},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 T 20 50')",
+ to: "path('m 0 0 T 30 70')"
+}, [
+ {at: -0.4, is: "path('m 0 0 T 16 42')"},
+ {at: 0, is: "path('m 0 0 T 20 50')"},
+ {at: 0.2, is: "path('m 0 0 T 22 54')"},
+ {at: 0.6, is: "path('m 0 0 T 26 62')"},
+ {at: 1, is: "path('m 0 0 T 30 70')"},
+ {at: 1.4, is: "path('m 0 0 T 34 78')"},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 0 0 t 20 50')",
+ to: "path('m 0 0 t 30 70')"
+}, [
+ {at: -0.4, is: "path('m 0 0 t 16 42')"},
+ {at: 0, is: "path('m 0 0 t 20 50')"},
+ {at: 0.2, is: "path('m 0 0 t 22 54')"},
+ {at: 0.6, is: "path('m 0 0 t 26 62')"},
+ {at: 1, is: "path('m 0 0 t 30 70')"},
+ {at: 1.4, is: "path('m 0 0 t 34 78')"},
+]);
+
+// Mix relative and non-relative
+assertInterpolation({
+ property: 'd',
+ from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+ to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z')"
+}, [
+ {at: -0.4, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 120 20 Z')"},
+ {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+ {at: 0.2, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 240 140 Z')"},
+ {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 120 20 Z')"},
+ {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 200 100 Z')"},
+ {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 280 180 Z')"},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+ to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')"
+}, [
+ {at: -0.4, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 160 100 Z')"},
+ {at: 0, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+ {at: 0.2, is: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 220 100 Z')"},
+ {at: 0.6, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 60 -100 Z')"},
+ {at: 1, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z')"},
+ {at: 1.4, is: "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 140 -100 Z')"},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120')",
+ to: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')"
+}, [
+ {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 160')"},
+ {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')"},
+ {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')"},
+ {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')"},
+ {at: 1, is: "path('M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220')"},
+ {at: 1.4, is: "path('M 150 160 L 170 190 Z L 80 110 Z M 80 120 L 170 180 Z T 170 160')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')",
+ to: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')"
+}, [
+ {at: -0.4, is: "path('m -30 -20 c 44 58 34 68 84 78 c 82 88 132 98 112 118')"},
+ {at: 0, is: "path('m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130')"},
+ {at: 0.2, is: "path('m 30 40 c 38 46 28 56 78 66 c 94 106 144 116 124 136')"},
+ {at: 0.6, is: "path('M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 286')"},
+ {at: 1, is: "path('M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330')"},
+ {at: 1.4, is: "path('M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')",
+ to: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"
+}, [
+ {at: -0.4, is: "path('m -30 -20 q 34 68 44 58 q 116 90 106 100')"},
+ {at: 0, is: "path('m 10 20 q 30 60 40 50 q 100 70 90 80')"},
+ {at: 0.2, is: "path('m 30 40 q 28 56 38 46 q 92 60 82 70')"},
+ {at: 0.6, is: "path('M 70 80 Q 94 128 104 118 Q 180 158 170 168')"},
+ {at: 1, is: "path('M 110 120 Q 130 160 140 150 Q 200 170 190 180')"},
+ {at: 1.4, is: "path('M 150 160 Q 166 192 176 182 Q 220 182 210 192')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')",
+ to: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"
+}, [
+ {at: -0.4, is: "path('m -30 -20 s 34 68 44 58 s 116 90 106 100')"},
+ {at: 0, is: "path('m 10 20 s 30 60 40 50 s 100 70 90 80')"},
+ {at: 0.2, is: "path('m 30 40 s 28 56 38 46 s 92 60 82 70')"},
+ {at: 0.6, is: "path('M 70 80 S 94 128 104 118 S 180 158 170 168')"},
+ {at: 1, is: "path('M 110 120 S 130 160 140 150 S 200 170 190 180')"},
+ {at: 1.4, is: "path('M 150 160 S 166 192 176 182 S 220 182 210 192')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')",
+ to: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"
+}, [
+ {at: -0.4, is: "path('m -30 -20 h 34 v 48 h 22 v 36 l 90 104')"},
+ {at: 0, is: "path('m 10 20 h 30 v 40 h 50 v 60 l 70 80')"},
+ {at: 0.2, is: "path('m 30 40 h 28 v 36 h 64 v 72 l 60 68')"},
+ {at: 0.6, is: "path('M 70 80 H 94 V 108 H 186 V 204 L 226 248')"},
+ {at: 1, is: "path('M 110 120 H 130 V 140 H 250 V 260 L 270 280')"},
+ {at: 1.4, is: "path('M 150 160 H 166 V 172 H 314 V 316 L 314 312')"}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')",
+ to: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"
+}, [
+ {at: -0.4, is: "path('m 6 16 a -10 0 10 1 0 28 42 a 90 100 10 1 1 196 70')"},
+ {at: 0, is: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')"},
+ {at: 0.2, is: "path('m 12 22 a 20 30 40 1 0 46 54 a 120 130 40 1 1 112 40')"},
+ {at: 0.6, is: "path('M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108')"},
+ {at: 1, is: "path('M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100')"},
+ {at: 1.4, is: "path('M 24 34 A 80 90 100 0 1 106 112 A 180 190 100 0 1 50 92')"}
+]);
+
+</script>
+</body>
+</html>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/animations/responsive/d-responsive.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698