column-rule-outset-interpolation.html (11305B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>column-rule-inset properties interpolation</title> 6 <link rel="author" title="Javier Contreras" href="mailto:javiercon@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 <style> 12 .parent { 13 column-rule-style: solid; 14 column-rule-edge-inset-start: 20px; 15 column-rule-edge-inset-end: 20px; 16 column-rule-interior-inset-start: 20px; 17 column-rule-interior-inset-end: 20px; 18 } 19 20 .target { 21 display: flex; 22 gap: 10px; 23 row-rule: 10px solid black; 24 column-rule: 10px solid black; 25 26 column-rule-break: intersection; 27 column-rule-edge-inset-start: 5px; 28 column-rule-edge-inset-end: 5px; 29 column-rule-interior-inset-start: 5px; 30 column-rule-interior-inset-end: 5px; 31 } 32 </style> 33 </head> 34 <body> 35 <script> 36 test_interpolation({ 37 property: 'column-rule-edge-inset-start', 38 from: neutralKeyframe, 39 to: '15px', 40 }, [ 41 { at: -0.3, expect: '2px' }, 42 { at: 0, expect: '5px' }, 43 { at: 0.3, expect: '8px' }, 44 { at: 0.6, expect: '11px' }, 45 { at: 1, expect: '15px' }, 46 { at: 1.5, expect: '20px' }, 47 ]); 48 test_interpolation({ 49 property: 'column-rule-edge-inset-end', 50 from: neutralKeyframe, 51 to: '15px', 52 }, [ 53 { at: -0.3, expect: '2px' }, 54 { at: 0, expect: '5px' }, 55 { at: 0.3, expect: '8px' }, 56 { at: 0.6, expect: '11px' }, 57 { at: 1, expect: '15px' }, 58 { at: 1.5, expect: '20px' }, 59 ]); 60 test_interpolation({ 61 property: 'column-rule-interior-inset-start', 62 from: neutralKeyframe, 63 to: '15px', 64 }, [ 65 { at: -0.3, expect: '2px' }, 66 { at: 0, expect: '5px' }, 67 { at: 0.3, expect: '8px' }, 68 { at: 0.6, expect: '11px' }, 69 { at: 1, expect: '15px' }, 70 { at: 1.5, expect: '20px' }, 71 ]); 72 test_interpolation({ 73 property: 'column-rule-interior-inset-end', 74 from: neutralKeyframe, 75 to: '15px', 76 }, [ 77 { at: -0.3, expect: '2px' }, 78 { at: 0, expect: '5px' }, 79 { at: 0.3, expect: '8px' }, 80 { at: 0.6, expect: '11px' }, 81 { at: 1, expect: '15px' }, 82 { at: 1.5, expect: '20px' }, 83 ]); 84 85 test_interpolation({ 86 property: 'column-rule-edge-inset-start', 87 from: 'initial', // initial for `edge` is 0px. 88 to: '10px', 89 }, [ 90 { at: -0.3, expect: '-3px' }, 91 { at: 0, expect: '0px' }, 92 { at: 0.3, expect: '3px' }, 93 { at: 0.6, expect: '6px' }, 94 { at: 1, expect: '10px' }, 95 { at: 1.5, expect: '15px' }, 96 ]); 97 test_interpolation({ 98 property: 'column-rule-edge-inset-end', 99 from: 'initial', // initial for `edge` is 0px. 100 to: '10px', 101 }, [ 102 { at: -0.3, expect: '-3px' }, 103 { at: 0, expect: '0px' }, 104 { at: 0.3, expect: '3px' }, 105 { at: 0.6, expect: '6px' }, 106 { at: 1, expect: '10px' }, 107 { at: 1.5, expect: '15px' }, 108 ]); 109 test_interpolation({ 110 property: 'column-rule-interior-inset-start', 111 from: 'initial', // initial is -50%. 112 to: '-40%', 113 }, [ 114 { at: -0.3, expect: '-53%' }, 115 { at: 0, expect: '-50%' }, 116 { at: 0.3, expect: '-47%' }, 117 { at: 0.6, expect: '-44%' }, 118 { at: 1, expect: '-40%' }, 119 { at: 1.5, expect: '-35%' }, 120 ]); 121 test_interpolation({ 122 property: 'column-rule-interior-inset-end', 123 from: 'initial', // initial is -50%. 124 to: '-40%', 125 }, [ 126 { at: -0.3, expect: '-53%' }, 127 { at: 0, expect: '-50%' }, 128 { at: 0.3, expect: '-47%' }, 129 { at: 0.6, expect: '-44%' }, 130 { at: 1, expect: '-40%' }, 131 { at: 1.5, expect: '-35%' }, 132 ]); 133 134 test_interpolation({ 135 property: 'column-rule-edge-inset-start', 136 from: 'inherit', 137 to: '10px', 138 }, [ 139 { at: -0.3, expect: '23px' }, 140 { at: 0, expect: '20px' }, 141 { at: 0.3, expect: '17px' }, 142 { at: 0.6, expect: '14px' }, 143 { at: 1, expect: '10px' }, 144 { at: 1.5, expect: '5px' }, 145 ]); 146 test_interpolation({ 147 property: 'column-rule-edge-inset-end', 148 from: 'inherit', 149 to: '10px', 150 }, [ 151 { at: -0.3, expect: '23px' }, 152 { at: 0, expect: '20px' }, 153 { at: 0.3, expect: '17px' }, 154 { at: 0.6, expect: '14px' }, 155 { at: 1, expect: '10px' }, 156 { at: 1.5, expect: '5px' }, 157 ]); 158 test_interpolation({ 159 property: 'column-rule-interior-inset-start', 160 from: 'inherit', 161 to: '10px', 162 }, [ 163 { at: -0.3, expect: '23px' }, 164 { at: 0, expect: '20px' }, 165 { at: 0.3, expect: '17px' }, 166 { at: 0.6, expect: '14px' }, 167 { at: 1, expect: '10px' }, 168 { at: 1.5, expect: '5px' }, 169 ]); 170 test_interpolation({ 171 property: 'column-rule-interior-inset-end', 172 from: 'inherit', 173 to: '10px', 174 }, [ 175 { at: -0.3, expect: '23px' }, 176 { at: 0, expect: '20px' }, 177 { at: 0.3, expect: '17px' }, 178 { at: 0.6, expect: '14px' }, 179 { at: 1, expect: '10px' }, 180 { at: 1.5, expect: '5px' }, 181 ]); 182 183 test_interpolation({ 184 property: 'column-rule-edge-inset-start', 185 from: 'unset', 186 to: '10px', 187 }, [ 188 { at: -0.3, expect: '-3px' }, 189 { at: 0, expect: '0px' }, 190 { at: 0.3, expect: '3px' }, 191 { at: 0.6, expect: '6px' }, 192 { at: 1, expect: '10px' }, 193 { at: 1.5, expect: '15px' }, 194 ]); 195 test_interpolation({ 196 property: 'column-rule-edge-inset-end', 197 from: 'unset', 198 to: '10px', 199 }, [ 200 { at: -0.3, expect: '-3px' }, 201 { at: 0, expect: '0px' }, 202 { at: 0.3, expect: '3px' }, 203 { at: 0.6, expect: '6px' }, 204 { at: 1, expect: '10px' }, 205 { at: 1.5, expect: '15px' }, 206 ]); 207 test_interpolation({ 208 property: 'column-rule-interior-inset-start', 209 from: 'unset', 210 to: '-40%', 211 }, [ 212 { at: -0.3, expect: '-53%' }, 213 { at: 0, expect: '-50%' }, 214 { at: 0.3, expect: '-47%' }, 215 { at: 0.6, expect: '-44%' }, 216 { at: 1, expect: '-40%' }, 217 { at: 1.5, expect: '-35%' }, 218 ]); 219 test_interpolation({ 220 property: 'column-rule-interior-inset-end', 221 from: 'unset', 222 to: '-40%', 223 }, [ 224 { at: -0.3, expect: '-53%' }, 225 { at: 0, expect: '-50%' }, 226 { at: 0.3, expect: '-47%' }, 227 { at: 0.6, expect: '-44%' }, 228 { at: 1, expect: '-40%' }, 229 { at: 1.5, expect: '-35%' }, 230 ]); 231 232 test_interpolation({ 233 property: 'column-rule-edge-inset-start', 234 from: '-5px', 235 to: '5px' 236 }, [ 237 { at: -0.3, expect: '-8px' }, // column-rule-edge-inset-start can be negative 238 { at: 0, expect: '-5px' }, 239 { at: 0.3, expect: '-2px' }, 240 { at: 0.6, expect: '1px' }, 241 { at: 1, expect: '5px' }, 242 { at: 1.5, expect: '10px' }, 243 ]); 244 test_interpolation({ 245 property: 'column-rule-edge-inset-end', 246 from: '-5px', 247 to: '5px' 248 }, [ 249 { at: -0.3, expect: '-8px' }, // column-rule-edge-inset-end can be negative 250 { at: 0, expect: '-5px' }, 251 { at: 0.3, expect: '-2px' }, 252 { at: 0.6, expect: '1px' }, 253 { at: 1, expect: '5px' }, 254 { at: 1.5, expect: '10px' }, 255 ]); 256 test_interpolation({ 257 property: 'column-rule-interior-inset-start', 258 from: '-5px', 259 to: '5px' 260 }, [ 261 { at: -0.3, expect: '-8px' }, // column-rule-interior-inset-start can be negative 262 { at: 0, expect: '-5px' }, 263 { at: 0.3, expect: '-2px' }, 264 { at: 0.6, expect: '1px' }, 265 { at: 1, expect: '5px' }, 266 { at: 1.5, expect: '10px' }, 267 ]); 268 test_interpolation({ 269 property: 'column-rule-interior-inset-end', 270 from: '-5px', 271 to: '5px' 272 }, [ 273 { at: -0.3, expect: '-8px' }, // column-rule-interior-inset-end can be negative 274 { at: 0, expect: '-5px' }, 275 { at: 0.3, expect: '-2px' }, 276 { at: 0.6, expect: '1px' }, 277 { at: 1, expect: '5px' }, 278 { at: 1.5, expect: '10px' }, 279 ]); 280 281 test_interpolation({ 282 property: 'column-rule-edge-inset-start', 283 from: '-100%', 284 to: '1px', 285 }, [ 286 { at: -0.3, expect: 'calc(-130% - 0.3px)' }, 287 { at: 0, expect: '-100%' }, 288 { at: 0.3, expect: 'calc(-70% + 0.3px)' }, 289 { at: 0.6, expect: 'calc(-40% + 0.6px)' }, 290 { at: 1, expect: 'calc(0% + 1px)' }, 291 { at: 1.5, expect: 'calc(50% + 1.5px)' }, 292 ]); 293 test_interpolation({ 294 property: 'column-rule-edge-inset-end', 295 from: '-100%', 296 to: '1px', 297 }, [ 298 { at: -0.3, expect: 'calc(-130% - 0.3px)' }, 299 { at: 0, expect: '-100%' }, 300 { at: 0.3, expect: 'calc(-70% + 0.3px)' }, 301 { at: 0.6, expect: 'calc(-40% + 0.6px)' }, 302 { at: 1, expect: 'calc(0% + 1px)' }, 303 { at: 1.5, expect: 'calc(50% + 1.5px)' }, 304 ]); 305 test_interpolation({ 306 property: 'column-rule-interior-inset-start', 307 from: '-100%', 308 to: '1px', 309 }, [ 310 { at: -0.3, expect: 'calc(-130% - 0.3px)' }, 311 { at: 0, expect: '-100%' }, 312 { at: 0.3, expect: 'calc(-70% + 0.3px)' }, 313 { at: 0.6, expect: 'calc(-40% + 0.6px)' }, 314 { at: 1, expect: 'calc(0% + 1px)' }, 315 { at: 1.5, expect: 'calc(50% + 1.5px)' }, 316 ]); 317 test_interpolation({ 318 property: 'column-rule-interior-inset-end', 319 from: '-100%', 320 to: '1px', 321 }, [ 322 { at: -0.3, expect: 'calc(-130% - 0.3px)' }, 323 { at: 0, expect: '-100%' }, 324 { at: 0.3, expect: 'calc(-70% + 0.3px)' }, 325 { at: 0.6, expect: 'calc(-40% + 0.6px)' }, 326 { at: 1, expect: 'calc(0% + 1px)' }, 327 { at: 1.5, expect: 'calc(50% + 1.5px)' }, 328 ]); 329 330 test_interpolation({ 331 property: 'column-rule-edge-inset-start', 332 from: '10px', 333 to: '-10%', 334 }, [ 335 { at: -0.3, expect: 'calc(3% + 13px)' }, 336 { at: 0, expect: 'calc(0% + 10px)' }, 337 { at: 0.3, expect: 'calc(-3% + 7px)' }, 338 { at: 0.6, expect: 'calc(-6% + 4px)' }, 339 { at: 1, expect: '-10%' }, 340 { at: 1.5, expect: 'calc(-15% - 5px)' }, 341 ]); 342 test_interpolation({ 343 property: 'column-rule-edge-inset-end', 344 from: '10px', 345 to: '-10%', 346 }, [ 347 { at: -0.3, expect: 'calc(3% + 13px)' }, 348 { at: 0, expect: 'calc(-0% + 10px)' }, 349 { at: 0.3, expect: 'calc(-3% + 7px)' }, 350 { at: 0.6, expect: 'calc(-6% + 4px)' }, 351 { at: 1, expect: '-10%' }, 352 { at: 1.5, expect: 'calc(-15% - 5px)' }, 353 ]); 354 test_interpolation({ 355 property: 'column-rule-interior-inset-start', 356 from: '10px', 357 to: '-10%', 358 }, [ 359 { at: -0.3, expect: 'calc(3% + 13px)' }, 360 { at: 0, expect: 'calc(0% + 10px)' }, 361 { at: 0.3, expect: 'calc(-3% + 7px)' }, 362 { at: 0.6, expect: 'calc(-6% + 4px)' }, 363 { at: 1, expect: '-10%' }, 364 { at: 1.5, expect: 'calc(-15% - 5px)' }, 365 ]); 366 test_interpolation({ 367 property: 'column-rule-interior-inset-end', 368 from: '10px', 369 to: '-10%', 370 }, [ 371 { at: -0.3, expect: 'calc(3% + 13px)' }, 372 { at: 0, expect: 'calc(0% + 10px)' }, 373 { at: 0.3, expect: 'calc(-3% + 7px)' }, 374 { at: 0.6, expect: 'calc(-6% + 4px)' }, 375 { at: 1, expect: '-10%' }, 376 { at: 1.5, expect: 'calc(-15% - 5px)' }, 377 ]); 378 </script> 379 </body> 380 </html>