interpolate-size-width-composition.html (1606B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>width composition with interpolate-size: allow-keywords</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-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 test_composition({ 32 property: 'width', 33 underlying: '100px', 34 addFrom: '100px', 35 addTo: 'auto', /* 200px */ 36 }, [ 37 {at: -0.3, expect: '170px'}, 38 {at: 0, expect: '200px'}, 39 {at: 0.5, expect: '250px'}, 40 {at: 1, expect: '300px'}, 41 {at: 1.5, expect: '350px'}, 42 ]); 43 44 test_composition({ 45 property: 'width', 46 underlying: '100px', 47 addFrom: 'fit-content', /* 100px, not compatible */ 48 addTo: 'auto', /* 200px, not compatible */ 49 }, [ 50 {at: -0.3, expect: '200px'}, 51 {at: 0, expect: '200px'}, 52 {at: 0.5, expect: '300px'}, 53 {at: 1, expect: '300px'}, 54 {at: 1.5, expect: '300px'}, 55 ]); 56 57 test_composition({ 58 property: 'width', 59 underlying: 'max-content', /* 100px */ 60 addFrom: '200px', 61 addTo: 'auto', /* 200px, max-content underlying is ignored */ 62 }, [ 63 {at: -0.3, expect: '300px'}, 64 {at: 0, expect: '300px'}, 65 {at: 0.5, expect: '200px'}, 66 {at: 1, expect: '200px'}, 67 {at: 1.5, expect: '200px'}, 68 ]); 69 </script> 70 </body>