[css-conditional-5] Draft spec for scroll-state() w3c#6402

Per resolution in [1], add scroll-state() as a query function to query
sticky, snap, and overflow scroll states with a new container-type for
scroll-state queries.

[1] w3c#6402 (comment)

Author: lilles

css-conditional-5/Overview.bs

@@ -460,28 +460,20 @@ Creating Query Containers: the 'container-type' property</h3>
 
 	<pre class='propdef'>
 		Name: container-type
-		Value: normal | size | inline-size
+		Value: normal | [ [ size | inline-size ] || scroll-state ]
 		Initial: normal
 		Inherited: no
 		Applies to: all elements
 		Computed value: specified keyword
 		Animation type: not animatable
 	</pre>
 
-	The 'container-type' property establishes the element
-	as a <dfn export>query container</dfn>
-	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
+	<dfn export>query container</dfn> for certain types of queries. For size
+	[=container queries=], that 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:
 
@@ -502,10 +494,13 @@ Creating Query Containers: the 'container-type' property</h3>
 			[=style containment=],
 			and [=inline-size containment=]
 			to the [=principal box=].
+		<dt><dfn>scroll-state</dfn>
+		<dd>
+			Establishes a [=query container=] for [=scroll-state queries=]
 		<dt><dfn>normal</dfn>
 		<dd>
 			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=].
 	</dl>
 
@@ -546,6 +541,23 @@ Creating Query Containers: the 'container-type' property</h3>
 		</pre>
 	</div>
 
+	<div class=example>
+		Containers can also expose state that depend on scroll offset. Here is an
+		example of how to style a descendant of a sticky positioned element when it
+		is stuck to the top edge:
+
+		<pre class=lang-css>
+		#sticky {
+			container-type: scroll-state;
+			position: sticky;
+		}
+		@container style(stuck: top) {
+		  #sticky-child {
+				background-color: lime;
+		  }
+		}
+		</pre>
+	</div>
 
 <h3 id="container-name">
 Naming Query Containers: the 'container-name' property</h3>
@@ -1067,6 +1079,85 @@ Style Container Features</h3>
 	are [=computed value|computed=] with respect to the [=query container=],
 	the same as other values.
 
+<h3 id="scroll-state-container">
+Scroll State Container Features</h3>
+
+	A <dfn export>container scroll-state query</dfn> allows to query a container about various
+	state state that depends on scroll position.
+
+<h4 id="stuck">
+Sticky positioning: the '@container/stuck' feature</h4>
+
+	<pre class="descdef mq">
+		Name: stuck
+		For: @container
+		Value: top | right | bottom | left | inset-block-start | inset-inline-start | inset-block-end | inset-inline-end
+		Type: discrete
+	</pre>
+
+	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 maps to
+	physical based on the direction and writing-mode of the [=query container=].
+
+	In the boolean context, the query matches if visual shift is applied in any
+	direction.
+
+	<dl dfn-type=value dfn-for="@container/stuck">
+		<dt><dfn>top</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the top edge.
+		<dt><dfn>right</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the right edge.
+		<dt><dfn>bottom</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the bottom edge.
+		<dt><dfn>left</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the left edge.
+		<dt><dfn>inset-block-start</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the inset-block-start edge.
+		<dt><dfn>inset-inline-start</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the inset-inline-start edge.
+		<dt><dfn>inset-block-end</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the inset-block-end edge.
+		<dt><dfn>inset-inline-end</dfn>
+		<dd>
+			The ''position/sticky'' container is shifted to stay inside the inset-inline-end edge.
+	</dl>
+
+<h4 id="snapped">
+Scroll snapping: the '@container/snapped' feature</h4>
+
+	<pre class="descdef mq">
+		Name: snapped
+		For: @container
+		Value: block | inline
+		Type: discrete
+	</pre>
+
+	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 it is snapped in at least one of the directions.
+
+	<dl dfn-type=value dfn-for="@container/snapped">
+		<dt><dfn>block</dfn>
+		<dd>
+			'@container/snapped' [=container feature=] matches ''block''
+			if the container is a [=snap target=] for its [=snap container=]
+			in the block direction of the [=snap container=].
+		<dt><dfn>inline</dfn>
+		<dd>
+			'@container/snapped' [=container feature=] matches ''inline''
+			if the container is a [=snap target=] for its [=snap container=]
+			in the inline direction of the [=snap container=].
+	</dl>
+
+
 <h2 id="container-lengths">
 Container Relative Lengths: the ''cqw'', ''cqh'', ''cqi'', ''cqb'', ''cqmin'', ''cqmax'' units</h2>