[css-scroll-snap-2] Cleanup of markup/grammars, tiny bit of detail filled in

Author: tabatkins

css-scroll-snap-2/Overview.bs

@@ -47,62 +47,69 @@ Setting Where Scroll Starts {#properties-on-the-scroll-container}
 The 'scroll-start' property {#scroll-start}
 -------------------------------------------
 
-	<pre class="propdef">
+	<pre class="propdef shorthand">
 	Name: scroll-start
-	Value: auto | [end | center] | <<length-percentage>>
-	Initial: none
-	Applies to: all elements
-	Inherited: no
-	Percentages: n/a
-	Computed value: specified keyword(s)
-	Animation type: discrete
+	Value: [ auto | start | end | center | <<length-percentage>> ]{1,2}
 	</pre>
 
-This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration. It does not work like 'margin', where a value is repeated to all sides. {{scroll-start: 200px}} is not {{scroll-start: 200px 200px}}, it's {{scroll-start: 200px 0}}. Inline is first, followed by block.
+	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''.
 
-Values are defined as follows:
+	Values are defined as follows:
 
-	<dl dfn-type=value dfn-for="scroll-snap-type">
-		<dt><dfn>end</dfn>
+	<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>
-			Scroll position starts at the end of a <a>scroll container</a>.
-			Property value is at risk, may be duplicative.
+			...
 
+		<dt><dfn><<length-percentage>></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>
-			Scroll position starts at the middle of a <a>scroll container</a>.
-			Property value is at risk, may be duplicative.
+			Equivalent to ''0%'', ''50%'', and ''100%'', respectively.
 	</dl>
 
 Styling Snapped Items {#todo}
 =============================
 
-The Snapped-element Pseudo-class: ':snapped' {#snapped}
+The Snapped-element Pseudo-class: '':snapped'' {#snapped}
 -------------------------------------------------------
 
-The {{:snapped}} pseudo-class matches any scroll snap
-targets, regardless of axis. The longform physical and logical pseudo-class
-selectors allow for more finite snapped children styling
+The <dfn selector>:snapped</dfn> pseudo-class matches any scroll snap targets,
+regardless of axis.
+The longform physical and logical pseudo-class selectors
+allow for more finite snapped children styling
 as they can target an individual axis.
 
 More specific options are defined as follows:
 
-	<dl dfn-type=value dfn-for="scroll-snap-type">
+	<dl dfn-type=selector>
 		<dt><dfn>:snapped-x</dfn>
 		<dd>
-			Matches the child snapped on the {{x}} axis.
+			Matches the child snapped on the horizontal axis.
 
 		<dt><dfn>:snapped-y</dfn>
 		<dd>
-			Matches the child snapped on the {{y}} axis.
+			Matches the child snapped on the vertical axis.
 
 		<dt><dfn>:snapped-inline</dfn>
 		<dd>
-			Matches the child snapped on the {{inline}} axis.
+			Matches the child snapped on the [=inline=] axis.
 
 		<dt><dfn>:snapped-block</dfn>
 		<dd>
-			Matches the child snapped on the {{block}} axis.
+			Matches the child snapped on the [=block=] axis.
 	</dl>
 
 Snap Events {#todo}
@@ -118,8 +125,8 @@ Snap Events {#todo}
 ████████    ███    ████████ ██    ██    ██     ██████
 -->
 
-'snapChanged' and 'snapChanging'
---------------------------------
+{{snapChanged}} and {{snapChanging}} {#todo}
+--------------------------------------------
 
 	CSS scroll snap points are often used as a mechanism to
 	create scroll interactive "selection" components,
@@ -135,10 +142,10 @@ Snap Events {#todo}
 				<th>Event handler event type
 		<tbody>
 			<tr>
-				<th>{{snapChanged}}
+				<th><dfn event>snapChanged</dfn>
 				<td>{{scroll!!event}}
 			<tr>
-				<th>{{snapChanging}}
+				<th><dfn event>snapChanging</dfn>
 				<td>{{scroll!!event}}
 	</table>
 
@@ -163,29 +170,29 @@ Physical Longhands for 'scroll-start' {#scroll-start-longhands-physical}
 
 	<pre class="propdef">
 	Name: scroll-start-x, scroll-start-y
-	Value: auto | [end | center] | <<length-percentage>>
+	Value: auto | start | end | center | <<length-percentage>>
 	Initial: auto
 	Applies to: <a>scroll containers</a>
 	Inherited: no
-	Percentages: relative to the scroll container’s scrollport
+	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>
 
-	Negative values are invalid.
+	...
 
 Flow-relative Longhands for 'scroll-start'  {#scroll-start-longhands-logical}
 --------------------------------------------------------------------------
 
 	<pre class="propdef">
 	Name: scroll-start-inline, scroll-start-block
-	Value: auto | [end | center] | <<length-percentage>>
+	Value: auto | start | end | center | <<length-percentage>>
 	Initial: auto
 	Applies to: <a>scroll containers</a>
 	Inherited: no
-	Percentages: relative to the scroll container’s scrollport
+	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>
 
-	Negative values are invalid.
+	...