interpolate-size-min-height-interpolation.html (3653B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>min-height interpolation with interpolate-size: allow-keywords</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-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 min-height: 30px; 17 } 18 .target { 19 width: 10px; 20 height: 0px; 21 min-height: 10px; 22 } 23 .target::before { 24 display: block; 25 content: ""; 26 width: 100px; 27 height: 50px; 28 } 29 </style> 30 31 <body></body> 32 33 <script> 34 35 test_interpolation({ 36 property: 'min-height', 37 from: 'initial', 38 to: '20px', 39 }, [ 40 {at: -0.3, expect: 'calc-size(auto, -6px + size * 1.3)'}, 41 {at: 0, expect: 'calc-size(auto, 0px + size * 1)'}, 42 {at: 0.3, expect: 'calc-size(auto, 6px + size * 0.7)'}, 43 {at: 0.6, expect: 'calc-size(auto, 12px + size * 0.4)'}, 44 {at: 1, expect: 'calc-size(auto, 20px + size * 0)'}, 45 {at: 1.5, expect: 'calc-size(auto, 30px + size * -0.5)'} 46 ]); 47 48 test_interpolation({ 49 property: 'min-height', 50 from: 'unset', 51 to: '20px', 52 }, [ 53 {at: -0.3, expect: 'calc-size(auto, -6px + size * 1.3)'}, 54 {at: 0, expect: 'calc-size(auto, 0px + size * 1)'}, 55 {at: 0.3, expect: 'calc-size(auto, 6px + size * 0.7)'}, 56 {at: 0.6, expect: 'calc-size(auto, 12px + size * 0.4)'}, 57 {at: 1, expect: 'calc-size(auto, 20px + size * 0)'}, 58 {at: 1.5, expect: 'calc-size(auto, 30px + size * -0.5)'} 59 ]); 60 61 test_interpolation({ 62 property: 'min-height', 63 from: 'auto', 64 to: '20px', 65 }, [ 66 {at: -0.3, expect: 'calc-size(auto, -6px + size * 1.3)'}, 67 {at: 0, expect: 'calc-size(auto, 0px + size * 1)'}, 68 {at: 0.3, expect: 'calc-size(auto, 6px + size * 0.7)'}, 69 {at: 0.6, expect: 'calc-size(auto, 12px + size * 0.4)'}, 70 {at: 1, expect: 'calc-size(auto, 20px + size * 0)'}, 71 {at: 1.5, expect: 'calc-size(auto, 30px + size * -0.5)'} 72 ]); 73 74 test_interpolation({ 75 property: 'min-height', 76 from: 'auto', 77 to: '0px', 78 }, [ 79 {at: -0.3, expect: 'calc-size(auto, 0px + size * 1.3)'}, 80 {at: 0, expect: 'calc-size(auto, 0px + size * 1)'}, 81 {at: 0.3, expect: 'calc-size(auto, 0px + size * 0.7)'}, 82 {at: 0.6, expect: 'calc-size(auto, 0px + size * 0.4)'}, 83 {at: 1, expect: 'calc-size(auto, 0px + size * 0)'}, 84 {at: 1.5, expect: 'calc-size(auto, 0px + size * -0.5)'} 85 ]); 86 87 test_no_interpolation({ 88 property: 'min-height', 89 from: 'fit-content', 90 to: 'min-content', 91 }); 92 93 test_no_interpolation({ 94 property: 'min-height', 95 from: 'max-content', 96 to: 'stretch', 97 }); 98 99 test_interpolation({ 100 property: 'min-height', 101 from: 'fit-content', 102 to: neutralKeyframe, /* 10px */ 103 }, [ 104 {at: -0.3, expect: 'calc-size(fit-content, -3px + size * 1.3)'}, 105 {at: 0, expect: 'calc-size(fit-content, 0px + size * 1)'}, 106 {at: 0.3, expect: 'calc-size(fit-content, 3px + size * 0.7)'}, 107 {at: 0.6, expect: 'calc-size(fit-content, 6px + size * 0.4)'}, 108 {at: 1, expect: 'calc-size(fit-content, 10px + size * 0)'}, 109 {at: 1.5, expect: 'calc-size(fit-content, 15px + size * -0.5)'} 110 ]); 111 112 test_interpolation({ 113 property: 'min-height', 114 from: neutralKeyframe, /* 10px */ 115 to: 'min-content', 116 }, [ 117 {at: -0.3, expect: 'calc-size(min-content, 13px + size * -0.3)'}, 118 {at: 0, expect: 'calc-size(min-content, 10px + size * 0)'}, 119 {at: 0.3, expect: 'calc-size(min-content, 7px + size * 0.3)'}, 120 {at: 0.6, expect: 'calc-size(min-content, 4px + size * 0.6)'}, 121 {at: 1, expect: 'calc-size(min-content, 0px + size * 1)'}, 122 {at: 1.5, expect: 'calc-size(min-content, -5px + size * 1.5)'} 123 ]); 124 125 </script>