[css-regions] update last two examples to use templates

Author: astearns

css3-regions/Overview.html

@@ -1647,50 +1647,62 @@ <h2 id=multi-column-regions><span class=secno>4. </span>Multi-column
    <p>The following example:
 
    <pre>
-&lt;style&gt;    
-   #multi-col {
-       column-count: 2;
-       flow-from: article;
-       height: 6em;
-       column-gap: 1em; 
-   }
-   
-   #remainder {
-       flow-from: article;
-       height: auto;
-   }
-&lt;/style&gt;
+&lt;body is="x-multicol-region"&gt;
+  &lt;article&gt;...&lt;/article&gt;
+&lt;/body&gt;
 
-&lt;article&gt;...&lt;/article&gt;
-&lt;div id="multicol"&gt;&lt;/div&gt;
-&lt;div id="remainder"&gt;&lt;/div&gt;</pre>
+&lt;element name="x-multicol-region" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;    
+       #multi-col {
+           column-count: 2;
+           flow-from: article;
+           height: 6em;
+           column-gap: 1em; 
+       }
+       
+       #remainder {
+           flow-from: article;
+           height: auto;
+       }
+    &lt;/style&gt;
+    &lt;div id="multicol"&gt;&lt;/div&gt;
+    &lt;div id="remainder"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;</pre>
 
    <p>is equivalent in rendering to, for example:
 
    <pre>
-&lt;style&gt;    
-   #flex {
-       display: flex;
-       flex-pack: justify;
-       height: 6em;
-   }
-   #flex > div {
-       flow-from: article;
-       width: calc(50% - 0.5em);
-   }
-
-   #remainder {
-       flow-from: article;
-       height: auto;
-   }
-&lt;/style&gt;
+&lt;body is="x-single-col-regions"&gt;
+  &lt;article&gt;...&lt;/article&gt;
+&lt;/body&gt;
 
-&lt;article&gt;...&lt;/article&gt;
-&lt;div id="flex"&gt;
-   &lt;div /&gt;
-   &lt;div /&gt;
-&lt;/div&gt;
-&lt;div id="remainder"&gt;&lt;/div&gt;</pre>
+&lt;element name="x-single-col-regions" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;    
+       #flex {
+           display: flex;
+           flex-pack: justify;
+           height: 6em;
+       }
+       #flex > div {
+           flow-from: article;
+           width: calc(50% - 0.5em);
+       }
+
+       #remainder {
+           flow-from: article;
+           height: auto;
+       }
+    &lt;/style&gt;
+    &lt;div id="flex"&gt;
+      &lt;div /&gt;
+      &lt;div /&gt;
+    &lt;/div&gt;
+    &lt;div id="remainder"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;</pre>
   </div>
 
   <p>Overflow of multicol regions is mostly handled according to the same
@@ -2512,53 +2524,59 @@ <h3 id=regions-visual-formatting-examples><span class=secno>7.4.
 
   <div class=example>
    <pre>
-&lt;style&gt;
-article {
-    flow-into: article;
-}
-
-#rA, #rB, #rC {
-    flow-from: article;
-    height: auto;
-
-    margin: 1em 1em 0em 1em;
-    padding: 1em;
-    border: 3px solid #46A4E9;
-}
-
-#rA {
-    width: auto;
-}
-
-#rB {
-    float: left;
-    width: 15em;
-    max-height: 150px;
-}
-
-#rC {
-    float: right;
-    width: 12em;
-}
-
-#main-flow {
-    padding: 0em 1em 0em 1em;
-}
-
-&lt;/style&gt;       
-&lt;body&gt;
+&lt;body is="x-formatting-example"&gt;
     &lt;article&gt;
         &lt;p style="break-after:region;"&gt;I am not a ... &lt;/p&gt;
         &lt;p&gt;...&lt;/p&gt;
     &lt;/article&gt;
-    &lt;div id="rA"&gt;&lt;/div&gt;
-    &lt;div id="rB"&gt;&lt;/div&gt;
-    &lt;div id="rC"&gt;&lt;/div&gt;
 
     &lt;div id="main-flow"&gt;
         &lt;p&gt;Lorem ipsum dolor ...&lt;/p&gt;
     &lt;/div&gt;
-&lt;/body&gt;            
+&lt;/body&gt;
+
+&lt;element name="x-formatting-example" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;
+      article {
+          flow-into: article;
+      }
+
+      #rA, #rB, #rC {
+          flow-from: article;
+          height: auto;
+
+          margin: 1em 1em 0em 1em;
+          padding: 1em;
+          border: 3px solid #46A4E9;
+      }
+
+      #rA {
+          width: auto;
+      }
+
+      #rB {
+          float: left;
+          width: 15em;
+          max-height: 150px;
+      }
+
+      #rC {
+          float: right;
+          width: 12em;
+      }
+
+      #main-flow {
+          padding: 0em 1em 0em 1em;
+      }
+    &lt;/style&gt;
+
+    &lt;div id="rA"&gt;&lt;/div&gt;
+    &lt;div id="rB"&gt;&lt;/div&gt;
+    &lt;div id="rC"&gt;&lt;/div&gt;
+    &lt;content&gt;&lt;/content&gt;
+  &lt;/template&gt;
+&lt;/element&gt;        
         </pre>
   </div>
 

css3-regions/Overview.src.html

@@ -1469,49 +1469,61 @@ <h2 id="multi-column-regions">Multi-column regions</h2>
     <div class="example">
         <p>The following example:</p>
         <pre>
-&lt;style&gt;    
-   #multi-col {
-       column-count: 2;
-       flow-from: article;
-       height: 6em;
-       column-gap: 1em; 
-   }
-   
-   #remainder {
-       flow-from: article;
-       height: auto;
-   }
-&lt;/style&gt;
+&lt;body is="x-multicol-region"&gt;
+  &lt;article&gt;...&lt;/article&gt;
+&lt;/body&gt;
+
+&lt;element name="x-multicol-region" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;    
+       #multi-col {
+           column-count: 2;
+           flow-from: article;
+           height: 6em;
+           column-gap: 1em; 
+       }
+       
+       #remainder {
+           flow-from: article;
+           height: auto;
+       }
+    &lt;/style&gt;
+    &lt;div id="multicol"&gt&lt;/div&gt;
+    &lt;div id="remainder"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;</pre>
 
-&lt;article&gt;...&lt;/article&gt;
-&lt;div id="multicol"&gt&lt;/div&gt;
-&lt;div id="remainder"&gt;&lt;/div&gt;</pre>
         <p>is equivalent in rendering to, for example:</p>
                 <pre>
-&lt;style&gt;    
-   #flex {
-       display: flex;
-       flex-pack: justify;
-       height: 6em;
-   }
-   #flex > div {
-       flow-from: article;
-       width: calc(50% - 0.5em);
-   }
-
-   #remainder {
-       flow-from: article;
-       height: auto;
-   }
-&lt;/style&gt;
+&lt;body is="x-single-col-regions"&gt;
+  &lt;article&gt;...&lt;/article&gt;
+&lt;/body&gt;
 
-&lt;article&gt;...&lt;/article&gt;
-&lt;div id="flex"&gt;
-   &lt;div /&gt;
-   &lt;div /&gt;
-&lt;/div&gt;
-&lt;div id="remainder"&gt;&lt;/div&gt;</pre>
-        
+&lt;element name="x-single-col-regions" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;    
+       #flex {
+           display: flex;
+           flex-pack: justify;
+           height: 6em;
+       }
+       #flex > div {
+           flow-from: article;
+           width: calc(50% - 0.5em);
+       }
+
+       #remainder {
+           flow-from: article;
+           height: auto;
+       }
+    &lt;/style&gt;
+    &lt;div id="flex"&gt;
+      &lt;div /&gt;
+      &lt;div /&gt;
+    &lt;/div&gt;
+    &lt;div id="remainder"&gt;&lt;/div&gt;
+  &lt;/template&gt;
+&lt;/element&gt;</pre>  
 
 
     </div>
@@ -2249,53 +2261,59 @@ <h3 id="regions-visual-formatting-examples">Regions visual formatting example</h
 
     <div class="example">
         <pre>
-&lt;style&gt;
-article {
-    flow-into: article;
-}
-
-#rA, #rB, #rC {
-    flow-from: article;
-    height: auto;
-
-    margin: 1em 1em 0em 1em;
-    padding: 1em;
-    border: 3px solid #46A4E9;
-}
-
-#rA {
-    width: auto;
-}
-
-#rB {
-    float: left;
-    width: 15em;
-    max-height: 150px;
-}
-
-#rC {
-    float: right;
-    width: 12em;
-}
-
-#main-flow {
-    padding: 0em 1em 0em 1em;
-}
-
-&lt;/style&gt;       
-&lt;body&gt;
+&lt;body is="x-formatting-example"&gt;
     &lt;article&gt;
         &lt;p style="break-after:region;"&gt;I am not a ... &lt;/p&gt;
         &lt;p&gt;...&lt;/p&gt;
     &lt;/article&gt;
-    &lt;div id="rA"&gt;&lt;/div&gt;
-    &lt;div id="rB"&gt;&lt;/div&gt;
-    &lt;div id="rC"&gt;&lt;/div&gt;
 
     &lt;div id="main-flow"&gt;
         &lt;p&gt;Lorem ipsum dolor ...&lt;/p&gt;
     &lt;/div&gt;
-&lt;/body&gt;            
+&lt;/body&gt;
+
+&lt;element name="x-formatting-example" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;
+      article {
+          flow-into: article;
+      }
+
+      #rA, #rB, #rC {
+          flow-from: article;
+          height: auto;
+
+          margin: 1em 1em 0em 1em;
+          padding: 1em;
+          border: 3px solid #46A4E9;
+      }
+
+      #rA {
+          width: auto;
+      }
+
+      #rB {
+          float: left;
+          width: 15em;
+          max-height: 150px;
+      }
+
+      #rC {
+          float: right;
+          width: 12em;
+      }
+
+      #main-flow {
+          padding: 0em 1em 0em 1em;
+      }
+    &lt;/style&gt;
+
+    &lt;div id="rA"&gt;&lt;/div&gt;
+    &lt;div id="rB"&gt;&lt;/div&gt;
+    &lt;div id="rC"&gt;&lt;/div&gt;
+    &lt;content&gt;&lt;/content&gt;
+  &lt;/template&gt;
+&lt;/element&gt;        
         </pre>
     </div>