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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2280553002: Allow interpolation of background-size values with keywords in CSS Animations (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove DCHECK Created 4 years, 3 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-size-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation-expected.txt » ('j') | third_party/WebKit/Source/core/style/FillLayer.h » ('J')
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-size: 100px 100px; 5 background-size: 100px 100px;
6 } 6 }
7 .target { 7 .target {
8 width: 80px; 8 width: 80px;
9 height: 100px; 9 height: 100px;
10 display: inline-block; 10 display: inline-block;
(...skipping 23 matching lines...) Expand all
34 {at: -0.25, is: ' 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px'}, 34 {at: -0.25, is: ' 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px'},
35 {at: 0, is: '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'}, 35 {at: 0, is: '10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px, 10.0px 10.0px'},
36 {at: 0.25, is: '12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px'}, 36 {at: 0.25, is: '12.5px 12.5px, 7.5px 7.5px, 12.5px 12.5px, 7.5px 7.5px'},
37 {at: 0.5, is: '15.0px 15.0px, 5.0px 5.0px, 15.0px 15.0px, 5.0px 5.0px'}, 37 {at: 0.5, is: '15.0px 15.0px, 5.0px 5.0px, 15.0px 15.0px, 5.0px 5.0px'},
38 {at: 0.75, is: '17.5px 17.5px, 2.5px 2.5px, 17.5px 17.5px, 2.5px 2.5px'}, 38 {at: 0.75, is: '17.5px 17.5px, 2.5px 2.5px, 17.5px 17.5px, 2.5px 2.5px'},
39 {at: 1, is: '20.0px 20.0px, 0.0px 0.0px, 20.0px 20.0px, 0.0px 0.0px'}, 39 {at: 1, is: '20.0px 20.0px, 0.0px 0.0px, 20.0px 20.0px, 0.0px 0.0px'},
40 {at: 1.25, is: '22.5px 22.5px, 0.0px 0.0px, 22.5px 22.5px, 0.0px 0.0px'}, 40 {at: 1.25, is: '22.5px 22.5px, 0.0px 0.0px, 22.5px 22.5px, 0.0px 0.0px'},
41 ]); 41 ]);
42 42
43 // initial 43 // initial
44 // TODO(alancutter): Fix transitions: https://crbug.com/513127
45 assertNoInterpolation({ 44 assertNoInterpolation({
46 property: 'background-size', 45 property: 'background-size',
47 from: 'initial', 46 from: 'initial',
48 to: '20px 20px, 0px 0px', 47 to: '20px 20px, 0px 0px',
49 }); 48 });
50 49
51 // inherit 50 // inherit
52 assertInterpolation({ 51 assertInterpolation({
53 property: 'background-size', 52 property: 'background-size',
54 from: 'inherit', 53 from: 'inherit',
55 to: '20px 20px, 0px 0px', 54 to: '20px 20px, 0px 0px',
56 }, [ 55 }, [
57 {at: -0.25, is: '120px 120px, 125px 125px, 120px 120px, 125px 125px'}, 56 {at: -0.25, is: '120px 120px, 125px 125px, 120px 120px, 125px 125px'},
58 {at: 0, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 57 {at: 0, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
59 {at: 0.25, is: ' 80px 80px, 75px 75px, 80px 80px, 75px 75px'}, 58 {at: 0.25, is: ' 80px 80px, 75px 75px, 80px 80px, 75px 75px'},
60 {at: 0.5, is: ' 60px 60px, 50px 50px, 60px 60px, 50px 50px'}, 59 {at: 0.5, is: ' 60px 60px, 50px 50px, 60px 60px, 50px 50px'},
61 {at: 0.75, is: ' 40px 40px, 25px 25px, 40px 40px, 25px 25px'}, 60 {at: 0.75, is: ' 40px 40px, 25px 25px, 40px 40px, 25px 25px'},
62 {at: 1, is: ' 20px 20px, 0px 0px, 20px 20px, 0px 0px'}, 61 {at: 1, is: ' 20px 20px, 0px 0px, 20px 20px, 0px 0px'},
63 {at: 1.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 62 {at: 1.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
64 ]); 63 ]);
65 64
66 // unset 65 // unset
67 // TODO(alancutter): Fix transitions: https://crbug.com/513127
68 assertNoInterpolation({ 66 assertNoInterpolation({
69 property: 'background-size', 67 property: 'background-size',
70 from: 'unset', 68 from: 'unset',
71 to: '20px 20px, 0px 0px', 69 to: '20px 20px, 0px 0px',
72 }); 70 });
73 71
74 // Matched keywords in size value list. 72 // Matched keywords in size value list.
75 assertInterpolation({ 73 assertInterpolation({
76 property: 'background-size', 74 property: 'background-size',
77 from: '0px 0px, 0px 0px, contain, cover', 75 from: '0px auto, 0px 0px, contain, cover',
78 to: '40px 40px, 40px 40px, contain, cover', 76 to: '40px auto, 40px 40px, contain, cover',
79 }, [ 77 }, [
80 {at: -0.25, is: ' 0px 0px, 0px 0px, contain, cover'}, 78 {at: -0.25, is: ' 0px auto, 0px 0px, contain, cover'},
81 {at: 0, is: ' 0px 0px, 0px 0px, contain, cover'}, 79 {at: 0, is: ' 0px auto, 0px 0px, contain, cover'},
82 {at: 0.25, is: '10px 10px, 10px 10px, contain, cover'}, 80 {at: 0.25, is: '10px auto, 10px 10px, contain, cover'},
83 {at: 0.5, is: '20px 20px, 20px 20px, contain, cover'}, 81 {at: 0.5, is: '20px auto, 20px 20px, contain, cover'},
84 {at: 0.75, is: '30px 30px, 30px 30px, contain, cover'}, 82 {at: 0.75, is: '30px auto, 30px 30px, contain, cover'},
85 {at: 1, is: '40px 40px, 40px 40px, contain, cover'}, 83 {at: 1, is: '40px auto, 40px 40px, contain, cover'},
86 {at: 1.25, is: '50px 50px, 50px 50px, contain, cover'}, 84 {at: 1.25, is: '50px auto, 50px 50px, contain, cover'},
87 ]); 85 ]);
88 86
89 // Mismatched keywords in size value list. 87 // Mismatched keywords in size value list.
90 assertNoInterpolation({ 88 assertNoInterpolation({
91 property: 'background-size', 89 property: 'background-size',
92 from: '0px 0px, 0px 0px, contain, cover', 90 from: '0px 0px, 0px 0px, contain, cover',
93 to: '40px 40px, 40px 40px, cover, contain', 91 to: '40px 40px, 40px 40px, cover, contain',
94 }); 92 });
95 93
94 assertNoInterpolation({
95 property: 'background-size',
96 from: '0px auto, 0px 0px',
97 to: 'auto 40px, 40px 40px',
98 });
99
96 // Equal number of size values as background images. 100 // Equal number of size values as background images.
97 assertInterpolation({ 101 assertInterpolation({
98 property: 'background-size', 102 property: 'background-size',
99 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 103 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
100 to: '20px 20px, 40px 40px, 60px 60px, 100px 100px', 104 to: '20px 20px, 40px 40px, 60px 60px, 100px 100px',
101 }, [ 105 }, [
102 {at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 106 {at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
103 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 107 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
104 {at: 0.25, is: ' 5px 5px, 10px 10px, 15px 15px, 25px 25px'}, 108 {at: 0.25, is: ' 5px 5px, 10px 10px, 15px 15px, 25px 25px'},
105 {at: 0.5, is: '10px 10px, 20px 20px, 30px 30px, 50px 50px'}, 109 {at: 0.5, is: '10px 10px, 20px 20px, 30px 30px, 50px 50px'},
(...skipping 10 matching lines...) Expand all
116 }, [ 120 }, [
117 {at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 121 {at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
118 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 122 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
119 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 123 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
120 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 124 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
121 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 125 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
122 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 126 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
123 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 127 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
124 ]); 128 ]);
125 129
130 assertInterpolation({
131 property: 'background-size',
132 from: '0px',
133 to: '80px',
134 }, [
135 {at: -0.25, is: ' 0px, 0px, 0px, 0px'},
136 {at: 0, is: ' 0px, 0px, 0px, 0px'},
137 {at: 0.25, is: ' 20px, 20px, 20px, 20px'},
138 {at: 0.5, is: ' 40px, 40px, 40px, 40px'},
139 {at: 0.75, is: ' 60px, 60px, 60px, 60px'},
140 {at: 1, is: ' 80px, 80px, 80px, 80px'},
141 {at: 1.25, is: '100px, 100px, 100px, 100px'},
142 ]);
143
126 // Mismatched numbers of size values. 144 // Mismatched numbers of size values.
127 assertInterpolation({ 145 assertInterpolation({
128 property: 'background-size', 146 property: 'background-size',
129 from: '0px 0px, 80px 0px', 147 from: '0px 0px, 80px 0px',
130 to: '40px 40px, 80px 80px, 0px 80px', 148 to: '40px 40px, 80px 80px, 0px 80px',
131 }, [ 149 }, [
132 {at: -0.25, is: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'}, 150 {at: -0.25, is: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'},
133 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 151 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
134 {at: 0.25, is: '10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 152 {at: 0.25, is: '10px 10px, 80px 20px, 0px 20px, 70px 10px'},
135 {at: 0.5, is: '20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 153 {at: 0.5, is: '20px 20px, 80px 40px, 0px 40px, 60px 20px'},
136 {at: 0.75, is: '30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 154 {at: 0.75, is: '30px 30px, 80px 60px, 0px 60px, 50px 30px'},
137 {at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 155 {at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'},
138 {at: 1.25, is: '50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 156 {at: 1.25, is: '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
139 ]); 157 ]);
140 </script> 158 </script>
141 </body> 159 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/background-size-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/background-size-interpolation-expected.txt » ('j') | third_party/WebKit/Source/core/style/FillLayer.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698