font-relative-units-dynamic.html (8769B)
1 <!doctype html> 2 <title>CSS Container Queries Test: font-relative units - dynamic</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="stylesheet" href="/fonts/ahem.css"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <script> 9 10 setup(() => assert_implements_size_container_queries(), { explicit_done: true }); 11 12 // Inflate a <template> subtree into #main, run the test function, 13 // then clean up. 14 function test_template(template_element, test_fn, description) { 15 test((t) => { 16 assert_equals(template_element.tagName, "TEMPLATE"); 17 t.add_cleanup(() => main.replaceChildren()); 18 main.append(template_element.content.cloneNode(true)); 19 test_fn(t); 20 }, description); 21 } 22 23 const green = "rgb(0, 128, 0)"; 24 const red = "rgb(255, 0, 0)"; 25 26 </script> 27 28 <style> 29 main { 30 color: red; 31 } 32 #container { 33 container-type: inline-size; 34 width: 100px; 35 } 36 #container > div { 37 font-size: 16px; 38 } 39 </style> 40 41 <main id=main> 42 </main> 43 44 <template id="t1"> 45 <style> 46 main { font-size: 10px; } 47 main.larger { font-size: 20px; } 48 @container (width: 5em) { 49 #test { color: green } 50 } 51 </style> 52 <div id="container"> 53 <div> 54 <div id="test"></div> 55 </div> 56 </div> 57 </template> 58 <script> 59 test_template(t1, (t) => { 60 t.add_cleanup(() => main.classList.remove("larger")); 61 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 62 main.classList.add("larger"); 63 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 64 }, 'em units respond to changes'); 65 </script> 66 67 <template id="t2"> 68 <style> 69 :root { font-size: 10px; } 70 :root.larger { font-size: 50px; } 71 @container (width: 2rem) { 72 #test { color: green } 73 } 74 </style> 75 <div id="container"> 76 <div> 77 <div id="test"></div> 78 </div> 79 </div> 80 </template> 81 <script> 82 test_template(t2, (t) => { 83 t.add_cleanup(() => document.documentElement.classList.remove("larger")); 84 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 85 document.documentElement.classList.add("larger"); 86 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 87 }, 'rem units respond to changes'); 88 </script> 89 90 <template id="t3"> 91 <style> 92 main { font-size: 10px; } 93 main.larger { font-size: 20px; } 94 @container (width <= 15ex) { 95 #test { color: green } 96 } 97 </style> 98 <div id="container"> 99 <div> 100 <div id="test"></div> 101 </div> 102 </div> 103 </template> 104 <script> 105 test_template(t3, (t) => { 106 t.add_cleanup(() => main.classList.remove("larger")); 107 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 108 main.classList.add("larger"); 109 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 110 }, 'ex units respond to changes'); 111 </script> 112 113 <template id="t4"> 114 <style> 115 :root { font-size: 10px; } 116 :root.larger { font-size: 20px; } 117 @container (width <= 12rex) { 118 #test { color: green } 119 } 120 </style> 121 <div id="container"> 122 <div> 123 <div id="test"></div> 124 </div> 125 </div> 126 </template> 127 <script> 128 test_template(t4, (t) => { 129 t.add_cleanup(() => document.documentElement.classList.remove("larger")); 130 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 131 document.documentElement.classList.add("larger"); 132 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 133 }, 'rex units respond to changes'); 134 </script> 135 136 <template id="t5"> 137 <style> 138 main { font-size: 10px; } 139 main.larger { font-size: 20px; } 140 @container (width <= 15ch) { 141 #test { color: green } 142 } 143 </style> 144 <div id="container"> 145 <div> 146 <div id="test"></div> 147 </div> 148 </div> 149 </template> 150 <script> 151 test_template(t5, (t) => { 152 t.add_cleanup(() => main.classList.remove("larger")); 153 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 154 main.classList.add("larger"); 155 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 156 }, 'ch units respond to changes'); 157 </script> 158 159 <link rel="stylesheet" href="/fonts/ahem.css"> 160 161 <template id="t6"> 162 <style> 163 main { font-family: 'Ahem'; font-size: 10px; } 164 main.larger { font-size: 20px; } 165 @container (width <= 7cap) { 166 #test { color: green } 167 } 168 </style> 169 <div id="container"> 170 <div> 171 <div id="test"></div> 172 </div> 173 </div> 174 </template> 175 <script> 176 document.fonts.load("10px Ahem").then(() => { 177 test_template(t6, (t) => { 178 t.add_cleanup(() => main.classList.remove("larger")); 179 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 180 main.classList.add("larger"); 181 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 182 }, 'cap units respond to changes'); 183 }) 184 </script> 185 186 <template id="t7"> 187 <style> 188 :root { font-size: 10px; } 189 :root.larger { font-size: 20px; } 190 @container (width <= 15rch) { 191 #test { color: green } 192 } 193 </style> 194 <div id="container"> 195 <div> 196 <div id="test"></div> 197 </div> 198 </div> 199 </template> 200 <script> 201 test_template(t7, (t) => { 202 t.add_cleanup(() => document.documentElement.classList.remove("larger")); 203 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 204 document.documentElement.classList.add("larger"); 205 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 206 }, 'rch units respond to changes'); 207 </script> 208 209 <template id="t8"> 210 <style> 211 main { 212 font-size: 10px; 213 line-height: 5; 214 } 215 main.larger { font-size: 20px; } 216 @container (width <= 1lh) { 217 #test { color: green } 218 } 219 </style> 220 <div id="container"> 221 <div> 222 <div id="test"></div> 223 </div> 224 </div> 225 </template> 226 <script> 227 test_template(t8, (t) => { 228 t.add_cleanup(() => main.classList.remove("larger")); 229 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 230 main.classList.add("larger"); 231 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 232 }, 'lh units respond to changes'); 233 </script> 234 235 <template id="t9"> 236 <style> 237 :root { 238 font-size: 10px; 239 line-height: 5; 240 } 241 :root.larger { 242 font-size: 20px; 243 } 244 @container (width <= 1rlh) { 245 #test { color: green } 246 } 247 </style> 248 <div id="container"> 249 <div> 250 <div id="test"></div> 251 </div> 252 </div> 253 </template> 254 <script> 255 test_template(t9, (t) => { 256 t.add_cleanup(() => document.documentElement.classList.remove("larger")); 257 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 258 document.documentElement.classList.add("larger"); 259 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 260 }, 'rlh units respond to changes'); 261 </script> 262 263 <template id="t10"> 264 <style> 265 main { font-size: 10px; } 266 main.larger { font-size: 20px; } 267 @container (width <= 8ic) { 268 #test { color: green } 269 } 270 </style> 271 <div id="container"> 272 <div> 273 <div id="test"></div> 274 </div> 275 </div> 276 </template> 277 <script> 278 test_template(t10, (t) => { 279 t.add_cleanup(() => main.classList.remove("larger")); 280 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 281 main.classList.add("larger"); 282 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 283 }, 'ic units respond to changes'); 284 </script> 285 286 287 <template id="t11"> 288 <style> 289 :root { font-size: 10px; } 290 :root.larger { font-size: 20px; } 291 @container (width <= 8ric) { 292 #test { color: green } 293 } 294 </style> 295 <div id="container"> 296 <div> 297 <div id="test"></div> 298 </div> 299 </div> 300 </template> 301 <script> 302 test_template(t11, (t) => { 303 t.add_cleanup(() => document.documentElement.classList.remove("larger")); 304 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 305 document.documentElement.classList.add("larger"); 306 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 307 }, 'ric units respond to changes'); 308 </script> 309 310 <template id="t12"> 311 <style> 312 :root { font-family: 'Ahem'; font-size: 10px; } 313 :root.larger { font-size: 20px; } 314 @container (width <= 7rcap) { 315 #test { color: green } 316 } 317 </style> 318 <div id="container"> 319 <div style="font-family: monospace;"> 320 <div id="test"></div> 321 </div> 322 </div> 323 </template> 324 <script> 325 document.fonts.load("10px Ahem").then(() => { 326 test_template(t12, (t) => { 327 t.add_cleanup(() => document.documentElement.classList.remove("larger")); 328 assert_equals(getComputedStyle(main.querySelector("#test")).color, red); 329 document.documentElement.classList.add("larger"); 330 assert_equals(getComputedStyle(main.querySelector("#test")).color, green); 331 }, 'rcap units respond to changes'); 332 333 done(); 334 }) 335 </script>