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

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: 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 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') | third_party/WebKit/Source/core/animation/animatable/AnimatablePath.cpp » ('J')
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..ea6d5795d74435d1752304d1aec48967d91e6e34
--- /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: '"m 0 0 h 1 h 2"',
+ to: '"m 0 0 h 3"'
+});
+
+// Distinct segment types
+assertNoInterpolation({
+ property: 'd',
+ from: '"m 10 0 h 1"',
+ to: '"m 20 0 v 2"'
+});
+
+assertNoInterpolation({
+ property: 'd',
+ from: '"m 1 2 l 3 4 Z"',
+ to: '"m 1 2 l 3 4"'
+});
+
+// Exercise each segment type
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 Z"',
+ to: '"m 0 0 Z"'
+}, [
+ {at: -0.4, is: '"m 0 0 Z"'},
+ {at: 0, is: '"m 0 0 Z"'},
+ {at: 0.2, is: '"m 0 0 Z"'},
+ {at: 0.6, is: '"m 0 0 Z"'},
+ {at: 1, is: '"m 0 0 Z"'},
+ {at: 1.4, is: '"m 0 0 Z"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"M 20 50"',
+ to: '"M 30 70"'
+}, [
+ {at: -0.4, is: '"M 16 42"'},
+ {at: 0, is: '"M 20 50"'},
+ {at: 0.2, is: '"M 22 54"'},
+ {at: 0.6, is: '"M 26 62"'},
+ {at: 1, is: '"M 30 70"'},
+ {at: 1.4, is: '"M 34 78"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 20 50"',
+ to: '"m 30 70"'
+}, [
+ {at: -0.4, is: '"m 16 42"'},
+ {at: 0, is: '"m 20 50"'},
+ {at: 0.2, is: '"m 22 54"'},
+ {at: 0.6, is: '"m 26 62"'},
+ {at: 1, is: '"m 30 70"'},
+ {at: 1.4, is: '"m 34 78"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 L 20 50"',
+ to: '"m 0 0 L 30 70"'
+}, [
+ {at: -0.4, is: '"m 0 0 L 16 42"'},
+ {at: 0, is: '"m 0 0 L 20 50"'},
+ {at: 0.2, is: '"m 0 0 L 22 54"'},
+ {at: 0.6, is: '"m 0 0 L 26 62"'},
+ {at: 1, is: '"m 0 0 L 30 70"'},
+ {at: 1.4, is: '"m 0 0 L 34 78"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 l 20 50"',
+ to: '"m 0 0 l 30 70"'
+}, [
+ {at: -0.4, is: '"m 0 0 l 16 42"'},
+ {at: 0, is: '"m 0 0 l 20 50"'},
+ {at: 0.2, is: '"m 0 0 l 22 54"'},
+ {at: 0.6, is: '"m 0 0 l 26 62"'},
+ {at: 1, is: '"m 0 0 l 30 70"'},
+ {at: 1.4, is: '"m 0 0 l 34 78"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 C 32 42 52 62 12 22"',
+ to: '"m 0 0 C 37 47 57 67 17 27"',
+}, [
+ {at: -0.4, is: '"m 0 0 C 30 40 50 60 10 20"'},
+ {at: 0, is: '"m 0 0 C 32 42 52 62 12 22"'},
+ {at: 0.2, is: '"m 0 0 C 33 43 53 63 13 23"'},
+ {at: 0.6, is: '"m 0 0 C 35 45 55 65 15 25"'},
+ {at: 1, is: '"m 0 0 C 37 47 57 67 17 27"'},
+ {at: 1.4, is: '"m 0 0 C 39 49 59 69 19 29"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 c 32 42 52 62 12 22"',
+ to: '"m 0 0 c 37 47 57 67 17 27"'
+}, [
+ {at: -0.4, is: '"m 0 0 c 30 40 50 60 10 20"'},
+ {at: 0, is: '"m 0 0 c 32 42 52 62 12 22"'},
+ {at: 0.2, is: '"m 0 0 c 33 43 53 63 13 23"'},
+ {at: 0.6, is: '"m 0 0 c 35 45 55 65 15 25"'},
+ {at: 1, is: '"m 0 0 c 37 47 57 67 17 27"'},
+ {at: 1.4, is: '"m 0 0 c 39 49 59 69 19 29"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 Q 32 42 52 62"',
+ to: '"m 0 0 Q 37 47 57 67"'
+}, [
+ {at: -0.4, is: '"m 0 0 Q 30 40 50 60"'},
+ {at: 0, is: '"m 0 0 Q 32 42 52 62"'},
+ {at: 0.2, is: '"m 0 0 Q 33 43 53 63"'},
+ {at: 0.6, is: '"m 0 0 Q 35 45 55 65"'},
+ {at: 1, is: '"m 0 0 Q 37 47 57 67"'},
+ {at: 1.4, is: '"m 0 0 Q 39 49 59 69"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 q 32 42 52 62"',
+ to: '"m 0 0 q 37 47 57 67"'
+}, [
+ {at: -0.4, is: '"m 0 0 q 30 40 50 60"'},
+ {at: 0, is: '"m 0 0 q 32 42 52 62"'},
+ {at: 0.2, is: '"m 0 0 q 33 43 53 63"'},
+ {at: 0.6, is: '"m 0 0 q 35 45 55 65"'},
+ {at: 1, is: '"m 0 0 q 37 47 57 67"'},
+ {at: 1.4, is: '"m 0 0 q 39 49 59 69"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 A 10 20 30 1 0 40 50"',
+ to: '"m 0 0 A 60 70 80 0 1 90 100"'
+}, [
+ {at: -0.4, is: '"m 0 0 A -10 0 10 1 0 20 30"'},
+ {at: 0, is: '"m 0 0 A 10 20 30 1 0 40 50"'},
+ {at: 0.2, is: '"m 0 0 A 20 30 40 1 0 50 60"'},
+ {at: 0.6, is: '"m 0 0 A 40 50 60 0 1 70 80"'},
+ {at: 1, is: '"m 0 0 A 60 70 80 0 1 90 100"'},
+ {at: 1.4, is: '"m 0 0 A 80 90 100 0 1 110 120"'},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 a 10 20 30 1 0 40 50"',
+ to: '"m 0 0 a 60 70 80 0 1 90 100"'
+}, [
+ {at: -0.4, is: '"m 0 0 a -10 0 10 1 0 20 30"'},
+ {at: 0, is: '"m 0 0 a 10 20 30 1 0 40 50"'},
+ {at: 0.2, is: '"m 0 0 a 20 30 40 1 0 50 60"'},
+ {at: 0.6, is: '"m 0 0 a 40 50 60 0 1 70 80"'},
+ {at: 1, is: '"m 0 0 a 60 70 80 0 1 90 100"'},
+ {at: 1.4, is: '"m 0 0 a 80 90 100 0 1 110 120"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 H 10"',
+ to: '"m 0 0 H 60"'
+}, [
+ {at: -0.4, is: '"m 0 0 H -10"'},
+ {at: 0, is: '"m 0 0 H 10"'},
+ {at: 0.2, is: '"m 0 0 H 20"'},
+ {at: 0.6, is: '"m 0 0 H 40"'},
+ {at: 1, is: '"m 0 0 H 60"'},
+ {at: 1.4, is: '"m 0 0 H 80"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 h 10"',
+ to: '"m 0 0 h 60"'
+}, [
+ {at: -0.4, is: '"m 0 0 h -10"'},
+ {at: 0, is: '"m 0 0 h 10"'},
+ {at: 0.2, is: '"m 0 0 h 20"'},
+ {at: 0.6, is: '"m 0 0 h 40"'},
+ {at: 1, is: '"m 0 0 h 60"'},
+ {at: 1.4, is: '"m 0 0 h 80"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 V 10"',
+ to: '"m 0 0 V 60"'
+}, [
+ {at: -0.4, is: '"m 0 0 V -10"'},
+ {at: 0, is: '"m 0 0 V 10"'},
+ {at: 0.2, is: '"m 0 0 V 20"'},
+ {at: 0.6, is: '"m 0 0 V 40"'},
+ {at: 1, is: '"m 0 0 V 60"'},
+ {at: 1.4, is: '"m 0 0 V 80"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 v 10"',
+ to: '"m 0 0 v 60"'
+}, [
+ {at: -0.4, is: '"m 0 0 v -10"'},
+ {at: 0, is: '"m 0 0 v 10"'},
+ {at: 0.2, is: '"m 0 0 v 20"'},
+ {at: 0.6, is: '"m 0 0 v 40"'},
+ {at: 1, is: '"m 0 0 v 60"'},
+ {at: 1.4, is: '"m 0 0 v 80"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 S 32 42 52 62"',
+ to: '"m 0 0 S 37 47 57 67"'
+}, [
+ {at: -0.4, is: '"m 0 0 S 30 40 50 60"'},
+ {at: 0, is: '"m 0 0 S 32 42 52 62"'},
+ {at: 0.2, is: '"m 0 0 S 33 43 53 63"'},
+ {at: 0.6, is: '"m 0 0 S 35 45 55 65"'},
+ {at: 1, is: '"m 0 0 S 37 47 57 67"'},
+ {at: 1.4, is: '"m 0 0 S 39 49 59 69"'},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 s 32 42 52 62"',
+ to: '"m 0 0 s 37 47 57 67"'
+}, [
+ {at: -0.4, is: '"m 0 0 s 30 40 50 60"'},
+ {at: 0, is: '"m 0 0 s 32 42 52 62"'},
+ {at: 0.2, is: '"m 0 0 s 33 43 53 63"'},
+ {at: 0.6, is: '"m 0 0 s 35 45 55 65"'},
+ {at: 1, is: '"m 0 0 s 37 47 57 67"'},
+ {at: 1.4, is: '"m 0 0 s 39 49 59 69"'},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 T 20 50"',
+ to: '"m 0 0 T 30 70"'
+}, [
+ {at: -0.4, is: '"m 0 0 T 16 42"'},
+ {at: 0, is: '"m 0 0 T 20 50"'},
+ {at: 0.2, is: '"m 0 0 T 22 54"'},
+ {at: 0.6, is: '"m 0 0 T 26 62"'},
+ {at: 1, is: '"m 0 0 T 30 70"'},
+ {at: 1.4, is: '"m 0 0 T 34 78"'},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 0 0 t 20 50"',
+ to: '"m 0 0 t 30 70"'
+}, [
+ {at: -0.4, is: '"m 0 0 t 16 42"'},
+ {at: 0, is: '"m 0 0 t 20 50"'},
+ {at: 0.2, is: '"m 0 0 t 22 54"'},
+ {at: 0.6, is: '"m 0 0 t 26 62"'},
+ {at: 1, is: '"m 0 0 t 30 70"'},
+ {at: 1.4, is: '"m 0 0 t 34 78"'},
+]);
+
+// Mix relative and non-relative
+assertInterpolation({
+ property: 'd',
+ from: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z"',
+ to: '"M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z"'
+}, [
+ {at: -0.4, is: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 120 20 Z"'},
+ {at: 0, is: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z"'},
+ {at: 0.2, is: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 240 140 Z"'},
+ {at: 0.6, is: '"M 0 0 L 100 100 m 0 100 l 100 0 Z l 120 20 Z"'},
+ {at: 1, is: '"M 0 0 L 100 100 m 0 100 l 100 0 Z l 200 100 Z"'},
+ {at: 1.4, is: '"M 0 0 L 100 100 m 0 100 l 100 0 Z l 280 180 Z"'},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z"',
+ to: '"M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z"'
+}, [
+ {at: -0.4, is: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 160 100 Z"'},
+ {at: 0, is: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z"'},
+ {at: 0.2, is: '"M 0 0 L 100 100 M 100 200 L 200 200 Z L 220 100 Z"'},
+ {at: 0.6, is: '"M 0 0 L 100 100 m 0 100 l 100 0 Z l 60 -100 Z"'},
+ {at: 1, is: '"M 0 0 L 100 100 m 0 100 l 100 0 Z l 100 -100 Z"'},
+ {at: 1.4, is: '"M 0 0 L 100 100 m 0 100 l 100 0 Z l 140 -100 Z"'},
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120"',
+ to: '"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: '"m -30 -20 l 20 30 Z l 90 100 Z m 90 100 l 90 60 Z t 90 160"'},
+ {at: 0, is: '"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: '"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: '"M 70 80 L 90 110 Z L 80 110 Z M 120 160 L 210 220 Z T 250 280"'},
+ {at: 1, is: '"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: '"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: '"m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130"',
+ to: '"M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330"'
+}, [
+ {at: -0.4, is: '"m -30 -20 c 44 58 34 68 84 78 c 82 88 132 98 112 118"'},
+ {at: 0, is: '"m 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130"'},
+ {at: 0.2, is: '"m 30 40 c 38 46 28 56 78 66 c 94 106 144 116 124 136"'},
+ {at: 0.6, is: '"M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 286"'},
+ {at: 1, is: '"M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330"'},
+ {at: 1.4, is: '"M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 10 20 q 30 60 40 50 q 100 70 90 80"',
+ to: '"M 110 120 Q 130 160 140 150 Q 200 170 190 180"'
+}, [
+ {at: -0.4, is: '"m -30 -20 q 34 68 44 58 q 116 90 106 100"'},
+ {at: 0, is: '"m 10 20 q 30 60 40 50 q 100 70 90 80"'},
+ {at: 0.2, is: '"m 30 40 q 28 56 38 46 q 92 60 82 70"'},
+ {at: 0.6, is: '"M 70 80 Q 94 128 104 118 Q 180 158 170 168"'},
+ {at: 1, is: '"M 110 120 Q 130 160 140 150 Q 200 170 190 180"'},
+ {at: 1.4, is: '"M 150 160 Q 166 192 176 182 Q 220 182 210 192"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 10 20 s 30 60 40 50 s 100 70 90 80"',
+ to: '"M 110 120 S 130 160 140 150 S 200 170 190 180"'
+}, [
+ {at: -0.4, is: '"m -30 -20 s 34 68 44 58 s 116 90 106 100"'},
+ {at: 0, is: '"m 10 20 s 30 60 40 50 s 100 70 90 80"'},
+ {at: 0.2, is: '"m 30 40 s 28 56 38 46 s 92 60 82 70"'},
+ {at: 0.6, is: '"M 70 80 S 94 128 104 118 S 180 158 170 168"'},
+ {at: 1, is: '"M 110 120 S 130 160 140 150 S 200 170 190 180"'},
+ {at: 1.4, is: '"M 150 160 S 166 192 176 182 S 220 182 210 192"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 10 20 h 30 v 40 h 50 v 60 l 70 80"',
+ to: '"M 110 120 H 130 V 140 H 250 V 260 L 270 280"'
+}, [
+ {at: -0.4, is: '"m -30 -20 h 34 v 48 h 22 v 36 l 90 104"'},
+ {at: 0, is: '"m 10 20 h 30 v 40 h 50 v 60 l 70 80"'},
+ {at: 0.2, is: '"m 30 40 h 28 v 36 h 64 v 72 l 60 68"'},
+ {at: 0.6, is: '"M 70 80 H 94 V 108 H 186 V 204 L 226 248"'},
+ {at: 1, is: '"M 110 120 H 130 V 140 H 250 V 260 L 270 280"'},
+ {at: 1.4, is: '"M 150 160 H 166 V 172 H 314 V 316 L 314 312"'}
+]);
+
+assertInterpolation({
+ property: 'd',
+ from: '"m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50"',
+ to: '"M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100"'
+}, [
+ {at: -0.4, is: '"m 6 16 a -10 0 10 1 0 28 42 a 90 100 10 1 1 196 70"'},
+ {at: 0, is: '"m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50"'},
+ {at: 0.2, is: '"m 12 22 a 20 30 40 1 0 46 54 a 120 130 40 1 1 112 40"'},
+ {at: 0.6, is: '"M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108"'},
+ {at: 1, is: '"M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100"'},
+ {at: 1.4, is: '"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') | third_party/WebKit/Source/core/animation/animatable/AnimatablePath.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698