[css-regions] improve region-fragment example

Author: astearns

css-regions/Overview.html

@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Regions Module Level 1" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-11-14 name=dcterms.date>
+  <meta content=2013-11-26 name=dcterms.date>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -46,7 +46,7 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 1</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 November
     2013</h2>
 
    <dl>
@@ -1381,39 +1381,42 @@ <h3 id=the-region-fragment-property><span class=secno>3.4. </span>The
     summary="Different values for the region-fragment property - Illustration.">
     <tbody>
      <tr>
-      <td>‘<code class=css>flow-into: "article"</code>’
+      <td>article with two<br>
+       overflowing lines
 
-      <td><code>region-1</code> and <code class=html>region-2</code>
+      <td><code>region-fragment: break<br>
+       overflow: visible</code>
 
-      <td>‘<code class=css>region-fragment: auto</code>’<br>
-       ‘<code class=css>overflow:visible</code>’
+      <td><code>region-fragment: auto<br>
+       overflow: visible</code>
 
      <tr>
       <td rowspan=3 style="vertical-align: top;"><img
-       alt="regions receiving the flow content"
-       src="images/region-overflow-flow.png">
+       alt="flow content rendering" src="images/region-overflow-flow.png">
 
-      <td><img alt="result if region-overflow is set to 'break'"
-       src="images/region-overflow-regions.png">
+      <td><img
+       alt="rendering with region-fragment:break and overflow:visible"
+       src="images/region-overflow-break-visible.png">
 
-      <td><img alt="regions receiving the flow content"
-       src="images/region-overflow-auto-overflow-visible.png">
+      <td><img alt="rendering with region-fragment:auto and overflow:visible"
+       src="images/region-overflow-auto-visible.png">
 
      <tr>
-      <td>‘<code class=css>region-fragment: break</code>’
+      <td><code>region-fragment: break<br>
+       overflow: hidden</code>
 
-      <td>‘<code class=css>region-fragment: auto</code>’<br>
-       ‘<code class=css>overflow:hidden</code>’
+      <td><code>region-fragment: auto<br>
+       overflow: hidden</code>
 
      <tr>
-      <td><img alt="result if region-overflow is set to 'break'"
-       src="images/region-overflow-break.png">
+      <td><img alt="rendering with region-fragment:break and overflow:hidden"
+       src="images/region-overflow-break-hidden.png">
 
-      <td><img alt="regions receiving the flow content"
-       src="images/region-overflow-auto-overflow-hidden.png">
+      <td><img alt="rendering with region-fragment:auto and overflow:hidden"
+       src="images/region-overflow-auto-hidden.png">
    </table>
 
-   <p class=caption>Different values for the region-fragment property
+   <p class=caption>Combinations of region-fragment and overflow.
   </div>
 
   <div class=note><span class=note-prefix>Note </span>

css-regions/Overview.src.html

@@ -1214,45 +1214,46 @@ <h3 id="the-region-fragment-property">The region-fragment property</h3>
         <table style="border: 1px solid gray;width: 100%;" summary=
         "Different values for the region-fragment property - Illustration.">
             <tr>
-                <td>''flow-into: "article"''</td>
+                <td>article with two<br>
+                overflowing lines</td>
 
-                <td><code>region-1</code> and <code class=
-                "html">region-2</code></td>
+                <td><code>region-fragment: break<br>
+                overflow: visible</code></td>
 
-                <td>''region-fragment: auto''<br>
-                ''overflow:visible''</td>
+                <td><code>region-fragment: auto<br>
+                overflow: visible</code></td>
             </tr>
 
             <tr>
                 <td rowspan="3" style="vertical-align: top;"><img src=
                 "images/region-overflow-flow.png" alt=
-                "regions receiving the flow content"></td>
+                "flow content rendering"></td>
 
-                <td><img src="images/region-overflow-regions.png" alt=
-                "result if region-overflow is set to 'break'"></td>
+                <td><img src="images/region-overflow-break-visible.png" alt=
+                "rendering with region-fragment:break and overflow:visible"></td>
 
-                <td><img src="images/region-overflow-auto-overflow-visible.png"
-                alt="regions receiving the flow content"></td>
+                <td><img src="images/region-overflow-auto-visible.png"
+                alt="rendering with region-fragment:auto and overflow:visible"></td>
             </tr>
 
             <tr>
-                <td>''region-fragment: break''</td>
+                <td><code>region-fragment: break<br>
+                  overflow: hidden</code></td>
 
-                <td>''region-fragment: auto''<br>
-                ''overflow:hidden''</td>
+                <td><code>region-fragment: auto<br>
+                overflow: hidden</code></td>
             </tr>
 
             <tr>
-                <td><img src="images/region-overflow-break.png" alt=
-                "result if region-overflow is set to 'break'"></td>
+                <td><img src="images/region-overflow-break-hidden.png" alt=
+                "rendering with region-fragment:break and overflow:hidden"></td>
 
-                <td><img src="images/region-overflow-auto-overflow-hidden.png"
-                alt="regions receiving the flow content"></td>
+                <td><img src="images/region-overflow-auto-hidden.png"
+                alt="rendering with region-fragment:auto and overflow:hidden"></td>
             </tr>
         </table>
 
-        <p class="caption">Different values for the region-fragment
-        property</p>
+        <p class="caption">Combinations of region-fragment and overflow.</p>
     </div>
 
     <div class="note"><span class="note-prefix">Note </span>