[scroll-animations-1] Recast timeline attachment as a name binding. w3c#8680 w3c#7759

Author: fantasai

scroll-animations-1/Overview.bs

@@ -313,7 +313,7 @@ spec: cssom-view-1; type: dfn;
 	and then referenced by name.
 	See [[#timeline-scope]].
 
-	Named scroll progress timelines are declared in the [=coordinated value list=]
+	Named [=scroll progress timelines=] are declared in the [=coordinated value list=]
 	constructed from the [=longhands=] of the 'scroll-timeline' [=shorthand property=],
 	which form a [=coordinating list property group=]
 	with 'scroll-timeline-name' as the [=coordinating list base property=].
@@ -325,15 +325,20 @@ spec: cssom-view-1; type: dfn;
 	Name: scroll-timeline-name
 	Value: none | <<custom-ident>>#
 	Initial: none
-	Applies to: [=scroll containers=]
+	Applies to: all elements
 	Inherited: no
 	Computed value: the keyword ''scroll-timeline-name/none'' or a list of <<custom-ident>>s
 	Animation type: not animatable
 	</pre>
 
 	Specifies names for the [=scroll progress timelines=]
-	associated with this [=scroll container=].
-	The axis for this timeline is given by 'scroll-timeline-axis'.
+	declared by this element.
+
+	On boxes that are not [=scroll containers=],
+	only names with a 'scroll-timeline-attachment'
+	of ''scroll-timeline-attachment/defer''
+	are considered for [[#timeline-scope|scoping and lookup]];
+	any other name declarations are ignored.
 
 ### Axis of a Scroll Progress Timeline: the 'scroll-timeline-axis' property ### {#scroll-timeline-axis}
 
@@ -347,15 +352,13 @@ spec: cssom-view-1; type: dfn;
 	Animation type: not animatable
 	</pre>
 
-	Specifies an axis for each [=scroll progress timeline=]
-	associated with this [=scroll container=].
-	The name for this timeline is given by 'scroll-timeline-name'.
+	Specifies an axis for each named [=scroll progress timeline=]
+	sourced from this [=scroll container=].
 
 	Values are as defined for ''scroll()''.
 
-	Note: This property has no effect on [=scroll progress timelines=]
-	that are declared on this element
-	but whose [=attachment=] is ''scroll-timeline-attachment/defer''.
+	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}
 
@@ -369,71 +372,76 @@ spec: cssom-view-1; type: dfn;
 	Animation type: not animatable
 	</pre>
 
-	Specifies attachment behavior for each [=scroll progress timeline=]
-	associated with this element.
+	Specifies the [=name attachment=]
+	of each [=scroll progress timeline=] name
+	declared by this element (see 'scroll-timeline-name').
+
+	As an alternative to attaching locally
+	(to a timeline sourced from this element),
+	a declared name’s corresponding
+	<dfn local-lt=attachment>name attachment</dfn>
+	can defer to a descendant’s timeline
+	(''scroll-timeline-attachment/defer'')
+	or connect this element’s timeline
+	to a matching name declared by and scoped to an ancestor
+	(''scroll-timeline-attachment/ancestor''),
+	allowing its [[#timeline-scope|scope]] to expand
+	beyond this element and its descendants.
 
-	A scroll timeline has a <dfn>attachment</dfn>,
-	that determines which [=scroll container=] and {{ScrollTimeline/axis}} to use
-	when calculating the [progress of the timeline](#scroll-timeline-progress).
+	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for=scroll-timeline-attachment>
 		<dt><dfn>local</dfn>
 		<dd>
-			The [=attachment=] is this timeline.
+			This [=scroll progress timeline=] name
+			[=attaches=] to the corresponding [=scroll progress timeline=]
+			defined by this [=scroll container=].
+
+			If this box is not a [=scroll container=],
+			then the corresponding [=scroll progress timeline=] declaration
+			is ignored.
+
+			<!-- This is the same implication as 'scroll-timeline' not applying to [=scroll containers=],
+			     and means that the name not only will not be visible to any descendants’ animation-timeline,
+			     but it also will not block descendants trying to bind to the same name on an ancestor. -->
 
 		<dt><dfn>defer</dfn>
 		<dd>
-			The [=attachment=] is the timeline among the flat-tree descendants
-			that satisfies all of the following:
-			* The timeline has a matching 'scroll-timeline-name'.
-			* The timeline has [=ancestor=] attachment.
-			* There is no intermediate ''scroll-timeline-attachment/defer'' timeline
-				declared with the same name.
-
-			If more than one such candidate exists,
-			then this timeline has no [=attachment=].
+			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?
 
 		<dt><dfn>ancestor</dfn>
 		<dd>
-			The timeline has no [=attachment=].
-
-			Timelines with [=ancestor=] attachment are treated as nameless
-			for the purposes of timeline lookup;
-			they can't be referenced by 'animation-timeline'.
+			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''.
+
+			If this box is not a [=scroll container=], however,
+			then this [=scroll progress timeline=] definition is ignored.
+			<!-- Not only will it not bind to a name,
+			     it also won't invalidate any other bindings to that name. -->
 	</dl>
 
-	Timelines that have no [=attachment=] are [=inactive timeline|inactive=].
-
-	<div class=example>
-		Using ''scroll-timeline-attachment: defer'',
-		an element can effectively refer to timelines
-		that appear <em>after it</em> in tree order.
-		For example, the following creates an animation on <code>#target</code> that
-		is ultimately linked to a scroll timeline defined on the subsequent sibling.
-
-		<pre class=lang-css>
-		@keyframes anim {
-		  from { color: red; }
-		  to { color: green; }
-		}
-
-		#root {
-		  scroll-timeline-name: mytimeline;
-		  scroll-timeline-attachment: defer;
-		}
-
-		#root #target {
-		  animation: anim;
-		  animation-timeline: mytimeline;
-		}
-
-		#root #target + #scroller {
-		  scroll-timeline-name: mytimeline;
-		  scroll-timeline-attachment: ancestor;
-		}
-		</pre>
-	</div>
-
 ### Scroll Timeline Shorthand: the 'scroll-timeline' shorthand ### {#scroll-timeline-shorthand}
 
 	<pre class='propdef shorthand'>
@@ -725,8 +733,8 @@ spec: cssom-view-1; type: dfn;
 	Animation type: not animatable
 	</pre>
 
-	Specifies names for any [=view progress timelines=]
-	associated with this element’s [=principal box=].
+	Specifies names for the [=view progress timelines=]
+	declared by this element.
 
 ### Axis of a View Progress Timeline: the 'view-timeline-axis' property ### {#view-timeline-axis}
 
@@ -741,11 +749,12 @@ spec: cssom-view-1; type: dfn;
 	</pre>
 
 	Specifies an axis for each named [=view progress timeline=]
-	associated with this [=scroll container=].
+	derived from this element’s [=principal box=].
+
+	Values are as defined for ''view()''.
 
-	Note: This property has no effect on [=scroll progress timelines=]
-	that are declared on this element
-	but whose [=attachment=] is ''view-timeline-attachment/defer''.
+	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}
 
@@ -780,28 +789,63 @@ spec: cssom-view-1; type: dfn;
 			defines an inward offset from the corresponding edge of the scrollport.
 	</dl>
 
-	Note: This property has no effect on [=scroll progress timelines=]
-	that are declared on this element
-	but whose [=attachment=] is ''view-timeline-attachment/defer''.
+	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}
 
 	<pre class='propdef'>
 	Name: view-timeline-attachment
-	Value: <'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
 	</pre>
 
-	Specifies attachment behavior for each [=view progress timeline=]
-	associated with this element.
-	Values and behavior are as for 'view-timeline-attachment',
-	except that the [=attachment=] also determines
-	the <a property lt="view-timeline-inset">inset</a> and {{ViewTimeline/subject}}
-	of the [=view progress timeline=].
+	Specifies the [=name attachment=]
+	of each [=view progress timeline=] name
+	declared by this element (see 'view-timeline-name').
+
+	Values have the following meanings:
+
+	<dl dfn-type=value dfn-for=view-timeline-attachment>
+		<dt><dfn>local</dfn>
+		<dd>
+			This [=view progress timeline=] name
+			[=attaches=] to the corresponding [=view progress timeline=]
+			defined on this box.
+
+		<dt><dfn>defer</dfn>
+		<dd>
+			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=].
+
+		<dt><dfn>ancestor</dfn>
+		<dd>
+			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''.
+	</dl>
 
 ### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}
 
@@ -871,20 +915,65 @@ 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 ## {#timeline-scope}
+## Named Timeline Scoping and Lookup ## {#timeline-scope}
 
 	A named [=scroll progress timeline=] or [=view progress timeline=]
-	is referenceable in 'animation-timeline' by:
-	* the declaring element itself
+	is referenceable by:
+	* the name-declaring element itself
 	* that element’s descendants
 
 	If multiple elements have declared the same timeline name,
 	the matching timeline is the one declared
 	on the nearest element in tree order.
 	In case of a name conflict on the same element,
+	names declared later in the naming property
+	('scroll-timeline-name', 'view-timeline-name')
+	take precedence, and
 	[=scroll progress timelines=] take precedence over [=view progress timelines=].
 
-	Note: Using deferred [=attachment=] effectively allow scoping beyond this.
+	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'.
+
+	<div class=example>
+		Using ''scroll-timeline-attachment: defer'',
+		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
+		that is linked to a [=scroll progress timeline=]
+		defined by the subsequent sibling.
+
+		<xmp highlight=html>
+		<style>
+			@keyframes anim {
+			  from { color: red; }
+			  to { color: green; }
+			}
+
+			.root {
+			  scroll-timeline: scroller defer;
+			}
+
+			.root .animation {
+			  animation: anim;
+			  animation-timeline: scroller;
+			}
+
+			.root .animation + .scroller {
+			  scroll-timeline: scroller ancestor;
+			}
+		</style>
+		&hellip;
+		<section class="root">
+			<div class="animation">Animating Box</div>
+			<div class="scroller">Scrollable Box</div>
+		</section>
+		</xmp>
+	</div>
 
 ## Animation Events ## {#events}