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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/svg-cy-interpolation.html

Issue 1265873002: Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased Created 5 years, 4 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/animations/interpolation/svg-cx-interpolation.html ('k') | LayoutTests/animations/interpolation/svg-fill-interpolation.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <meta charset="UTF-8"> 2 <meta charset="UTF-8">
3 <style> 3 <style>
4 svg { 4 .container {
5 display: inline-block;
6 }
7 .parent {
5 cy: 100px; 8 cy: 100px;
6 } 9 }
7 .target { 10 .target {
8 stroke: black;
9 font-size: 16px; 11 font-size: 16px;
12 cy: 50px;
10 } 13 }
11 .expected { 14 .expected {
12 stroke: green; 15 fill: green;
13 } 16 }
14 </style> 17 </style>
15 <body> 18 <body>
16 <template id="target-template"> 19 <template id="target-template">
17 <svg height="200" width="10"> 20 <svg height="200" width="20">
18 <circle cx="50%" cy="50%" r="25%" class="target"> 21 <circle cx="50%" cy="50%" r="10" class="target">
19 </svg> 22 </svg>
20 </template> 23 </template>
21 <script src="resources/interpolation-test.js"></script> 24 <script src="resources/interpolation-test.js"></script>
22 <script> 25 <script>
23 assertInterpolation({ 26 assertInterpolation({
24 property: 'cy', 27 property: 'cy',
28 from: '',
29 to: '20px',
30 }, [
31 {at: -0.25, is: '57.5px'},
32 {at: 0, is: '50px'},
33 {at: 0.25, is: '42.5px'},
34 {at: 0.5, is: '35px'},
35 {at: 0.75, is: '27.5px'},
36 {at: 1, is: '20px'},
37 {at: 1.25, is: '12.5px'},
38 ]);
39
40 assertInterpolation({
41 property: 'cy',
42 from: 'initial',
43 to: '20px',
44 }, [
45 {at: -0.25, is: '-5px'},
46 {at: 0, is: '0px'},
47 {at: 0.25, is: '5px'},
48 {at: 0.5, is: '10px'},
49 {at: 0.75, is: '15px'},
50 {at: 1, is: '20px'},
51 {at: 1.25, is: '25px'},
52 ]);
53
54 assertInterpolation({
55 property: 'cy',
56 from: 'inherit',
57 to: '20px',
58 }, [
59 {at: -0.25, is: '120px'},
60 {at: 0, is: '100px'},
61 {at: 0.25, is: '80px'},
62 {at: 0.5, is: '60px'},
63 {at: 0.75, is: '40px'},
64 {at: 1, is: '20px'},
65 {at: 1.25, is: '0px'},
66 ]);
67
68 assertInterpolation({
69 property: 'cy',
70 from: 'unset',
71 to: '20px',
72 }, [
73 {at: -0.25, is: '-5px'},
74 {at: 0, is: '0px'},
75 {at: 0.25, is: '5px'},
76 {at: 0.5, is: '10px'},
77 {at: 0.75, is: '15px'},
78 {at: 1, is: '20px'},
79 {at: 1.25, is: '25px'},
80 ]);
81
82 assertInterpolation({
83 property: 'cy',
25 from: '-10px', 84 from: '-10px',
26 to: '10px' 85 to: '10px',
27 }, [ 86 }, [
28 {at: -0.25, is: '-15px'}, 87 {at: -0.25, is: '-15px'},
29 {at: 0, is: '-10px'}, 88 {at: 0, is: '-10px'},
30 {at: 0.25, is: '-5px'}, 89 {at: 0.25, is: '-5px'},
31 {at: 0.5, is: '0px'}, 90 {at: 0.5, is: '0px'},
32 {at: 0.75, is: '5px'}, 91 {at: 0.75, is: '5px'},
33 {at: 1, is: '10px'}, 92 {at: 1, is: '10px'},
34 {at: 1.25, is: '15px'}, 93 {at: 1.25, is: '15px'},
35 ]); 94 ]);
36 assertInterpolation({ 95 assertInterpolation({
37 property: 'cy', 96 property: 'cy',
38 from: '-20px', 97 from: '-20px',
39 to: '30em' 98 to: '30em',
40 }, [ 99 }, [
41 {at: -0.25, is: '-145px'}, 100 {at: -0.25, is: '-145px'},
42 {at: 0, is: '-20px'}, 101 {at: 0, is: '-20px'},
43 {at: 0.25, is: '105px'}, 102 {at: 0.25, is: '105px'},
44 {at: 0.5, is: '230px'}, 103 {at: 0.5, is: '230px'},
45 {at: 0.75, is: '355px'}, 104 {at: 0.75, is: '355px'},
46 {at: 1, is: '30em'}, 105 {at: 1, is: '30em'},
47 {at: 1.25, is: '605px'}, 106 {at: 1.25, is: '605px'},
48 ]); 107 ]);
49 assertInterpolation({ 108 assertInterpolation({
50 property: 'cy', 109 property: 'cy',
51 from: 'inherit', 110 from: 'inherit',
52 to: '140px' 111 to: '140px',
53 }, [ 112 }, [
54 {at: -0.25, is: '90px'}, 113 {at: -0.25, is: '90px'},
55 {at: 0, is: '100px'}, 114 {at: 0, is: '100px'},
56 {at: 0.25, is: '110px'}, 115 {at: 0.25, is: '110px'},
57 {at: 0.5, is: '120px'}, 116 {at: 0.5, is: '120px'},
58 {at: 0.75, is: '130px'}, 117 {at: 0.75, is: '130px'},
59 {at: 1, is: '140px'}, 118 {at: 1, is: '140px'},
60 {at: 1.25, is: '150px'}, 119 {at: 1.25, is: '150px'},
61 ]); 120 ]);
62 assertInterpolation({ 121 assertInterpolation({
63 property: 'cy', 122 property: 'cy',
64 from: '-10', 123 from: '-10',
65 to: '10' 124 to: '10',
66 }, [ 125 }, [
67 {at: -0.25, is: '-15'}, 126 {at: -0.25, is: '-15'},
68 {at: 0, is: '-10'}, 127 {at: 0, is: '-10'},
69 {at: 0.25, is: '-5'}, 128 {at: 0.25, is: '-5'},
70 {at: 0.5, is: '0'}, 129 {at: 0.5, is: '0'},
71 {at: 0.75, is: '5'}, 130 {at: 0.75, is: '5'},
72 {at: 1, is: '10'}, 131 {at: 1, is: '10'},
73 {at: 1.25, is: '15'}, 132 {at: 1.25, is: '15'},
74 ]); 133 ]);
75 </script> 134 </script>
76 </body> 135 </body>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/svg-cx-interpolation.html ('k') | LayoutTests/animations/interpolation/svg-fill-interpolation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698