[css-values-4] Fix confusing background-position example. See w3c#3482 (comment) and reply in w3c#3482 (comment)

Author: fantasai

css-values-3/Overview.bs

@@ -1553,14 +1553,15 @@ Mathematical Expressions: ''calc()''</h3>
 	</div>
 
 	<div class='example'>
-		The following example stacks two centered background images,
-		with one offset slightly from the other.
+		The following example stacks two background images,
+		with the first perfectly centered
+		and the second offset 20px to the bottom and to the left of the first.
 
 		<pre>
 		.foo {
 			background: url(top.png), url(bottom.png);
 			background-repeat: no-repeat;
-			background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
+			background-position: 50% 50%, calc(50% + 20px) calc(50% + 20px);
 		}
 		</pre>
 	</div>
@@ -1715,24 +1716,14 @@ Computed Value</h4>
 	they apply whenever a ''calc()'' expression contains percentages.
 
 	<div class='example'>
-		For example, 'background-position' has special behavior for percentage values, different from lengths:
-
-		<pre>
-		.foo {
-			width: 200px;
-			background-image: url(bg.png);
-			background-position: left 50%;
-			/* different than: */
-			background-position: left 100px;
-			/* despite 50% of 200px being 100px */
-		}
-		</pre>
+		For example,
+		whereas 'font-size' computes percentage values at <a>computed value time</a>
+		so that <a>font-relative length</a> units can be computed,
+		'background-position' has layout-dependent behavior for percentage values,
+		and thus does not resolve percentages until used-value time.
 
-		Due to this, 'background-position' preserves the percentage in a ''calc()''
-		rather than resolving it directly into a length,
-		so that an expression like ''background-position: left calc(50% + 20px) center''
-		properly centers the background and then shifts it ''20px'' to the right,
-		rather than placing its <em>left edge</em> 20px off of center.
+		Due to this, 'background-position' computation preserves the percentage in a ''calc()''
+		whereas 'font-size' will compute such expressions directly into a length.
 	</div>
 
 	<!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
@@ -2169,6 +2160,8 @@ Changes</h2>
 				<ins>unless otherwise specified,</ins>
 				the declaration is invalid and must be <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
 			</blockquote>
+		<li>Fixed some 'background-position' examples to be less confusing.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/3482#issuecomment-453257033">Issue 3482</a>)
 	</ul>
 
 	Changes since the <a href="https://www.w3.org/TR/2016/CR-css-values-3-20160929/">29 September 2016 Candidate Recommendation</a> are:

css-values-4/Overview.bs

@@ -2289,24 +2289,14 @@ Computed Value</h4>
 	</div>
 
 	<div class='example'>
-		For example, 'background-position' has special behavior for percentage values, different from lengths:
-
-		<pre>
-		.foo {
-			width: 200px;
-			background-image: url(bg.png);
-			background-position: left 50%;
-			/* different than: */
-			background-position: left 100px;
-			/* despite 50% of 200px being 100px */
-		}
-		</pre>
+		For example,
+		whereas 'font-size' computes percentage values at <a>computed value time</a>
+		so that <a>font-relative length</a> units can be computed,
+		'background-position' has layout-dependent behavior for percentage values,
+		and thus does not resolve percentages until used-value time.
 
-		Due to this, 'background-position' preserves the percentage in a ''calc()''
-		rather than resolving it directly into a length,
-		so that an expression like ''background-position: left calc(50% + 20px) center''
-		properly centers the background and then shifts it ''20px'' to the right,
-		rather than placing its <em>left edge</em> 20px off of center.
+		Due to this, 'background-position' computation preserves the percentage in a ''calc()''
+		whereas 'font-size' will compute such expressions directly into a length.
 	</div>
 
 	<!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html