@@ -238,7 +238,7 @@ Creating Query Containers: the 'container-type' property</h2>
238
238
239
239
The ''40em'' value used in the query condition
240
240
is relative to the [=computed value=] of 'font-size'
241
- on the ''section'' container.
241
+ on the relevant [=query container=] .
242
242
</div>
243
243
244
244
<div class=example>
@@ -401,7 +401,9 @@ Container Queries: the ''@container'' rule</h2>
401
401
to just those with a matching [=query container name=] .
402
402
3. Select the nearest remaining [=query container=] ancestor.
403
403
4. If no ancestor is an eligible [=query container=] ,
404
- then the [=container query=] is ''false'' for that element.
404
+ then the [=container query=] is ''unknown'' for that element.
405
+
406
+ Issue: Do missing containers evaluate false or unknown?
405
407
406
408
If an eligible [=query container=] has been selected,
407
409
each [=container feature=] in the <<container-query-list>>
@@ -426,7 +428,7 @@ Container Queries: the ''@container'' rule</h2>
426
428
</div>
427
429
428
430
Issue(6393): Provide a syntax to query a specific container-type?
429
-
431
+ Issue: Define how nested container queries are evaluated
430
432
431
433
<h2 id="container-features">
432
434
Container Features</h2>
@@ -447,13 +449,41 @@ Dimensional Container Features</h3>
447
449
448
450
If the [=query container=] does not have a [=principal box=] ,
449
451
or the principal box is not a [=layout containment box=] ,
452
+ or the [=query container=] does not support [=dimensional queries=] on the relevant axes,
450
453
then the result of evaluating any dimensional container feature is ''unknown'' .
451
454
452
- [=Relative length=] units in [=container queries=]
453
- are based on the the [=computed values=] of the [=query container=] .
455
+ [=Relative length=] units in [=container query=] conditions
456
+ are evaluated based on the the [=computed values=] of the [=query container=] .
454
457
455
458
Note: This is different from the handling of relative units in [=media queries=] .
456
459
460
+ <div class=example>
461
+ For example, [=query containers=] with different font-sizes
462
+ will evaluate ''em'' -based queries relative to their own font sizes:
463
+
464
+ <pre class=lang-css>
465
+ aside, main {
466
+ container-type: inline-size;
467
+ }
468
+
469
+ aside { font-size: 16px; }
470
+ main { font-size: 24px; }
471
+
472
+ @container (width > 40em) {
473
+ h2 { font-size: 1.5em; }
474
+ }
475
+ </pre>
476
+
477
+ The ''40em'' value used in the query condition
478
+ is relative to the [=computed value=] of 'font-size'
479
+ on the relevant [=query container=] :
480
+
481
+ * For any ''h2'' inside ''aside'' ,
482
+ the query condition will be true above ''640px'' .
483
+ * For any ''h2'' inside ''main'' ,
484
+ the query condition will be true above ''960px'' .
485
+ </div>
486
+
457
487
Issue: Evaluate to "unknown" if inline-/block-/size containment is missing.
458
488
459
489
<h4 id="width">
0 commit comments