Completed Action items L-8, L-11, L-12, L-13, L-14 and L-16. Updated change log

Author: vhardy

css3-regions/Overview.html

@@ -25,13 +25,13 @@
 
    <h1 id=css-regions-module>CSS regions Module</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 August 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 August 2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-regions-20110812/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2011/ED-css3-regions-20110823/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -187,13 +187,12 @@ <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
      <li><a href="#the-content-property"><span class=secno>3.2. </span>The
       &lsquo;<code class=property>content</code>&rsquo; property</a>
 
-     <li><a href="#the-content-order-property"><span class=secno>3.3.
-      </span>The &lsquo;<code class=property>content-order</code>&rsquo;
+     <li><a href="#the-region-order-property"><span class=secno>3.3.
+      </span>The &lsquo;<code class=property>region-order</code>&rsquo;
       property</a>
 
-     <li><a
-      href="#region-flow-break-properties-break-before-break-after-break-inside"><span
-      class=secno>3.4. </span>Region flow break properties: &lsquo;<code
+     <li><a href="#region-flow-break"><span class=secno>3.4. </span>Region
+      flow break properties: &lsquo;<code
       class=property>break-before</code>&rsquo;, &lsquo;<code
       class=property>break-after</code>&rsquo;, &lsquo;<code
       class=property>break-inside</code>&rsquo;</a>
@@ -438,6 +437,8 @@ <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
   <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions
    concepts</h2>
 
+  <p><em>This section is non-normative.</em>
+
   <h3 id=regions><span class=secno>2.1. </span>Regions</h3>
 
   <p class=index id=region title=region>A region is an element that generates
@@ -467,7 +468,7 @@ <h3 id=named-flow><span class=secno>2.2. </span>Named flow</h3>
   <p>Elements are placed into a named flow with the &rsquo;flow-into'
    property. The elements in a named flow are laid out in the chain of
    regions that are associated with this named flow. The &lsquo;<a
-   href="#content-order"><code class=property>content-order</code></a>&rsquo;
+   href="#region-order"><code class=property>region-order</code></a>&rsquo;
    property defines how <span title=region>regions</span> are organized in to
    a <span title=region-chain>region chain</span>.
 
@@ -532,7 +533,7 @@ <h3 id=regions-flow-breaking-rules><span class=secno>2.3. </span>Regions
 
   <p><span title=region>Regions</span> are organized in to a <span
    title=region-chain>region chain</span> (see the &lsquo;<a
-   href="#content-order"><code class=property>content-order</code></a>&rsquo;
+   href="#region-order"><code class=property>region-order</code></a>&rsquo;
    property).
 
   <p>Each region in turn consumes content from its associated <span
@@ -631,7 +632,7 @@ <h2 id=properties-and-rules><span class=secno>3. </span>Properties and
     <p>The main CSS regions module properties are the ‘flow-into’ and 'content'
     properties. The ‘flow-into’ property may place an element into a specific named
     flow. The ‘content’ property binds a region with a particular named flow. When multiple
-    regions are bound to the same flow, the 'content-order' property determines
+    regions are bound to the same flow, the 'region-order' property determines
     the order in which content flows into the sequence of regions. This
     sequences of regions is called a <dfn>region chain</dfn>.</p>
 
@@ -941,30 +942,26 @@ <h3 id=the-content-property><span class=secno>3.2. </span>The &lsquo;<a
     class=property>normal</code>&rsquo;. <br>
     Otherwise, the element becomes a <span>region</span> and is ordered in a
     <span>region chain</span> according to its document order and &lsquo;<a
-    href="#content-order"><code
-    class=property>content-order</code></a>&rsquo; property. The content from
-    the flow with the <a
+    href="#region-order"><code class=property>region-order</code></a>&rsquo;
+    property. The content from the flow with the <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
-    name will be <a
-    href="#region-flow-break-properties-break-before-break-after-break-inside">broken
-    into segments</a> and visually formatted in the <a
+    name will be <a href="#region-flow-break">broken into segments</a> and
+    visually formatted in the <a
     href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal
     boxes</a> of the regions in the region chain. If there is no flow with
     name &lt;ident&gt;, then the element does not format any content
     visually. <br>
+    Likewise, if the element is part of the flow with name &lt;ident&gt;,
+    then the element does not format any content visually. <br>
     This might be expanded in future versions of the specification to allow
     other types of containers to receive flow content.
   </dl>
 
   <p>When the &lsquo;<a href="#content-from"><code
-   class=property>content</code></a>&rsquo; property is set to &lsquo;<code
-   class=property>none</code>&rsquo;, &lsquo;<code
-   class=property>from-flow</code>&rsquo;, &lt;string&gt;, &lt;uri&gt;,
-   &lt;counter&gt;, &lsquo;<code
-   class=css>attr(&lt;identifier&gt;)</code>&rsquo;, open-quote, close-quote,
-   no-open-quote or no-close-quote, the document children of the element are
-   not visually formatted unless they are directed to a named flow referenced
-   by one or more regions.
+   class=property>content</code></a>&rsquo; property is set to a value other
+   than &lsquo;<code class=property>normal</code>&rsquo;, the element's
+   document children are not visually formatted unless they are directed to a
+   named flow referenced by one or more regions.
 
   <div class=note>
    <p><em>This note is informative.</em></p>
@@ -1073,6 +1070,10 @@ <h3 id=the-content-property><span class=secno>3.2. </span>The &lsquo;<a
 
   <p><span title=region>Regions</span> create a new stacking context.
 
+  <p><span title=region>Regions</span> establish a new <a
+   href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block
+   formatting Context</a>.
+
   <div class=note>
    <p><em>This note is informative.</em></p>
 
@@ -1122,22 +1123,22 @@ <h3 id=the-content-property><span class=secno>3.2. </span>The &lsquo;<a
     </pre>
   </div>
 
-  <h3 id=the-content-order-property><span class=secno>3.3. </span>The
-   &lsquo;<a href="#content-order"><code
-   class=property>content-order</code></a>&rsquo; property</h3>
+  <h3 id=the-region-order-property><span class=secno>3.3. </span>The
+   &lsquo;<a href="#region-order"><code
+   class=property>region-order</code></a>&rsquo; property</h3>
 
   <p>Defines the ordering of the chain of regions into which content flows.
    If region A and region B are in the same chain of regions and the
-   ‘content-order’ of region A is lower than that of region B, then
-   region A will precede region B in that chain: content will flow into
-   region A before it flows into region B.
+   ‘region-order’ of region A is lower than that of region B, then region
+   A will precede region B in that chain: content will flow into region A
+   before it flows into region B.
 
-  <table class=propdef summary="content-order property definition">
+  <table class=propdef summary="region-order property definition">
    <tbody>
     <tr>
      <th>Name:
 
-     <td><dfn id=content-order>content-order</dfn>
+     <td><dfn id=region-order>region-order</dfn>
 
     <tr>
      <th>Value:
@@ -1187,9 +1188,9 @@ <h3 id=the-content-order-property><span class=secno>3.3. </span>The
    &lt;ident&gt;)</code>&rsquo; value for their &lsquo;<a
    href="#content-from"><code class=property>content</code></a>&rsquo;
    property, they are first sorted according to their &lsquo;<a
-   href="#content-order"><code class=property>content-order</code></a>&rsquo;
+   href="#region-order"><code class=property>region-order</code></a>&rsquo;
    value. If multiple regions in have the same &lsquo;<a
-   href="#content-order"><code class=property>content-order</code></a>&rsquo;
+   href="#region-order"><code class=property>region-order</code></a>&rsquo;
    value, they are sorted according to the document order.
 
   <div class="issue stale">
@@ -1200,22 +1201,21 @@ <h3 id=the-content-order-property><span class=secno>3.3. </span>The
    the &lsquo;<code class=css>::grid-cell</code>&rsquo; pseudo elements
    (e.g., row-major sorting or column major sorting of cells).</div>
 
-  <h3
-   id=region-flow-break-properties-break-before-break-after-break-inside><span
-   class=secno>3.4. </span>Region flow break properties: &lsquo;<a
-   href="#break-before"><code class=property>break-before</code></a>&rsquo;,
-   &lsquo;<a href="#break-after"><code
-   class=property>break-after</code></a>&rsquo;, &lsquo;<a
-   href="#break-inside"><code class=property>break-inside</code></a>&rsquo;</h3>
+  <h3 id=region-flow-break><span class=secno>3.4. </span>Region flow break
+   properties: &lsquo;<a href="#break-before"><code
+   class=property>break-before</code></a>&rsquo;, &lsquo;<a
+   href="#break-after"><code class=property>break-after</code></a>&rsquo;,
+   &lsquo;<a href="#break-inside"><code
+   class=property>break-inside</code></a>&rsquo;</h3>
 
   <p>User agents laying out content in multiple regions, the must determine
    where content breaks occur. The problem of breaking content into segments
    fitting in regions is similar to breaking content into pages or columns.
 
   <p>Each break ends layout in the current region and causes remaining pieces
    of content from the named flow to be visually formatted in the following
-   region, in the order defined by the &lsquo;<a href="#content-order"><code
-   class=property>content-order</code></a>&rsquo; computed values. Note that
+   region, in the order defined by the &lsquo;<a href="#region-order"><code
+   class=property>region-order</code></a>&rsquo; computed values. Note that
    there is no region break in the last region associated with a named flow.
 
   <p>The following extends the &lsquo;<a href="#break-before"><code
@@ -1712,6 +1712,18 @@ <h3 id=the-region-overflow-property><span class=secno>3.5. </span>The
    <p class=caption>Different values for the region-overflow property</p>
   </div>
 
+  <div class=note>
+   <p>The &lsquo;<a href="#dom-namedflow-overflow"><code
+    class=property>overflow</code></a>&rsquo; property is honored on a
+    region: if region content overflows, such as the borders of elements on
+    the last line, the &lsquo;<a href="#dom-namedflow-overflow"><code
+    class=property>overflow</code></a>&rsquo; property controls the
+    visibility of the overflowing content. See the &lsquo;<a
+    href="#dom-namedflow-overflow"><code
+    class=property>overflow</code></a>&rsquo; property definition (<a
+    href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>).</p>
+  </div>
+
   <h3 id=the-at-region-style-rule><span class=secno>3.6. </span>The @region
    rule</h3>
 
@@ -2044,8 +2056,8 @@ <h3 id=extension-to-the-element-interface><span class=secno>5.2.
 
    <dd>the region element has no content and is empty. All content from the
     <span title=named-flow>named flow</span> was fitted in regions with a
-    lower &lsquo;<a href="#content-order"><code
-    class=property>content-order</code></a>&rsquo; value.
+    lower &lsquo;<a href="#region-order"><code
+    class=property>region-order</code></a>&rsquo; value.
 
    <dt>&lsquo;<code class=property>undefined</code>&rsquo;
 
@@ -2344,9 +2356,9 @@ <h3 id="changes_from_June_09_2011"><span class=secno>8.1. </span>Changes
   <ul>
    <li>Editorial changes (typos, rephrasings).
 
-   <li>Made &lsquo;<a href="#content-order"><code
-    class=property>content-order</code></a>&rsquo; a &lt;integer&gt; and not
-    a &lt;float&gt; following a working group <a
+   <li>Made &lsquo;<a href="#region-order"><code
+    class=property>region-order</code></a>&rsquo; a &lt;integer&gt; and not a
+    &lt;float&gt; following a working group <a
     href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a>
 
    <li>Added Alex Mogilevsky as an editor
@@ -2505,6 +2517,18 @@ <h3 id="changes_from_June_09_2011"><span class=secno>8.1. </span>Changes
    <li>Removed the section on Integration with other specifications since
     specifications that was superfluous especially since there is no specific
     integration with multi column, grid or template layout.
+
+   <li>Added a note that regions establish a new block formatting context.
+
+   <li>Renamed content-order to region-order.
+
+   <li>Added a note about overflowing content in regions (e.g., for content
+    with borders).
+
+   <li>Added a note that a region cannot layout content it is part of (to
+    avoid creating a circular dependency) in the flow-from description,
+    specifying that if flow-from references the flow an element is part of,
+    then the element does not format anything visually.
   </ul>
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -2647,9 +2671,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>content, <a href="#content-from"
     title=content><strong>3.2.</strong></a>
 
-   <li>content-order, <a href="#content-order"
-    title=content-order><strong>3.3.</strong></a>
-
    <li>current-region, <a href="#current-region"
     title=current-region><strong>2.3.</strong></a>
 
@@ -2673,6 +2694,9 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>region, <a href="#region" title=region>2.1.</a>
 
+   <li>region-order, <a href="#region-order"
+    title=region-order><strong>3.3.</strong></a>
+
    <li><a href="#dom-element-regionoverflow"><code
     class=idl>regionOverflow</code></a>, <a
     href="#dom-element-regionoverflow"
@@ -2773,13 +2797,13 @@ <h2 class=no-num id=property-index>Property index</h2>
      <td>visual
 
     <tr>
-     <th><a class=property href="#content-order">content-order</a>
+     <th><a class=property href="#flow-into">flow-into</a>
 
-     <td>&lt;integer&gt;
+     <td>&lt;ident&gt; | auto
 
-     <td>0
+     <td>auto
 
-     <td>any block container
+     <td>any element
 
      <td>no
 
@@ -2788,13 +2812,13 @@ <h2 class=no-num id=property-index>Property index</h2>
      <td>visual
 
     <tr>
-     <th><a class=property href="#flow-into">flow-into</a>
+     <th><a class=property href="#region-order">region-order</a>
 
-     <td>&lt;ident&gt; | auto
+     <td>&lt;integer&gt;
 
-     <td>auto
+     <td>0
 
-     <td>any element
+     <td>any block container
 
      <td>no