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