Skip to content

Commit 5304f92

Browse files
author
Anders Hartvoll Ruud
committed
[css-contain-3] Make the query container an element, ++
It is simpler to treat *elements* as query containers, and delay interaction with the layout box until query-evaluation-time. This makes it possible to answer the question "is this element a container?" sooner, which is beneficial for implementing the feature. It also seems to make more sense given that we're going to have container features that don't really care about the layout box. Also: - Require layout containment for dimensional queries. - Add 'block-size' as part of the computed value.
1 parent e8e14b8 commit 5304f92

1 file changed

Lines changed: 16 additions & 10 deletions

File tree

css-contain-3/Overview.bs

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ spec:css-break-3; type:dfn; text:fragmentation
2525
spec:css-break-3; type:dfn; text:fragmentation container
2626
spec:css-break-3; type:dfn; text:fragmentation context
2727
spec:css-break-3; type:dfn; text:fragmented flow
28+
spec:css-contain-2; type:dfn; text:layout containment box
2829
spec:css-sizing-4; type:property; text:contain-intrinsic-size
2930
spec:css-sizing-4; type:property; text:aspect-ratio
3031
spec:intersection-observer; type:dfn; text:intersection root
@@ -169,11 +170,11 @@ Creating Query Containers: the 'container-type' property</h2>
169170
Initial: none
170171
Inherited: no
171172
Applies to: all elements
172-
Computed value: the keyword ''container-type/none'' or one or more of ''container-type/size'', ''container-type/inline-size'', ''container-type/style'', ''container-type/state''
173+
Computed value: the keyword ''container-type/none'' or one or more of ''container-type/size'', ''container-type/inline-size'', ''container-type/block-size'', ''container-type/style'', ''container-type/state''
173174
Animation type: not animatable
174175
</pre>
175176

176-
The 'container-type' property establishes the [=principal box=]
177+
The 'container-type' property establishes the element
177178
as a <dfn export>query container</dfn> for the purpose of [=container queries=],
178179
allowing [=style rules=] styling its descendants
179180
to query various aspects of its sizing, layout, and style
@@ -192,23 +193,23 @@ Creating Query Containers: the 'container-type' property</h2>
192193
Applies [=layout containment=],
193194
[=style containment=],
194195
and [=size containment=]
195-
to this box.
196+
the [=principal box=].
196197
<dt><dfn>inline-size</dfn>
197198
<dd>
198199
Establishes a [=query container=] for [=dimensional queries=]
199200
on the container’s own [=inline axis=].
200201
Applies [=layout containment=],
201202
[=style containment=],
202203
and [=inline-size containment=]
203-
to this box.
204+
the [=principal box=].
204205
<dt><dfn>block-size</dfn>
205206
<dd>
206207
Establishes a [=query container=] for [=dimensional queries=]
207208
on the container’s own [=block axis=].
208209
Applies [=layout containment=],
209210
[=style containment=],
210211
and [=block-size containment=]
211-
to this box.
212+
the [=principal box=].
212213
<dt><dfn>style</dfn>
213214
<dd>
214215
Establishes a [=query container=] for [=style queries=].
@@ -274,8 +275,7 @@ Naming Query Containers: the 'container-name' property</h2>
274275
</pre>
275276

276277
The 'container-name' property
277-
specifies a list of <dfn export lt="query container name">query container names</dfn>
278-
that apply to the box if it is a [=query container=].
278+
specifies a list of <dfn export lt="query container name">query container names</dfn>.
279279
These names can be used by ''@container'' rules
280280
to filter which [=query containers=] are targeted.
281281

@@ -431,13 +431,19 @@ Container Features</h2>
431431
Dimensional Container Features</h3>
432432

433433
<dfn export>Dimensional queries</dfn> allow querying
434-
the size of the [=query container=].
434+
the size of the [=query container=]'s [=principal box=].
435+
436+
If the [=query container=] does not have a [=principal box=],
437+
or the principal box is not a [=layout containment box=],
438+
then the result of evaluating any dimensional container feature is "unknown".
435439

436440
[=Relative length=] units in [=container queries=]
437-
are based on the the [=computed values=] of the [=query container=] element.
441+
are based on the the [=computed values=] of the [=query container=].
438442

439443
Note: This is different from the handling of relative units in [=media queries=].
440444

445+
Issue: Evaluate to "unknown" if inline-/block-/size containment is missing.
446+
441447
<h4 id="width">
442448
Width: the '@container/width' feature</h4>
443449

@@ -547,7 +553,7 @@ Orientation: the '@container/orientation' feature</h4>
547553
Style Container Features</h3>
548554

549555
<dfn export>Style queries</dfn> allow querying
550-
the [=computed values=] of the [=query container=] element.
556+
the [=computed values=] of the [=query container=].
551557

552558
Issue(5989): "container width" and "container height" units
553559

0 commit comments

Comments
 (0)