[css-scroll-snap-2] Specify scroll-start-target (#10227)

* Specify scroll-start-target

This adds details to the scroll-snap-2 spec[1] to specify
scroll-start-target.

[1] https://drafts.csswg.org/css-scroll-snap-2

* [css-scroll-snap-2]] Specify scroll-start-target

* [css-scroll-snap-2] Specify scroll-start-target

Define initial scroll position precedence in css-overflow-3.
De-vaguify post-first layout scroll-start-target & point to document
update process.
Extract scroll-view position algorithm for standalone use.

* [css-scroll-snap-2] Specify scroll-start-target

Remove slight duplication.

* [css-scroll-snap-2] Specify scroll-start-target

Replace scroll-view with scroll-into-view.
Mention and link css properties that change initial scroll position.

---------

Co-authored-by: David Awogbemila <David Awogbemila>
Co-authored-by: David Awogbemila <awogbemila@chromium.org>
Co-authored-by: Tab Atkins Jr <jackalmage@gmail.com>

css-align-3/Overview.bs

@@ -1173,6 +1173,9 @@ Overflow and Scroll Positions</h3>
  of the <a>scroll container</a>
  satisfies the [[#alignment-values|expected alignment]]
  of the <a>alignment subject</a> and <a>alignment container</a>.
+ However, the [[css-scroll-snap-2#scroll-start-target-with-place-content|scroll-start-target]]
+ property, when present, overrides the <a>content-distribution properties</a>
+ in determining the <a>initial scroll position</a>.
 
  Note: The presence of scrollbars can change the size of the [=scroll container’s=] content box,
  and thus the size of the [=alignment container=]

css-overflow-3/Overview.bs

@@ -341,8 +341,8 @@ Scrolling Overflow</h3>
  is typically dependent on the [=scroll container=]’s [=writing mode=],
  and, unless otherwise specified,
  coincides with its [=scroll origin position=].
- However, the 'align-content' and 'justify-content' properties [[!CSS-ALIGN-3]]
- can be used to change the [=initial scroll position=],
+ However, the 'align-content' and 'justify-content' properties [[!CSS-ALIGN-3]] as well as the
+ 'scroll-start-target' property [[!CSS-SCROLL-SNAP-2]] can be used to change the [=initial scroll position=],
  see [[css-align-3#overflow-scroll-position]].
 
  A <dfn export>scroll position</dfn> is a particular alignment

css-scroll-snap-2/Overview.bs

@@ -58,13 +58,13 @@ First Layout {#first-layout}
 
 <!-- Big Text: examples
 
-█████▌ █ █ ███▌ █ █ ████▌ █▌ █████▌ ███▌ 
+█████▌ █ █ ███▌ █ █ ████▌ █▌ █████▌ ███▌
 █▌ █ █ ▐█ ▐█ ██ ██ █▌ █▌ █▌ █▌ █▌ █▌
-█▌ █ █ █▌ █▌ █▌█ █▐█ █▌ █▌ █▌ █▌ █▌ 
-████ █ █▌ █▌ █▌ █ ▐█ ████▌ █▌ ████ ███▌ 
+█▌ █ █ █▌ █▌ █▌█ █▐█ █▌ █▌ █▌ █▌ █▌
+████ █ █▌ █▌ █▌ █ ▐█ ████▌ █▌ ████ ███▌
 █▌ █ █ █████▌ █▌ ▐█ █▌ █▌ █▌ █▌
 █▌ █ █ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌ █▌
-█████▌ █ █ █▌ █▌ █▌ ▐█ █▌ █████ █████▌ ███▌ 
+█████▌ █ █ █▌ █▌ █▌ ▐█ █▌ █████ █████▌ ███▌
 -->
 
 Motivating Examples {#examples}
@@ -227,37 +227,87 @@ Interaction with RTL and LTR</h4>
 The 'scroll-start-target' property {#scroll-start-target}
 -------------------------------------------
 
+<h4 dfn export id="initial-scroll-target">
+Initial scroll target</h4>
+
+ The [=initial scroll target=] of a <a>scroll container</a> |scrollcontainer|
+ is an element or pseudo-element
+ whose 'scroll-start-target'property is non-''scroll-start-target/none''
+ and whose nearest <a>scroll container</a> is |scrollcontainer|.
+ When multiple such elements or pseudo-elements exist,
+ user-agents should select the one
+ which comes first in [=tree order=].
+ When no such element or pseudo-element exists,
+ |scrollcontainer|’s <a>initial scroll target</a> is null.
+
+ <div algorithm="determine the initial scroll position from an initial scroll target">
+ If the <a>initial scroll target</a> of a <a>scroll container</a> is not null,
+ it should be used to determine the <a>initial scroll position</a> of |scrollcontainer|
+ by running the following steps:
+
+ 1. Let |target| be the <a>initial scroll target</a> for |scrollcontainer|.
+ 1. Let |position| be the result of running the steps to
+ <a spec="cssom-view-1">determine the scroll-into-view position</a> of |target|
+ with <var ignore>behavior</var> set to "auto",
+ <var ignore>block</var> set to "start",
+ <var ignore>inline</var> set to "nearest",
+ and <var ignore>scrolling box</var> set to |scrollcontainer|.
+ 1. Set |scrollcontainer|'s <a>initial scroll position</a> to |position|.
+ </div>
+
+
+<h4 id="scroll-start-target-shorthand">
+The scroll-start-target shorthand</h4>
+
  <pre class="propdef shorthand">
- Name: scroll-start-target
- Value: [ none | auto ]{1,2}
+ Name: scroll-start-target
+ Value: [ none | auto ]
+ Initial: ''none''
+ Applies to: all elements
+ Inherited: no
+ Percentages: N/A
+ Computed Value: see individual properties
+ Animation type: none
  </pre>
 
- This property is a shorthand property that sets all of the scroll-start-target-* longhands in one declaration.
- The first value defines the scroll starting point in the block axis,
- the second sets it in the inline axis.
- If the second value is omitted, it defaults to ''scroll-start-target/none''.
-
- Values are defined as follows:
-
- <dl dfn-type=value dfn-for="scroll-start-target, scroll-start-target-x, scroll-start-target-y, scroll-start-target-block, scroll-start-target-inline">
+ <dl dfn-type=value dfn-for="scroll-start-target, scroll-start-target-block, scroll-start-target-inline, scroll-start-target-x, scroll-start-target-y">
  <dt><dfn>none</dfn>
- <dd>Element is not a ''scroll-start-target''.
+ <dd>The element is not an [=initial scroll target=].
  <dt><dfn>auto</dfn>
- <dd>Element is used to calculate the 'scroll-start' position,
- taking into account ''scroll-padding'' or ''scroll-margin'' ,
- same as a ''scroll-snap'' target.
+ <dd>The element is potentially an [=initial scroll target=]
+ for its nearest [=scroll container=] ancestor.
  </dl>
 
+<h4 id="scroll-start-target-with-place-content">
+Interaction with 'place-content'</h4>
+
+ If a [=scroll container's=] [=initial scroll position=]
+ is potentially set by both a [=content-distribution property=]
+ and by 'scroll-start-target' on a descendant,
+ 'scroll-start-target' wins.
 
-<!-- Big Text: :snapped 
+<h4 id="scroll-start-fragment-navigation">
+Post-first layout arrivals</h4>
 
- █▌ ███▌ █ █▌ ███▌ ████▌ ████▌ █████▌ ████▌ 
+ While the document is being [[html#updating-the-document|updated],
+ a <a>scroll container's</a> [=initial scroll target=] might arrive
+ after that <a>scroll container</a> has been laid out.
+ If this happens,
+ user agents should still scroll to the [=initial scroll target=]
+ unless the user agent has reason to believe
+ the user is no longer interested
+ in scrolling to the <a>initial scroll position</a>.
+
+
+<!-- Big Text: :snapped
+
+ █▌ ███▌ █ █▌ ███▌ ████▌ ████▌ █████▌ ████▌
 ███▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌
  █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
  ███▌ █▌▐█ █▌ █▌ █▌ ████▌ ████▌ ████ █▌ █▌
  █▌ █▌ █▌ ██▌ █████▌ █▌ █▌ █▌ █▌ █▌
 ███▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
- █▌ ███▌ █▌ ▐▌ █▌ █▌ █▌ █▌ █████▌ ████▌ 
+ █▌ ███▌ █▌ ▐▌ █▌ █▌ █▌ █▌ █████▌ ████▌
 -->
 
 Styling Snapped Items {#styling-snapped}
@@ -300,13 +350,13 @@ Snap Events {#snap-events}
 
 <!-- Big Text: events
 
-█████▌ █▌ █▌ █████▌ █ █▌ █████▌ ███▌ 
+█████▌ █▌ █▌ █████▌ █ █▌ █████▌ ███▌
 █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
-█▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌ 
-████ ▐▌ █ ████ █▌▐█ █▌ █▌ ███▌ 
+█▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌
+████ ▐▌ █ ████ █▌▐█ █▌ █▌ ███▌
 █▌ █ ▐▌ █▌ █▌ ██▌ █▌ █▌
 █▌ ▐▌ █ █▌ █▌ █▌ █▌ █▌ █▌
-█████▌ ▐█ █████▌ █▌ ▐▌ █▌ ███▌ 
+█████▌ ▐█ █████▌ █▌ ▐▌ █▌ ███▌
 -->
 
 {{scrollsnapchange}} and {{scrollsnapchanging}} {#scrollsnapchange-and-scrollsnapchanging}
@@ -591,13 +641,13 @@ when the scrolling operation ends.
 
 <!-- Big Text: Longhand
 
-█▌ ███▌ █ █▌ ███▌ █▌ █▌ ███▌ █ █▌ ████▌ 
+█▌ ███▌ █ █▌ ███▌ █▌ █▌ ███▌ █ █▌ ████▌
 █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
 █▌ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌
 █▌ █▌ █▌ █▌▐█ █▌ █▌ ██▌ █████▌ █▌ █▌ █▌▐█ █▌ █▌ █▌
 █▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █████▌ █▌ ██▌ █▌ █▌
 █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
-█████ ███▌ █▌ ▐▌ ███▌ █▌ █▌ █▌ █▌ █▌ ▐▌ ████▌ 
+█████ ███▌ █▌ ▐▌ ███▌ █▌ █▌ █▌ █▌ █▌ ▐▌ ████▌
 -->
 
 Appendix A: Longhands {#longhands}
@@ -638,39 +688,6 @@ Flow-relative Longhands for 'scroll-start' {#scroll-start-longhands-logical}
  Animation type: by computed value type
  </pre>
 
- ...
-Flow-relative Longhands for 'scroll-start-target' {#scroll-start-target-longhands-logical}
---------------------------------------------------------------------------
-
- <pre class="propdef">
- Name: scroll-start-target-block, scroll-start-target-inline
- Value: auto | none
- Initial: none
- Applies to: all elements
- Inherited: no
- Logical property group: scroll-start-target
- Percentages: n/a
- Computed Value: either of the keywords "none" or "auto"
- Animation type: not animatable
- </pre>
-
- ...
-
-Physical Longhands for 'scroll-start-target' {#scroll-start-target-longhands-physical}
-----------------------------------------------------------------------
-
- <pre class="propdef">
- Name: scroll-start-target-x, scroll-start-target-y
- Value: none | auto
- Initial: none
- Applies to: all elements
- Inherited: no
- Logical property group: scroll-start-target
- Percentages: n/a
- Computed value: either of the keywords "none" or "auto"
- Animation type: not animatable
- </pre>
-
  ...
 
 Appendix B: Event Handlers {#event-handlers}

cssom-view-1/Overview.bs

@@ -1445,14 +1445,14 @@ The <dfn attribute for=Element>currentCSSZoom</dfn> attribute must return the
 
 <h3 id=element-scrolling-members>{{Element}} Scrolling Members</h3>
 
-To <dfn export>scroll a target into view</dfn> <var>target</var>, which is an <a for="/">Element</a> or <a>Range</a>,
+
+To <dfn export>determine the scroll-into-view position</dfn> of a <var>target</var>, which is an <a for="/">Element</a> or <a>Range</a>,
 with a scroll behavior <var>behavior</var>,
 a block flow direction position <var>block</var>,
-and an inline base direction position <var>inline</var>,
-means to run these steps for each ancestor element or <a>viewport</a> that establishes
-a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost <a>scrolling box</a>:
+an inline base direction position <var>inline</var>,
+and a <a>scrolling box</a> <var>scrolling box</var>,
+run the following steps:
 
-1. If the {{Document}} associated with <var>target</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>scrolling box</var>, terminate these steps.
 1. Let <var>target bounding border box</var> be the box represented by the return value of invoking Element's {{Element/getBoundingClientRect()}}, if <var>target</var> is an <a for="/">Element</a>, or Range's {{Range/getBoundingClientRect()}}, if <var>target</var> is a <a>Range</a>.
 1. Let <var>scrolling box edge A</var> be the <a>beginning edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge A</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge A</var>.
 1. Let <var>scrolling box edge B</var> be the <a>ending edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge B</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge B</var>.
@@ -1496,7 +1496,19 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
  <dt>If <var>element edge D</var> is outside <var>scrolling box edge D</var> and <var>element width</var> is less than <var>scrolling box width</var>
  <dd>Align <var>element edge D</var> with <var>scrolling box edge D</var>.
  </dl>
+ 1. Return <var>position</var>.
+
 
+To <dfn export>scroll a target into view</dfn> <var>target</var>, which is an <a for="/">Element</a> or <a>Range</a>,
+with a scroll behavior <var>behavior</var>,
+a block flow direction position <var>block</var>,
+and an inline base direction position <var>inline</var>,
+means to run these steps for each ancestor element or <a>viewport</a> that establishes
+a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost <a>scrolling box</a>:
+
+1. If the {{Document}} associated with <var>target</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>scrolling box</var>, terminate these steps.
+1. Let <var>position</var> be the scroll position resulting from running the steps to <a>determine the scroll-into-view position</a> of <var>target</var> with <var>behavior</var> as the |scroll behavior|,
+ <var>block</var> as the |block flow position|, <var>inline</var> as the |inline base direction position| and <var>scrolling box</var> as the |scrolling box|.
 1. If <var>position</var> is the same as <var>scrolling box</var>'s current scroll position, and <var>scrolling box</var> does not have an ongoing <a>smooth scroll</a>, then return.
 1. <dl class=switch>
  <dt>If <var>scrolling box</var> is associated with an element