| OLD | NEW |
|---|
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <meta charset="utf-8"> | 2 <meta charset="utf-8"> |
| 3 <style> | 3 <style> |
| 4 .parent { |
| 5 background-position: 80px 80px; |
| 6 } |
| 4 .target { | 7 .target { |
| 5 border: 3px solid skyblue; | 8 border: 3px solid skyblue; |
| 6 width: 100px; | 9 width: 100px; |
| 7 height: 100px; | 10 height: 100px; |
| 8 background-image: linear-gradient(to right, green, green); | 11 background-image: linear-gradient(to right, green, green); |
| 9 background-size: 20px 20px; | 12 background-size: 20px 20px; |
| 10 background-repeat: no-repeat; | 13 background-repeat: no-repeat; |
| 11 display: inline-block; | 14 background-position: 10px 10px; |
| 15 display: inline-block; |
| 12 } | 16 } |
| 13 | 17 |
| 14 .actual { | 18 .actual { |
| 15 background-image: linear-gradient(to right, red, red); | 19 background-image: linear-gradient(to right, red, red); |
| 16 } | 20 } |
| 17 .expected { | 21 .expected { |
| 18 margin-left: -106px; | 22 margin-left: -106px; |
| 19 } | 23 } |
| 20 </style> | 24 </style> |
| 21 <body> | 25 <body> |
| 22 <script src="resources/interpolation-test.js"></script> | 26 <script src="resources/interpolation-test.js"></script> |
| 23 <script> | 27 <script> |
| 28 // neutral |
| 29 assertInterpolation({ |
| 30 property: 'background-position', |
| 31 from: '', |
| 32 to: 'left 20px top 20px', |
| 33 }, [ |
| 34 {at: 0, is: '10px 10px'}, |
| 35 {at: 0.25, is: '12.5px 12.5px'}, |
| 36 {at: 0.5, is: '15px 15px'}, |
| 37 {at: 0.75, is: '17.5px 17.5px'}, |
| 38 {at: 1, is: '20px 20px'}, |
| 39 ]); |
| 40 |
| 41 // initial |
| 42 assertInterpolation({ |
| 43 property: 'background-position', |
| 44 from: 'initial', |
| 45 to: 'left 20px top 20px', |
| 46 }, [ |
| 47 {at: 0, is: '0% 0%'}, |
| 48 {at: 0.25, is: '5px 5px'}, |
| 49 {at: 0.5, is: '10px 10px'}, |
| 50 {at: 0.75, is: '15px 15px'}, |
| 51 {at: 1, is: '20px 20px'}, |
| 52 ]); |
| 53 |
| 54 // inherit |
| 55 assertInterpolation({ |
| 56 property: 'background-position', |
| 57 from: 'inherit', |
| 58 to: 'left 20px top 20px', |
| 59 }, [ |
| 60 {at: 0, is: '80px 80px'}, |
| 61 {at: 0.25, is: '65px 65px'}, |
| 62 {at: 0.5, is: '50px 50px'}, |
| 63 {at: 0.75, is: '35px 35px'}, |
| 64 {at: 1, is: '20px 20px'}, |
| 65 ]); |
| 66 |
| 67 // unset |
| 68 assertInterpolation({ |
| 69 property: 'background-position', |
| 70 from: 'unset', |
| 71 to: 'left 20px top 20px', |
| 72 }, [ |
| 73 {at: 0, is: '0% 0%'}, |
| 74 {at: 0.25, is: '5px 5px'}, |
| 75 {at: 0.5, is: '10px 10px'}, |
| 76 {at: 0.75, is: '15px 15px'}, |
| 77 {at: 1, is: '20px 20px'}, |
| 78 ]); |
| 24 | 79 |
| 25 // left-top | 80 // left-top |
| 26 assertInterpolation({ | 81 assertInterpolation({ |
| 27 property: 'background-position', | 82 property: 'background-position', |
| 28 from: 'center center', | 83 from: 'center center', |
| 29 to: 'left 20px top 20px', | 84 to: 'left 20px top 20px', |
| 30 }, [ | 85 }, [ |
| 31 {at: 0, is: '50% 50%'}, | 86 {at: 0, is: '50% 50%'}, |
| 32 {at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + 5px)'}, | 87 {at: 0.25, is: 'calc(5px + 37.5%) calc(5px + 37.5%)'}, |
| 33 {at: 0.50, is: 'calc(25% + 10px) calc(25% + 10px)'}, | 88 {at: 0.5, is: 'calc(10px + 25%) calc(10px + 25%)'}, |
| 34 {at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + 15px)'}, | 89 {at: 0.75, is: 'calc(15px + 12.5%) calc(15px + 12.5%)'}, |
| 35 {at: 1, is: '20px 20px'}, | 90 {at: 1, is: '20px 20px'}, |
| 36 ]); | 91 ]); |
| 37 | 92 |
| 38 // center-top | 93 // center-top |
| 39 assertInterpolation({ | 94 assertInterpolation({ |
| 40 property: 'background-position', | 95 property: 'background-position', |
| 41 from: 'center center', | 96 from: 'center center', |
| 42 to: 'center top 20px', | 97 to: 'center top 20px', |
| 43 }, [ | 98 }, [ |
| 44 {at: 0, is: '50% 50%'}, | 99 {at: 0, is: 'left 50% top 50%'}, |
| 45 {at: 0.25, is: '50% calc(37.5% + 5px)'}, | 100 {at: 0.25, is: 'left 50% top calc(5px + 37.5%)'}, |
| 46 {at: 0.50, is: '50% calc(25% + 10px)'}, | 101 {at: 0.5, is: 'left 50% top calc(10px + 25%)'}, |
| 47 {at: 0.75, is: '50% calc(12.5% + 15px)'}, | 102 {at: 0.75, is: 'left 50% top calc(15px + 12.5%)'}, |
| 48 {at: 1, is: '50% 20px'}, | 103 {at: 1, is: 'left 50% top 20px'}, |
| 49 ]); | 104 ]); |
| 50 | 105 |
| 51 // right-top | 106 // right-top |
| 52 assertInterpolation({ | 107 assertInterpolation({ |
| 53 property: 'background-position', | 108 property: 'background-position', |
| 54 from: 'center center', | 109 from: 'center center', |
| 55 to: 'right 20px top 20px', | 110 to: 'right 20px top 20px', |
| 56 }, [ | 111 }, [ |
| 57 {at: 0, is: '50% 50%'}, | 112 {at: 0, is: '50% 50%'}, |
| 58 {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + 5px)'}, | 113 {at: 0.25, is: 'calc(-5px + 62.5%) calc(5px + 37.5%)'}, |
| 59 {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + 10px)'}, | 114 {at: 0.5, is: 'calc(-10px + 75%) calc(10px + 25%)'}, |
| 60 {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + 15px)'}, | 115 {at: 0.75, is: 'calc(-15px + 87.5%) calc(15px + 12.5%)'}, |
| 61 {at: 1, is: 'calc(100% - 20px) 20px'}, | 116 {at: 1, is: 'calc(-20px + 100%) 20px'}, |
| 62 ]); | 117 ]); |
| 63 | 118 |
| 64 // left-center | 119 // left-center |
| 65 assertInterpolation({ | 120 assertInterpolation({ |
| 66 property: 'background-position', | 121 property: 'background-position', |
| 67 from: 'center center', | 122 from: 'center center', |
| 68 to: 'left 20px center', | 123 to: 'left 20px center', |
| 69 }, [ | 124 }, [ |
| 70 {at: 0, is: '50% 50%'}, | 125 {at: 0, is: 'left 50% top 50%'}, |
| 71 {at: 0.25, is: 'calc(37.5% + 5px) 50%'}, | 126 {at: 0.25, is: 'left calc(5px + 37.5%) top 50%'}, |
| 72 {at: 0.50, is: 'calc(25% + 10px) 50%'}, | 127 {at: 0.5, is: 'left calc(10px + 25%) top 50%'}, |
| 73 {at: 0.75, is: 'calc(12.5% + 15px) 50%'}, | 128 {at: 0.75, is: 'left calc(15px + 12.5%) top 50%'}, |
| 74 {at: 1, is: '20px 50%'}, | 129 {at: 1, is: 'left 20px top 50%'}, |
| 75 ]); | 130 ]); |
| 76 | 131 |
| 77 // center-center | 132 // center-center |
| 78 assertInterpolation({ | 133 assertInterpolation({ |
| 79 property: 'background-position', | 134 property: 'background-position', |
| 80 from: 'center center', | 135 from: 'center center', |
| 81 to: 'center center', | 136 to: 'center center', |
| 82 }, [ | 137 }, [ |
| 83 {at: 0, is: '50% 50%'}, | 138 {at: 0, is: '50% 50%'}, |
| 84 {at: 0.25, is: '50% 50%'}, | 139 {at: 0.25, is: '50% 50%'}, |
| 85 {at: 0.50, is: '50% 50%'}, | 140 {at: 0.5, is: '50% 50%'}, |
| 86 {at: 0.75, is: '50% 50%'}, | 141 {at: 0.75, is: '50% 50%'}, |
| 87 {at: 1, is: '50% 50%'} | 142 {at: 1, is: '50% 50%'}, |
| 88 ]); | 143 ]); |
| 89 | 144 |
| 90 // right-center | 145 // right-center |
| 91 assertInterpolation({ | 146 assertInterpolation({ |
| 92 property: 'background-position', | 147 property: 'background-position', |
| 93 from: 'center center', | 148 from: 'center center', |
| 94 to: 'right 20px center', | 149 to: 'right 20px center', |
| 95 }, [ | 150 }, [ |
| 96 {at: 0, is: '50% 50%'}, | 151 {at: 0, is: 'left 50% top 50%'}, |
| 97 {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) 50%'}, | 152 {at: 0.25, is: 'left calc(-5px + 62.5%) top 50%'}, |
| 98 {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) 50%'}, | 153 {at: 0.5, is: 'left calc(-10px + 75%) top 50%'}, |
| 99 {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) 50%'}, | 154 {at: 0.75, is: 'left calc(-15px + 87.5%) top 50%'}, |
| 100 {at: 1, is: 'calc(100% - 20px) 50%'}, | 155 {at: 1, is: 'left calc(-20px + 100%) top 50%'}, |
| 101 ]); | 156 ]); |
| 102 | 157 |
| 103 // left-bottom | 158 // left-bottom |
| 104 assertInterpolation({ | 159 assertInterpolation({ |
| 105 property: 'background-position', | 160 property: 'background-position', |
| 106 from: 'center center', | 161 from: 'center center', |
| 107 to: 'left 20px bottom 20px', | 162 to: 'left 20px bottom 20px', |
| 108 }, [ | 163 }, [ |
| 109 {at: 0, is: '50% 50%'}, | 164 {at: 0, is: '50% 50%'}, |
| 110 {at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + ((100% - 20px) * 0.25))'}, | 165 {at: 0.25, is: 'calc(5px + 37.5%) calc(-5px + 62.5%)'}, |
| 111 {at: 0.50, is: 'calc(25% + 10px) calc(25% + ((100% - 20px) * 0.5))'}, | 166 {at: 0.5, is: 'calc(10px + 25%) calc(-10px + 75%)'}, |
| 112 {at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + ((100% - 20px) * 0.75))'}, | 167 {at: 0.75, is: 'calc(15px + 12.5%) calc(-15px + 87.5%)'}, |
| 113 {at: 1, is: '20px calc(100% - 20px)'}, | 168 {at: 1, is: '20px calc(-20px + 100%)'}, |
| 114 ]); | 169 ]); |
| 115 | 170 |
| 116 // center-bottom | 171 // center-bottom |
| 117 assertInterpolation({ | 172 assertInterpolation({ |
| 118 property: 'background-position', | 173 property: 'background-position', |
| 119 from: 'center center', | 174 from: 'center center', |
| 120 to: 'center bottom 20px', | 175 to: 'center bottom 20px', |
| 121 }, [ | 176 }, [ |
| 122 {at: 0, is: '50% 50%'}, | 177 {at: 0, is: 'left 50% top 50%'}, |
| 123 {at: 0.25, is: '50% calc(37.5% + ((100% - 20px) * 0.25))'}, | 178 {at: 0.25, is: 'left 50% top calc(-5px + 62.5%)'}, |
| 124 {at: 0.50, is: '50% calc(25% + ((100% - 20px) * 0.5))'}, | 179 {at: 0.5, is: 'left 50% top calc(-10px + 75%)'}, |
| 125 {at: 0.75, is: '50% calc(12.5% + ((100% - 20px) * 0.75))'}, | 180 {at: 0.75, is: 'left 50% top calc(-15px + 87.5%)'}, |
| 126 {at: 1, is: '50% calc(100% - 20px)'}, | 181 {at: 1, is: 'left 50% top calc(-20px + 100%)'}, |
| 127 ]); | 182 ]); |
| 128 | 183 |
| 129 // right-bottom | 184 // right-bottom |
| 130 assertInterpolation({ | 185 assertInterpolation({ |
| 131 property: 'background-position', | 186 property: 'background-position', |
| 132 from: 'center center', | 187 from: 'center center', |
| 133 to: 'right 20px bottom 20px', | 188 to: 'right 20px bottom 20px', |
| 134 }, [ | 189 }, [ |
| 135 {at: 0, is: '50% 50%'}, | 190 {at: 0, is: '50% 50%'}, |
| 136 {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + ((100% - 2
0px) * 0.25))'}, | 191 {at: 0.25, is: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'}, |
| 137 {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + ((100% - 20px)
* 0.5))'}, | 192 {at: 0.5, is: 'calc(-10px + 75%) calc(-10px + 75%)'}, |
| 138 {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + ((100% - 2
0px) * 0.75))'}, | 193 {at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, |
| 139 {at: 1, is: 'calc(100% - 20px) calc(100% - 20px)'}, | 194 {at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'}, |
| 140 ]); | 195 ]); |
| 141 | |
| 142 </script> | 196 </script> |
| 143 </body> | 197 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1265873002:
Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed)
Base URL: svn://svn.chromium.org/blink/trunk