interpolate-size-min-width-composition.html (2376B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>min-width composition with interpolate-size: allow-keywords</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width"> 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 width: 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-width', 39 underlying: '100px', 40 addFrom: 'max-content', 41 addTo: '100px', 42 }, [ 43 {at: -0.3, expect: 'calc-size(max-content, (100px + size) * 1.3 + -60px)'}, 44 {at: 0, expect: 'calc-size(max-content, (100px + size) * 1 + 0px)'}, 45 {at: 0.5, expect: 'calc-size(max-content, (100px + size) * 0.5 + 100px)'}, 46 {at: 1, expect: 'calc-size(max-content, (100px + size) * 0 + 200px)'}, 47 {at: 1.5, expect: 'calc-size(max-content, (100px + size) * -0.5 + 300px)'}, 48 ]); 49 50 test_composition({ 51 property: 'min-width', 52 underlying: 'min-content', /* not compatible */ 53 addFrom: 'fit-content', /* not compatible */ 54 addTo: 'max-content', /* not compatible */ 55 }, [ 56 {at: -0.3, expect: 'fit-content'}, 57 {at: 0, expect: 'fit-content'}, 58 {at: 0.5, expect: 'max-content'}, 59 {at: 1, expect: 'max-content'}, 60 {at: 1.5, expect: 'max-content'}, 61 ]); 62 63 test_composition({ 64 property: 'min-width', 65 underlying: 'max-content', 66 addFrom: '100px', /* composites to calc-size(max-content, 100px + size) */ 67 addTo: 'min-content', /* underlying value ignored when compositing since not compatible */ 68 /* min-content and max-content values cannot interpolate, so they animate discretely */ 69 }, [ 70 {at: -0.3, expect: 'calc-size(max-content, 100px + size)'}, 71 {at: 0, expect: 'calc-size(max-content, 100px + size)'}, 72 {at: 0.5, expect: 'min-content'}, 73 {at: 1, expect: 'min-content'}, 74 {at: 1.5, expect: 'min-content'}, 75 ]); 76 </script> 77 </body>