diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs index 49e65810ae5..8db16d269a9 100644 --- a/css-conditional-5/Overview.bs +++ b/css-conditional-5/Overview.bs @@ -348,10 +348,10 @@ Container Queries [=container queries=] allow testing aspects of elements within the document (such as box dimensions or computed styles). - By default, all elements are [=query containers=] + By default, all elements are query containers for the purpose of [=container style queries=], and can be established as [=query containers=] - for [=container size queries=] by specifying + for [=container size queries=] and [=container scroll-state queries=] by specifying the additional query types using the 'container-type' property (or the 'container' [=shorthand=]). Style rules applying to a [=query container=]’s [=flat tree=] descendants @@ -385,9 +385,9 @@ Container Queries For the ''::part()'' and ''::slotted()'' pseudo-element selectors, - which represent real elements in the DOM tree, query containers can be + which represent real elements in the DOM tree, [=query containers=] can be established by [=flat tree=] ancestors of those elements. - For other pseudo-elements, query containers can be established by + For other pseudo-elements, [=query containers=] can be established by inclusive [=flat tree=] ancestors of their originating element.
@@ -461,7 +461,7 @@ Creating Query Containers: the 'container-type' property 
 		Name: container-type
-		Value: normal | size | inline-size
+		Value: normal | [ [ size | inline-size ] || scroll-state ]
 		Initial: normal
 		Inherited: no
 		Applies to: all elements
@@ -469,20 +469,12 @@ Creating Query Containers: the 'container-type' property
 		Animation type: not animatable
- The 'container-type' property establishes the element - as a query container - for the purpose of [=container queries=] that require explicit containment - (such as [=container size queries=]), - allowing [=style rules=] styling its descendants - to query various aspects of its sizing and layout, - and respond accordingly. - - Unless otherwise noted, - all elements are [=query containers=] - for the purpose of [=container queries=] - that do not require explicit [=containment=] - (such as [=container style queries=]), - regardless of the specified 'container-type'. + The 'container-type' property establishes the element as a + [=query container=] for certain types of queries. For size + [=container queries=], which require certain types of containment, elements + are explicitly made [=query containers=] through this property. For other + types of [=query containers=] any element can be a [=query container=], such + as for [=container style queries=]. Values have the following meanings: @@ -503,10 +495,13 @@ Creating Query Containers: the 'container-type' property [=style containment=], and [=inline-size containment=] to the [=principal box=]. +
scroll-state +
+ Establishes a [=query container=] for [=scroll-state queries=]
normal
The element is not a [=query container=] - for any [=container size queries=], + for any [=container size queries=] or [=scroll-state queries=], but remains a [=query container=] for [=container style queries=]. @@ -547,6 +542,23 @@ Creating Query Containers: the 'container-type' property
+
+ Containers can also expose state that depends on scroll offset. This example + styles a descendant of a sticky positioned element when it is stuck to the + top edge: + + 
+		#sticky {
+		  container-type: scroll-state;
+		  position: sticky;
+		}
+		@container scroll-state(stuck: top) {
+		  #sticky-child {
+		    background-color: lime;
+		  }
+		}
+
+

Naming Query Containers: the 'container-name' property

@@ -658,19 +670,27 @@ Container Queries: the ''@container'' rule 
 	<> = [ <> ]? <>
 	<> = <>
-	<>     = not <>
-	                      | <> [ [ and <> ]* | [ or <> ]* ]
-	<>     = ( <> )
-	                      | ( <> )
-	                      | style( <> )
-	                      | <>
-
-	<>         = not <>
-	                      | <> [ [ and <> ]* | [ or <> ]* ]
-	                      | <>
-	<>     = ( <> )
-	                      | ( <> )
-	                      | <>
+	<> = not <>
+	                  | <> [ [ and <> ]* | [ or <> ]* ]
+	<> = ( <> )
+	                  | ( <> )
+	                  | style( <> )
+	                  | scroll-state( <> )
+	                  | <>
+
+	<>     = not <>
+	                  | <> [ [ and <> ]* | [ or <> ]* ]
+	                  | <>
+	<> = ( <> )
+	                  | ( <> )
+	                  | <>
+
+	<>     = not <>
+	                         | <> [ [ and <> ]* | [ or <> ]* ]
+	                         | <>
+	<> = ( <> )
+	                         | ( <> )
+	                         | <>
The keywords ''container-name/none'', ''and'', ''not'', and ''or'' @@ -1068,6 +1088,185 @@ Style Container Features are [=computed value|computed=] with respect to the [=query container=], the same as other values. +

+Scroll State Container Features

+ + A container scroll-state query allows querying a container for + state that depends on scroll position. It is a boolean combination of + individual scroll-state features + (<>) that each query a single feature of the + [=query container=]. The syntax of a <> is the + same as for a [=media feature=]: a feature name, a comparator, and a value. + + [=Scroll-state features=] can either match state of the scroller itself, + or an element that is affected by the scroll position of an ancestor + [=scroll container's=] [=scrollport=]. An example of the former is the + ''overflowing'' feature, ''snapped'' the latter. + +

+Updating Scroll State

+ + Issue(10796): This section is subject to change as a result of resolving + the issue of unifying scroll-snapshotting layout state across several specifications. + + Scroll state may cause layout cycles since queried scroll state may cause style changes, + which may lead to scroll state changes as a result of layout. The same issue exists for + [=scroll progress timelines=], and scroll state is handled in a similar manner. + + To avoid such layout cycles, ''scroll-state'' [=query containers=] update their + current state once as the last step of [=run the scroll steps=]. Then, after the + resizeObserver loop in the + HTML event loop processing model, + update the current state of every ''scroll-state'' [=query container=]. + If that state has changed since the scroll state update in [=run the scroll steps=], + re-run the style and layout update a single time if necessary. + +

+Sticky positioning: the '@container/stuck' feature

+ + 
+		Name: stuck
+		For: @container
+		Value: top | right | bottom | left | block-start | inline-start | block-end | inline-end
+		Type: discrete
+
+ + The '@container/stuck' [=container feature=] queries whether a + ''position/sticky'' positioned container is visually shifted to stay inside + the [=sticky view rectangle=] for the given edge. The logical edges map to + physical based on the direction and writing-mode of the [=query container=]. + None of the values match if the [=query container=] is not [=sticky positioned=]. + + It is possible for two values from opposite axes to match at the same time, + but not for opposite edges along the same axis. + +
+ May match: + 
+		  @container scroll-state((stuck: top) and (stuck: left)) { ... }
+
+ + Will never match: + 
+		  @container scroll-state((stuck: left) and (stuck: right)) { ... }
+
+
+ + In the boolean context, the query matches if visual shift is applied in any + direction. + +
+
top +
+ The ''position/sticky'' container is shifted to stay inside the top edge. +
right +
+ The ''position/sticky'' container is shifted to stay inside the right edge. +
bottom +
+ The ''position/sticky'' container is shifted to stay inside the bottom edge. +
left +
+ The ''position/sticky'' container is shifted to stay inside the left edge. +
block-start +
+ The ''position/sticky'' container is shifted to stay inside the [=block-start=] edge. +
inline-start +
+ The ''position/sticky'' container is shifted to stay inside the [=inline-start=] edge. +
block-end +
+ The ''position/sticky'' container is shifted to stay inside the [=block-end=] edge. +
inline-end +
+ The ''position/sticky'' container is shifted to stay inside the [=inline-end=] edge. +
+ +

+Scroll snapping: the '@container/snapped' feature

+ + 
+		Name: snapped
+		For: @container
+		Value: x | y | block | inline
+		Type: discrete
+
+ + The '@container/snapped' [=container feature=] queries whether a [=snap target=] + is snapped to its [=snap container=] in the given axis. It matches in the boolean + context if it is snapped in at least one of the directions. + +
+
x +
+ '@container/snapped' [=container feature=] matches ''x'' + if the [=query container=] is a horizontal [=snap target=] for its [=scroll container=] +
y +
+ '@container/snapped' [=container feature=] matches ''y'' + if the [=query container=] is a vertical [=snap target=] for its [=scroll container=] +
block +
+ '@container/snapped' [=container feature=] matches ''block'' + if the [=query container=] is a [=snap target=] for its [=scroll container=] + in the block direction of the [=snap container=]. +
inline +
+ '@container/snapped' [=container feature=] matches ''inline'' + if the [=query container=] is a [=snap target=] for its [=scroll container=] + in the inline direction of the [=snap container=]. +
+ +

+Overflowing: the '@container/overflowing' feature

+ + 
+		Name: overflowing
+		For: @container
+		Value: top | right | bottom | left | block-start | inline-start | block-end | inline-end
+		Type: discrete
+
+ + The '@container/overflowing' [=container feature=] queries whether a + [=scroll container=] has clipped [=scrollable overflow rectangle=] content + in the given direction which is reachable through user initiated scrolling. + That is, '@container/overflowing' does not match for a ''overflow/hidden'' + container, nor for a [=negative scrollable overflow region=]. + + The logical values map to physical based on the direction and writing-mode of + the [=query container=]. None of the values match if the container is not a + [=scroll container=]. + + In the boolean context, the query matches if any of the values match. + +
+
top +
+ The [=scroll container=] has [=scrollable overflow=] past the top edge. +
right +
+ The [=scroll container=] has [=scrollable overflow=] past the right edge. +
bottom +
+ The [=scroll container=] has [=scrollable overflow=] past the bottom edge. +
left +
+ The [=scroll container=] has [=scrollable overflow=] past the left edge. +
block-start +
+ The [=scroll container=] has [=scrollable overflow=] past the [=block-start=] edge. +
inline-start +
+ The [=scroll container=] has [=scrollable overflow=] past the [=inline-start=] edge. +
block-end +
+ The [=scroll container=] has [=scrollable overflow=] past the [=block-end=] edge. +
inline-end +
+ The [=scroll container=] has [=scrollable overflow=] past the [=inline-end=] edge. +
+ +

Container Relative Lengths: the ''cqw'', ''cqh'', ''cqi'', ''cqb'', ''cqmin'', ''cqmax'' units