From 0cedb312d305175e8ccc005abccd7dce608c3f47 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 31 May 2023 14:47:55 -0400
Subject: [PATCH 1/3] [scroll-animations-1] Replace timeline-attachment with
timeline-scope #7759
---
scroll-animations-1/Overview.bs | 262 +++++++++-----------------------
1 file changed, 76 insertions(+), 186 deletions(-)
diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs
index 91b8e2f74c28..6e2db016c83a 100644
--- a/scroll-animations-1/Overview.bs
+++ b/scroll-animations-1/Overview.bs
@@ -136,7 +136,7 @@ spec: cssom-view-1; type: dfn;
[=Scroll progress timelines=] can be referenced in 'animation-timeline'
anonymously using the ''scroll()'' [=functional notation=]
- or by name (see [[#timeline-scope]])
+ or by name (see [[#timeline-scoping]])
after declaring them using the 'scroll-timeline' properties.
In the Web Animations API,
they can be represented anonymously by a {{ScrollTimeline}} object.
@@ -323,7 +323,7 @@ spec: cssom-view-1; type: dfn;
[=Scroll progress timelines=] can also be defined on the [=scroll container=] itself,
and then referenced by name
by elements within the name’s scope
- (see [[#timeline-scope]]).
+ (see [[#timeline-scoping]]).
Such named scroll progress timelines
are declared in the [=coordinated value list=]
@@ -332,20 +332,6 @@ spec: cssom-view-1; type: dfn;
with 'scroll-timeline-name' as the [=coordinating list base property=].
See [[css-values-4#linked-properties]].
- Depending on its name attachment
- ('scroll-timeline-attachment'),
- a name specified by 'scroll-timeline-name'
- can be attached to a [=scroll progress timeline=] defined on the element’s own box
- (''scroll-timeline-attachment/local''),
- declared for the element’s scope but deferred
- to a descendant [=scroll container=]’s [=scroll progress timeline=]
- (''scroll-timeline-attachment/defer''),
- or used to attach the element’s [=scroll progress timeline=]
- to a name declared and deferred by an ancestor
- (''scroll-timeline-attachment/ancestor''),
- effectively allowing its [[#timeline-scope|scope]] to expand
- beyond this element and its descendants.
-
### Naming a Scroll Progress Timeline: the 'scroll-timeline-name' property ### {#scroll-timeline-name}
@@ -360,10 +346,6 @@ spec: cssom-view-1; type: dfn;
Specifies names for the [=named scroll progress timelines=]
associated with this element.
- Depending on the name’s [=attachment=] ('view-timeline-attachment'),
- this element can declare a name,
- define its [=scroll progress timeline=],
- or both (the default).
### Axis of a Scroll Progress Timeline: the 'scroll-timeline-axis' property ### {#scroll-timeline-axis}
@@ -385,78 +367,18 @@ spec: cssom-view-1; type: dfn;
Values are as defined for ''scroll()''.
- Note: This property has no effect when combined
- with a 'scroll-timeline-attachment' of ''scroll-timeline-attachment/defer''.
-
-### Attachment of a Scroll Progress Timeline: the 'scroll-timeline-attachment' property ### {#scroll-timeline-attachment}
-
-
- Name: scroll-timeline-attachment
- Value: [ local | defer | ancestor ]#
- Initial: local
- Applies to: all elements
- Inherited: no
- Computed value: a list of the keywords specified
- Animation type: not animatable
-
-
- Specifies the [=name attachment=]
- of each [=scroll progress timeline=] name
- specified by 'scroll-timeline-name'.
-
- Values have the following meanings:
-
-
- - local
-
-
- This [=scroll progress timeline=] name
- [=attaches=] to the corresponding [=scroll progress timeline=]
- defined on this box.
-
-
- defer
-
-
- This [=scroll progress timeline=] name’s [=attachment=]
- is deferred to its descendants.
- In other words,
- this element declares a [=scroll progress timeline=]’s name
- and defines its scope (see [[#timeline-scope]]),
- but defers the timeline’s definition
- ([=scroll container=] source and axis)
- to its descendants.
-
- If more than one matching descendant [=scroll progress timeline=] exists,
- or if no such timeline exists,
- then the timeline name has no [=attachment=],
- and represents an [=inactive timeline=].
-
- ISSUE: Should it instead be ignored (be invisible to lookup)?
- (This might make it harder to implement.)
- If multiple, should it attach instead to the last declared timeline (in tree order)
- rather than invalidating the attachment?
-
-
- ancestor
-
-
- This [=scroll progress timeline=] definition,
- attaches to the closest matching [=scroll progress timeline=] name
- that was deferred (''scroll-timeline-name/defer'')
- by an ancestor (if any).
-
- If no such ancestor exists,
- the [=attachment=] is treated as ''scroll-timeline-attachment/local''.
-
-
### Scroll Timeline Shorthand: the 'scroll-timeline' shorthand ### {#scroll-timeline-shorthand}
Name: scroll-timeline
- Value: [ <<'scroll-timeline-name'>> [ <<'scroll-timeline-axis'>> || <<'scroll-timeline-attachment'>> ]? ]#
+ Value: [ <<'scroll-timeline-name'>> <<'scroll-timeline-axis'>>? ]#
Applies to: all elements
Inherited: no
Animation type: not animatable
This property is a [=shorthand=] for setting
- 'scroll-timeline-name', 'scroll-timeline-axis', and 'scroll-timeline-attachment'
+ 'scroll-timeline-name' and 'scroll-timeline-axis'
in a single declaration.
# View Progress Timelines # {#view-timelines}
@@ -484,7 +406,7 @@ spec: cssom-view-1; type: dfn;
[=View progress timelines=] can be referenced
anonymously using the ''view()'' [=functional notation=]
- or by name (see [[#timeline-scope]])
+ or by name (see [[#timeline-scoping]])
after declaring them using the 'view-timeline' properties
on the [=view progress subject=].
In the Web Animations API,
@@ -736,7 +658,7 @@ spec: cssom-view-1; type: dfn;
[=View progress timelines=] can also be defined declaratively
and then referenced by name
by elements within the name’s scope
- (see [[#timeline-scope]]).
+ (see [[#timeline-scoping]]).
Such named view progress timelines
are declared in the [=coordinated value list=]
@@ -745,14 +667,6 @@ spec: cssom-view-1; type: dfn;
with 'view-timeline-name' as the [=coordinating list base property=].
See [[css-values-4#linked-properties]].
- [[#scroll-timelines-named|As for named scroll progress timelines]],
- [=named view progress timelines=] can have various [=name attachments=],
- allowing a name specified by 'view-timeline-name'
- to be attached to the box’s own [=view progress timeline=],
- deferring it to a descendant box’s [=view progress timeline=],
- or connecting the box’s [=view progress timeline=]
- to the scope of an ancestor.
-
### Naming a View Progress Timeline: the 'view-timeline-name' property ### {#view-timeline-name}
@@ -767,10 +681,6 @@ spec: cssom-view-1; type: dfn;
Specifies names for the [=named view progress timelines=]
associated with this element.
- Depending on the name’s [=attachment=] ('view-timeline-attachment'),
- this element can declare a name,
- define its [=view progress timeline=],
- or both (the default).
### Axis of a View Progress Timeline: the 'view-timeline-axis' property ### {#view-timeline-axis}
@@ -789,9 +699,6 @@ spec: cssom-view-1; type: dfn;
Values are as defined for ''view()''.
- Note: This property has no effect when combined
- with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
-
### Inset of a View Progress Timeline: the 'view-timeline-inset' property ### {#view-timeline-inset}
@@ -825,74 +732,16 @@ spec: cssom-view-1; type: dfn;
defines an inward offset from the corresponding edge of the scrollport.
- Note: This property has no effect when combined
- with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
-
-### Attachment of a View Progress Timeline: the 'view-timeline-attachment' property ### {#view-timeline-attachment}
-
-
- Name: view-timeline-attachment
- Value: [ local | defer | ancestor ]#
- Initial: local
- Applies to: all elements
- Inherited: no
- Computed value: a list of the keywords specified
- Animation type: not animatable
-
-
- Specifies the [=name attachment=]
- of each [=view progress timeline=] name
- specified by 'view-timeline-name'.
-
- Values have the following meanings:
-
-
- - local
-
-
- This [=view progress timeline=] name
- [=attaches=] to the corresponding [=view progress timeline=]
- defined on this box.
-
-
- defer
-
-
- This [=view progress timeline=] name’s [=attachment=]
- is deferred to its descendants.
- In other words,
- this element declares a [=view progress timeline=]’s name
- and defines its scope (see [[#timeline-scope]]),
- but defers the timeline’s definition
- ([=view progress subject|subject=],
- [=scroll container=] source,
- axis, and
- [=view progress visibility range|visibility range=])
- to its descendants.
-
- If more than one matching descendant [=view progress timeline=] exists,
- or if no such timeline exists,
- then this timeline name has no [=attachment=],
- and represents an [=inactive timeline=].
-
-
- ancestor
-
-
- This [=view progress timeline=] definition
- [=attaches=] to the closest matching [=view progress timeline=] name
- that was deferred (''view-timeline-name/defer'')
- by an ancestor (if any).
-
- If no such ancestor exists,
- the [=attachment=] is treated as ''view-timeline-attachment/local''.
-
-
### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}
Name: view-timeline
- Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> || <<'view-timeline-attachment'>> ]? ]#
+ Value: [ <<'view-timeline-name'>> <<'view-timeline-axis'>>? ]#
Applies to: all elements
This property is a [=shorthand=] for setting
- 'view-timeline-name', 'view-timeline-axis', and 'view-timeline-attachment'
+ 'view-timeline-name' and 'view-timeline-axis'
in a single declaration.
It does not set 'view-timeline-inset'.
@@ -951,13 +800,17 @@ spec: cssom-view-1; type: dfn;
The editors would be interested in hearing about
any real use cases for multiple iterations here.
-## Named Timeline Scoping and Lookup ## {#timeline-scope}
+## Named Timeline Scoping and Lookup ## {#timeline-scoping}
A named [=scroll progress timeline=] or [=view progress timeline=]
is referenceable by:
* the name-declaring element itself
* that element’s descendants
+ Note: The 'timeline-scope' property can be used
+ to declare the name of a timeline on an ancestor of its defining element,
+ effectively expanding its scope beyond that element’s subtree.
+
If multiple elements have declared the same timeline name,
the matching timeline is the one declared
on the nearest element in tree order.
@@ -967,16 +820,8 @@ spec: cssom-view-1; type: dfn;
take precedence, and
[=scroll progress timelines=] take precedence over [=view progress timelines=].
- Note: Although only names on the ancestor chain
- are visible to a timeline name lookup,
- a deferred [=name attachment=] allows a name declared on an ancestor
- to be attached to a timeline sourced elsewhere in its subtree,
- effectively allowing lookup of a timeline sourced
- from a sibling, cousin, or descendant.
- See 'scroll-timeline-attachment'/'view-timeline-attachment'.
-
- Using ''scroll-timeline-attachment: defer'',
+ Using ''timeline-scope'',
an element can refer to timelines
bound to elements that are siblings, cousins, or even descendants.
For example, the following creates an animation on an element
@@ -991,16 +836,19 @@ spec: cssom-view-1; type: dfn;
}
.root {
- scroll-timeline: scroller defer;
+ /* declares the scope of a 'scroller' timeline to reach all descendants */
+ timeline-scope: scroller;
}
.root .animation {
animation: anim;
+ /* references the 'scroller' timeline for driving the progress of 'anim' */
animation-timeline: scroller;
}
.root .animation + .scroller {
- scroll-timeline: scroller ancestor;
+ /* attaches a scroll progress timeline to the timeline name 'scroller' */
+ scroll-timeline: scroller;
}
…
@@ -1011,13 +859,6 @@ spec: cssom-view-1; type: dfn;
- If a timeline name has been declared,
- but does not have a usable [=attachment=]
- (e.g. if it is declared with ''scroll-timeline-name/defer'',
- but no [=scroll progress timeline=] or [=view progress timeline=]
- is [=attachment|attached=] to it),
- it refers to an [=inactive timeline=].
-
## Animation Events ## {#events}
[=Scroll-driven animations=] dispatch all the same animation events
@@ -1108,7 +949,7 @@ spec: cssom-view-1; type: dfn;
ISSUE: This section should move to CSS-ANIMATIONS-2 and WEB-ANIMATIONS-2.
- This specification introduces the concepts of [=named timeline ranges=]
+ This appendix introduces the concepts of [=named timeline ranges=]
and [=animation attachment ranges=]
to CSS Animations
and Web Animations.
@@ -1399,15 +1240,64 @@ spec: cssom-view-1; type: dfn;
should it return percentage progress through that range,
or time progress through that range?
+# Appendix B: Timeline Name Scope # {#timeline-name-scope}
+
+ ISSUE: This section should move to CSS-ANIMATIONS-2.
+
+ This appendix introduces the 'timeline-scope' property,
+ which allows declaring a timeline name’s scope on an ancestor
+ of the timeline’s defining element.
+
+## Declaring a Named Timeline’s Scope: the 'timeline-scope' property ## {#timeline-scope}
+
+
+ Name: timeline-scope
+ Value: none | <>#
+ Initial: none
+ Applies to: all elements
+ Inherited: no
+ Computed value: the keyword ''timeline-scope/none'' or a list of [=CSS identifiers=]
+ Animation type: not animatable
+
+
+ This property declares the scope of the specified timeline names,
+ allowing a named timeline
+ (such as a [=named scroll progress timeline=] or [=named view progress timeline=])
+ to be referenced by elements outside the timeline-defining element’s subtree--
+ for example, by siblings, cousins, or ancestors.
+
+ Values have the following meanings:
+
+
+ - none
+
-
+ No change in name timeline scope.
+
+
- <>
+
-
+ Declares the name of a matching named timeline defined by a descendant
+ to be in scope for this element and its descendants.
+
+ If no such timeline exists,
+ or if more than one such timeline exists,
+ instead declares an [=inactive timeline=] with the specified name.
+
+ Note: This property has no effect if a matching named timeline
+ is defined by this element itself.
+
+
+ Note: This property cannot affect or invalidate any timeline name lookups
+ within the subtree of a descendant element that declares the same name.
+ However, it can prevent matching timelines defined on an ancestor
+ from being referenced by this element or its descendants.
+ See [[#timeline-scope]].
+
# Changes # {#changes}
Changes since the previous
- (6 April 2023)
+ (28 April 2023)
Working Draft include:
- * Adding 'scroll-timeline-attachment' and 'view-timeline-attachment'.
- (Issue 7759)
- * Switching ''getCurrentTime()'' to take a dictionary of options.
- (Issue 8201)
- * Clarified how view timeline ranges are calculated with ''position: sticky''.
- (Issue 8298)
+ * Removed scroll-timeline-attachment and view-timeline-attachment in favor of 'timeline-scope'.
+
+ See also Earlier Changes.
From aec6f8eaebce3e0fd6ac6702c1efbfe8dd974463 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Mon, 5 Jun 2023 16:46:39 -0400
Subject: [PATCH 2/3] [scroll-animations-1] names declared with timeline-scope
are locally trapped #7759
See https://github.com/w3c/csswg-drafts/pull/8906#discussion_r1218288275
---
scroll-animations-1/Overview.bs | 19 ++++++++++---------
1 file changed, 10 insertions(+), 9 deletions(-)
diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs
index 6e2db016c83a..f9dbd894e748 100644
--- a/scroll-animations-1/Overview.bs
+++ b/scroll-animations-1/Overview.bs
@@ -1260,36 +1260,37 @@ spec: cssom-view-1; type: dfn;
Animation type: not animatable
- This property declares the scope of the specified timeline names,
- allowing a named timeline
+ This property declares the scope of the specified timeline names
+ to extend across this element’s subtree.
+ This allows a named timeline
(such as a [=named scroll progress timeline=] or [=named view progress timeline=])
to be referenced by elements outside the timeline-defining element’s subtree--
for example, by siblings, cousins, or ancestors.
+ It also blocks descendant timelines with the specified names
+ from being referenced from outside this subtree,
+ and ancestor timelines with the specified names from being referenced
+ within this subtree.
Values have the following meanings:
- none
-
- No change in name timeline scope.
+ No changes in timeline name scope.
- <>
-
- Declares the name of a matching named timeline defined by a descendant
+ Declares the name of a matching named timeline defined by a descendant--
+ whose scope is not already explicitly declared by a descendant using 'timeline-scope'--
to be in scope for this element and its descendants.
If no such timeline exists,
or if more than one such timeline exists,
instead declares an [=inactive timeline=] with the specified name.
-
- Note: This property has no effect if a matching named timeline
- is defined by this element itself.
Note: This property cannot affect or invalidate any timeline name lookups
within the subtree of a descendant element that declares the same name.
- However, it can prevent matching timelines defined on an ancestor
- from being referenced by this element or its descendants.
See [[#timeline-scope]].
# Changes # {#changes}
From 49614e1b3058e9b085c3ac0d7f6af807d095658f Mon Sep 17 00:00:00 2001
From: fantasai
Date: Mon, 5 Jun 2023 16:29:41 -0400
Subject: [PATCH 3/3] [scroll-animations-1] Clarify that timeline identity is
also not cycled.
See https://github.com/w3c/csswg-drafts/issues/7759#issuecomment-1413582984
---
scroll-animations-1/Overview.bs | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs
index f9dbd894e748..c35aa6e8471c 100644
--- a/scroll-animations-1/Overview.bs
+++ b/scroll-animations-1/Overview.bs
@@ -922,9 +922,10 @@ spec: cssom-view-1; type: dfn;
through those APIs.
If the final style and layout update
- would result in a change of time for any [=scroll progress timelines=] or
- [=view progress timelines=], they will not be re-sampled to reflect the
- new offset until the next update of the rendering.
+ would result in a change in the time or scope (see 'timeline-scope')
+ of any [=scroll progress timelines=] or [=view progress timelines=],
+ they will not be re-sampled to reflect the new state
+ until the next update of the rendering.
Nothing in this section is intended to require
that scrolling block on layout or script.