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