[css-scroll-snap-2] Drop scroll-start and add issue to :snapped (#10505)

* [css-scroll-snap-2] Drop scroll-start and add issue to :snapped

Towards resolving [6985](#6985 (comment))
this patch removes scroll-start from the spec and notes that :snapped
is being replaced.

* Remove "shorthand" for scroll-start-target

* [css-scroll-snap-2] Put carousel example back into scroll-start spec

---------

Co-authored-by: David Awogbemila <awogbemila@chromium.org>

Author: DavMila

css-scroll-snap-2/Overview.bs

@@ -39,12 +39,13 @@ Introduction {#intro}
 	<em>This is currently a delta spec over Scroll Snap 1.</em>
 
 	Scroll experiences don't always start at the beginning. Interactions with
-	carousels, swipe controls, and listviews often start somewhere in the middle,
-	and each require JavaScript to set this position on page load.
-	By enabling CSS to specify this scroll start position,
-	both users, page authors and browsers benefit.
+	carousels, swipe controls, and listviews often intend to begin from some element
+	which might not be positioned at the beginning of the scroll container.
+	JavaScript is required to make the scroll container initially scrolled
+	to that element. By enabling CSS to specify that an element should be
+	initially scrolled to, both users, page authors and browsers benefit.
 
-	In addition to setting an initial scroll position,
+	In addition to setting an initial scroll target,
 	developers need insights and events into Scroll Snap.
 	Events like which element is snapped on which axis,
 	when the snap event is changing,
@@ -69,37 +70,27 @@ First Layout {#first-layout}
 
 Motivating Examples {#examples}
 ===============================
-
 		<div class="example">
-				A carousel that starts in the middle:
-
+				A carousel that starts scrolled to the middle image:
 				<pre class="lang-css">
 						.carousel {
 								overflow-inline: auto;
-								scroll-start: center;
+						}
+						.carousel .origin {
+								scroll-start-target: auto;
 						}
 				</pre>
 
 				<pre class="lang-html">
 						&lt;div class="carousel">
 								&lt;img src="img1.jpg">
 								&lt;img src="img2.jpg">
-								&lt;img src="img3.jpg">
+								&lt;img src="img3.jpg" class="origin">
 								&lt;img src="img4.jpg">
 								&lt;img src="img5.jpg">
 						&lt;/div>
 				</pre>
-
-				<!-- <figure>
-						<img src="images/element_snap_positions.png" alt="">
-
-						<figcaption>
-								The layout of the scroll container’s contents in the example.
-								The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle.  Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
-						</figcaption>
-				</figure> -->
 		</div>
-
 		<div class="example">
 				A search bar is available when the user scrolls back to the top:
 
@@ -137,93 +128,6 @@ Motivating Examples {#examples}
 Setting Where Scroll Starts {#properties-on-the-scroll-container}
 =================================================================
 
-<!-- BIG TEXT: SCROLL START -->
-
-The 'scroll-start' property {#scroll-start}
--------------------------------------------
-
-	<pre class="propdef shorthand">
-	Name: scroll-start
-	Value: [ auto | start | end | center | left | right | top | bottom | <<length-percentage [0,∞]>> ]{1,2}
-	</pre>
-
-	This property is a shorthand property that sets all of the scroll-start-* 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/start''. If ''scroll-start-target'' is set on any child, 'scroll-start' is not used, in favor of using the element as the offset.
-
-	Values are defined as follows:
-
-	<dl dfn-type=value dfn-for="scroll-start, scroll-start-x, scroll-start-y, scroll-start-block, scroll-start-inline">
-		<dt><dfn>auto</dfn>
-		<dd>
-			...
-
-		<dt><dfn><<length-percentage [0,∞]>></dfn>
-		<dd>
-			...
-
-			Negative values are invalid.
-			Values corresponding to a length greater than the width/height of the scrollport
-			are valid,
-			but clamped to the width/height of the scrollport.
-
-		<dt><dfn>start</dfn>
-		<dt><dfn>center</dfn>
-		<dt><dfn>end</dfn>
-		<dd>
-			Equivalent to ''0%'', ''50%'', and ''100%'', respectively.
-	</dl>
-
-<h4 id="display-none-behavior">
-Interaction with ''display: none'' and initial creation</h4>
-
-	Same behavior that animations follow with [[#first-layout]].
-
-<h4 id="slow-page-load-behavior">
-Slow page loading or document streaming behavior</h4>
-
-	TODO
-
-<h4 id="fragment-navigation-behavior">
-Interaction with "fragment navigation"</h4>
-
-	TODO
-
-	If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then 'scroll-start' is unused. Existing target logic should go unchanged. This makes 'scroll-start' a soft request in the scroll position resolution routines.
-
-<h4 id="place-content-behavior">
-Interaction with 'place-content'</h4>
-
-	TODO
-
-	Note: While 'place-content' can make a scroller appear to start in the center
-	or end, no browser supports it and it appears complicated to resolve.
-
-<h4 id="find-in-page-behavior">
-Interaction with "find in page"</h4>
-
-	TODO
-
-<h4 id="scroll-snap-container-behavior">
-Interaction with "scroll-snap" containers</h4>
-
-	This effectively will layout and start scroll at the snapped child, thus negating / cancelling 'scroll-start'. 'scroll-start' will only work if nothing else has effected the scroll position.
-
-<h4 id="nested-scrollers">
-Nested scrollers with 'scroll-start'</h4>
-
-	Should follow patterns that scroll snap has set.
-
-<h4 id="toggling-display-none">
-Interaction when 'display' is toggled</h4>
-
-	Same behavior that animations follow with [[#first-layout]].
-
-<h4 id="rtl">
-Interaction with RTL and LTR</h4>
-
-	Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical.
-
 The 'scroll-start-target' property {#scroll-start-target}
 -------------------------------------------
 
@@ -256,10 +160,9 @@ Initial scroll target</h4>
 	</div>
 
 
-<h4 id="scroll-start-target-shorthand">
-The scroll-start-target shorthand</h4>
+<h4 id="scroll-start-target-propdef">scroll-start-target Property Definition</h4>
 
-	<pre class="propdef shorthand">
+	<pre class="propdef">
 		Name: scroll-start-target
 		Value: [ none | auto ]
 		Initial: ''none''
@@ -289,7 +192,7 @@ Interaction with 'place-content'</h4>
 <h4 id="scroll-start-fragment-navigation">
 Post-first layout arrivals</h4>
 
-	While the document is being [[html#updating-the-document|updated],
+	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,
@@ -313,6 +216,9 @@ Post-first layout arrivals</h4>
 Styling Snapped Items {#styling-snapped}
 =============================
 
+Issue: The ':snapped' pseudo-class is being dropped in favor of a
+<a href="https://drafts.csswg.org/css-contain-4/scroll_state_explainer.html">container state query</a> approach.
+
 The Snapped-element Pseudo-class: '':snapped'' {#snapped}
 -------------------------------------------------------
 
@@ -650,47 +556,7 @@ when the scrolling operation ends.
 █████  ███▌  █▌   ▐▌  ███▌  █▌  █▌ █▌  █▌ █▌   ▐▌ ████▌
 -->
 
-Appendix A: Longhands {#longhands}
-==================================
-
-The physical and logical longhands (and their shorthands)
-interact as defined in [[!CSS-LOGICAL-1]].
-
-Physical Longhands for 'scroll-start' {#scroll-start-longhands-physical}
-----------------------------------------------------------------------
-
-	<pre class="propdef">
-	Name: scroll-start-x, scroll-start-y
-	Value: auto | start | end | center | <<length-percentage [0,∞]>>
-	Initial: auto
-	Applies to: <a>scroll containers</a>
-	Inherited: no
-	Logical property group: scroll-start
-	Percentages: relative to the corresponding axis of the scroll container’s scrollport
-	Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
-	Animation type: by computed value type
-	</pre>
-
-	...
-
-Flow-relative Longhands for 'scroll-start'  {#scroll-start-longhands-logical}
---------------------------------------------------------------------------
-
-	<pre class="propdef">
-	Name: scroll-start-inline, scroll-start-block
-	Value: auto | start | end | center | <<length-percentage [0,∞]>>
-	Initial: auto
-	Applies to: <a>scroll containers</a>
-	Inherited: no
-	Logical property group: scroll-start
-	Percentages: relative to the corresponding axis of the scroll container’s scrollport
-	Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
-	Animation type: by computed value type
-	</pre>
-
-	...
-
-Appendix B: Event Handlers {#event-handlers}
+Appendix A: Event Handlers {#event-handlers}
 ============================================================
 
 ISSUE: This section should be moved to the HTML event handler
@@ -736,9 +602,9 @@ Extensions to the <code>GlobalEventHandlers</code> Interface Mixin {#interface-g
 Privacy Considerations {#privacy}
 ======================
 
-TODO
+The features in this spec have no known privacy implications.
 
 Security Considerations {#security}
 =======================
 
-TODO
+The features in this spec have no known security implications.