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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/svg-baseline-shift-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/shape-outside-interpolation.html ('k') | LayoutTests/animations/interpolation/svg-cx-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 .parent {
5 baseline-shift: 30px;
6 }
4 .target { 7 .target {
5 stroke: black; 8 stroke: black;
6 /* 9 /*
7 CSS transitions and animations for baseline-shift are broken unless a 10 CSS transitions and animations for baseline-shift are broken unless a
8 numerical underlying value is specified. See crbug.com/304007. 11 numerical underlying value is specified. See crbug.com/304007.
9 */ 12 */
10 baseline-shift: 0; 13 baseline-shift: 0px;
11 } 14 }
12 .expected { 15 .expected {
13 stroke: green; 16 stroke: green;
14 } 17 }
15 svg:nth-child(2n) { 18 svg:nth-child(2n) {
16 margin-right: 10px; 19 margin-right: 10px;
17 } 20 }
18 svg { 21 svg {
19 baseline-shift: 30px; 22 baseline-shift: 30px;
20 } 23 }
21 </style> 24 </style>
22 <body> 25 <body>
23 <template id="target-template"> 26 <template id="target-template">
24 <svg width="30" height="50"> 27 <svg width="30" height="50">
25 <!-- 28 <!--
26 We have to specify the target class on the text element because numerical 29 We have to specify the target class on the text element because numerical
27 values of baseline-shift are not inherited properly. See crbug.com/304006. 30 values of baseline-shift are not inherited properly. See crbug.com/304006.
28 --> 31 -->
29 <text x="0" y="25" font-size="10" class="target"> 32 <text x="0" y="25" font-size="10" class="target">
30 <tspan>T</tspan>T 33 <tspan>T</tspan>T
31 </text> 34 </text>
32 </svg> 35 </svg>
33 </template> 36 </template>
34 <script src="resources/interpolation-test.js"></script> 37 <script src="resources/interpolation-test.js"></script>
35 <script> 38 <script>
36 assertInterpolation({ 39 assertInterpolation({
37 property: 'baseline-shift', 40 property: 'baseline-shift',
41 from: '',
42 to: '20px',
43 }, [
44 {at: -0.25, is: '-5px'},
45 {at: 0, is: '0px'},
46 {at: 0.25, is: '5px'},
47 {at: 0.5, is: '10px'},
48 {at: 0.75, is: '15px'},
49 {at: 1, is: '20px'},
50 {at: 1.25, is: '25px'},
51 ]);
52
53 assertInterpolation({
54 property: 'baseline-shift',
55 from: 'initial',
56 to: '20px',
57 }, [
58 {at: -0.25, is: '-5px'},
59 {at: 0, is: '0px'},
60 {at: 0.25, is: '5px'},
61 {at: 0.5, is: '10px'},
62 {at: 0.75, is: '15px'},
63 {at: 1, is: '20px'},
64 {at: 1.25, is: '25px'},
65 ]);
66
67 assertInterpolation({
68 property: 'baseline-shift',
69 from: 'inherit',
70 to: '20px',
71 }, [
72 {at: -0.25, is: '32.5px'},
73 {at: 0, is: '30px'},
74 {at: 0.25, is: '27.5px'},
75 {at: 0.5, is: '25px'},
76 {at: 0.75, is: '22.5px'},
77 {at: 1, is: '20px'},
78 {at: 1.25, is: '17.5px'},
79 ]);
80
81 assertInterpolation({
82 property: 'baseline-shift',
83 from: 'unset',
84 to: '20px',
85 }, [
86 {at: -0.25, is: '-5px'},
87 {at: 0, is: '0px'},
88 {at: 0.25, is: '5px'},
89 {at: 0.5, is: '10px'},
90 {at: 0.75, is: '15px'},
91 {at: 1, is: '20px'},
92 {at: 1.25, is: '25px'},
93 ]);
94
95 assertInterpolation({
96 property: 'baseline-shift',
38 from: '-10px', 97 from: '-10px',
39 to: '10px' 98 to: '10px'
40 }, [ 99 }, [
41 {at: -0.25, is: '-15px'}, 100 {at: -0.25, is: '-15px'},
42 {at: 0, is: '-10px'}, 101 {at: 0, is: '-10px'},
43 {at: 0.25, is: '-5px'}, 102 {at: 0.25, is: '-5px'},
44 {at: 0.5, is: '0px'}, 103 {at: 0.5, is: '0px'},
45 {at: 0.75, is: '5px'}, 104 {at: 0.75, is: '5px'},
46 {at: 1, is: '10px'}, 105 {at: 1, is: '10px'},
47 {at: 1.25, is: '15px'}, 106 {at: 1.25, is: '15px'},
48 ]); 107 ]);
49 108
50 assertInterpolation({ 109 assertInterpolation({
51 property: 'baseline-shift', 110 property: 'baseline-shift',
52 from: 'baseline', 111 from: 'baseline',
53 to: '100px' 112 to: '100px',
54 }, [ 113 }, [
55 {at: -0.25, is: '-25px'}, 114 {at: -0.25, is: '-25px'},
56 {at: 0, is: '0px'}, 115 {at: 0, is: '0px'},
57 {at: 0.25, is: '25px'}, 116 {at: 0.25, is: '25px'},
58 {at: 0.5, is: '50px'}, 117 {at: 0.5, is: '50px'},
59 {at: 0.75, is: '75px'}, 118 {at: 0.75, is: '75px'},
60 {at: 1, is: '100px'}, 119 {at: 1, is: '100px'},
61 {at: 1.25, is: '125px'}, 120 {at: 1.25, is: '125px'},
62 ]); 121 ]);
63 assertInterpolation({ 122 assertInterpolation({
64 property: 'baseline-shift', 123 property: 'baseline-shift',
65 from: '100px', 124 from: '100px',
66 to: 'baseline' 125 to: 'baseline',
67 }, [ 126 }, [
68 {at: -0.25, is: '125px'}, 127 {at: -0.25, is: '125px'},
69 {at: 0, is: '100px'}, 128 {at: 0, is: '100px'},
70 {at: 0.25, is: '75px'}, 129 {at: 0.25, is: '75px'},
71 {at: 0.5, is: '50px'}, 130 {at: 0.5, is: '50px'},
72 {at: 0.75, is: '25px'}, 131 {at: 0.75, is: '25px'},
73 {at: 1, is: '0px'}, 132 {at: 1, is: '0px'},
74 {at: 1.25, is: '-25px'}, 133 {at: 1.25, is: '-25px'},
75 ]); 134 ]);
76 assertNoInterpolation({ 135 assertNoInterpolation({
77 property: 'baseline-shift', 136 property: 'baseline-shift',
78 from: 'sub', 137 from: 'sub',
79 to: '100px' 138 to: '100px',
80 }); 139 });
81 assertNoInterpolation({ 140 assertNoInterpolation({
82 property: 'baseline-shift', 141 property: 'baseline-shift',
83 from: '100px', 142 from: '100px',
84 to: 'super' 143 to: 'super',
85 }); 144 });
86 assertInterpolation({ 145 assertInterpolation({
87 property: 'baseline-shift', 146 property: 'baseline-shift',
88 from: '50mm', 147 from: '50mm',
89 to: 'inherit' 148 to: 'inherit',
90 }, [ 149 }, [
91 {at: -0.25, is: '228.720474243164px'}, 150 {at: -0.25, is: '228.720474243164px'},
92 {at: 0, is: '50mm'}, 151 {at: 0, is: '50mm'},
93 {at: 0.25, is: '149.232284545898px'}, 152 {at: 0.25, is: '149.232284545898px'},
94 {at: 0.75, is: '69.7440948486328px'}, 153 {at: 0.75, is: '69.7440948486328px'},
95 {at: 1, is: '30px'}, 154 {at: 1, is: '30px'},
96 {at: 1.25, is: '-9.74409484863281px'}, 155 {at: 1.25, is: '-9.74409484863281px'},
97 ]); 156 ]);
98 assertInterpolation({ 157 assertInterpolation({
99 property: 'baseline-shift', 158 property: 'baseline-shift',
100 from: '10px', 159 from: '10px',
101 to: '21em' 160 to: '21em',
102 }, [ 161 }, [
103 {at: -0.25, is: '-40px'}, 162 {at: -0.25, is: '-40px'},
104 {at: 0, is: '10px'}, 163 {at: 0, is: '10px'},
105 {at: 0.25, is: '60px'}, 164 {at: 0.25, is: '60px'},
106 {at: 0.75, is: '160px'}, 165 {at: 0.75, is: '160px'},
107 {at: 1, is: '210px'}, 166 {at: 1, is: '210px'},
108 {at: 1.25, is: '260px'}, 167 {at: 1.25, is: '260px'},
109 ]); 168 ]);
110 assertInterpolation({ 169 assertInterpolation({
111 property: 'baseline-shift', 170 property: 'baseline-shift',
112 from: 'inherit', 171 from: 'inherit',
113 to: '33em' 172 to: '33em',
114 }, [ 173 }, [
115 {at: -0.25, is: '-45px'}, 174 {at: -0.25, is: '-45px'},
116 {at: 0, is: '30px'}, 175 {at: 0, is: '30px'},
117 {at: 0.25, is: '105px'}, 176 {at: 0.25, is: '105px'},
118 {at: 0.75, is: '255px'}, 177 {at: 0.75, is: '255px'},
119 {at: 1, is: '330px'}, 178 {at: 1, is: '330px'},
120 {at: 1.25, is: '405px'}, 179 {at: 1.25, is: '405px'},
121 ]); 180 ]);
122 181
123 </script> 182 </script>
124 </body> 183 </body>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/shape-outside-interpolation.html ('k') | LayoutTests/animations/interpolation/svg-cx-interpolation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698