flex-basis-interpolation.html (1723B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>flex-basis interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-basis-property"> 5 <meta name="assert" content="flex-basis 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 flex-basis: 3%; 14 } 15 .target { 16 flex-basis: 1%; 17 } 18 </style> 19 20 <body></body> 21 22 <script> 23 test_interpolation({ 24 property: 'flex-basis', 25 from: neutralKeyframe, 26 to: '2%', 27 }, [ 28 {at: -0.3, expect: '0.7%'}, 29 {at: 0, expect: '1%'}, 30 {at: 0.3, expect: '1.3%'}, 31 {at: 0.6, expect: '1.6%'}, 32 {at: 1, expect: '2%'}, 33 {at: 1.5, expect: '2.5%'}, 34 ]); 35 36 test_no_interpolation({ 37 property: 'flex-basis', 38 from: 'initial', 39 to: '2%', 40 }); 41 42 test_interpolation({ 43 property: 'flex-basis', 44 from: 'inherit', 45 to: '2%', 46 }, [ 47 {at: -0.3, expect: '3.3%'}, 48 {at: 0, expect: '3%'}, 49 {at: 0.3, expect: '2.7%'}, 50 {at: 0.6, expect: '2.4%'}, 51 {at: 1, expect: '2%'}, 52 {at: 1.5, expect: '1.5%'}, 53 ]); 54 55 test_no_interpolation({ 56 property: 'flex-basis', 57 from: 'unset', 58 to: '2%', 59 }); 60 61 test_interpolation({ 62 property: 'flex-basis', 63 from: '0px', 64 to: '100px' 65 }, [ 66 {at: -0.3, expect: '0px'}, 67 {at: 0, expect: '0px'}, 68 {at: 0.4, expect: '40px'}, 69 {at: 0.6, expect: '60px'}, 70 {at: 1, expect: '100px'}, 71 {at: 1.5, expect: '150px'} 72 ]); 73 74 test_interpolation({ 75 property: 'flex-basis', 76 from: '0%', 77 to: '100%' 78 }, [ 79 {at: -0.3, expect: '0%'}, 80 {at: 0, expect: '0%'}, 81 {at: 0.4, expect: '40%'}, 82 {at: 0.6, expect: '60%'}, 83 {at: 1, expect: '100%'}, 84 {at: 1.5, expect: '150%'} 85 ]); 86 </script>