getComputedStyle-calc-mixed-units-002.html (3748B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values Test: computed value of 8 calc() values that involve mixed units</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value"> 9 10 <meta name="flags" content=""> 11 <meta content="This meta-test verifies that terms with a length value that can be resolved at computed-value time must be resolved and must be absolutized to 'px'. In this meta-test, we test percentage unit (%), three font-relative length units (em, rem, lh) and some absolute length units (pc, pt, px, cm, mm, Q, in). " name="assert"> 12 13 <!-- 14 15 NOT Tested in this test are: 16 17 Viewport-percentage Length units: 18 vh, svh, lvh, dvh, 19 vw, svw, lvw, dvw, 20 vmin, svmin, lvmin, dvmin, 21 vmax, svmax, lvmax, dvmax, 22 vi, svi, lvi, dvi, 23 vb, svb, lvb, dvb 24 25 and these of font-relative length units: 26 ex, rex, 27 cap, rcap, 28 ch, rch, 29 ic, ric, 30 rlh 31 32 --> 33 34 <script src="/resources/testharness.js"></script> 35 36 <script src="/resources/testharnessreport.js"></script> 37 38 <style> 39 html 40 { 41 font-size: 30px; /* for checking rem unit */ 42 } 43 44 body 45 { 46 font-size: 16px; 47 line-height: 1.25; /* computed value: 20px; for checking lh unit */ 48 height: 500px; 49 margin: 20px; 50 width: 520px; 51 } 52 53 div#target 54 { 55 height: 100px; 56 width: 100px; 57 } 58 </style> 59 60 <div id="target"></div> 61 62 <script> 63 function startTesting() 64 { 65 66 var targetElement = document.getElementById("target"); 67 68 function verifyComputedStyle(property_name, specified_value, expected_value) 69 { 70 71 test(function() 72 { 73 74 targetElement.style.setProperty(property_name, "initial"); 75 76 targetElement.style.setProperty(property_name, specified_value); 77 78 assert_equals(getComputedStyle(targetElement)[property_name], expected_value); 79 80 }, `testing ${property_name}: ${specified_value}`); 81 } 82 83 verifyComputedStyle("width", "calc(10% + 2em)", "84px"); 84 85 /* 86 87 520px mult 10% == 52px 88 89 + 90 91 16px mult 2 == 32px 92 93 ======= 94 95 84px 96 97 */ 98 99 100 verifyComputedStyle("width", "calc(5% + 4rem)", "146px"); 101 102 /* 103 104 520px mult 5% == 26px 105 106 + 107 108 30px mult 4 == 120px 109 110 ======= 111 112 146px 113 114 */ 115 116 117 verifyComputedStyle("width", "calc(8lh + 7px)", "167px"); 118 119 /* 120 121 8 mult 20px == 160px 122 123 + 124 125 7px 126 127 ======= 128 129 167px 130 131 */ 132 133 134 verifyComputedStyle("height", "calc(10% + 6pt)", "58px"); 135 136 /* 137 138 10% mult 500 == 50px 139 140 + 141 142 6pt == 8px 143 144 ======== 145 146 58px 147 148 */ 149 150 151 verifyComputedStyle("width", "calc(4em + 2.6458333cm)", "164px"); 152 153 /* 154 155 4 mult 16px == 64px 156 157 + 158 159 2.6458333cm == 100px 160 161 ======== 162 163 164px 164 165 */ 166 167 168 verifyComputedStyle("height", "calc(5em + 26.458333mm)", "180px"); 169 170 /* 171 172 5 mult 16px == 80px 173 174 + 175 176 26.458333mm == 100px 177 178 ======== 179 180 180px 181 182 */ 183 184 185 verifyComputedStyle("width", "calc(2in + 101.6Q)", "288px"); 186 187 /* 188 189 2 mult 96px == 192px 190 191 + 192 193 101.6Q == 96px 194 195 ======== 196 197 288px 198 199 */ 200 201 202 verifyComputedStyle("height", "calc(1pc + 3pt)", "20px"); 203 204 /* 205 206 1pc == 16px 207 208 + 209 210 3pt == 4px 211 212 ======= 213 214 20px 215 216 */ 217 218 } 219 220 startTesting(); 221 222 </script>