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: third_party/WebKit/LayoutTests/animations/interpolation/translate-interpolation.html

Issue 2680163004: Animations: Smooth interpolation for translate none (Closed)
Patch Set: createNoneValue isNoneValue Created 3 years, 10 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 | « third_party/WebKit/LayoutTests/animations/composition/translate-composition.html ('k') | third_party/WebKit/Source/core/animation/CSSTranslateInterpolationType.h » ('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 { 4 .parent {
5 translate: 100px 200px 300px; 5 translate: 100px 200px 300px;
6 } 6 }
7 .target { 7 .target {
8 width: 100px; 8 width: 100px;
9 height: 100px; 9 height: 100px;
10 background-color: black; 10 background-color: black;
11 translate: 10px; 11 translate: 10px;
12 } 12 }
13 .expected { 13 .expected {
14 background-color: green; 14 background-color: green;
15 } 15 }
16 </style> 16 </style>
17 <template id="target-template"> 17 <template id="target-template">
18 <div class="parent"> 18 <div class="parent">
19 <div class="target"></div> 19 <div class="target"></div>
20 </div> 20 </div>
21 </template> 21 </template>
22 <script src="resources/interpolation-test.js"></script> 22 <script src="resources/interpolation-test.js"></script>
23 <script> 23 <script>
24 assertInterpolation({ 24 assertInterpolation({
25 property: 'translate', 25 property: 'translate',
26 from: 'none',
27 to: '300px 200px 100px',
28 }, [
29 {at: -1, is: '-300px -200px -100px'},
30 {at: 0, is: 'none'},
31 {at: 0.25, is: '75px 50px 25px'},
32 {at: 0.75, is: '225px 150px 75px'},
33 {at: 1, is: '300px 200px 100px'},
34 {at: 2, is: '600px 400px 200px'},
35 ]);
36
37 assertInterpolation({
38 property: 'translate',
26 from: neutralKeyframe, 39 from: neutralKeyframe,
27 to: '20px', 40 to: '20px',
28 }, [ 41 }, [
29 {at: -1, is: '0px'}, 42 {at: -1, is: '0px'},
30 {at: 0, is: '10px'}, 43 {at: 0, is: '10px'},
31 {at: 0.25, is: '12.5px'}, 44 {at: 0.25, is: '12.5px'},
32 {at: 0.75, is: '17.5px'}, 45 {at: 0.75, is: '17.5px'},
33 {at: 1, is: '20px'}, 46 {at: 1, is: '20px'},
34 {at: 2, is: '30px'}, 47 {at: 2, is: '30px'},
35 ]); 48 ]);
36 49
37 assertInterpolation({ 50 assertInterpolation({
38 property: 'translate', 51 property: 'translate',
39 from: 'unset', 52 from: 'unset',
40 to: '20px', 53 to: '20px',
41 }, [ 54 }, [
42 {at: -1, is: '-20px'}, 55 {at: -1, is: '-20px'},
43 {at: 0, is: '0px'}, 56 {at: 0, is: 'none'},
44 {at: 0.25, is: '5px'}, 57 {at: 0.25, is: '5px'},
45 {at: 0.75, is: '15px'}, 58 {at: 0.75, is: '15px'},
46 {at: 1, is: '20px'}, 59 {at: 1, is: '20px'},
47 {at: 2, is: '40px'}, 60 {at: 2, is: '40px'},
48 ]); 61 ]);
49 62
50 assertInterpolation({ 63 assertInterpolation({
51 property: 'translate', 64 property: 'translate',
52 from: '-100px', 65 from: '-100px',
53 to: '100px', 66 to: '100px',
(...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after
150 {at: 1, is: '100px 200px 300px'}, 163 {at: 1, is: '100px 200px 300px'},
151 {at: 2, is: '0px 300px 400px'}, 164 {at: 2, is: '0px 300px 400px'},
152 ]); 165 ]);
153 166
154 assertInterpolation({ 167 assertInterpolation({
155 property: 'translate', 168 property: 'translate',
156 from: 'initial', 169 from: 'initial',
157 to: '200px 100px 200px', 170 to: '200px 100px 200px',
158 }, [ 171 }, [
159 {at: -1, is: '-200px -100px -200px'}, 172 {at: -1, is: '-200px -100px -200px'},
160 {at: 0, is: '0px'}, 173 {at: 0, is: 'none'},
161 {at: 0.25, is: '50px 25px 50px'}, 174 {at: 0.25, is: '50px 25px 50px'},
162 {at: 0.75, is: '150px 75px 150px'}, 175 {at: 0.75, is: '150px 75px 150px'},
163 {at: 1, is: '200px 100px 200px'}, 176 {at: 1, is: '200px 100px 200px'},
164 {at: 2, is: '400px 200px 400px'}, 177 {at: 2, is: '400px 200px 400px'},
165 ]); 178 ]);
166 179
167 assertInterpolation({ 180 assertInterpolation({
168 property: 'translate', 181 property: 'translate',
169 from: '200px 100px 200px', 182 from: '200px 100px 400px',
170 to: 'initial', 183 to: 'initial',
171 }, [ 184 }, [
172 {at: -1, is: '400px 200px 400px'}, 185 {at: -1, is: '400px 200px 800px'},
173 {at: 0, is: '200px 100px 200px'}, 186 {at: 0, is: '200px 100px 400px'},
174 {at: 0.25, is: '150px 75px 150px'}, 187 {at: 0.25, is: '150px 75px 300px'},
175 {at: 0.75, is: '50px 25px 50px'}, 188 {at: 0.75, is: '50px 25px 100px'},
176 {at: 1, is: '0px'}, 189 {at: 1, is: 'none'},
177 {at: 2, is: '-200px -100px -200px'}, 190 {at: 2, is: '-200px -100px -400px'},
178 ]); 191 ]);
179 192
180 assertInterpolation({ 193 assertInterpolation({
181 property: 'translate', 194 property: 'translate',
182 from: 'initial', 195 from: 'initial',
183 to: 'inherit', 196 to: 'inherit',
184 }, [ 197 }, [
185 {at: -1, is: '-100px -200px -300px'}, 198 {at: -1, is: '-100px -200px -300px'},
186 {at: 0, is: '0px'}, 199 {at: 0, is: 'none'},
187 {at: 0.25, is: '25px 50px 75px'}, 200 {at: 0.25, is: '25px 50px 75px'},
188 {at: 0.75, is: '75px 150px 225px'}, 201 {at: 0.75, is: '75px 150px 225px'},
189 {at: 1, is: '100px 200px 300px'}, 202 {at: 1, is: '100px 200px 300px'},
190 {at: 2, is: '200px 400px 600px'}, 203 {at: 2, is: '200px 400px 600px'},
191 ]); 204 ]);
192 205
193 assertInterpolation({ 206 assertInterpolation({
194 property: 'translate', 207 property: 'translate',
195 from: 'inherit', 208 from: 'inherit',
196 to: 'initial', 209 to: 'initial',
197 }, [ 210 }, [
198 {at: -1, is: '200px 400px 600px'}, 211 {at: -1, is: '200px 400px 600px'},
199 {at: 0, is: '100px 200px 300px'}, 212 {at: 0, is: '100px 200px 300px'},
200 {at: 0.25, is: '75px 150px 225px'}, 213 {at: 0.25, is: '75px 150px 225px'},
201 {at: 0.75, is: '25px 50px 75px'}, 214 {at: 0.75, is: '25px 50px 75px'},
202 {at: 1, is: '0px'}, 215 {at: 1, is: 'none'},
203 {at: 2, is: '-100px -200px -300px'}, 216 {at: 2, is: '-100px -200px -300px'},
204 ]); 217 ]);
205 </script> 218 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/translate-composition.html ('k') | third_party/WebKit/Source/core/animation/CSSTranslateInterpolationType.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698