Addressing bug 15131

Author: vhardy

css3-regions/Overview.html

@@ -533,20 +533,54 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
 
 </pre>
 
-  <p>And the following snippet shows an example of elements that will be used
-   as regions.
+  <p>And the following snippet shows an example using grid cells to define
+   the region areas:
 
   <pre>
-&lt;div id="region1"&gt;&lt;/div&gt;        
-&lt;div id="region2"&gt;&lt;/div&gt;        
-&lt;div id="region3"&gt;&lt;/div&gt;        
-&lt;div id="region4"&gt;&lt;/div&gt;        
+&lt;style&gt;
+    #page {
+      width: 800px;
+      height: 600px;
+      grid-template: "aaa.e"
+                     "....e"
+                     "bbb.e"
+                     "....e"
+                     "c.d.e";
+      grid-rows: 52% 4% 20% 4% 20%;
+      grid-columns: 30% 5% 30% 5% 30%;
+    }
+    #regionA { grid-cell: a; }
+    #region1 { grid-cell: b; }
+    #region2 { grid-cell: c; }
+    #region3 { grid-cell: d; }
+    #region4 { grid-cell: e; }
+&lt;/style&gt;
+
+&lt;div id="page"&gt;
+    &lt;div id="region1"&gt;&lt;/div&gt;        
+    &lt;div id="region2"&gt;&lt;/div&gt;        
+    &lt;div id="region3"&gt;&lt;/div&gt;        
+    &lt;div id="region4"&gt;&lt;/div&gt;
+&lt;/div&gt;
     </pre>
 
-  <p>CSS layout facilities can position and size regions as needed. However,
-   there is no existing mechanism to associate the content with the regions
-   so that content flows as intended. Figure 2 shows an example of the
-   intended visual rendering of the content.
+  <p>Any of the CSS layout facilities can be used to create, position and
+   size regions as needed.
+
+  <div class=note>
+   <p>Using a grid layout (see <a href="#CSS3-GRID-LAYOUT"
+    rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> is just
+    an example. The example could use a flexible box layout as well, see <a
+    href="#CSS3-FLEXBOX"
+    rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>.</p>
+
+   <p>The CSS regions specification does not define a layout mechanism and is
+    meant to integrate with existing and future CSS layout facilities.</p>
+  </div>
+
+  <p>However, there is no existing mechanism to associate the content with
+   the regions so that content flows as intended. Figure 2 shows an example
+   of the intended visual rendering of the content.
 
   <div class=figure> <img
    alt="Sample rendering showing a single thread of text flowing through a chain of regions"
@@ -555,8 +589,18 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
   </div>
 
   <p>The CSS regions module is independent of the layout of regions and the
-   mechanism used to create them. However, for simplicity, our example uses
-   elements as regions as shown in the previous code snippet.
+   mechanism used to create them. For simplicity, our example uses elements
+   as regions as shown in the previous code snippet.
+
+  <div class=note>
+   <p>While the example uses elements as regions, it is important to note
+    that this is not required for regions. Regions can be pseudo-elements,
+    such as &lsquo;<code class=css>::before</code>&rsquo; and &lsquo;<code
+    class=css>::after</code>&rsquo;. The only requirement for an element or
+    pseudo-element to become a region is that it needs to be subject to CSS
+    styling to receive the &lsquo;<a href="#flow-from"><code
+    class=property>flow-from</code></a>&rsquo; property.</p>
+  </div>
 
   <p>The following code example illustrates how the content of the
    <code>article</code> element becomes a flow and how the areas &lsquo;<code
@@ -641,6 +685,16 @@ <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
         padding: 0px;
     }
 <strong>}</strong>
+
+
+/*
+ * Style that would apply to region1's normal content but
+ * will not apply to its named flow content.
+ */
+#region1 p {
+    color: red;
+}
+
 &lt;/style&gt;
 </pre>
   </div>
@@ -658,6 +712,15 @@ <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
    <p class=caption>Different rendering with a different region styling</p>
   </div>
 
+  <p>Finally, note how the &lsquo;<code class=property>red</code>&rsquo;
+   color specified for <code>&lt;p&gt;</code> elements under
+   <code>#region1</code> does not apply to content that flows into the
+   region. This specified style does not apply to the named flow content
+   because the <code>&lt;p&gt;</code> elements in the &lsquo;<code
+   class=property>article</code>&rsquo; named flow are not descendants of the
+   <code>#region1</code> element and, consequently, the <code>"#region1
+   p"</code> selector does not apply to these elements.
+
   <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions
    concepts</h2>
 
@@ -2161,6 +2224,9 @@ <h3 id="changes_from_June_09_2011"><span class=secno>10.1. </span>Changes
 
    <li>Modified wording about containing block resolution for absolutely
     positioned elements in a named flow.
+
+   <li>Modified initial examples as per <a
+    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a>
   </ul>
 
   <h3 id="changes_from_June_09_2011"><span class=secno>10.2. </span>Changes

css3-regions/Overview.src.html

@@ -392,16 +392,47 @@ <h3 id="named-flows-and-regions">Named flows and regions</h3>
 
 </pre>
 
-    <p>And the following snippet shows an example of elements that will be used
-        as regions.</p>
+    <p>And the following snippet shows an example using grid cells to 
+        define the region areas:</p>
     <pre>
-&lt;div id="region1"&gt;&lt;/div&gt;        
-&lt;div id="region2"&gt;&lt;/div&gt;        
-&lt;div id="region3"&gt;&lt;/div&gt;        
-&lt;div id="region4"&gt;&lt;/div&gt;        
+&lt;style&gt;
+    #page {
+      width: 800px;
+      height: 600px;
+      grid-template: "aaa.e"
+                     "....e"
+                     "bbb.e"
+                     "....e"
+                     "c.d.e";
+      grid-rows: 52% 4% 20% 4% 20%;
+      grid-columns: 30% 5% 30% 5% 30%;
+    }
+    #regionA { grid-cell: a; }
+    #region1 { grid-cell: b; }
+    #region2 { grid-cell: c; }
+    #region3 { grid-cell: d; }
+    #region4 { grid-cell: e; }
+&lt;/style&gt;
+
+&lt;div id="page"&gt;
+    &lt;div id="region1"&gt;&lt;/div&gt;        
+    &lt;div id="region2"&gt;&lt;/div&gt;        
+    &lt;div id="region3"&gt;&lt;/div&gt;        
+    &lt;div id="region4"&gt;&lt;/div&gt;
+&lt;/div&gt;
     </pre>
 
-    <p>CSS layout facilities can position and size regions as needed. However,
+    <p>Any of the CSS layout facilities can be used to create, position and size regions 
+        as needed.</p>
+    
+    <div class="note">
+        <p>Using a grid layout (see [[CSS3-GRID-LAYOUT]] is just an example.
+            The example could use a flexible box layout as well, see [[CSS3-FLEXBOX]].</p>
+        <p>The CSS regions specification does not define a layout mechanism and is meant
+        to integrate with existing and future CSS layout facilities.</p>
+    </div>
+    
+    <p>However,
     there is no existing mechanism to associate the content with the regions so
     that content flows as intended. Figure 2 shows an example of the intended
     visual rendering of the content.</p>
@@ -414,9 +445,18 @@ <h3 id="named-flows-and-regions">Named flows and regions</h3>
     </div>
 
     <p>The CSS regions module is independent of the layout of regions and
-    the mechanism used to create them. However, for simplicity, our example
+    the mechanism used to create them. For simplicity, our example
     uses elements as regions as shown in the previous code snippet.</p>
 
+    
+    <div class="note">
+        <p>While the example uses elements as regions, it is important to note that
+            this is not required for regions. Regions can be pseudo-elements,
+            such as '::before' and '::after'. The only requirement for an element
+            or pseudo-element to become a region is that it needs to be subject to 
+            CSS styling to receive the 'flow-from' property.</p>
+    </div>
+    
     <p>The following code example illustrates how the content of the <code>article</code>
         element becomes a flow and how the areas 'region1', 'region2', 'region3'
         and 'region4' become regions that consume the 'article_flow' content.</p>
@@ -491,6 +531,16 @@ <h3 id="region-styling">Regions styling</h3>
         padding: 0px;
     }
 <strong>}</strong>
+
+
+/*
+ * Style that would apply to region1's normal content but
+ * will not apply to its named flow content.
+ */
+#region1 p {
+    color: red;
+}
+
 &lt;/style&gt;
 </pre>
     </div>
@@ -508,6 +558,14 @@ <h3 id="region-styling">Regions styling</h3>
         <p class="caption">Different rendering with a different region
         styling</p>
     </div>
+    
+    <p>Finally, note how the 'red' color specified for <code>&lt;p&gt;</code>
+        elements under <code>#region1</code> does not apply to content that 
+        flows into the region. This specified style does not apply to 
+        the named flow content because the <code>&lt;p&gt;</code> elements
+        in the 'article' named flow are not descendants of the <code>#region1</code>
+        element and, consequently, the <code>"#region1 p"</code> selector does
+        not apply to these elements.</p>
 
     <h2 id="css-regions-concepts">CSS regions concepts</h2>
 
@@ -1846,6 +1904,7 @@ <h3 id="changes_from_June_09_2011">Changes from <a href="http://www.w3.org/TR/20
             per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug 15828</a>.</li>
         <li>Modified wording about containing block resolution for absolutely positioned elements in a 
             named flow.</li>
+        <li>Modified initial examples as per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a></li>
     </ul>