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