[css-regions] fix example for issue 19965

Author: astearns

css3-regions/Overview.html

@@ -1356,8 +1356,7 @@ <h3 id=the-region-fragment-property><span class=secno>3.4. </span>The
      <tr>
       <td>‘<code class=css>flow-into: "article"</code>’
 
-      <td><code class=html>region-1</code> and <code
-       class=html>region-2</code>
+      <td><code>region-1</code> and <code class=html>region-2</code>
 
       <td>‘<code class=css>region-fragment: auto</code>’<br>
        ‘<code class=css>overflow:visible</code>’
@@ -1503,50 +1502,48 @@ <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region
     class=property>width</code>’ property</a>
   </ol>
 
-  <div class=issue-marker data-bug_id=19965 data-bug_status=NEW> <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=19965">Issue-19965</a>
-
-   <div class=issue-details>
-    <p class=short-desc>Rework region styling example to use color changes
-   </div>
-  </div>
-
   <div class=example id=region-style-example>
    <p>In the following example, the <a href="#named-flow0">named flow</a>
     ‘<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 {
+&lt;body is="x-region-style-example"&gt;
+  &lt;div id="div-1"&gt;
+      &lt;p id="p-1"&gt;...&lt;/p&gt;
+      &lt;p id="p-2"&gt;...&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+
+&lt;element name="x-region-style-example" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;
+      #div-1 {
         <strong>flow-into: article-flow;</strong>
-    }
-    
-    #region-1, #region-2 {
+      }
+
+      #region-1, #region-2 {
         <strong>flow-from: article-flow;</strong>
-    }
+      }
 
-    /* region style "RSA" */
-    <strong>@region #region-1, #region-2</strong> {
+      /* region style "RSA" */
+      <strong>@region #region-1, #region-2</strong> {
         div {...}
         p {...}
-    }
-    
-    /* region style "RSB" */
-    <strong>@region #region-1</strong> {
-        p {...}
-    }
-        
-&lt;/style&gt;
+      }
 
-&lt;div id="div-1"&gt;
-    &lt;p id="p-1"&gt;...&lt;/p&gt;
-    &lt;p id="p-2"&gt;...&lt;/p&gt;
-&lt;/div&gt;
+      /* region style "RSB" */
+      <strong>@region #region-1</strong> {
+        p {
+          margin-right: 5em;
+        }
+      }
+    &lt;/style&gt;
 
-&lt;div id="region-1"&gt;&lt;/div&gt;
-&lt;div id="region-2"&gt;&lt;/div&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;        
 </pre>
 
    <div id="region_styling_illustration"> <img
@@ -1573,26 +1570,26 @@ <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region
     or ‘<code class=css>region-2</code>’.
 
    <p>The first rule set ‘<code class=css>div {...}</code>’ applies to
-    all <code class=html>&lt;div&gt;</code> elements that fit partially or
-    fully into ‘<code class=css>region-1</code>’ or ‘<code
-    class=css>region-2</code>’. <code class=html>div-1</code> is split
+    all <code>&lt;div&gt;</code> elements that fit partially or fully into
+    ‘<code class=css>region-1</code>’ or ‘<code
+    class=css>region-2</code>’. ‘<code class=css>div-1</code>’ is split
     between ‘<code class=css>region-1</code>’ and ‘<code
     class=css>region-2</code>’ and gets the style from this style rule.
 
    <p>The second rule set ‘<code class=css>p {...}</code>’ applies to all
-    <code class=html>&lt;p&gt;</code> elements that fit into ‘<code
+    <code>&lt;p&gt;</code> elements that fit into ‘<code
     class=css>region-1</code>’ or ‘<code class=css>region-2</code>’. In
-    our example, both <code class=html>p-1</code> and <code
-    class=html>p-2</code> are selected.
+    our example, both ‘<code class=css>p-1</code>’and ‘<code
+    class=css>p-2</code>’ are selected.
 
    <p>The region style ‘<code class=css>RSB</code>’ applies to flow
     content that fits in ‘<code class=css>region-1</code>’.
 
-   <p>The first rule set ‘<code class=css>p {...}</code>’ matches <code
-    class=html>p-1</code> and <code class=html>p-2</code> because these
-    paragraphs flow into ‘<code class=css>region-1</code>’. Only the
-    fragment of <code class=html>p-2</code> that flows into <code
-    class=html>region-1</code> is styled with this rule.
+   <p>The first rule set ‘<code class=css>p {...}</code>’ matches
+    ‘<code class=css>p-1</code>’ and ‘<code class=css>p-2</code>’
+    because these paragraphs flow into ‘<code class=css>region-1</code>’.
+    Only the fragment of ‘<code class=css>p-2</code>’ that flows into
+    ‘<code class=css>region-1</code>’ is styled with this rule.
   </div>
 
   <div class=issue-marker data-bug_id=15734 data-bug_status=NEW> <a

css3-regions/Overview.src.html

@@ -1207,7 +1207,7 @@ <h3 id="the-region-fragment-property">The region-fragment property</h3>
             <tr>
                 <td>''flow-into: "article"''</td>
 
-                <td><code class="html">region-1</code> and <code class=
+                <td><code>region-1</code> and <code class=
                 "html">region-2</code></td>
 
                 <td>''region-fragment: auto''<br>
@@ -1311,51 +1311,48 @@ <h3 id="the-at-region-style-rule">The @region rule</h3>
         <li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow' property</a></li>
         <li><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">'box-decoration-break' property</a></li>
         <li><a href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">'width' property</a></li>
-    </ol>
-    
-    <div class="issue-marker" data-bug_id="19965" data-bug_status="NEW">
-        <a href=
-        "https://www.w3.org/Bugs/Public/show_bug.cgi?id=19965">Issue-19965</a>
-
-        <div class="issue-details">
-            <p class="short-desc">Rework region styling example to use color changes</p>
-        </div>
-    </div>    
+    </ol> 
 
     <div class="example" id="region-style-example">
         <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 {
+&lt;body is="x-region-style-example"&gt;
+  &lt;div id="div-1"&gt;
+      &lt;p id="p-1"&gt;...&lt;/p&gt;
+      &lt;p id="p-2"&gt;...&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+
+&lt;element name="x-region-style-example" extends="body"&gt;
+  &lt;template&gt;
+    &lt;style&gt;
+      #div-1 {
         <strong>flow-into: article-flow;</strong>
-    }
-    
-    #region-1, #region-2 {
+      }
+
+      #region-1, #region-2 {
         <strong>flow-from: article-flow;</strong>
-    }
+      }
 
-    /* region style "RSA" */
-    <strong>@region #region-1, #region-2</strong> {
+      /* region style "RSA" */
+      <strong>@region #region-1, #region-2</strong> {
         div {...}
         p {...}
-    }
-    
-    /* region style "RSB" */
-    <strong>@region #region-1</strong> {
-        p {...}
-    }
-        
-&lt;/style&gt;
+      }
 
-&lt;div id="div-1"&gt;
-    &lt;p id="p-1"&gt;...&lt;/p&gt;
-    &lt;p id="p-2"&gt;...&lt;/p&gt;
-&lt;/div&gt;
+      /* region style "RSB" */
+      <strong>@region #region-1</strong> {
+        p {
+          margin-right: 5em;
+        }
+      }
+    &lt;/style&gt;
 
-&lt;div id="region-1"&gt;&lt;/div&gt;
-&lt;div id="region-2"&gt;&lt;/div&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;        
 </pre>
 
         <div id="region_styling_illustration">
@@ -1384,27 +1381,34 @@ <h3 id="the-at-region-style-rule">The @region rule</h3>
             </ul>
         </div>
 
-        <p>The region style ''RSA'' applies to flow content that is laid out in either
-        'region-1' or 'region-2'.</p>
-
-        <p>The first rule set ''div {...}'' applies to all <code class=
-        "html">&lt;div&gt;</code> elements that fit partially or fully into 'region-1' or
-        'region-2'. <code class="html">div-1</code> is split between 'region-1' and
-        'region-2' and gets the style from this style rule.</p>
-
-        <p>The second rule set ''p {...}'' applies to all <code class=
-        "html">&lt;p&gt;</code> elements that fit into 'region-1' or
-        'region-2'. In our example, both <code class="html">p-1</code> 
-        and <code class="html">p-2</code> are selected.</p>
-
-        <p>The region style ''RSB'' applies to flow content that fits in
-        'region-1'.</p>
-
-        <p>The first rule set ''p {...}'' matches <code class="html">p-1</code>
-        and <code class="html">p-2</code> 
-        because these paragraphs flow into 'region-1'. Only the fragment of 
-        <code class="html">p-2</code> that flows into <code class="html">region-1</code>
-        is styled with this rule.</p>
+        <p>The region style ''RSA'' applies 
+          to flow content that is laid out 
+          in either 'region-1' or 'region-2'.</p>
+
+        <p>The first rule set ''div {...}'' applies 
+          to all <code>&lt;div&gt;</code> elements 
+          that fit partially or fully 
+          into 'region-1' or 'region-2'. 
+          'div-1' is split between 'region-1' 
+          and 'region-2' and gets the style 
+          from this style rule.</p>
+
+        <p>The second rule set ''p {...}'' applies 
+          to all <code>&lt;p&gt;</code> elements 
+          that fit into 'region-1' or 'region-2'. 
+          In our example, 
+          both 'p-1'and 'p-2' are selected.</p>
+
+        <p>The region style ''RSB'' applies 
+          to flow content that fits in 'region-1'.</p>
+
+        <p>The first rule set ''p {...}'' 
+          matches 'p-1' and 'p-2' 
+          because these paragraphs 
+          flow into 'region-1'. 
+          Only the fragment of 'p-2' 
+          that flows into 'region-1' 
+          is styled with this rule.</p>
     </div>