[css-conditional-5] Define direction feature for scroll-state() queries (#12664)

* [css-conditional-5] Define direction feature for scroll-state() queries

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

Author: tursunova

css-conditional-5/Overview.bs

@@ -1588,6 +1588,63 @@ Scrollable: the '@container/scrollable' feature</h4>
 			The [=scroll container=] has [=scrollable overflow=] in its inline direction.
 	</dl>
 
+<h4 id="direction">
+Direction: the '@container/direction' feature</h4>
+
+	<pre class="descdef mq">
+		Name: direction
+		For: @container
+		Value: none | top | right | bottom | left | block-start | inline-start | block-end | inline-end | x | y | block | inline
+		Type: discrete
+	</pre>
+
+	For a [=query container=] that is a [=scroll container=],
+	the '@container/direction' [=container feature=] queries the direction of its most recent [=relative scroll=].
+	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=].
+
+	<dl dfn-type=value dfn-for="@container/direction">
+		<dt><dfn>none</dfn>
+		<dd>
+			The [=query container=] has not had a [=relative scroll=] yet.
+		<dt><dfn>top</dfn>
+		<dd>
+			The most recent [=relative scroll=] was upwards.
+		<dt><dfn>right</dfn>
+		<dd>
+			The most recent [=relative scroll=] was to the right.
+		<dt><dfn>bottom</dfn>
+		<dd>
+			The most recent [=relative scroll=] was downwards.
+		<dt><dfn>left</dfn>
+		<dd>
+			The most recent [=relative scroll=] was to the left.
+		<dt><dfn>block-start</dfn>
+		<dd>
+			The most recent [=relative scroll=] was towards the [=block-start=] direction.
+		<dt><dfn>inline-start</dfn>
+		<dd>
+			The most recent [=relative scroll=] was towards the [=inline-start=] direction.
+		<dt><dfn>block-end</dfn>
+		<dd>
+			The most recent [=relative scroll=] was towards the [=block-end=] direction.
+		<dt><dfn>inline-end</dfn>
+		<dd>
+			The most recent [=relative scroll=] was towards the [=inline-end=] direction.
+		<dt><dfn>x</dfn>
+		<dd>
+			The most recent [=relative scroll=] was in the horizontal direction.
+		<dt><dfn>y</dfn>
+		<dd>
+			The most recent [=relative scroll=] was in the vertical direction.
+		<dt><dfn>block</dfn>
+		<dd>
+			The most recent [=relative scroll=] was in the block direction.
+		<dt><dfn>inline</dfn>
+		<dd>
+			The most recent [=relative scroll=] was in the inline direction.
+	</dl>
+
 
 <h2 id="container-lengths">
 Container Relative Lengths: the ''cqw'', ''cqh'', ''cqi'', ''cqb'', ''cqmin'', ''cqmax'' units</h2>