custom-property-style-queries.html (16192B)
1 <!doctype html> 2 <title>CSS Container Queries Test: custom property style queries</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#style-container"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 #outer { 9 container-name: outer; 10 --inner: false; 11 --outer: true; 12 --inner-no-space:false; 13 --outer-no-space:true; 14 --inner-space-after:false ; 15 --outer-space-after:true ; 16 } 17 #inner { 18 --inner: true; 19 --outer: false; 20 --inner-no-space:true; 21 --outer-no-space:false; 22 --inner-space-after:true ; 23 --outer-space-after:false ; 24 } 25 </style> 26 <div id="outer"> 27 <div id="inner"> 28 <div id="target"></div> 29 <div id="fliptarget"></div> 30 </div> 31 </div> 32 <script> 33 setup(() => { 34 assert_implements_style_container_queries(); 35 assert_implements_size_container_queries(); 36 }); 37 38 const green = "rgb(0, 128, 0)"; 39 40 function test_evaluation(name, query, expected) { 41 test((t) => { 42 let style_node = document.createElement('style'); 43 t.add_cleanup(() => { 44 style_node.remove(); 45 }); 46 style_node.innerText = ` 47 @container ${name} ${query} { #target { --applied:true; } } 48 @container ${name} not ${query} { #fliptarget { --applied:true; } } 49 `; 50 51 assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '', 52 'Initial --applied for target'); 53 assert_equals(getComputedStyle(fliptarget).getPropertyValue('--applied'), '', 54 'Initial --applied for fliptarget'); 55 document.head.append(style_node); 56 assert_equals(getComputedStyle(target).getPropertyValue('--applied'), expected ? 'true' : '', 57 'Matching query for #target'); 58 assert_equals(getComputedStyle(fliptarget).getPropertyValue('--applied'), expected ? '' : 'true', 59 'Matching negated query for #fliptarget'); 60 }, `${name} ${query}`); 61 } 62 63 setup(() => { 64 assert_implements_style_container_queries(); 65 assert_implements_size_container_queries(); 66 }); 67 68 test_evaluation('', 'style(--inner: true)', true); 69 test_evaluation('', 'style(--inner:true)', true); 70 test_evaluation('', 'style(--inner:true )', true); 71 test_evaluation('', 'style(--inner: true )', true); 72 test_evaluation('', 'style(--inner-no-space: true)', true); 73 test_evaluation('', 'style(--inner-no-space:true)', true); 74 test_evaluation('', 'style(--inner-no-space:true )', true); 75 test_evaluation('', 'style(--inner-no-space: true )', true); 76 test_evaluation('', 'style(--inner-space-after: true)', true); 77 test_evaluation('', 'style(--inner-space-after:true)', true); 78 test_evaluation('', 'style(--inner-space-after:true )', true); 79 test_evaluation('', 'style(--inner-space-after: true )', true); 80 test_evaluation('', 'style(--outer: true)', false); 81 test_evaluation('', 'style(--outer:true)', false); 82 test_evaluation('', 'style(--outer:true )', false); 83 test_evaluation('', 'style(--outer: true )', false); 84 test_evaluation('', 'style(--outer-no-space: true)', false); 85 test_evaluation('', 'style(--outer-no-space:true)', false); 86 test_evaluation('', 'style(--outer-no-space:true )', false); 87 test_evaluation('', 'style(--outer-no-space: true )', false); 88 test_evaluation('', 'style(--outer-space-after: true)', false); 89 test_evaluation('', 'style(--outer-space-after:true)', false); 90 test_evaluation('', 'style(--outer-space-after:true )', false); 91 test_evaluation('', 'style(--outer-space-after: true )', false); 92 test_evaluation('outer', 'style(--inner: true)', false); 93 test_evaluation('outer', 'style(--inner:true)', false); 94 test_evaluation('outer', 'style(--inner:true )', false); 95 test_evaluation('outer', 'style(--inner: true )', false); 96 test_evaluation('outer', 'style(--inner-no-space: true)', false); 97 test_evaluation('outer', 'style(--inner-no-space:true)', false); 98 test_evaluation('outer', 'style(--inner-no-space:true )', false); 99 test_evaluation('outer', 'style(--inner-no-space: true )', false); 100 test_evaluation('outer', 'style(--inner-space-after: true)', false); 101 test_evaluation('outer', 'style(--inner-space-after:true)', false); 102 test_evaluation('outer', 'style(--inner-space-after:true )', false); 103 test_evaluation('outer', 'style(--inner-space-after: true )', false); 104 test_evaluation('outer', 'style(--outer: true)', true); 105 test_evaluation('outer', 'style(--outer:true)', true); 106 test_evaluation('outer', 'style(--outer:true )', true); 107 test_evaluation('outer', 'style(--outer: true )', true); 108 test_evaluation('outer', 'style(--outer-no-space: true)', true); 109 test_evaluation('outer', 'style(--outer-no-space:true)', true); 110 test_evaluation('outer', 'style(--outer-no-space:true )', true); 111 test_evaluation('outer', 'style(--outer-no-space: true )', true); 112 test_evaluation('outer', 'style(--outer-space-after: true)', true); 113 test_evaluation('outer', 'style(--outer-space-after:true)', true); 114 test_evaluation('outer', 'style(--outer-space-after:true )', true); 115 test_evaluation('outer', 'style(--outer-space-after: true )', true); 116 </script> 117 118 <style> 119 #important { 120 --foo: bar; 121 } 122 @container style(--foo: bar !important) { 123 #important-child { color: green; } 124 } 125 </style> 126 <div id="important"> 127 <div id="important-child"></div> 128 </div> 129 <script> 130 test(() => { 131 assert_equals(getComputedStyle(document.querySelector("#important-child")).color, green); 132 }, "Query custom property with !important declaration"); 133 </script> 134 135 <style> 136 #var-query { 137 --foo: baz; 138 --bar: baz; 139 } 140 @container style(--foo: var(--bar)) { 141 #var-subst { color: green; } 142 } 143 @container not style(--foo: var(--unknown)) { 144 #var-subst-unknown { color: green; } 145 } 146 @container not style(--foo: var(--unknown, nomatch)) { 147 #var-subst-unknown-fallback { color: green; } 148 } 149 @container style(--foo: var(--unknown, baz)) { 150 #var-subst-matching-fallback { color: green; } 151 } 152 @container style(--baz: var(--unknown)) { 153 #var-subst-unknown-matching { color: green; } 154 } 155 </style> 156 <div id="var-query"> 157 <div id="var-subst"></div> 158 <div id="var-subst-unknown"></div> 159 <div id="var-subst-unknown-fallback"></div> 160 <div id="var-subst-matching-fallback"></div> 161 <div id="var-subst-unknown-matching"></div> 162 </div> 163 <script> 164 test(() => { 165 assert_equals(getComputedStyle(document.querySelector("#var-subst")).color, green); 166 }, "Query custom property using var()"); 167 168 test(() => { 169 assert_equals(getComputedStyle(document.querySelector("#var-subst-unknown")).color, green); 170 }, "Query custom property including unknown var() reference"); 171 172 test(() => { 173 assert_equals(getComputedStyle(document.querySelector("#var-subst-unknown-fallback")).color, green); 174 }, "Query custom property including unknown var() reference with non-matching fallback"); 175 176 test(() => { 177 assert_equals(getComputedStyle(document.querySelector("#var-subst-matching-fallback")).color, green); 178 }, "Query custom property including unknown var() reference with matching fallback"); 179 180 test(() => { 181 assert_equals(getComputedStyle(document.querySelector("#var-subst-unknown-matching")).color, green); 182 }, "Query custom property matching guaranteed-invalid values"); 183 </script> 184 185 <style> 186 #revert { 187 --foo: revert; 188 } 189 #revert-layer { 190 --foo: revert-layer; 191 } 192 @container not style(--foo: revert) { 193 #revert-child { color: green; } 194 } 195 @container not style(--foo: revert-layer) { 196 #revert-layer-child { color: green; } 197 } 198 @container style(--foo: revert) { 199 #revert-child { color: red; } 200 } 201 @container style(--foo: revert-layer) { 202 #revert-layer-child { color: red; } 203 } 204 </style> 205 <div id="revert"> 206 <div id="revert-child"></div> 207 </div> 208 <div id="revert-layer"> 209 <div id="revert-layer-child"></div> 210 </div> 211 <script> 212 test(() => { 213 assert_equals(getComputedStyle(document.querySelector("#revert-child")).color, green); 214 }, "Style query with revert keyword is false"); 215 216 test(() => { 217 assert_equals(getComputedStyle(document.querySelector("#revert-layer-child")).color, green); 218 }, "Style query with revert-layer keyword is false"); 219 </script> 220 221 <style> 222 #defaulting { 223 --inherit: baz; 224 --inherit-no: baz; 225 } 226 #defaulting-container { 227 --inherit-no: bar; 228 --unset-no: baz; 229 --initial-no: baz; 230 --space-no: baz; 231 --explicit-initial: initial; 232 --space: ; 233 } 234 @container style(--initial: initial) { 235 #initial { color: green; } 236 } 237 @container not style(--initial) { 238 #initial-implicit { color: green; } 239 } 240 @container not style(--initial-no: initial) { 241 #initial-no { color: green; } 242 } 243 @container style(--initial-no) { 244 #initial-no-implicit { color: green; } 245 } 246 @container style(--inherit: inherit) { 247 #inherit { color: green; } 248 } 249 @container not style(--inherit-no: inherit) { 250 #inherit-no { color: green; } 251 } 252 @container style(--explicit-initial: initial) { 253 #explicit-initial { color: green; } 254 } 255 @container not style(--explicit-initial) { 256 #explicit-initial-implicit { color: green; } 257 } 258 @container style(--space: ) { 259 #space { color: green; } 260 } 261 @container not style(--space-no: ) { 262 #space-no { color: green; } 263 } 264 @container style(--unset: unset) { 265 #unset { color: green; } 266 } 267 @container not style(--unset-no: unset) { 268 #unset-no { color: green; } 269 } 270 </style> 271 <div id="defaulting"> 272 <div id="defaulting-container"> 273 <div id="initial"></div> 274 <div id="initial-implicit"></div> 275 <div id="initial-no"></div> 276 <div id="initial-no-implicit"></div> 277 <div id="explicit-initial"></div> 278 <div id="explicit-initial-implicit"></div> 279 <div id="space"></div> 280 <div id="space-no"></div> 281 <div id="inherit"></div> 282 <div id="inherit-no"></div> 283 <div id="unset"></div> 284 <div id="unset-no"></div> 285 </div> 286 </div> 287 <script> 288 test(() => { 289 assert_equals(getComputedStyle(document.querySelector("#initial")).color, green); 290 }, "Style query 'initial' matching"); 291 292 test(() => { 293 assert_equals(getComputedStyle(document.querySelector("#initial-implicit")).color, green); 294 }, "Style query matching negated value-less query against initial value"); 295 296 test(() => { 297 assert_equals(getComputedStyle(document.querySelector("#initial-no")).color, green); 298 }, "Style query 'initial' not matching"); 299 300 test(() => { 301 assert_equals(getComputedStyle(document.querySelector("#initial-no-implicit")).color, green); 302 }, "Style query matching value-less query against non-initial value"); 303 304 test(() => { 305 assert_equals(getComputedStyle(document.querySelector("#explicit-initial")).color, green); 306 }, "Style query 'initial' matching (with explicit 'initial' value)"); 307 308 test(() => { 309 assert_equals(getComputedStyle(document.querySelector("#explicit-initial-implicit")).color, green); 310 }, "Style query matching negated value-less query against initial value (with explicit 'initial' value)"); 311 312 test(() => { 313 assert_equals(getComputedStyle(document.querySelector("#space")).color, green); 314 }, "Style query 'space' matching"); 315 316 test(() => { 317 assert_equals(getComputedStyle(document.querySelector("#space-no")).color, green); 318 }, "Style query 'space' not matching"); 319 320 test(() => { 321 assert_equals(getComputedStyle(document.querySelector("#inherit")).color, green); 322 }, "Style query 'inherit' matching"); 323 324 test(() => { 325 assert_equals(getComputedStyle(document.querySelector("#inherit-no")).color, green); 326 }, "Style query 'inherit' not matching"); 327 328 test(() => { 329 assert_equals(getComputedStyle(document.querySelector("#unset")).color, green); 330 }, "Style query 'unset' matching"); 331 332 test(() => { 333 assert_equals(getComputedStyle(document.querySelector("#unset-no")).color, green); 334 }, "Style query 'unset' not matching"); 335 </script> 336 337 <style> 338 @property --reg-length { 339 syntax: "<length>"; 340 inherits: false; 341 initial-value: 10px; 342 } 343 344 #registered { 345 container-type: inline-size; 346 width: 200px; 347 font-size: 20px; 348 } 349 350 #reg-container-px { 351 --reg-length: 10px; 352 } 353 @container style(--reg-length: 10px) { 354 #reg-px { color: green; } 355 } 356 @container style(--reg-length: initial) { 357 #reg-px-initial { color: green; } 358 } 359 @container not style(--reg-length) { 360 #reg-px-initial-implicit { color: green; } 361 } 362 363 #reg-container-font-relative { 364 --reg-length: 10px; 365 } 366 @container style(--reg-length: 0.5em) { 367 #reg-font-relative { color: green; } 368 } 369 370 #reg-container-font-relative-2 { 371 --reg-length: 0.5em; 372 } 373 @container style(--reg-length: 10px) { 374 #reg-font-relative-2 { color: green; } 375 } 376 377 #reg-container-container-relative { 378 width: 100px; 379 --reg-length: 100px; 380 } 381 @container style(--reg-length: 50cqi) { 382 #reg-container-relative { color: green; } 383 } 384 385 #reg-container-initial { 386 --reg-length: 10px; 387 } 388 @container style(--reg-length: 10px) { 389 #reg-initial-value { color: green; } 390 } 391 @container style(--reg-length: initial) { 392 #reg-initial-keyword { color: green; } 393 } 394 @container not style(--reg-length) { 395 #reg-initial-implicit { color: green; } 396 } 397 </style> 398 <div id="registered"> 399 <div id="reg-container-px"> 400 <div id="reg-px"></div> 401 <div id="reg-px-initial"></div> 402 <div id="reg-px-initial-implicit"></div> 403 </div> 404 <div id="reg-container-font-relative"> 405 <div id="reg-font-relative"></div> 406 </div> 407 <div id="reg-container-font-relative-2"> 408 <div id="reg-font-relative-2"></div> 409 </div> 410 <div id="reg-container-container-relative"> 411 <div id="reg-container-relative"></div> 412 </div> 413 <div id="reg-container-initial"> 414 <div id="reg-initial-value"></div> 415 <div id="reg-initial-keyword"></div> 416 <div id="reg-initial-implicit"></div> 417 </div> 418 </div> 419 <script> 420 test(() => { 421 assert_equals(getComputedStyle(document.querySelector("#reg-px")).color, green); 422 }, "Match registered <length> custom property with px."); 423 424 test(() => { 425 assert_equals(getComputedStyle(document.querySelector("#reg-px-initial")).color, green); 426 }, "Match registered <length> custom property with px via initial keyword."); 427 428 test(() => { 429 assert_equals(getComputedStyle(document.querySelector("#reg-font-relative")).color, green); 430 }, "Match registered <length> custom property with em in query."); 431 432 test(() => { 433 assert_equals(getComputedStyle(document.querySelector("#reg-font-relative-2")).color, green); 434 }, "Match registered <length> custom property with em in computed value."); 435 436 test(() => { 437 assert_equals(getComputedStyle(document.querySelector("#reg-container-relative")).color, green); 438 }, "Match registered <length> custom property with cqi unit."); 439 440 test(() => { 441 assert_equals(getComputedStyle(document.querySelector("#reg-initial-value")).color, green); 442 }, "Match registered <length> custom property with initial value."); 443 444 test(() => { 445 assert_equals(getComputedStyle(document.querySelector("#reg-initial-keyword")).color, green); 446 }, "Match registered <length> custom property with initial value via initial keyword."); 447 </script> 448 449 <style> 450 #original-text { 451 --number: 100.00; 452 --spaces: a b; 453 } 454 @container style(--number: 100.00) { 455 #original-text-number { 456 color: green; 457 } 458 } 459 @container style(--number: 100.0) { 460 #original-text-number { 461 color: red; 462 } 463 } 464 @container style(--number: 100) { 465 #original-text-number { 466 color: red; 467 } 468 } 469 @container style(--spaces: a b) { 470 #original-text-spaces { 471 color: green; 472 } 473 } 474 @container style(--spaces: a b) { 475 #original-text-spaces { 476 color: red; 477 } 478 } 479 </style> 480 <div id="original-text"> 481 <div id="original-text-number"></div> 482 <div id="original-text-spaces"></div> 483 </div> 484 <script> 485 test(() => { 486 assert_equals(getComputedStyle(document.querySelector("#original-text-number")).color, green); 487 }, "Should only match exact string for numbers in non-registered custom properties"); 488 489 test(() => { 490 assert_equals(getComputedStyle(document.querySelector("#original-text-spaces")).color, green); 491 }, "Spaces should not collapse in non-registered custom properties"); 492 </script>