interpolate-size-min-height-composition.html (1888B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>min-height composition with interpolate-size: allow-keywords</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-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 32 // TODO(https://issues.chromium.org/issues/40339056): The specific 33 // syntax details of these expectations probably need further review to 34 // check against the calc() simplification rules and other parts of the 35 // specification. 36 37 test_composition({ 38 property: 'min-height', 39 underlying: 'fit-content', /* 50px */ 40 addFrom: '100px', 41 addTo: '200px', 42 }, [ 43 {at: -0.3, expect: 'calc-size(fit-content, (100px + size) * 1.3 + (200px + size) * -0.3)'}, 44 {at: 0, expect: 'calc-size(fit-content, (100px + size) * 1 + (200px + size) * 0)'}, 45 {at: 0.5, expect: 'calc-size(fit-content, (100px + size) * 0.5 + (200px + size) * 0.5)'}, 46 {at: 1, expect: 'calc-size(fit-content, (100px + size) * 0 + (200px + size) * 1)'}, 47 {at: 1.5, expect: 'calc-size(fit-content, (100px + size) * -0.5 + (200px + size) * 1.5)'}, 48 ]); 49 50 test_composition({ 51 property: 'min-height', 52 underlying: 'fit-content', 53 addFrom: '200px', 54 addTo: 'min-content', /* 50px */ 55 }, [ 56 {at: -0.3, expect: 'calc-size(fit-content, 200px + size)'}, 57 {at: 0, expect: 'calc-size(fit-content, 200px + size)'}, 58 {at: 0.5, expect: 'min-content'}, 59 {at: 1, expect: 'min-content'}, 60 {at: 1.5, expect: 'min-content'}, 61 ]); 62 </script> 63 </body>