translate-interpolation.html (8368B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>translate interpolation</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> 7 <meta name="assert" content="translate supports <length> and <percentage> animation."> 8 <meta name="timeout" content="long"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/interpolation-testcommon.js"></script> 12 <style> 13 .parent { 14 translate: 100px 200px 300px; 15 } 16 .target { 17 width: 100px; 18 height: 100px; 19 background-color: black; 20 translate: 10px; 21 } 22 .expected { 23 background-color: green; 24 } 25 </style> 26 </head> 27 <body> 28 <template id="target-template"> 29 <div class="parent"> 30 <div class="target"></div> 31 </div> 32 </template> 33 <script> 34 // Matching one-length (pixels) animation. 35 test_interpolation({ 36 property: 'translate', 37 from: '-100px', 38 to: '100px', 39 }, [ 40 {at: -1, expect: '-300px'}, 41 {at: 0, expect: '-100px'}, 42 {at: 0.25, expect: '-50px'}, 43 {at: 0.75, expect: '50px'}, 44 {at: 1, expect: '100px'}, 45 {at: 2, expect: '300px'}, 46 ]); 47 48 // Matching one-length (percentage) animation. 49 test_interpolation({ 50 property: 'translate', 51 from: '-100%', 52 to: '100%', 53 }, [ 54 {at: -1, expect: '-300%'}, 55 {at: 0, expect: '-100%'}, 56 {at: 0.25, expect: '-50%'}, 57 {at: 0.75, expect: '50%'}, 58 {at: 1, expect: '100%'}, 59 {at: 2, expect: '300%'}, 60 ]); 61 62 // Matching two-length (all pixels) animation. 63 test_interpolation({ 64 property: 'translate', 65 from: '-100px -50px', 66 to: '100px 50px', 67 }, [ 68 {at: -1, expect: '-300px -150px'}, 69 {at: 0, expect: '-100px -50px'}, 70 {at: 0.25, expect: '-50px -25px'}, 71 {at: 0.75, expect: '50px 25px'}, 72 {at: 1, expect: '100px 50px'}, 73 {at: 2, expect: '300px 150px'}, 74 ]); 75 76 // Matching three-length (all pixels) animation. 77 test_interpolation({ 78 property: 'translate', 79 from: '220px 240px 260px', 80 to: '300px 400px 500px', 81 }, [ 82 {at: -1, expect: '140px 80px 20px'}, 83 {at: 0, expect: '220px 240px 260px'}, 84 {at: 0.125, expect: '230px 260px 290px'}, 85 {at: 0.875, expect: '290px 380px 470px'}, 86 {at: 1, expect: '300px 400px 500px'}, 87 {at: 2, expect: '380px 560px 740px'} 88 ]); 89 90 // Going from one length to three lengths. 91 test_interpolation({ 92 property: 'translate', 93 from: '0px', 94 to: '-100px -50px 100px', 95 }, [ 96 {at: -1, expect: '100px 50px -100px'}, 97 {at: 0, expect: '0px'}, 98 {at: 0.25, expect: '-25px -12.5px 25px'}, 99 {at: 0.75, expect: '-75px -37.5px 75px'}, 100 {at: 1, expect: '-100px -50px 100px'}, 101 {at: 2, expect: '-200px -100px 200px'}, 102 ]); 103 104 // Going from three lengths to one length. 105 test_interpolation({ 106 property: 'translate', 107 from: '-100px -50px 100px', 108 to: '0px', 109 }, [ 110 {at: -1, expect: '-200px -100px 200px'}, 111 {at: 0, expect: '-100px -50px 100px'}, 112 {at: 0.25, expect: '-75px -37.5px 75px'}, 113 {at: 0.75, expect: '-25px -12.5px 25px'}, 114 {at: 1, expect: '0px'}, 115 {at: 2, expect: '100px 50px -100px'}, 116 ]); 117 118 // Going from three-lengths to two-percentages. 119 test_interpolation({ 120 property: 'translate', 121 from: '480px 400px 320px', 122 to: '240% 160%', 123 }, [ 124 {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%) 640px'}, 125 {at: 0, expect: 'calc(0% + 480px) calc(0% + 400px) 320px'}, 126 {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%) 280px'}, 127 {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px) 40px'}, 128 {at: 1, expect: '240% 160%'}, 129 {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px) -320px'} 130 ]); 131 132 // Handling of the none value. 133 test_interpolation({ 134 property: 'translate', 135 from: 'none', 136 to: 'none', 137 }, [ 138 {at: -1, expect: 'none'}, 139 {at: 0, expect: 'none'}, 140 {at: 0.125, expect: 'none'}, 141 {at: 0.875, expect: 'none'}, 142 {at: 1, expect: 'none'}, 143 {at: 2, expect: 'none'} 144 ]); 145 146 // Going from none to a valid value; test that it converts properly. 147 test_interpolation({ 148 property: 'translate', 149 from: 'none', 150 to: '8px 80% 800px', 151 }, [ 152 {at: -1, expect: '-8px -80% -800px'}, 153 {at: 0, expect: '0px 0%'}, 154 {at: 0.125, expect: '1px 10% 100px'}, 155 {at: 0.875, expect: '7px 70% 700px'}, 156 {at: 1, expect: '8px 80% 800px'}, 157 {at: 2, expect: '16px 160% 1600px'} 158 ]); 159 160 // Test neutral keyframe; make sure it adds the underlying. 161 test_interpolation({ 162 property: 'translate', 163 from: neutralKeyframe, 164 to: '20px', 165 }, [ 166 {at: -1, expect: '0px'}, 167 {at: 0, expect: '10px'}, 168 {at: 0.25, expect: '12.5px'}, 169 {at: 0.75, expect: '17.5px'}, 170 {at: 1, expect: '20px'}, 171 {at: 2, expect: '30px'}, 172 ]); 173 174 // Test initial value; for 'scale' this is 'none'. 175 test_interpolation({ 176 property: 'translate', 177 from: 'initial', 178 to: '200px 100px 200px', 179 }, [ 180 {at: -1, expect: '-200px -100px -200px'}, 181 {at: 0, expect: '0px'}, 182 {at: 0.25, expect: '50px 25px 50px'}, 183 {at: 0.75, expect: '150px 75px 150px'}, 184 {at: 1, expect: '200px 100px 200px'}, 185 {at: 2, expect: '400px 200px 400px'}, 186 ]); 187 188 test_interpolation({ 189 property: 'translate', 190 from: '200px 100px 400px', 191 to: 'initial', 192 }, [ 193 {at: -1, expect: '400px 200px 800px'}, 194 {at: 0, expect: '200px 100px 400px'}, 195 {at: 0.25, expect: '150px 75px 300px'}, 196 {at: 0.75, expect: '50px 25px 100px'}, 197 {at: 1, expect: '0px'}, 198 {at: 2, expect: '-200px -100px -400px'}, 199 ]); 200 201 202 // Test unset value; for 'translate' this is 'none'. 203 test_interpolation({ 204 property: 'translate', 205 from: 'unset', 206 to: '20px', 207 }, [ 208 {at: -1, expect: '-20px'}, 209 {at: 0, expect: '0px'}, 210 {at: 0.25, expect: '5px'}, 211 {at: 0.75, expect: '15px'}, 212 {at: 1, expect: '20px'}, 213 {at: 2, expect: '40px'}, 214 ]); 215 216 // Test inherited value. 217 test_interpolation({ 218 property: 'translate', 219 from: 'inherit', 220 to: '200px 100px 200px', 221 }, [ 222 {at: -1, expect: '0px 300px 400px'}, 223 {at: 0, expect: '100px 200px 300px'}, 224 {at: 0.25, expect: '125px 175px 275px'}, 225 {at: 0.75, expect: '175px 125px 225px'}, 226 {at: 1, expect: '200px 100px 200px'}, 227 {at: 2, expect: '300px 0px 100px'}, 228 ]); 229 230 test_interpolation({ 231 property: 'translate', 232 from: '200px 100px 200px', 233 to: 'inherit', 234 }, [ 235 {at: -1, expect: '300px 0px 100px'}, 236 {at: 0, expect: '200px 100px 200px'}, 237 {at: 0.25, expect: '175px 125px 225px'}, 238 {at: 0.75, expect: '125px 175px 275px'}, 239 {at: 1, expect: '100px 200px 300px'}, 240 {at: 2, expect: '0px 300px 400px'}, 241 ]); 242 243 // Test combination of initial and inherit. 244 test_interpolation({ 245 property: 'translate', 246 from: 'initial', 247 to: 'inherit', 248 }, [ 249 {at: -1, expect: '-100px -200px -300px'}, 250 {at: 0, expect: '0px'}, 251 {at: 0.25, expect: '25px 50px 75px'}, 252 {at: 0.75, expect: '75px 150px 225px'}, 253 {at: 1, expect: '100px 200px 300px'}, 254 {at: 2, expect: '200px 400px 600px'}, 255 ]); 256 257 test_interpolation({ 258 property: 'translate', 259 from: 'inherit', 260 to: 'initial', 261 }, [ 262 {at: -1, expect: '200px 400px 600px'}, 263 {at: 0, expect: '100px 200px 300px'}, 264 {at: 0.25, expect: '75px 150px 225px'}, 265 {at: 0.75, expect: '25px 50px 75px'}, 266 {at: 1, expect: '0px'}, 267 {at: 2, expect: '-100px -200px -300px'}, 268 ]); 269 </script> 270 </body> 271 </html>