unit-cycles.html (13980B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dependency-cycles-via-relative-units" /> 3 <meta name="assert" content="This test verifies that reference cycles via units are detected" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script> 7 function register_property(name, syntax, inherits) { 8 CSS.registerProperty({ 9 name: name, 10 syntax: syntax, 11 initialValue: '0px', 12 inherits: inherits 13 }); 14 } 15 16 function register_length(name, inherits=false) { 17 register_property(name, '<length>', inherits); 18 } 19 20 function register_universal(name) { 21 register_property(name, '*', false); 22 } 23 24 register_length('--font-size-em'); 25 register_length('--font-size-rem'); 26 register_length('--font-size-ex'); 27 register_length('--font-size-ch'); 28 register_length('--font-size-px'); 29 register_length('--font-size-lh'); 30 register_length('--font-size-em-via-var'); 31 register_length('--font-size-rem-via-var'); 32 register_length('--font-size-ex-via-var'); 33 register_length('--font-size-ch-via-var'); 34 register_length('--font-size-em-inherited', true); 35 register_length('--font-size-ex-inherited', true); 36 register_length('--font-size-ch-inherited', true); 37 register_length('--line-height-lh'); 38 register_length('--line-height-lh-via-var'); 39 register_length('--line-height-lh-inherited', true); 40 register_universal('--font-size-em-universal'); 41 register_universal('--font-size-rem-universal'); 42 register_universal('--font-size-ex-universal'); 43 register_universal('--font-size-ch-universal'); 44 register_universal('--font-size-px-universal'); 45 register_universal('--font-size-lh-universal'); 46 </script> 47 <style> 48 :root { 49 --unregistered-em: 10em; 50 --unregistered-rem: 10rem; 51 --unregistered-ex: 10ex; 52 --unregistered-ch: 10ch; 53 --unregistered-lh: 10lh; 54 --unregistered-em-env: calc(10em + env(test, 0px)); 55 --unregistered-rem-env: calc(10rem + env(test, 0px)); 56 --unregistered-ex-env: calc(10ex + env(test, 0px)); 57 --unregistered-ch-env: calc(10ch + env(test, 0px)); 58 --unregistered-lh-env: calc(10lh + env(test, 0px)); 59 } 60 61 :root, #target { 62 --font-size-em: 2em; 63 --font-size-rem: 2rem; 64 --font-size-ex: 2ex; 65 --font-size-ch: 2ch; 66 --font-size-px: 42px; 67 --font-size-lh: 2lh; 68 --line-height-lh: 2lh; 69 --font-size-em-via-var: var(--unregistered-em); 70 --font-size-rem-via-var: var(--unregistered-rem); 71 --font-size-ex-via-var: var(--unregistered-ex); 72 --font-size-ch-via-var: var(--unregistered-ch); 73 --line-height-lh-via-var: var(--unregistered-lh); 74 --font-size-em-universal: 2em; 75 --font-size-rem-universal: 2rem; 76 --font-size-ex-universal: 2ex; 77 --font-size-ch-universal: 2ch; 78 --font-size-px-universal: 42px; 79 --font-size-lh-universal: 2lh; 80 } 81 82 #parent { 83 --font-size-em-inherited: 4em; 84 --font-size-ex-inherited: 4ex; 85 --font-size-ch-inherited: 4ch; 86 --line-height-lh-inherited: 4lh; 87 } 88 89 #target { 90 font-size: 11px; 91 line-height: 13px; 92 } 93 </style> 94 95 <div id=parent> 96 <div id=target></div> 97 </div> 98 <div id=ref></div> 99 100 <script> 101 102 function unset_dimension(element = ref) { 103 element.style.fontSize = ''; 104 element.style.marginBottom = ''; 105 } 106 107 function compute_margin_bottom(dimension, element) { 108 try { 109 element.style.marginBottom = dimension; 110 return getComputedStyle(element).marginBottom; 111 } finally { 112 element.style.marginBottom = ''; 113 } 114 } 115 116 // Compute a dimension (e.g. 1em) given a certain fontSize. 117 function compute_dimension(dimension, fontSize, element = ref) { 118 try { 119 element.style.fontSize = fontSize; 120 return compute_margin_bottom(dimension, element); 121 } finally { 122 element.style.fontSize = ''; 123 } 124 } 125 126 function assert_property_equals(name, value, element = target) { 127 var computedStyle = getComputedStyle(element); 128 assert_equals(computedStyle.getPropertyValue(name), value); 129 } 130 131 let unsetFontSize = compute_dimension('1em', 'unset'); 132 const unsetLineHeight = "normal"; 133 134 add_result_callback(function(){ 135 unset_dimension(target); 136 unset_dimension(document.documentElement); 137 }); 138 139 test(function() { 140 // Unregistered variables behave as if they're copy & paste, so 141 // follow the regular font-relative size resolution. 142 const unregistered_variables = { 143 'unregistered-em': target.parentElement, 144 'unregistered-ex': target.parentElement, 145 'unregistered-ch': target.parentElement, 146 'unregistered-lh': target.parentElement, 147 'unregistered-rem': document.documentElement, 148 }; 149 150 for (let variable in unregistered_variables) { 151 const e = unregistered_variables[variable]; 152 const v = `var(--${variable})`; 153 target.style = `font-size: ${v};`; 154 assert_property_equals('font-size', compute_margin_bottom(v, e)); 155 } 156 }, 'Font-dependent unregistered variables can be used in font-size'); 157 158 test(function() { 159 const universal_variables = { 160 'font-size-em-universal': (v) => compute_dimension(v, 'unset', target), 161 'font-size-ex-universal': (v) => compute_dimension(v, 'unset', target), 162 'font-size-ch-universal': (v) => compute_dimension(v, 'unset', target), 163 'font-size-lh-universal': (v) => compute_margin_bottom('2lh', target.parentElement), 164 'font-size-rem-universal': (v) => compute_dimension(v, 'unset', target), 165 }; 166 for (let variable in universal_variables) { 167 const v = `var(--${variable})`; 168 const expected = universal_variables[variable](v); 169 target.style = `font-size: ${v};`; 170 assert_property_equals('font-size', expected); 171 } 172 }, 'Registered universal variables referencing font-dependent units can be used in font-size'); 173 174 175 test(function() { 176 // Unregistered variables behave as if they're copy & paste, so 177 // follow the regular font-relative size resolution. 178 const unregistered_variables = { 179 'unregistered-em-env': target.parentElement, 180 'unregistered-ex-env': target.parentElement, 181 'unregistered-ch-env': target.parentElement, 182 'unregistered-lh-env': target.parentElement, 183 'unregistered-rem-env': document.documentElement, 184 }; 185 186 for (let variable in unregistered_variables) { 187 const e = unregistered_variables[variable]; 188 const v = `var(--${variable})`; 189 target.style = `font-size: ${v};`; 190 assert_property_equals('font-size', compute_margin_bottom(v, e)); 191 } 192 }, 'Font-dependent unregistered variables referencing env() can be used in font-size'); 193 194 test(function() { 195 target.style = 'font-size: var(--font-size-px);'; 196 assert_property_equals('font-size', '42px'); 197 assert_property_equals('--font-size-px', '42px'); 198 }, 'Non-font-dependent variables can be used in font-size'); 199 200 test(function() { 201 target.style = 'font-size: var(--font-size-em);'; 202 assert_property_equals('font-size', unsetFontSize); 203 assert_property_equals('--font-size-em', '0px'); 204 }, 'Lengths with em units may not be referenced from font-size'); 205 206 test(function() { 207 target.style = 'font-size: var(--font-size-ex);'; 208 assert_property_equals('font-size', unsetFontSize); 209 assert_property_equals('--font-size-ex', '0px'); 210 }, 'Lengths with ex units may not be referenced from font-size'); 211 212 test(function() { 213 target.style = 'font-size: var(--font-size-ch);'; 214 assert_property_equals('font-size', unsetFontSize); 215 assert_property_equals('--font-size-ch', '0px'); 216 }, 'Lengths with ch units may not be referenced from font-size'); 217 218 test(function() { 219 target.style = 'font-size: var(--font-size-lh);'; 220 assert_property_equals('font-size', unsetFontSize); 221 assert_property_equals('--font-size-lh', '0px'); 222 }, 'Lengths with lh units may not be referenced from font-size'); 223 224 test(function() { 225 target.style = 'font-size: var(--font-size-rem);'; 226 let expected = compute_dimension('2rem', 'unset', document.documentElement); 227 assert_property_equals('--font-size-rem', expected); 228 assert_property_equals('font-size', expected); 229 }, 'Lengths with rem units may be referenced from font-size on non-root element'); 230 231 test(function() { 232 let root = document.documentElement; 233 root.style = 'font-size: var(--font-size-rem);'; 234 assert_property_equals('font-size', unsetFontSize, root); 235 assert_property_equals('--font-size-rem', '0px', root); 236 }, 'Lengths with rem units may not be referenced from font-size on root element'); 237 238 test(function() { 239 target.style = 'line-height: var(--line-height-lh);'; 240 assert_property_equals('line-height', unsetLineHeight); 241 assert_property_equals('--line-height-lh', '0px'); 242 }, 'Lengths with lh units may not be referenced from line-height'); 243 244 test(function() { 245 target.style = 'font-size: var(--noexist, var(--font-size-em));'; 246 assert_property_equals('font-size', unsetFontSize); 247 }, 'Fallback may not use font-relative units'); 248 249 test(function() { 250 target.style = 'line-height: var(--noexist, var(--line-height-lh));'; 251 assert_property_equals('line-height', unsetLineHeight); 252 }, 'Fallback may not use line-height-relative units'); 253 254 test(function() { 255 target.style = 'font-size: var(--font-size-em, 42px);'; 256 assert_property_equals('font-size', unsetFontSize); 257 }, 'Fallback not triggered while inside em unit cycle'); 258 259 test(function() { 260 target.style = 'font-size: var(--font-size-ex, 42px);'; 261 assert_property_equals('font-size', unsetFontSize); 262 }, 'Fallback not triggered while inside ex unit cycle'); 263 264 test(function() { 265 target.style = 'font-size: var(--font-size-ch, 42px);'; 266 assert_property_equals('font-size', unsetFontSize); 267 }, 'Fallback not triggered while inside ch unit cycle'); 268 269 test(function() { 270 let root = document.documentElement; 271 root.style = 'font-size: var(--font-size-rem, 42px);'; 272 assert_property_equals('font-size', unsetFontSize, root); 273 root.style = 'font-size: unset;'; 274 }, 'Fallback not triggered while inside rem unit cycle on root element'); 275 276 test(function() { 277 target.style = 'line-height: var(--line-height-lh, 42px);'; 278 assert_property_equals('line-height', unsetLineHeight); 279 }, 'Fallback not triggered while inside lh unit cycle'); 280 281 test(function() { 282 target.style = 'font-size: var(--font-size-em-via-var);'; 283 assert_property_equals('font-size', unsetFontSize); 284 assert_property_equals('--font-size-em-via-var', '0px'); 285 }, 'Lengths with em units are detected via var references'); 286 287 test(function() { 288 target.style = 'font-size: var(--font-size-ex-via-var);'; 289 assert_property_equals('font-size', unsetFontSize); 290 assert_property_equals('--font-size-ex-via-var', '0px'); 291 }, 'Lengths with ex units are detected via var references'); 292 293 test(function() { 294 target.style = 'font-size: var(--font-size-ch-via-var);'; 295 assert_property_equals('font-size', unsetFontSize); 296 assert_property_equals('--font-size-ch-via-var', '0px'); 297 }, 'Lengths with ch units are detected via var references'); 298 299 test(function() { 300 let root = document.documentElement; 301 root.style = 'font-size: var(--font-size-rem-via-var);'; 302 assert_property_equals('font-size', unsetFontSize, root); 303 assert_property_equals('--font-size-rem-via-var', '0px', root); 304 root.style = 'font-size: unset'; 305 }, 'Lengths with rem units are detected via var references'); 306 307 test(function() { 308 target.style = 'line-height: var(--line-height-lh-via-var);'; 309 assert_property_equals('line-height', unsetLineHeight); 310 assert_property_equals('--line-height-lh-via-var', '0px'); 311 }, 'Lengths with lh units are detected via var references'); 312 313 test(function() { 314 let expected4em = compute_dimension('4em', 'unset'); 315 target.style = 'font-size: var(--font-size-em-inherited);'; 316 assert_property_equals('font-size', expected4em); 317 assert_property_equals('--font-size-em-inherited', expected4em); 318 }, 'Inherited lengths with em units may be used'); 319 320 test(function() { 321 let expected4ex = compute_dimension('4ex', 'unset'); 322 target.style = 'font-size: var(--font-size-ex-inherited);'; 323 assert_property_equals('font-size', expected4ex); 324 assert_property_equals('--font-size-ex-inherited', expected4ex); 325 }, 'Inherited lengths with ex units may be used'); 326 327 test(function() { 328 let expected4ch = compute_dimension('4ch', 'unset'); 329 target.style = 'font-size: var(--font-size-ch-inherited);'; 330 assert_property_equals('font-size', expected4ch); 331 assert_property_equals('--font-size-ch-inherited', expected4ch); 332 }, 'Inherited lengths with ch units may be used'); 333 334 test(function() { 335 let expected4lh = compute_dimension('4lh', 'unset'); 336 target.style = 'line-height: var(--line-height-lh-inherited);'; 337 assert_property_equals('line-height', expected4lh); 338 assert_property_equals('--line-height-lh-inherited', expected4lh); 339 }, 'Inherited lengths with lh units may be used'); 340 341 </script>