interpolate-size-height-composition.html (1637B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>height composition with interpolate-size: allow-keywords</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-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 <style> 11 :root { 12 interpolate-size: allow-keywords; 13 } 14 .parent { 15 height: 200px; 16 } 17 .target { 18 width: 100px; 19 height: 150px; 20 } 21 .target::before { 22 display: block; 23 content: ""; 24 width: 100px; 25 height: 50px; 26 } 27 </style> 28 29 <body> 30 <script> 31 test_composition({ 32 property: 'height', 33 underlying: 'fit-content', /* 50px */ 34 addFrom: '100px', 35 addTo: '200px', 36 }, [ 37 {at: -0.3, expect: '120px'}, 38 {at: 0, expect: '150px'}, 39 {at: 0.5, expect: '200px'}, 40 {at: 1, expect: '250px'}, 41 {at: 1.5, expect: '300px'}, 42 ]); 43 44 test_composition({ 45 property: 'height', 46 underlying: 'fit-content', 47 addFrom: 'min-content', /* min-content is 50px, fit-content is ignored 48 because min-content and fit-content are not 49 compatible */ 50 addTo: '200px', /* combines with fit-content (50px) to be 250px */ 51 /* the composited from value is a min-content size and the composited 52 to value is a fit-content size, so they cannot be interpolated, 53 and the animation is discrete */ 54 }, [ 55 {at: -0.3, expect: '50px'}, 56 {at: 0, expect: '50px'}, 57 {at: 0.5, expect: '250px'}, 58 {at: 1, expect: '250px'}, 59 {at: 1.5, expect: '250px'}, 60 ]); 61 </script> 62 </body>