[css-position] Move the <position> definition into V&U, eliminate the 3-value forms, per WG resolution.

Author: tabatkins

css-values-3/Overview.bs

@@ -1385,8 +1385,45 @@ Images: the <<image>> type</h3>
 <h3 id="position">
 2D Positioning: the <<position>> type</h3>
 
-	The <<position>> data type is defined in [[!CSS3BG]].
-	UAs that support CSS Backgrounds &amp; Borders Level 3 or its successor must interpret <<position>> as defined therein.
+	The <dfn><<position>></dfn> value specifies the position of a object area (e.g. background image)
+	inside a positioning area (e.g. background positioning area).
+	It is interpreted as specified for 'background-position'. [[!CSS3-BACKGROUNDS]]
+
+	<pre class=prod>
+		<<position>> = [
+		  [ left | center | right ] || [ top | center | bottom ]
+		|
+		  [ left | center | right | <<length-percentage>> ]
+		  [ top | center | bottom | <<length-percentage>> ]?
+		|
+		  [ [ left | right ] <<length-percentage>> ] &amp;&amp;
+		  [ [ top | bottom ] <<length-percentage>> ]
+		]
+	</pre>
+
+	Note: The 'background-position' property also accepts a three-value syntax.
+	This has been disallowed generically because it creates parsing ambiguities
+	when combined with other length or percentage components in a property value.
+
+	The canonical order when serializing is
+	the horizontal component followed by the vertical component.
+
+	When specified in a grammar alongside other keywords, <<length>>s, or <<percentage>>s,
+	<<position>> is <em>greedily</em> parsed;
+	it consumes as many components as possible.
+
+	<div class=example>
+		For example,
+		'transform-origin' defines a 3D position
+		as (effectively) ''<<position>> <<length>>?''.
+		A value such as ''left 50px''
+		will be parsed as a 2-value <<position>>,
+		with an omitted z-component;
+		on the other hand,
+		a value such as ''top 50px''
+		will be parsed as a single-value <<position>>
+		followed by a <<length>>.
+	</div>
 
 <h2 id="functional-notations">
 Functional Notations</h2>
@@ -2040,12 +2077,13 @@ Acknowledgments</h2>
 <h2 class="no-num" id="changes">
 Changes</h2>
 
-
 	Changes since the <a href="https://www.w3.org/TR/2016/CR-css-values-3-20160929/">29 September 2016 Candidate Recommendation</a> are:
 
 	<ul>
-		<li>Inlined definition of <<position>> and removed three-value syntax
+		<li>Inlined the <<position>> definition and dropped the three-value syntaxes
 			to allow for unambiguous combination in complex grammars.
+			This effectively removes that syntax from 'object-position',
+			but allows <<position>> to be re-used e.g. in [[CSS-TRANSFORMS]] for 3D positions.
 			(See <a href="https://lists.w3.org/Archives/Public/www-style/2017Feb/0052.html">discussion</a>.)
 	</ul>
 

css-values/Overview.bs

@@ -1444,8 +1444,45 @@ Images: the <<image>> type</h3>
 <h3 id="position">
 2D Positioning: the <<position>> type</h3>
 
-	The <<position>> data type is defined in [[!CSS3BG]].
-	UAs that support CSS Backgrounds &amp; Borders Level 3 or its successor must interpret <<position>> as defined therein.
+	The <dfn><<position>></dfn> value specifies the position of a object area (e.g. background image)
+	inside a positioning area (e.g. background positioning area).
+	It is interpreted as specified for 'background-position'. [[!CSS3-BACKGROUNDS]]
+
+	<pre class=prod>
+		<<position>> = [
+		  [ left | center | right ] || [ top | center | bottom ]
+		|
+		  [ left | center | right | <<length-percentage>> ]
+		  [ top | center | bottom | <<length-percentage>> ]?
+		|
+		  [ [ left | right ] <<length-percentage>> ] &amp;&amp;
+		  [ [ top | bottom ] <<length-percentage>> ]
+		]
+	</pre>
+
+	Note: The 'background-position' property also accepts a three-value syntax.
+	This has been disallowed generically because it creates parsing ambiguities
+	when combined with other length or percentage components in a property value.
+
+	The canonical order when serializing is
+	the horizontal component followed by the vertical component.
+
+	When specified in a grammar alongside other keywords, <<length>>s, or <<percentage>>s,
+	<<position>> is <em>greedily</em> parsed;
+	it consumes as many components as possible.
+
+	<div class=example>
+		For example,
+		'transform-origin' defines a 3D position
+		as (effectively) ''<<position>> <<length>>?''.
+		A value such as ''left 50px''
+		will be parsed as a 2-value <<position>>,
+		with an omitted z-component;
+		on the other hand,
+		a value such as ''top 50px''
+		will be parsed as a single-value <<position>>
+		followed by a <<length>>.
+	</div>
 
 <h2 id="functional-notations">
 Functional Notations</h2>