flex-grow-interpolation.html (2311B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>flex-grow interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-grow-property"> 5 <meta name="assert" content="flex-grow 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 display: flex; 14 flex-grow: 3; 15 } 16 .target { 17 height: 10px; 18 background: black; 19 flex-grow: 1; 20 } 21 .filler { 22 height: 10px; 23 flex-grow: 1; 24 } 25 .expected { 26 background: green; 27 } 28 </style> 29 30 <body> 31 <template id="target-template"> 32 <div class="parent"> 33 <div class="target"></div> 34 <div class="filler"></div> 35 </div> 36 </template> 37 </body> 38 39 <script> 40 test_interpolation({ 41 property: 'flex-grow', 42 from: neutralKeyframe, 43 to: '2', 44 }, [ 45 {at: -0.3, expect: '0.7'}, 46 {at: 0, expect: '1'}, 47 {at: 0.3, expect: '1.3'}, 48 {at: 0.6, expect: '1.6'}, 49 {at: 1, expect: '2'}, 50 {at: 1.5, expect: '2.5'}, 51 ]); 52 53 test_interpolation({ 54 property: 'flex-grow', 55 from: 'initial', 56 to: '2', 57 }, [ 58 {at: -0.3, expect: '0'}, 59 {at: 0, expect: '0'}, 60 {at: 0.3, expect: '0.6'}, 61 {at: 0.6, expect: '1.2'}, 62 {at: 1, expect: '2'}, 63 {at: 1.5, expect: '3'}, 64 ]); 65 66 test_interpolation({ 67 property: 'flex-grow', 68 from: 'inherit', 69 to: '2', 70 }, [ 71 {at: -0.3, expect: '3.3'}, 72 {at: 0, expect: '3'}, 73 {at: 0.3, expect: '2.7'}, 74 {at: 0.6, expect: '2.4'}, 75 {at: 1, expect: '2'}, 76 {at: 1.5, expect: '1.5'}, 77 ]); 78 79 test_interpolation({ 80 property: 'flex-grow', 81 from: 'unset', 82 to: '2', 83 }, [ 84 {at: -0.3, expect: '0'}, 85 {at: 0, expect: '0'}, 86 {at: 0.3, expect: '0.6'}, 87 {at: 0.6, expect: '1.2'}, 88 {at: 1, expect: '2'}, 89 {at: 1.5, expect: '3'}, 90 ]); 91 92 test_interpolation({ 93 property: 'flex-grow', 94 from: '1', 95 to: '2', 96 }, [ 97 {at: -5, expect: '0'}, 98 {at: -0.3, expect: '0.7'}, 99 {at: 0, expect: '1'}, 100 {at: 0.3, expect: '1.3'}, 101 {at: 0.6, expect: '1.6'}, 102 {at: 1, expect: '2'}, 103 {at: 1.5, expect: '2.5'}, 104 ]); 105 106 test_interpolation({ 107 property: 'flex-grow', 108 from: '0', 109 to: '1', 110 }, [ 111 {at: -5, expect: '0'}, 112 {at: -0.3, expect: '0'}, 113 {at: 0, expect: '0'}, 114 {at: 0.3, expect: '0.3'}, 115 {at: 0.6, expect: '0.6'}, 116 {at: 1, expect: '1'}, 117 {at: 1.5, expect: '1.5'}, 118 ]); 119 </script>