OLD | NEW |
---|---|
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 Loading... | |
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 | |
alancutter (OOO until 2018)
2016/08/25 06:08:16
These are stale TODOs, bug has been fixed a while
| |
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 Loading... | |
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> |
OLD | NEW |