calc-size-flex-basis-on-row.html (4187B)
1 <!DOCTYPE html> 2 <title>calc-size() on flex-basis</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <style> 9 #container { 10 display: flex; 11 flex-direction: row; 12 font-family: 'Ahem'; 13 font-size: 20px; 14 width: 500px; 15 } 16 #target { 17 width: 125px; 18 flex-grow: 0; 19 flex-shrink: 0; 20 } 21 </style> 22 23 <div id="container"> 24 <!-- 25 Given the contents of #target (and the Ahem font): 26 max-content width is 30ch or 600px 27 min-content width is 20ch or 400px 28 --> 29 <div id="target">ninechars twenty_characters___</div> 30 </div> 31 32 <script> 33 34 setup({explicit_done: true}); 35 document.fonts.ready.then(()=> { 36 let basic_tests = [ 37 /* I think flex layout rules require expectations be greater than width or min-content width */ 38 { value: "274px", expected: "274px" }, 39 { value: "min-content", expected: "400px" }, 40 { value: "fit-content", expected: "500px" }, 41 { value: "max-content", expected: "600px" }, 42 { value: "content", expected: "600px" }, 43 { value: "auto", expected: "125px" }, 44 { value: "calc-size(any, 357px)", expected: "357px" }, 45 { value: "calc-size(any, 31%)", expected: "155px" }, 46 { value: "calc-size(max-content, 31%)", expected: "155px" }, 47 { value: "calc-size(fit-content, 172px)", expected: "172px" }, 48 { value: "calc-size(37px, 193px)", expected: "193px" }, 49 { value: "calc-size(83px, size * 3)", expected: "249px" }, 50 { value: "calc-size(min-content, size / 2)", expected: "200px" }, 51 { value: "calc-size(max-content, size * 1.2)", expected: "720px" }, 52 { value: "calc-size(fit-content, size / 4 + 30px)", expected: "155px" }, 53 { value: "calc-size(stretch, size / 2 - 10%)", expected: "200px" }, 54 { value: "calc-size(30px, 15em)", expected: "300px" }, 55 { value: "calc-size(calc-size(any, 30px), 15em)", expected: "300px" }, 56 { value: "calc-size(calc-size(2in, 30px), 15em)", expected: "300px" }, 57 { value: "calc-size(calc-size(min-content, 30px), 15em)", expected: "300px" }, 58 { value: "calc-size(calc-size(min-content, size), size)", expected: "400px" }, 59 { value: "calc-size(auto, size)", expected: "125px" }, 60 { value: "calc-size(auto, size * 1.6 + 23px)", expected: "223px" }, 61 { value: "calc-size(content, size)", expected: "600px" }, 62 { value: "calc-size(content, size / 2)", expected: "300px" }, 63 { value: "auto", width_value: "auto", expected: "600px" }, 64 { value: "calc-size(auto, size * 2)", width_value: "auto", expected: "1200px" }, 65 { value: "auto", width_value: "calc-size(auto, size * 1.5 + 5px)", expected: "905px" }, 66 { value: "calc-size(auto, size + 14px)", width_value: "calc-size(auto, size * 1.5)", expected: "914px" }, 67 { value: "auto", width_value: "calc-size(max-content, size + 12px)", expected: "612px" }, 68 { value: "calc-size(auto, size + 4px)", width_value: "calc-size(fit-content, size + 12px)", expected: "516px" }, 69 { value: "472px", width_value: "calc-size(fit-content, size + 12px)", expected: "472px" }, 70 { value: "calc-size(content, size * 1.5 + 4px)", width_value: "321px", expected: "904px" }, 71 ]; 72 const container = document.getElementById("container"); 73 const target = document.getElementById("target"); 74 const target_cs = getComputedStyle(target); 75 for (const obj of basic_tests) { 76 test((t) => { 77 target.style.removeProperty("flex-basis"); 78 target.style.flexBasis = obj.value; 79 assert_not_equals(target.style.flexBasis, "", "flex-basis value is accepted"); 80 81 target.style.removeProperty("width"); 82 if ("width_value" in obj) { 83 target.style.width = obj.width_value; 84 assert_not_equals(target.style.width, "", "width value is accepted"); 85 } 86 87 assert_equals(target_cs.width, obj.expected, "resulting width is correct"); 88 }, `resolved value for width resulting from flex-basis: ${obj.value}${obj.width_value ? ` and width: ${obj.width_value}` : ""}`); 89 } 90 91 done(); 92 }); 93 94 </script>