interpolate-size-max-height-interpolation.html (2830B)
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: 100px; 28 height: 50px; 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 test_no_interpolation({ 43 property: 'max-height', 44 from: 'initial', 45 to: '20px', 46 }); 47 48 test_no_interpolation({ 49 property: 'max-height', 50 from: 'unset', 51 to: '20px', 52 }); 53 54 test_no_interpolation({ 55 property: 'max-height', 56 from: 'none', 57 to: '20px', 58 }); 59 60 test_no_interpolation({ 61 property: 'max-height', 62 from: 'none', 63 to: 'max-content', 64 }); 65 66 test_no_interpolation({ 67 property: 'max-height', 68 from: 'stretch', 69 to: 'fit-content', 70 }); 71 72 test_interpolation({ 73 property: 'max-height', 74 from: '150px', 75 to: 'min-content', /* (50px) */ 76 }, [ 77 {at: -0.3, expect: 'calc-size(min-content, 195px + size * -0.3)'}, 78 {at: 0, expect: 'calc-size(min-content, 150px + size * 0)'}, 79 {at: 0.3, expect: 'calc-size(min-content, 105px + size * 0.3)'}, 80 {at: 0.6, expect: 'calc-size(min-content, 60px + size * 0.6)'}, 81 {at: 1, expect: 'calc-size(min-content, 0px + size * 1)'}, 82 {at: 1.5, expect: 'calc-size(min-content, -75px + size * 1.5)'} 83 ]); 84 85 test_interpolation({ 86 property: 'max-height', 87 from: 'min-content', /* (50px) */ 88 to: neutralKeyframe, /* 100px */ 89 }, [ 90 {at: -0.3, expect: 'calc-size(min-content, -30px + size * 1.3)'}, 91 {at: 0, expect: 'calc-size(min-content, 0px + size * 1)'}, 92 {at: 0.3, expect: 'calc-size(min-content, 30px + size * 0.7)'}, 93 {at: 0.6, expect: 'calc-size(min-content, 60px + size * 0.4)'}, 94 {at: 1, expect: 'calc-size(min-content, 100px + size * 0)'}, 95 {at: 1.5, expect: 'calc-size(min-content, 150px + size * -0.5)'} 96 ]); 97 98 test_interpolation({ 99 property: 'max-height', 100 from: neutralKeyframe, /* 100px */ 101 to: 'max-content', /* (50px) */ 102 }, [ 103 {at: -0.3, expect: 'calc-size(max-content, 130px + size * -0.3)'}, 104 {at: 0, expect: 'calc-size(max-content, 100px + size * 0)'}, 105 {at: 0.3, expect: 'calc-size(max-content, 70px + size * 0.3)'}, 106 {at: 0.6, expect: 'calc-size(max-content, 40px + size * 0.6)'}, 107 {at: 1, expect: 'calc-size(max-content, 0px + size * 1)'}, 108 {at: 1.5, expect: 'calc-size(max-content, -50px + size * 1.5)'} 109 ]); 110 111 </script>