interpolate-size-height-interpolation.html (3390B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>height interpolation with interpolate-size: allow-keywords</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height"> 5 <link rel="help" href="https://drafts.csswg.org/css-values-5/#interpolate-size"> 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 :root { 13 interpolate-size: allow-keywords; 14 } 15 .parent { 16 height: 200px; 17 } 18 .target { 19 width: 100px; 20 height: 150px; 21 } 22 .target::before { 23 display: block; 24 content: ""; 25 width: 100px; 26 height: 50px; 27 } 28 </style> 29 30 <body></body> 31 32 <script> 33 34 test_interpolation({ 35 property: 'height', 36 from: 'initial', /* auto, which is 50px */ 37 to: '90px', 38 }, [ 39 {at: -0.3, expect: '38px'}, 40 {at: 0, expect: '50px'}, 41 {at: 0.3, expect: '62px'}, 42 {at: 0.6, expect: '74px'}, 43 {at: 1, expect: '90px'}, 44 {at: 1.5, expect: '110px'} 45 ]); 46 47 test_interpolation({ 48 property: 'height', 49 from: 'unset', /* auto, which is 50px */ 50 to: '10px', 51 }, [ 52 {at: -0.3, expect: '62px'}, 53 {at: 0, expect: '50px'}, 54 {at: 0.3, expect: '38px'}, 55 {at: 0.6, expect: '26px'}, 56 {at: 1, expect: '10px'}, 57 {at: 1.5, expect: '0px'} // height can't be negative 58 ]); 59 60 test_interpolation({ 61 property: 'height', 62 from: '0px', 63 to: 'auto' /* 50px */ 64 }, [ 65 {at: -0.3, expect: '0px'}, // height can't be negative 66 {at: 0, expect: '0px'}, 67 {at: 0.3, expect: '15px'}, 68 {at: 0.6, expect: '30px'}, 69 {at: 1, expect: '50px'}, 70 {at: 1.5, expect: '75px'} 71 ]); 72 73 test_interpolation({ 74 property: 'height', 75 from: 'auto', /* 50px */ 76 to: '10px', 77 }, [ 78 {at: -0.3, expect: '62px'}, 79 {at: 0, expect: '50px'}, 80 {at: 0.3, expect: '38px'}, 81 {at: 0.6, expect: '26px'}, 82 {at: 1, expect: '10px'}, 83 {at: 1.5, expect: '0px'} // height can't be negative 84 ]); 85 86 test_interpolation({ 87 property: 'height', 88 from: 'min-content', /* 50px */ 89 to: 'inherit', /* 200px */ 90 }, [ 91 {at: -0.3, expect: '5px'}, 92 {at: 0, expect: '50px'}, 93 {at: 0.3, expect: '95px'}, 94 {at: 0.6, expect: '140px'}, 95 {at: 1, expect: '200px'}, 96 {at: 1.5, expect: '275px'} 97 ]); 98 99 // both 50px but not interpolable 100 test_no_interpolation({ 101 property: 'height', 102 from: 'auto', 103 to: 'min-content', 104 }); 105 106 test_interpolation({ 107 property: 'height', 108 from: 'fit-content', /* 50px */ 109 to: '10px', 110 }, [ 111 {at: -0.3, expect: '62px'}, 112 {at: 0, expect: '50px'}, 113 {at: 0.3, expect: '38px'}, 114 {at: 0.6, expect: '26px'}, 115 {at: 1, expect: '10px'}, 116 {at: 1.5, expect: '0px'} // height can't be negative 117 ]); 118 119 // both 50px but not interpolable 120 test_no_interpolation({ 121 property: 'height', 122 from: 'max-content', 123 to: 'fit-content', 124 }); 125 126 test_no_interpolation({ 127 property: 'height', 128 from: 'max-content', 129 to: 'stretch', 130 }); 131 132 test_interpolation({ 133 property: 'height', 134 from: 'max-content', /* 50px */ 135 to: neutralKeyframe, /* 150px */ 136 }, [ 137 {at: -0.3, expect: '20px'}, 138 {at: 0, expect: '50px'}, 139 {at: 0.3, expect: '80px'}, 140 {at: 0.6, expect: '110px'}, 141 {at: 1, expect: '150px'}, 142 {at: 1.5, expect: '200px'} 143 ]); 144 145 test_interpolation({ 146 property: 'height', 147 from: neutralKeyframe, /* 150px */ 148 to: 'fit-content', /* 50px */ 149 }, [ 150 {at: -0.3, expect: '180px'}, 151 {at: 0, expect: '150px'}, 152 {at: 0.3, expect: '120px'}, 153 {at: 0.6, expect: '90px'}, 154 {at: 1, expect: '50px'}, 155 {at: 1.5, expect: '0px'} 156 ]); 157 158 </script>