column-rule-width-interpolation.html (2461B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>column-rule-width interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#crw"> 5 <meta name="assert" content="column-rule-width supports animation by computed value type"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <style> 12 .parent { 13 column-rule-width: 30px; 14 } 15 .target { 16 column-rule-width: 10px; 17 } 18 </style> 19 20 <body></body> 21 22 <script> 23 test_interpolation({ 24 property: 'column-rule-width', 25 from: neutralKeyframe, 26 to: '20px', 27 }, [ 28 {at: -0.3, expect: '7px'}, 29 {at: 0, expect: '10px'}, 30 {at: 0.3, expect: '13px'}, 31 {at: 0.6, expect: '16px'}, 32 {at: 1, expect: '20px'}, 33 {at: 1.5, expect: '25px'}, 34 ]); 35 36 test_interpolation({ 37 property: 'column-rule-width', 38 from: 'initial', 39 to: '20px', 40 }, [ 41 {at: -0.3, expect: '0px'}, 42 {at: 0, expect: '3px'}, 43 {at: 0.3, expect: '8.1px'}, 44 {at: 0.6, expect: '13.2px'}, 45 {at: 1, expect: '20px'}, 46 {at: 1.5, expect: '28.5px'}, 47 ]); 48 49 // column-rule-width: inherit on .target means 30px (from .parent) 50 // so we are interpolating from 30px to 20px here. column-rule-width is 51 // now independent of column-rule-style, so we won't be interpolating 52 // from 0px to 20px as before. 53 test_interpolation({ 54 property: 'column-rule-width', 55 from: 'inherit', 56 to: '20px', 57 }, [ 58 {at: -0.3, expect: '33px'}, 59 {at: 0, expect: '30px'}, 60 {at: 0.3, expect: '27px'}, 61 {at: 0.6, expect: '24px'}, 62 {at: 1, expect: '20px'}, 63 {at: 1.5, expect: '15px'}, 64 ]); 65 66 test_interpolation({ 67 property: 'column-rule-width', 68 from: 'unset', 69 to: '20px', 70 }, [ 71 {at: -0.3, expect: '0px'}, 72 {at: 0, expect: '3px'}, 73 {at: 0.3, expect: '8.1px'}, 74 {at: 0.6, expect: '13.2px'}, 75 {at: 1, expect: '20px'}, 76 {at: 1.5, expect: '28.5px'}, 77 ]); 78 79 test_interpolation({ 80 property: 'column-rule-width', 81 from: '0px', 82 to: '10px' 83 }, [ 84 {at: -0.3, expect: '0px'}, // CSS column-rule-width can't be negative. 85 {at: 0, expect: '0px'}, 86 {at: 0.3, expect: '3px'}, 87 {at: 0.6, expect: '6px'}, 88 {at: 1, expect: '10px'}, 89 {at: 1.5, expect: '15px'} 90 ]); 91 92 test_interpolation({ 93 property: 'column-rule-width', 94 from: '15px', 95 to: 'thick' 96 }, [ 97 {at: -2, expect: '35px'}, 98 {at: -0.3, expect: '18px'}, 99 {at: 0, expect: '15px'}, 100 {at: 0.3, expect: '12px'}, 101 {at: 0.6, expect: '9px'}, 102 {at: 1, expect: '5px'}, 103 {at: 1.5, expect: '0px'} 104 ]); 105 </script>