calc-size-width.html (2875B)
1 <!DOCTYPE html> 2 <title>calc-size() on width</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <style> 8 #container { 9 font-family: 'Ahem'; 10 font-size: 20px; 11 width: 500px; 12 } 13 #target { 14 } 15 </style> 16 17 <div id="container"> 18 <!-- 19 Given the contents of #target (and the Ahem font): 20 max-content width is 30ch or 600px 21 min-content width is 20ch or 400px 22 --> 23 <div id="target">ninechars twenty_characters___</div> 24 </div> 25 26 <script> 27 28 setup({explicit_done: true}); 29 document.fonts.ready.then(()=> { 30 let basic_tests = [ 31 { value: "calc-size(any, 357px)", expected: "357px" }, 32 { value: "calc-size(any, 31%)", expected: "155px" }, 33 { value: "calc-size(max-content, 31%)", expected: "155px" }, 34 { value: "calc-size(fit-content, 72px)", expected: "72px" }, 35 { value: "calc-size(37px, 93px)", expected: "93px" }, 36 { value: "calc-size(83px, size * 3)", expected: "249px" }, 37 { value: "calc-size(min-content, size / 2)", expected: "200px" }, 38 { value: "calc-size(max-content, size * 1.2)", expected: "720px" }, 39 { value: "calc-size(fit-content, size / 4 + 30px)", expected: "155px" }, 40 { value: "calc-size(stretch, size / 2 - 10%)", expected: "200px" }, 41 { value: "calc-size(30px, 15em)", expected: "300px" }, 42 { value: "calc-size(calc-size(any, 30px), 15em)", expected: "300px" }, 43 { value: "calc-size(calc-size(2in, 30px), 15em)", expected: "300px" }, 44 { value: "calc-size(calc-size(min-content, 30px), 15em)", expected: "300px" }, 45 { value: "calc-size(calc-size(min-content, size), size)", expected: "400px" }, 46 { value: "calc-size(auto, size)", expected: "500px" }, 47 { value: "calc-size(auto, size * 0.6 + 23px)", expected: "323px" }, 48 ]; 49 const container = document.getElementById("container"); 50 const target = document.getElementById("target"); 51 const target_cs = getComputedStyle(target); 52 for (const obj of basic_tests) { 53 test((t) => { 54 target.style.removeProperty("width"); 55 target.style.width = obj.value; 56 assert_equals(target_cs.width, obj.expected); 57 }, `resolved width for width: ${obj.value}`); 58 } 59 60 target.style.width = "calc-size(fit-content, size / 2)"; 61 let container_size_tests = [ 62 { container_width: "300px", expected: "200px" }, 63 { container_width: "500px", expected: "250px" }, 64 { container_width: "700px", expected: "300px" }, 65 ]; 66 for (const obj of container_size_tests) { 67 test((t) => { 68 container.style.width = obj.container_width; 69 assert_equals(target_cs.width, obj.expected); 70 }, `resolved width for width: ${target.style.width} with container width ${obj.container_width}`); 71 } 72 container.style.width = ""; 73 74 done(); 75 }); 76 77 </script>