column-count-interpolation.html (1554B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>column-count interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cc"> 5 <meta name="assert" content="column-count supports animation by computed value"> 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-count: 30; 14 } 15 .target { 16 column-count: 10; 17 } 18 </style> 19 20 <body></body> 21 22 <script> 23 test_interpolation({ 24 property: 'column-count', 25 from: neutralKeyframe, 26 to: '20', 27 }, [ 28 {at: -0.5, expect: '5'}, 29 {at: 0, expect: '10'}, 30 {at: 0.3, expect: '13'}, 31 {at: 0.7, expect: '17'}, 32 {at: 1, expect: '20'}, 33 {at: 1.5, expect: '25'}, 34 ]); 35 36 test_no_interpolation({ 37 property: 'column-count', 38 from: 'auto', 39 to: '20', 40 }); 41 42 test_interpolation({ 43 property: 'column-count', 44 from: 'inherit', 45 to: '20', 46 }, [ 47 {at: -0.5, expect: '35'}, 48 {at: 0, expect: '30'}, 49 {at: 0.3, expect: '27'}, 50 {at: 0.7, expect: '23'}, 51 {at: 1, expect: '20'}, 52 {at: 1.5, expect: '15'}, 53 ]); 54 55 test_interpolation({ 56 property: 'column-count', 57 from: '10', 58 to: '1' 59 }, [ 60 {at: -0.5, expect: '15'}, 61 {at: 0, expect: '10'}, 62 {at: 0.3, expect: '7'}, 63 {at: 0.7, expect: '4'}, 64 // Only positive integers are valid 65 {at: 1, expect: '1'}, 66 {at: 1.5, expect: '1'} 67 ]); 68 69 test_no_interpolation({ 70 property: 'column-count', 71 from: 'initial', 72 to: '5', 73 }); 74 75 test_no_interpolation({ 76 property: 'column-count', 77 from: 'unset', 78 to: '5', 79 }); 80 </script>