[css-regions] updating examples

Author: astearns

css3-regions/Overview.html

@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Regions Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-02-26 name=dcterms.issued>
+  <meta content=2013-03-01 name=dcterms.issued>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -50,8 +50,7 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 February
-    2013</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 March 2013</h2>
 
    <dl>
     <dt>This version:
@@ -445,29 +444,29 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
    class=css>region1</code>’, ‘<code class=css>region2</code>’,
    ‘<code class=css>region3</code>’ and ‘<code
    class=css>region4</code>’ IDs become CSS Regions that consume the
-   ‘<code class=css>article_flow</code>’ content.
+   ‘<code class=property>article-flow</code>’ content.
 
   <div class=example>
    <pre>
 &lt;style&gt;
   article {
-    <strong>flow-into: article_flow;</strong>
+    <strong>flow-into: article-flow;</strong>
   }
 
   #region1, #region2, #region3, #region4 {
-    <strong>flow-from: article_flow;</strong>
+    <strong>flow-from: article-flow;</strong>
   }
 &lt;/style&gt;
       </pre>
   </div>
 
-  <p>The ‘<code class=css>article_flow</code>’ value on the ‘<a
+  <p>The ‘<code class=property>article-flow</code>’ value on the ‘<a
    href="#flow-into"><code class=property>flow-into</code></a>’ property
    directs the <code>article</code> element to the ‘<code
-   class=css>article_flow</code>’ <a href="#named-flow0">named flow</a>.
-   Setting the ‘<a href="#flow-from"><code
+   class=property>article-flow</code>’ <a href="#named-flow0">named
+   flow</a>. Setting the ‘<a href="#flow-from"><code
    class=property>flow-from</code></a>’ property on block containers to
-   ‘<code class=css>article_flow</code>’ makes them CSS Regions and
+   ‘<code class=property>article-flow</code>’ makes them CSS Regions and
    associates the resulting region chain with the <a
    href="#named-flow0">named flow</a>: the flow is ‘<code
    class=css>poured</code>’ into the region chain.
@@ -1325,24 +1324,28 @@ <h3 id=the-region-fragment-property><span class=secno>3.4. </span>The
 
   <div class=example>
    <pre>
-&lt;style&gt;
-article {
-  flow-into: "article";
-}
-
-#region_1, #region_2 {
-  flow-from: article;
-  <strong>region-fragment: break;</strong> /* or auto */
-  <strong>overflow: visible;</strong> /* or hidden */
-}
+&lt;body is="two-region-example"&gt;
+  &lt;article&gt;...&lt;/article&gt;
+&lt;/body&gt;
 
-&lt;/style&gt;
+&lt;element name="two-region-example" extends="body"&gt;
+  &lt;style&gt;
+    article {
+      flow-into: article-flow;
+    }
+    #region_1, #region_2 {
+      flow-from: article-flow;
+      <strong>region-fragment: break;</strong> /* or auto */
+      <strong>overflow: visible;</strong> /* or hidden */
+    }
+  &lt;/style&gt;
 
-&lt;article&gt;...&lt;/article&gt;
+  &lt;template&gt;
+    &lt;div id="region_1"&gt;&lt;/div&gt;
+    &lt;div id="region_2"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;
 
-&lt;div id="region_1"&gt;&lt;/div&gt;
-&lt;div id="region_2"&gt;&lt;/div&gt;
-        
       </pre>
   </div>
 
@@ -1510,17 +1513,17 @@ <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region
 
   <div class=example id=region-style-example>
    <p>In the following example, the <a href="#named-flow0">named flow</a>
-    ‘<code class=css>article_flow</code>’ flows through ‘<code
+    ‘<code class=property>article-flow</code>’ flows through ‘<code
     class=css>region_1</code>’ and ‘<code class=css>region_2</code>’.
 
    <pre>
 &lt;style&gt;
     #div_1 {
-        <strong>flow-into: article_flow;</strong>
+        <strong>flow-into: article-flow;</strong>
     }
 
     #region_1, #region_2 {
-        <strong>flow-from: article_flow;</strong>
+        <strong>flow-from: article-flow;</strong>
     }
 
     /* region style "RSA" */
@@ -3298,7 +3301,7 @@ <h2 class=no-num id=intro-example-code>Appendix A. Example Code for
 
 &lt;element name="x-fancy-layout" extends="body"&gt;
   &lt;template&gt;
-    &lt;style scoped&gt;
+    &lt;style&gt;
       #grid {
         width: 80vw;
         height: 60vw;
@@ -3328,7 +3331,7 @@ <h2 class=no-num id=intro-example-code>Appendix A. Example Code for
        * Creates the named flow 
        */</span>
       article {
-        <strong>flow-into: article_flow;</strong>
+        <strong>flow-into: article-flow;</strong>
       }
 
       <span
@@ -3337,7 +3340,7 @@ <h2 class=no-num id=intro-example-code>Appendix A. Example Code for
        * This creates a region chain for the named flow.
        */</span>
       #region1, #region2, #region3, #region4 {
-        <strong>flow-from: article_flow;</strong>
+        <strong>flow-from: article-flow;</strong>
       }
     &lt;/style&gt;
     &lt;div id="grid"&gt;

css3-regions/Overview.src.html

@@ -189,27 +189,27 @@ <h3 id="named-flows-and-regions">Named flows and region chains</h3>
       how the content of an <code>&lt;article&gt;</code> element 
       becomes a <span>named flow</span> 
       and how boxes marked with 'region1', 'region2', 'region3' and 'region4' IDs
-      become CSS Regions that consume the 'article_flow' content.</p>
+      become CSS Regions that consume the 'article-flow' content.</p>
 
     <div class="example">
       <pre>
 &lt;style&gt;
   article {
-    <strong>flow-into: article_flow;</strong>
+    <strong>flow-into: article-flow;</strong>
   }
 
   #region1, #region2, #region3, #region4 {
-    <strong>flow-from: article_flow;</strong>
+    <strong>flow-from: article-flow;</strong>
   }
 &lt;/style&gt;
       </pre>
     </div>
 
-    <p>The 'article_flow' value on the 'flow-into' property 
+    <p>The 'article-flow' value on the 'flow-into' property 
       directs the <code>article</code> element 
-      to the 'article_flow' <span>named flow</span>. 
+      to the 'article-flow' <span>named flow</span>. 
       Setting the 'flow-from' property on block containers
-      to 'article_flow' makes them CSS Regions 
+      to 'article-flow' makes them CSS Regions 
       and associates the resulting region chain  
       with the <span>named flow</span>: 
       the flow is ''poured'' 
@@ -1176,24 +1176,28 @@ <h3 id="the-region-fragment-property">The region-fragment property</h3>
 
     <div class="example">
       <pre>
-&lt;style&gt;
-article {
-  flow-into: "article";
-}
-
-#region_1, #region_2 {
-  flow-from: article;
-  <strong>region-fragment: break;</strong> /* or auto */
-  <strong>overflow: visible;</strong> /* or hidden */
-}
+&lt;body is="two-region-example"&gt;
+  &lt;article&gt;...&lt;/article&gt;
+&lt;/body&gt;
 
-&lt;/style&gt;
+&lt;element name="two-region-example" extends="body"&gt;
+  &lt;style&gt;
+    article {
+      flow-into: article-flow;
+    }
+    #region_1, #region_2 {
+      flow-from: article-flow;
+      <strong>region-fragment: break;</strong> /* or auto */
+      <strong>overflow: visible;</strong> /* or hidden */
+    }
+  &lt;/style&gt;
 
-&lt;article&gt;...&lt;/article&gt;
+  &lt;template&gt;
+    &lt;div id="region_1"&gt;&lt;/div&gt;
+    &lt;div id="region_2"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;
 
-&lt;div id="region_1"&gt;&lt;/div&gt;
-&lt;div id="region_2"&gt;&lt;/div&gt;
-        
       </pre>
     </div>
 
@@ -1319,16 +1323,16 @@ <h3 id="the-at-region-style-rule">The @region rule</h3>
     </div>    
 
     <div class="example" id="region-style-example">
-        <p>In the following example, the <span>named flow</span> 'article_flow' flows
+        <p>In the following example, the <span>named flow</span> 'article-flow' flows
         through 'region_1' and 'region_2'.</p>
         <pre>
 &lt;style&gt;
     #div_1 {
-        <strong>flow-into: article_flow;</strong>
+        <strong>flow-into: article-flow;</strong>
     }
 
     #region_1, #region_2 {
-        <strong>flow-from: article_flow;</strong>
+        <strong>flow-from: article-flow;</strong>
     }
 
     /* region style "RSA" */
@@ -2757,7 +2761,7 @@ <h2 id="intro-example-code" class="no-num">Appendix A. Example Code for Introduc
 
 &lt;element name="x-fancy-layout" extends="body"&gt;
   &lt;template&gt;
-    &lt;style scoped&gt;
+    &lt;style&gt;
       #grid {
         width: 80vw;
         height: 60vw;
@@ -2786,15 +2790,15 @@ <h2 id="intro-example-code" class="no-num">Appendix A. Example Code for Introduc
        * Creates the named flow 
        */</span>
       article {
-        <strong>flow-into: article_flow;</strong>
+        <strong>flow-into: article-flow;</strong>
       }
 
       <span class="highlight">/*
        * Associate it with the intended CSS Regions. 
        * This creates a region chain for the named flow.
        */</span>
       #region1, #region2, #region3, #region4 {
-        <strong>flow-from: article_flow;</strong>
+        <strong>flow-from: article-flow;</strong>
       }
     &lt;/style&gt;
     &lt;div id="grid"&gt;