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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation.html

Issue 1640643002: Add additive animation support for CSS property clip (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@_propertyInterpolationTypesMapping
Patch Set: Rebased Created 4 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/clip-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-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 border-image-width: 100px; 5 border-image-width: 100px;
6 } 6 }
7 .target { 7 .target {
8 width: 80px; 8 width: 80px;
9 height: 80px; 9 height: 80px;
10 background-color: black; 10 background-color: black;
(...skipping 17 matching lines...) Expand all
28 }, [ 28 }, [
29 {at: -0.3, is: '7px'}, 29 {at: -0.3, is: '7px'},
30 {at: 0, is: '10px'}, 30 {at: 0, is: '10px'},
31 {at: 0.3, is: '13px'}, 31 {at: 0.3, is: '13px'},
32 {at: 0.6, is: '16px'}, 32 {at: 0.6, is: '16px'},
33 {at: 1, is: '20px'}, 33 {at: 1, is: '20px'},
34 {at: 1.5, is: '25px'}, 34 {at: 1.5, is: '25px'},
35 {at: 5, is: '60px'}, 35 {at: 5, is: '60px'},
36 {at: 10, is: '110px'}, 36 {at: 10, is: '110px'},
37 ]); 37 ]);
38 assertInterpolation({ 38 assertNoInterpolation({
39 property: 'border-image-width', 39 property: 'border-image-width',
40 from: 'initial', 40 from: 'initial',
41 to: '20px', 41 to: '20px',
42 }, [ 42 });
43 {at: -0.3, is: '1'},
44 {at: 0, is: '1'},
45 {at: 0.3, is: '1'},
46 {at: 0.6, is: '20px'},
47 {at: 1, is: '20px'},
48 {at: 1.5, is: '20px'},
49 {at: 5, is: '20px'},
50 {at: 10, is: '20px'},
51 ]);
52 assertInterpolation({ 43 assertInterpolation({
53 property: 'border-image-width', 44 property: 'border-image-width',
54 from: 'inherit', 45 from: 'inherit',
55 to: '20px', 46 to: '20px',
56 }, [ 47 }, [
57 {at: -0.3, is: '124px'}, 48 {at: -0.3, is: '124px'},
58 {at: 0, is: '100px'}, 49 {at: 0, is: '100px'},
59 {at: 0.3, is: '76px'}, 50 {at: 0.3, is: '76px'},
60 {at: 0.6, is: '52px'}, 51 {at: 0.6, is: '52px'},
61 {at: 1, is: '20px'}, 52 {at: 1, is: '20px'},
62 {at: 1.5, is: '0px'}, 53 {at: 1.5, is: '0px'},
63 {at: 5, is: '0px'}, 54 {at: 5, is: '0px'},
64 {at: 10, is: '0px'}, 55 {at: 10, is: '0px'},
65 ]); 56 ]);
66 assertInterpolation({ 57 assertNoInterpolation({
67 property: 'border-image-width', 58 property: 'border-image-width',
68 from: 'unset', 59 from: 'unset',
69 to: '20px', 60 to: '20px',
70 }, [ 61 });
71 {at: -0.3, is: '1'},
72 {at: 0, is: '1'},
73 {at: 0.3, is: '1'},
74 {at: 0.6, is: '20px'},
75 {at: 1, is: '20px'},
76 {at: 1.5, is: '20px'},
77 {at: 5, is: '20px'},
78 {at: 10, is: '20px'},
79 ]);
80 assertInterpolation({ 62 assertInterpolation({
81 property: 'border-image-width', 63 property: 'border-image-width',
82 from: '0px', 64 from: '0px',
83 to: '20px' 65 to: '20px'
84 }, [ 66 }, [
85 {at: -0.3, is: '0px'}, // CSS border-image-width can't be negative. 67 {at: -0.3, is: '0px'}, // CSS border-image-width can't be negative.
86 {at: 0, is: '0px'}, 68 {at: 0, is: '0px'},
87 {at: 0.3, is: '6px'}, 69 {at: 0.3, is: '6px'},
88 {at: 0.6, is: '12px'}, 70 {at: 0.6, is: '12px'},
89 {at: 1, is: '20px'}, 71 {at: 1, is: '20px'},
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after
153 }, [ 135 }, [
154 // Percentages are relative to the size of the border image area, which is 120 px. 136 // Percentages are relative to the size of the border image area, which is 120 px.
155 {at: -0.3, is: 'calc(13px + -6%)'}, // Should be parsed as 13px - 7px = 6px 137 {at: -0.3, is: 'calc(13px + -6%)'}, // Should be parsed as 13px - 7px = 6px
156 {at: 0, is: '10px'}, 138 {at: 0, is: '10px'},
157 {at: 0.3, is: 'calc(7px + 6%)'}, // Should be parsed as 7px + 7px = 14px 139 {at: 0.3, is: 'calc(7px + 6%)'}, // Should be parsed as 7px + 7px = 14px
158 {at: 0.6, is: 'calc(4px + 12%)'}, // Should be parsed as 4px + 14px = 18px 140 {at: 0.6, is: 'calc(4px + 12%)'}, // Should be parsed as 4px + 14px = 18px
159 {at: 1, is: '20%'}, // Should be parsed as 24px 141 {at: 1, is: '20%'}, // Should be parsed as 24px
160 {at: 1.5, is: 'calc(-5px + 30%)'}, // Should be parsed as -5px + 36px = 31px 142 {at: 1.5, is: 'calc(-5px + 30%)'}, // Should be parsed as -5px + 36px = 31px
161 ]); 143 ]);
162 144
163 assertInterpolation({ 145 assertNoInterpolation({
164 property: 'border-image-width', 146 property: 'border-image-width',
165 from: '10px', 147 from: '10px',
166 to: '20' 148 to: '20'
167 }, [ 149 });
168 {at: -0.3, is: '10px'}, 150 assertNoInterpolation({
169 {at: 0, is: '10px'},
170 {at: 0.3, is: '10px'},
171 {at: 0.6, is: '20'},
172 {at: 1, is: '20'},
173 {at: 1.5, is: '20'},
174 ]);
175 assertInterpolation({
176 property: 'border-image-width', 151 property: 'border-image-width',
177 from: '10', 152 from: '10',
178 to: '20px' 153 to: '20px'
179 }, [ 154 });
180 {at: -0.3, is: '10'}, 155 assertNoInterpolation({
181 {at: 0, is: '10'},
182 {at: 0.3, is: '10'},
183 {at: 0.6, is: '20px'},
184 {at: 1, is: '20px'},
185 {at: 1.5, is: '20px'},
186 ]);
187 assertInterpolation({
188 property: 'border-image-width', 156 property: 'border-image-width',
189 from: '10%', 157 from: '10%',
190 to: '20' 158 to: '20'
191 }, [ 159 });
192 {at: -0.3, is: '10%'}, 160 assertNoInterpolation({
193 {at: 0, is: '10%'}, 161 property: 'border-image-width'
194 {at: 0.3, is: '10%'}, 162 , from: '10',
195 {at: 0.6, is: '20'},
196 {at: 1, is: '20'},
197 {at: 1.5, is: '20'},
198 ]);
199 assertInterpolation({
200 property: 'border-image-width',
201 from: '10',
202 to: '20%' 163 to: '20%'
203 }, [ 164 });
204 {at: -0.3, is: '10'},
205 {at: 0, is: '10'},
206 {at: 0.3, is: '10'},
207 {at: 0.6, is: '20%'},
208 {at: 1, is: '20%'},
209 {at: 1.5, is: '20%'},
210 ]);
211 </script> 165 </script>
212 </body> 166 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/clip-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698