Add partial-curve figure, further clarify note.

Author: fantasai

css3-background/Overview.html

@@ -12,6 +12,7 @@
     .prod { font-family: inherit; font-size: inherit }
     pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
     code { font-size: inherit; }
+    pre { text-align: left; }
     #box-shadow-samples td { background: white; color: black; }
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
@@ -24,12 +25,12 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 April 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 April 2012</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!-- <a href="http://www.w3.org/TR/2012/CR-css3-background-20120410">http://www.w3.org/TR/2012/ED-css3-background-20120410/</a> -->
+    <dd><!-- <a href="http://www.w3.org/TR/2012/CR-css3-background-20120411">http://www.w3.org/TR/2012/ED-css3-background-20120411/</a> -->
      <a
      href="http://dev.w3.org/csswg/css3-background/">http://dev.w3.org/csswg/css3-background/</a>
 
@@ -2855,10 +2856,6 @@ <h3 id=corner-shaping><span class=secno>5.2. </span>Corner Shaping</h3>
    adjoining borders are of different thicknesses the corner will show a
    smooth transition between the thicker and thinner borders.
 
-  <p class=note>Note that this means that if the center of the outer curve is
-   past the opposite side's padding edge, the inner curve might not be a full
-   quarter ellipse.
-
   <p>All border styles (&lsquo;<code class=css>solid</code>&rsquo;,
    &lsquo;<code class=css>dotted</code>&rsquo;, &lsquo;<code
    class=css>inset</code>&rsquo;, etc.) follow the curve of the border.
@@ -2873,6 +2870,28 @@ <h3 id=corner-shaping><span class=secno>5.2. </span>Corner Shaping</h3>
 
   </div>
 
+  <p class=note>Note that if the center of a corner's outer curve is past an
+   opposite padding edge (in the border area of a side opposite the corner),
+   the inner curve will not be a full quarter ellipse.
+
+  <div class=figure>
+   <table>
+    <tbody>
+     <tr>
+      <td>
+       <pre>p { width: 70px; height: 70px; border: solid 30px;
+<!--            -->    border-color: orange orange silver silver;
+<!--            -->    border-top-right-radius: 100%; }</pre>
+
+      <td><img
+       alt="The curved corner is an arc from the top left corner sweeping                across the top right corner to the bottom right corner, describing                a quarter-ellipse; but since the opposite sides have a border                thickness the padding edge curve starts inward from the outer arc's                endpoints."
+       src=partial-curve.png>
+   </table>
+
+   <p class=caption>Where the border-radius curve extends into the opposite
+    sides' borders, the arc of the padding edge is less than 90&deg;.
+  </div>
+
   <h3 id=corner-clipping><span class=secno>5.3. </span>Corner Clipping</h3>
 
   <p>A box's backgrounds, but not its <a

css3-background/Overview.src.html

@@ -11,6 +11,7 @@
     .prod { font-family: inherit; font-size: inherit }
     pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
     code { font-size: inherit; }
+    pre { text-align: left; }
     #box-shadow-samples td { background: white; color: black; }
   </style>
   <link rel="stylesheet" type="text/css"
@@ -2007,10 +2008,6 @@ <h3 id="corner-shaping">Corner Shaping</h3>
 when two adjoining borders are of different thicknesses the corner will
 show a smooth transition between the thicker and thinner borders.
 
-<p class="note">Note that this means that if the center of the outer curve
-is past the opposite side's padding edge, the inner curve might not be a
-full quarter ellipse.</p>
-
 <p>All border styles (''solid'', ''dotted'',  ''inset'', etc.)
 follow the curve of the border.
 
@@ -2024,6 +2021,26 @@ <h3 id="corner-shaping">Corner Shaping</h3>
   corner (right).
 </div>
 
+<p class="note">Note that if the center of a corner's outer curve is past an
+opposite padding edge (in the border area of a side opposite the corner),
+the inner curve will not be a full quarter ellipse.</p>
+
+<div class="figure">
+  <table>
+    <tr><td><pre>p { width: 70px; height: 70px; border: solid 30px;
+<!--            -->    border-color: orange orange silver silver;
+<!--            -->    border-top-right-radius: 100%; }</pre>
+    <td><img alt="The curved corner is an arc from the top left corner sweeping
+               across the top right corner to the bottom right corner, describing
+               a quarter-ellipse; but since the opposite sides have a border
+               thickness the padding edge curve starts inward from the outer arc's
+               endpoints."
+          src="partial-curve.png">
+  </table>
+  <p class=caption>Where the border-radius curve extends into the opposite
+  sides' borders, the arc of the padding edge is less than 90&deg;.
+</div>
+
 <h3 id="corner-clipping">Corner Clipping</h3>
 
 <p>A box's backgrounds, but not its <a href="#the-border-image">border-image</a>,