height-composition.html (2192B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>height composition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height"> 5 <meta name="assert" content="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 <style> 11 .target::before { 12 display: block; 13 content: ""; 14 width: 75px; 15 height: 75px; 16 } 17 </style> 18 19 <body> 20 <script> 21 test_composition({ 22 property: 'height', 23 underlying: '50px', 24 addFrom: '100px', 25 addTo: '200px', 26 }, [ 27 {at: -0.3, expect: '120px'}, 28 {at: 0, expect: '150px'}, 29 {at: 0.5, expect: '200px'}, 30 {at: 1, expect: '250px'}, 31 {at: 1.5, expect: '300px'}, 32 ]); 33 34 test_composition({ 35 property: 'height', 36 underlying: '100px', 37 addFrom: '10px', 38 addTo: '2px', 39 }, [ 40 {at: -0.5, expect: '114px'}, 41 {at: 0, expect: '110px'}, 42 {at: 0.5, expect: '106px'}, 43 {at: 1, expect: '102px'}, 44 {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. 45 ]); 46 47 test_composition({ 48 property: 'height', 49 underlying: '10%', 50 addFrom: '100px', 51 addTo: '20%', 52 }, [ 53 {at: -0.3, expect: 'calc(130px + 4%)'}, 54 {at: 0, expect: 'calc(100px + 10%)'}, 55 {at: 0.5, expect: 'calc(50px + 20%)'}, 56 {at: 1, expect: '30%'}, 57 {at: 1.5, expect: 'calc(-50px + 40%)'}, 58 ]); 59 60 test_composition({ 61 property: 'height', 62 underlying: '50px', 63 addFrom: '100px', 64 replaceTo: '200px', 65 }, [ 66 {at: -0.3, expect: '135px'}, 67 {at: 0, expect: '150px'}, 68 {at: 0.5, expect: '175px'}, 69 {at: 1, expect: '200px'}, 70 {at: 1.5, expect: '225px'}, 71 ]); 72 73 test_composition({ 74 property: 'height', 75 underlying: '100px', 76 addFrom: '100px', 77 addTo: 'auto', 78 }, [ 79 {at: -0.3, expect: '200px'}, 80 {at: 0, expect: '200px'}, 81 {at: 0.5, expect: 'auto'}, 82 {at: 1, expect: 'auto'}, 83 {at: 1.5, expect: 'auto'}, 84 ]); 85 86 test_composition({ 87 property: 'height', 88 underlying: 'min-content', /* ignored */ 89 addFrom: '100px', 90 addTo: '200px', 91 }, [ 92 {at: -0.3, expect: '70px'}, 93 {at: 0, expect: '100px'}, 94 {at: 0.5, expect: '150px'}, 95 {at: 1, expect: '200px'}, 96 {at: 1.5, expect: '250px'}, 97 ]); 98 </script> 99 </body>