[css-scroll-snap] Rename scroll-snap-area to scroll-snap-margin per WG resolution

Author: fantasai

css-scroll-snap/Overview.bs

@@ -42,7 +42,7 @@ Use Cases {#use-cases}
 		:root { scroll-snap-type: proximity; }
 		h1, h2, h3, h4, h5, h6 {
 			scroll-snap-align: start;
-			scroll-snap-area: 0.25em;
+			scroll-snap-margin: 0.25em;
 		}
 		</pre>
 
@@ -160,7 +160,7 @@ On the children:
 			<td>High priority
 		<tr>
 			<td>n/a
-			<td>''scroll-snap-area: <<length>>{1,4}''
+			<td>''scroll-snap-margin: <<length>>{1,4}''
 			<td>High priority
 </table>
 
@@ -177,7 +177,7 @@ Scroll Snapping Model {#snap-model}
 
 	Valid <a>snap positions</a> can be specified
 	as a particular alignment ('scroll-snap-align')
-	of an element's <a>scroll snap area</a> ('scroll-snap-area', defaulting to its border box)
+	of an element's <a>scroll snap area</a> ('scroll-snap-margin', defaulting to its border box)
 	within the <a>scroll container</a>’s <a>snap viewport</a>
 	(its viewport, as reduced by 'scroll-snap-padding').
 	This is conceptually equivalent to specifying the alignment of
@@ -435,11 +435,11 @@ Element-based Snapping {#element}
 ██     ██ ██     ██ ████████ ██     ██
 -->
 
-Scroll Snapping Area: the 'scroll-snap-area' property {#scroll-snap-areas}
+Scroll Snapping Area: the 'scroll-snap-margin' property {#scroll-snap-areas}
 ---------------------
 
 	<pre class="propdef">
-	Name: scroll-snap-area
+	Name: scroll-snap-margin
 	Value: <<length>>{1,4}
 	Initial: 0
 	Applies to: all elements
@@ -451,17 +451,17 @@ Scroll Snapping Area: the 'scroll-snap-area' property {#scroll-snap-areas}
 
 	Specifies the <dfn lt="scroll snap area" local-lt="snap area">scroll snap area</dfn>
 	that is used for snapping this box to the viewport.
-	<<length>> values give outsets (similar to 'margin' or 'border-image-outset').
+	The <<length>> values give outsets
+	(similar to 'margin' or 'border-image-outset').
 	The <a>scroll snap area</a> is the bounding box of the transformed border box,
+	plus the specified outsets,
 	in the <a>scroll container’s</a> coordinate space.
-	Outsets are applied to the bounding box,
-	not the border box.
 
 	Note: This ensures that the <a>scroll snap area</a> is always rectangular and axis-aligned
 	to the <a>scroll container’s</a> coordinate space.
 
 	This property is a <a>shorthand property</a> that sets
-	all of the <a href="#longhands"><css>scroll-snap-area-*</css> longhands</a>
+	all of the <a href="#longhands"><css>scroll-snap-margin-*</css> longhands</a>
 	in one declaration.
 
 <!--
@@ -575,15 +575,15 @@ Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-alignm
 		(in the sense of 'align-self' and 'justify-self'),
 		so are consistent with that syntax.
 		We chose to use this simpler syntax without lengths or percentages
-		because the 'scroll-snap-area' concept already provides length offsets--
+		because the 'scroll-snap-margin' concept already provides length offsets--
 		but does so in a smarter way, that degrades better on small screens (see above)
 		because it provides more information (a box, rather than a point) to the UA.
 		We could have also added lengths here,
 		but it would provide multiple ways to do the same thing,
 		which is additional overhead for implementation, testing, and (most importantly) author learning.
 		It also introduces more room for cascading errors,
 		and guides authors in the wrong direction--
-		away from 'scroll-snap-area'.
+		away from 'scroll-snap-margin'.
 	</details>
 
 <h4 id="snap-scope">
@@ -1051,20 +1051,20 @@ Flow-relative Longhands for 'scroll-snap-padding'  {#padding-longhands-logical}
 	Media: interactive
 	</pre>
 
-	These <a>shorthands</a> of 'scroll-snap-area-block-start' + 'scroll-snap-area-block-end'
-	and 'scroll-snap-area-inline-start' + 'scroll-snap-area-inline-end'
+	These <a>shorthands</a> of 'scroll-snap-margin-block-start' + 'scroll-snap-margin-block-end'
+	and 'scroll-snap-margin-inline-start' + 'scroll-snap-margin-inline-end'
 	are <a>longhands</a> of 'scroll-snap-padding', and
 	specify the block-axis and inline-axis
 	edges of the <a>snap viewport</a>,
 	respectively.
 	If two values are specified, the first gives the start value
 	and the second gives the end value.
 
-Physical Longhands for 'scroll-snap-area'  {#area-longhands-physical}
+Physical Longhands for 'scroll-snap-margin'  {#area-longhands-physical}
 -----------------------------------------
 
 	<pre class="propdef">
-	Name: scroll-snap-area-top, scroll-snap-area-right, scroll-snap-area-bottom, scroll-snap-area-left
+	Name: scroll-snap-margin-top, scroll-snap-margin-right, scroll-snap-margin-bottom, scroll-snap-margin-left
 	Value: <<length>>
 	Initial: 0
 	Applies to: all elements
@@ -1074,16 +1074,16 @@ Physical Longhands for 'scroll-snap-area'  {#area-longhands-physical}
 	Media: interactive
 	</pre>
 
-	These <a>longhands</a> of 'scroll-snap-area' specify
+	These <a>longhands</a> of 'scroll-snap-margin' specify
 	the top, right, bottom, and left
 	edges of the <a>scroll snap area</a>,
 	respectively.
 
-Flow-relative Longhands for 'scroll-snap-area'  {#area-longhands-logical}
+Flow-relative Longhands for 'scroll-snap-margin'  {#area-longhands-logical}
 --------------------------------------------
 
 	<pre class="propdef">
-	Name: scroll-snap-area-block-start, scroll-snap-area-inline-start, scroll-snap-area-block-end, scroll-snap-area-inline-end
+	Name: scroll-snap-margin-block-start, scroll-snap-margin-inline-start, scroll-snap-margin-block-end, scroll-snap-margin-inline-end
 	Value: <<length>>
 	Initial: 0
 	Applies to: all elements
@@ -1093,13 +1093,13 @@ Flow-relative Longhands for 'scroll-snap-area'  {#area-longhands-logical}
 	Media: interactive
 	</pre>
 
-	These <a>longhands</a> of 'scroll-snap-area' specify
+	These <a>longhands</a> of 'scroll-snap-margin' specify
 	the block-start, inline-start, block-end, and inline-end
 	edges of the <a>scroll snap area</a>,
 	respectively.
 
 	<pre class="propdef">
-	Name: scroll-snap-area-block, scroll-snap-area-inline
+	Name: scroll-snap-margin-block, scroll-snap-margin-inline
 	Value: <<length>>{1,2}
 	Initial: 0
 	Applies to: all elements
@@ -1109,9 +1109,9 @@ Flow-relative Longhands for 'scroll-snap-area'  {#area-longhands-logical}
 	Media: interactive
 	</pre>
 
-	These <a>shorthands</a> of 'scroll-snap-area-block-start'/'scroll-snap-area-block-end'
-	and 'scroll-snap-area-inline-start'/'scroll-snap-area-inline-end'
-	are <a>longhands</a> of 'scroll-snap-area', and specify
+	These <a>shorthands</a> of 'scroll-snap-margin-block-start'/'scroll-snap-margin-block-end'
+	and 'scroll-snap-margin-inline-start'/'scroll-snap-margin-inline-end'
+	are <a>longhands</a> of 'scroll-snap-margin', and specify
 	the block-axis and inline-axis
 	edges of the <a>scroll snap area</a>,
 	respectively.