calc-size-width-box-sizing.html (4799B)
1 <!DOCTYPE html> 2 <title>calc-size() on width, with border/padding/margin/box-sizing</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 <style> 7 #container { 8 display: inline-block; 9 font-size: 20px; 10 } 11 #target { 12 display: inline-block; 13 height: 123px; 14 border-style: solid; 15 border-width: 20px 1px 20px 3px; 16 padding: 20px 3px 20px 5px; 17 margin: 20px 2px 20px 1px; 18 } 19 #child { 20 height: 20px; 21 width: 7px; 22 } 23 </style> 24 25 <div id="container"> 26 <div id="target"> 27 <div id="child"></div> 28 </div> 29 </div> 30 31 <script> 32 33 let tests = [ 34 { 35 styles: { 36 "width": "auto", 37 }, 38 expected_target_computed: "7px", 39 expected_target_border_box: 19, 40 expected_container: 22, 41 }, 42 { 43 styles: { 44 "width": "auto", 45 "box-sizing": "border-box", 46 }, 47 expected_target_computed: "19px", 48 expected_target_border_box: 19, 49 expected_container: 22, 50 }, 51 { 52 styles: { 53 "width": "calc-size(auto, size)", 54 }, 55 expected_target_computed: "7px", 56 expected_target_border_box: 19, 57 expected_container: 22, 58 }, 59 { 60 styles: { 61 "width": "calc-size(auto, size)", 62 "box-sizing": "border-box", 63 }, 64 expected_target_computed: "19px", 65 expected_target_border_box: 19, 66 expected_container: 22, 67 }, 68 { 69 styles: { 70 "width": "calc-size(auto, size * 2)", 71 }, 72 expected_target_computed: "14px", 73 expected_target_border_box: 26, 74 expected_container: 29, 75 }, 76 { 77 styles: { 78 "width": "calc-size(auto, size * 2)", 79 "box-sizing": "content-box", /* just one test with explicit initial value */ 80 }, 81 expected_target_computed: "14px", 82 expected_target_border_box: 26, 83 expected_container: 29, 84 }, 85 { 86 styles: { 87 "width": "calc-size(auto, size * 2)", 88 "box-sizing": "border-box", 89 }, 90 expected_target_computed: "38px", 91 expected_target_border_box: 38, 92 expected_container: 41, 93 }, 94 { 95 styles: { 96 "width": "calc-size(min-content, size * 2)", 97 }, 98 expected_target_computed: "14px", 99 expected_target_border_box: 26, 100 expected_container: 29, 101 }, 102 { 103 styles: { 104 "width": "calc-size(fit-content, size * 2)", 105 "box-sizing": "border-box", 106 }, 107 expected_target_computed: "38px", 108 expected_target_border_box: 38, 109 expected_container: 41, 110 }, 111 { 112 styles: { 113 "min-width": "calc-size(min-content, size * 2)", 114 }, 115 expected_target_computed: "14px", 116 expected_target_border_box: 26, 117 expected_container: 29, 118 }, 119 { 120 styles: { 121 "min-width": "calc-size(max-content, size * 2)", 122 "box-sizing": "border-box", 123 }, 124 expected_target_computed: "38px", 125 expected_target_border_box: 38, 126 expected_container: 41, 127 }, 128 { 129 styles: { 130 "width": "200px", 131 "max-width": "calc-size(max-content, size * 2)", 132 }, 133 expected_target_computed: "14px", 134 expected_target_border_box: 26, 135 expected_container: 29, 136 }, 137 { 138 styles: { 139 "width": "200px", 140 "max-width": "calc-size(min-content, size * 2)", 141 "box-sizing": "border-box", 142 }, 143 expected_target_computed: "38px", 144 expected_target_border_box: 38, 145 expected_container: 41, 146 }, 147 { 148 styles: { 149 "width": "calc-size(11px, size * 2)", 150 }, 151 expected_target_computed: "22px", 152 expected_target_border_box: 34, 153 expected_container: 37, 154 }, 155 { 156 styles: { 157 "width": "calc-size(11px, size * 2)", 158 "box-sizing": "border-box", 159 }, 160 expected_target_computed: "22px", 161 expected_target_border_box: 22, 162 expected_container: 25, 163 }, 164 ]; 165 const container = document.getElementById("container"); 166 const container_cs = getComputedStyle(container); 167 const target = document.getElementById("target"); 168 const target_cs = getComputedStyle(target); 169 for (const obj of tests) { 170 test((t) => { 171 for (const prop in obj.styles) { 172 target.style.setProperty(prop, obj.styles[prop]); 173 } 174 t.add_cleanup(() => { 175 for (const prop in obj.styles) { 176 target.style.removeProperty(prop); 177 } 178 }); 179 assert_equals(target_cs.width, obj.expected_target_computed, 180 "getComputedStyle(target).width"); 181 assert_equals(target.getBoundingClientRect().width, obj.expected_target_border_box, 182 "target.getBoundingClientRect().width"); 183 assert_equals(container_cs.width, `${obj.expected_container}px`, 184 "getComputedStyle(container).width"); 185 assert_equals(container.getBoundingClientRect().width, obj.expected_container, 186 "container.getBoundingClientRect().width"); 187 }, `resolved width with styles ${JSON.stringify(obj.styles)}`); 188 } 189 190 </script>