[css-values] Add an example about preserving percentages in calc().

Author: tabatkins

css-values/Overview.html

@@ -11,7 +11,7 @@
    rel=dcterms.rights>
   <meta content="CSS Values and Units Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-12-06 name=dcterms.date>
+  <meta content=2013-12-18 name=dcterms.date>
   <meta content="Håkon Wium Lie" name=dcterms.creator>
   <meta content="Tab Atkins" name=dcterms.creator>
   <meta content="Elika J. Etemad" name=dcterms.creator>
@@ -42,11 +42,11 @@
    <h1 class=p-name>CSS Values and Units Module Level 3</h1>
 
    <h2 class="no-num no-toc">Editor's Draft <span class=dt-updated><span
-    class=value title=20131206> 6 December 2013</span></span></h2>
+    class=value title=20131218>18 December 2013</span></span></h2>
 
    <dl>
     <dt>This version:</dt>
-    <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css-values/">http://www.w3.org/TR/2013/CR-css3-values-20131206/</a></dd>-->
+    <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css-values/">http://www.w3.org/TR/2013/CR-css3-values-20131218/</a></dd>-->
 
     <dd><a class=u-url
      href="http://dev.w3.org/csswg/css-values/">http://dev.w3.org/csswg/css-values/</a>
@@ -1639,7 +1639,31 @@ <h4 id=calc-computed-value><span class=secno>8.1.3. </span> Computed Value</h4>
   <p class=note> Thus, the computed value of a ‘<a href="#calc"><code
    class=css>calc()</code></a>’ expression can be represented as either a
    number or a tuple of a dimension and a percentage.
-   <!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
+
+  <div class=example>
+   <p> For example, ‘<code class=property>background-position</code>’ 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>
+
+   <p> Due to this, ‘<code class=property>background-position</code>’
+    preserves the percentage in a ‘<a href="#calc"><code
+    class=css>calc()</code></a>’ rather than resolving it directly into a
+    length, so that an expression like ‘<code
+    class=css>background-position: left calc(50% + 20px)</code>’ properly
+    centers the background and then shifts it ‘<code
+    class=css>20px</code>’ to the right, rather than placing its <em>left
+    edge</em> 20px off of center.
+  </div>
+  <!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
 	This has notes on how we should handle things when calc() is extended to
 	handle unit mult/div. Related to this is <unit>mod<unit>, which can return
 	0 and thus introduce computed-time division-by-zero. -->

css-values/Overview.src.html

@@ -1171,6 +1171,28 @@ <h4 id='calc-computed-value'>
 		as either a number
 		or a tuple of a dimension and a percentage.
 
+	<div class='example'>
+		<p>
+			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>
+
+		<p>
+			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)''
+			properly centers the background and then shifts it ''20px'' to the right,
+			rather than placing its <em>left edge</em> 20px off of center.
+	</div>
+
 	<!-- http://lists.w3.org/Archives/Public/www-style/2010May/0001.html
 	This has notes on how we should handle things when calc() is extended to
 	handle unit mult/div. Related to this is <unit>mod<unit>, which can return