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