+ 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:
+
+
+ #sticky {
+ container-type: scroll-state;
+ position: sticky;
+ }
+ @container scroll-state(stuck: top) {
+ #sticky-child {
+ background-color: lime;
+ }
+ }
+
+
- 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:
+ 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-type: scroll-state;
+ position: sticky;
}
@container scroll-state(stuck: top) {
#sticky-child {
- background-color: lime;
+ background-color: lime;
}
}
@@ -1090,17 +1090,22 @@ Style Container Features
- A
container scroll-state query allows to query a container for various
- state that depends on scroll position. The ''scroll-state'' [=query container=] can either
- be the scroller itself, or an element that is affected by the scroll position of an ancestor
+ 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.
+
+ The ''scroll-state'' [=query container=] can either be the scroller itself,
+ or an element that is affected by the scroll position of an ancestor
[=scroll container's=] [=scrollport=].
-
- Note: This section is subject to change as a result of resolving
-
issue #10796
-
+ May match:
+
+ @container scroll-state((stuck: top) and (stuck: left)) { ... }
+
+
+ Will never match:
+
+ @container scroll-state((stuck: left) and (stuck: right)) { ... }
+
+
@@ -1177,25 +1198,25 @@ Scroll snapping: the '@container/snapped' feature
x
'@container/snapped' [=container feature=] matches ''x''
- if the container is a horizontal [=snap target=] for its [=scroll container=]
+ if the [=query container=] is a horizontal [=snap target=] for its [=scroll container=]
y
'@container/snapped' [=container feature=] matches ''y''
- if the container is a vertical [=snap target=] for its [=scroll container=]
+ if the [=query container=] is a vertical [=snap target=] for its [=scroll container=]
block
'@container/snapped' [=container feature=] matches ''block''
- if the container is a [=snap target=] for its [=scroll container=]
+ 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 container is a [=snap target=] for its [=scroll container=]
+ if the [=query container=] is a [=snap target=] for its [=scroll container=]
in the inline direction of the [=snap container=].
-Sticky positioning: the '@container/overflowing' feature
+Overflowing: the '@container/overflowing' feature
Name: overflowing
@@ -1206,11 +1227,15 @@ Sticky positioning: the '@container/overflowing' feature
The '@container/overflowing' [=container feature=] queries whether a
[=scroll container=] has [=scrollable overflow=] in the given direction for the
- current scroll progress. The logical values map to physical based on the direction
- and writing-mode of the [=query container=].
+ current scroll progress. Content not reachable through user scrolling, like
+ content overflowing to the left of an ltr container, or a ''overflow/hidden''
+ container, does not make a query match.
- In the boolean context, the query matches if there is scrollable overflow in any
- direction.
+ 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
@@ -1227,16 +1252,16 @@ Sticky positioning: the '@container/overflowing' feature
The [=scroll container=] has [=scrollable overflow=] past the left edge.
- block-start
-
- The [=scroll container=] has [=scrollable overflow=] past the block-start edge.
+ The [=scroll container=] has [=scrollable overflow=] past the [=block-start=] edge.
- inline-start
-
- The [=scroll container=] has [=scrollable overflow=] past the inline-start edge.
+ The [=scroll container=] has [=scrollable overflow=] past the [=inline-start=] edge.
- block-end
-
- The [=scroll container=] has [=scrollable overflow=] past the block-end edge.
+ The [=scroll container=] has [=scrollable overflow=] past the [=block-end=] edge.
- inline-end
-
- The [=scroll container=] has [=scrollable overflow=] past the inline-end edge.
+ The [=scroll container=] has [=scrollable overflow=] past the [=inline-end=] edge.
From c7bda8f4c49793404ba58660b88bc067f8a29616 Mon Sep 17 00:00:00 2001
From: Rune Lillesveen
Date: Tue, 3 Sep 2024 11:52:57 +0200
Subject: [PATCH 3/6] Fixed issues in "Updating Scroll State"
---
css-conditional-5/Overview.bs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index 9685c832a65..05f93fe9856 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -1115,9 +1115,9 @@ Updating Scroll State
current state once as the last step of [=run the scroll steps=]. Then, after the
resizeObserver loop in the
HTML event loop processing model,
- the scroll state of every ''scroll-state'' [=query container=] is updated.
+ 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 if necessary.
+ re-run the style and layout update a single time if necessary.
Sticky positioning: the '@container/stuck' feature
From cb73856ad221351e9b79b8cfe2293fe5196a1d68 Mon Sep 17 00:00:00 2001
From: Rune Lillesveen
Date: Tue, 3 Sep 2024 12:33:11 +0200
Subject: [PATCH 4/6] Move definition of "query container"
---
css-conditional-5/Overview.bs | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index 05f93fe9856..1159d74c1a1 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -347,10 +347,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
@@ -384,9 +384,9 @@ Container Queries
@@ -469,11 +469,11 @@ Creating Query Containers: the 'container-type' property
The 'container-type' property establishes the element as a
- query container for certain types of queries. For size
+ [=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=].
+ types of [=query containers=] any element can be a [=query container=], such
+ as for [=container style queries=].
Values have the following meanings:
From 9a66863cbfb26ebc7e5ac282082d04c004d1ee19 Mon Sep 17 00:00:00 2001
From: Rune Lillesveen
Date: Tue, 3 Sep 2024 12:53:08 +0200
Subject: [PATCH 5/6] Talk about scroll-state features instead of scroll-state
containers
---
css-conditional-5/Overview.bs | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index 1159d74c1a1..b35766f956d 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -1092,14 +1092,15 @@ 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.
+ 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.
- The ''scroll-state'' [=query container=] can either be the scroller itself,
+ [=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=].
+ [=scroll container's=] [=scrollport=]. An example of the former is the
+ ''overflowing'' feature, ''snapped'' the latter.
From 1a924140ce9bee5ec0a38d62b276a5a49af0c26b Mon Sep 17 00:00:00 2001
From: Rune Lillesveen
Date: Wed, 4 Sep 2024 19:30:35 +0200
Subject: [PATCH 6/6] Re-worded 'overflowing'
---
css-conditional-5/Overview.bs | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index b35766f956d..0fe2d42a85d 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -1227,10 +1227,10 @@ Overflowing: the '@container/overflowing' feature
The '@container/overflowing' [=container feature=] queries whether a
- [=scroll container=] has [=scrollable overflow=] in the given direction for the
- current scroll progress. Content not reachable through user scrolling, like
- content overflowing to the left of an ltr container, or a ''overflow/hidden''
- container, does not make a query match.
+ [=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