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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation.html

Issue 1680803003: Add additive animation support for CSS property background-position (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove redundant braces Created 4 years, 9 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/background-position-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt » ('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 background-position: 80px 80px; 5 background-position: 80px 80px;
6 } 6 }
7 .target { 7 .target {
8 border: 3px solid skyblue; 8 border: 3px solid skyblue;
9 width: 100px; 9 width: 100px;
10 height: 100px; 10 height: 100px;
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after
89 {at: 0.75, is: 'calc(15px + 12.5%) calc(15px + 12.5%)'}, 89 {at: 0.75, is: 'calc(15px + 12.5%) calc(15px + 12.5%)'},
90 {at: 1, is: '20px 20px'}, 90 {at: 1, is: '20px 20px'},
91 ]); 91 ]);
92 92
93 // center-top 93 // center-top
94 assertInterpolation({ 94 assertInterpolation({
95 property: 'background-position', 95 property: 'background-position',
96 from: 'center center', 96 from: 'center center',
97 to: 'center top 20px', 97 to: 'center top 20px',
98 }, [ 98 }, [
99 {at: 0, is: 'left 50% top 50%'}, 99 {at: 0, is: '50% 50%'},
100 {at: 0.25, is: 'left 50% top calc(5px + 37.5%)'}, 100 {at: 0.25, is: '50% calc(5px + 37.5%)'},
101 {at: 0.5, is: 'left 50% top calc(10px + 25%)'}, 101 {at: 0.5, is: '50% calc(10px + 25%)'},
102 {at: 0.75, is: 'left 50% top calc(15px + 12.5%)'}, 102 {at: 0.75, is: '50% calc(15px + 12.5%)'},
103 {at: 1, is: 'left 50% top 20px'}, 103 {at: 1, is: '50% 20px'},
104 ]); 104 ]);
105 105
106 // right-top 106 // right-top
107 assertInterpolation({ 107 assertInterpolation({
108 property: 'background-position', 108 property: 'background-position',
109 from: 'center center', 109 from: 'center center',
110 to: 'right 20px top 20px', 110 to: 'right 20px top 20px',
111 }, [ 111 }, [
112 {at: 0, is: '50% 50%'}, 112 {at: 0, is: '50% 50%'},
113 {at: 0.25, is: 'calc(-5px + 62.5%) calc(5px + 37.5%)'}, 113 {at: 0.25, is: 'calc(-5px + 62.5%) calc(5px + 37.5%)'},
114 {at: 0.5, is: 'calc(-10px + 75%) calc(10px + 25%)'}, 114 {at: 0.5, is: 'calc(-10px + 75%) calc(10px + 25%)'},
115 {at: 0.75, is: 'calc(-15px + 87.5%) calc(15px + 12.5%)'}, 115 {at: 0.75, is: 'calc(-15px + 87.5%) calc(15px + 12.5%)'},
116 {at: 1, is: 'calc(-20px + 100%) 20px'}, 116 {at: 1, is: 'calc(-20px + 100%) 20px'},
117 ]); 117 ]);
118 118
119 // left-center 119 // left-center
120 assertInterpolation({ 120 assertInterpolation({
121 property: 'background-position', 121 property: 'background-position',
122 from: 'center center', 122 from: 'center center',
123 to: 'left 20px center', 123 to: 'left 20px center',
124 }, [ 124 }, [
125 {at: 0, is: 'left 50% top 50%'}, 125 {at: 0, is: '50% 50%'},
126 {at: 0.25, is: 'left calc(5px + 37.5%) top 50%'}, 126 {at: 0.25, is: 'calc(5px + 37.5%) 50%'},
127 {at: 0.5, is: 'left calc(10px + 25%) top 50%'}, 127 {at: 0.5, is: 'calc(10px + 25%) 50%'},
128 {at: 0.75, is: 'left calc(15px + 12.5%) top 50%'}, 128 {at: 0.75, is: 'calc(15px + 12.5%) 50%'},
129 {at: 1, is: 'left 20px top 50%'}, 129 {at: 1, is: '20px 50%'},
130 ]); 130 ]);
131 131
132 // center-center 132 // center-center
133 assertInterpolation({ 133 assertInterpolation({
134 property: 'background-position', 134 property: 'background-position',
135 from: 'center center', 135 from: 'center center',
136 to: 'center center', 136 to: 'center center',
137 }, [ 137 }, [
138 {at: 0, is: '50% 50%'}, 138 {at: 0, is: '50% 50%'},
139 {at: 0.25, is: '50% 50%'}, 139 {at: 0.25, is: '50% 50%'},
140 {at: 0.5, is: '50% 50%'}, 140 {at: 0.5, is: '50% 50%'},
141 {at: 0.75, is: '50% 50%'}, 141 {at: 0.75, is: '50% 50%'},
142 {at: 1, is: '50% 50%'}, 142 {at: 1, is: '50% 50%'},
143 ]); 143 ]);
144 144
145 // right-center 145 // right-center
146 assertInterpolation({ 146 assertInterpolation({
147 property: 'background-position', 147 property: 'background-position',
148 from: 'center center', 148 from: 'center center',
149 to: 'right 20px center', 149 to: 'right 20px center',
150 }, [ 150 }, [
151 {at: 0, is: 'left 50% top 50%'}, 151 {at: 0, is: '50% 50%'},
152 {at: 0.25, is: 'left calc(-5px + 62.5%) top 50%'}, 152 {at: 0.25, is: 'calc(-5px + 62.5%) 50%'},
153 {at: 0.5, is: 'left calc(-10px + 75%) top 50%'}, 153 {at: 0.5, is: 'calc(-10px + 75%) 50%'},
154 {at: 0.75, is: 'left calc(-15px + 87.5%) top 50%'}, 154 {at: 0.75, is: 'calc(-15px + 87.5%) 50%'},
155 {at: 1, is: 'left calc(-20px + 100%) top 50%'}, 155 {at: 1, is: 'calc(-20px + 100%) 50%'},
156 ]); 156 ]);
157 157
158 // left-bottom 158 // left-bottom
159 assertInterpolation({ 159 assertInterpolation({
160 property: 'background-position', 160 property: 'background-position',
161 from: 'center center', 161 from: 'center center',
162 to: 'left 20px bottom 20px', 162 to: 'left 20px bottom 20px',
163 }, [ 163 }, [
164 {at: 0, is: '50% 50%'}, 164 {at: 0, is: '50% 50%'},
165 {at: 0.25, is: 'calc(5px + 37.5%) calc(-5px + 62.5%)'}, 165 {at: 0.25, is: 'calc(5px + 37.5%) calc(-5px + 62.5%)'},
166 {at: 0.5, is: 'calc(10px + 25%) calc(-10px + 75%)'}, 166 {at: 0.5, is: 'calc(10px + 25%) calc(-10px + 75%)'},
167 {at: 0.75, is: 'calc(15px + 12.5%) calc(-15px + 87.5%)'}, 167 {at: 0.75, is: 'calc(15px + 12.5%) calc(-15px + 87.5%)'},
168 {at: 1, is: '20px calc(-20px + 100%)'}, 168 {at: 1, is: '20px calc(-20px + 100%)'},
169 ]); 169 ]);
170 170
171 // center-bottom 171 // center-bottom
172 assertInterpolation({ 172 assertInterpolation({
173 property: 'background-position', 173 property: 'background-position',
174 from: 'center center', 174 from: 'center center',
175 to: 'center bottom 20px', 175 to: 'center bottom 20px',
176 }, [ 176 }, [
177 {at: 0, is: 'left 50% top 50%'}, 177 {at: 0, is: '50% 50%'},
178 {at: 0.25, is: 'left 50% top calc(-5px + 62.5%)'}, 178 {at: 0.25, is: '50% calc(-5px + 62.5%)'},
179 {at: 0.5, is: 'left 50% top calc(-10px + 75%)'}, 179 {at: 0.5, is: '50% calc(-10px + 75%)'},
180 {at: 0.75, is: 'left 50% top calc(-15px + 87.5%)'}, 180 {at: 0.75, is: '50% calc(-15px + 87.5%)'},
181 {at: 1, is: 'left 50% top calc(-20px + 100%)'}, 181 {at: 1, is: '50% calc(-20px + 100%)'},
182 ]); 182 ]);
183 183
184 // right-bottom 184 // right-bottom
185 assertInterpolation({ 185 assertInterpolation({
186 property: 'background-position', 186 property: 'background-position',
187 from: 'center center', 187 from: 'center center',
188 to: 'right 20px bottom 20px', 188 to: 'right 20px bottom 20px',
189 }, [ 189 }, [
190 {at: 0, is: '50% 50%'}, 190 {at: 0, is: '50% 50%'},
191 {at: 0.25, is: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'}, 191 {at: 0.25, is: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'},
192 {at: 0.5, is: 'calc(-10px + 75%) calc(-10px + 75%)'}, 192 {at: 0.5, is: 'calc(-10px + 75%) calc(-10px + 75%)'},
193 {at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, 193 {at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'},
194 {at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'}, 194 {at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'},
195 ]); 195 ]);
196
197 // Single values
198 assertInterpolation({
199 property: 'background-position',
200 from: 'center',
201 to: 'bottom',
202 }, [
203 {at: 0, is: '50% 50%'},
204 {at: 0.25, is: '50% 62.5%'},
205 {at: 0.5, is: '50% 75%'},
206 {at: 0.75, is: '50% 87.5%'},
207 {at: 1, is: '50% 100%'},
208 ]);
196 </script> 209 </script>
197 </body> 210 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/background-position-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698