Added support for multi-column regions, as per http://www.w3.org/Style/CSS/Tracker/actions/375 and https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191

Author: vhardy

css3-regions/Overview.html

@@ -224,13 +224,13 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 March 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 March 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-regions-20120315/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2012/ED-css3-regions-20120319/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -267,13 +267,12 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 March 2012</h2>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
-    rel=license>Copyright</a> &copy; 2012 <a
-    href="http://www.w3.org/"><acronym
-    title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
-    href="http://www.csail.mit.edu/"><acronym
-    title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
-    href="http://www.ercim.eu/"><acronym
-    title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
+    rel=license>Copyright</a> &copy; 2012 <a href="http://www.w3.org/"><abbr
+    title="World Wide Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
+    href="http://www.csail.mit.edu/"><abbr
+    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
+    href="http://www.ercim.eu/"><abbr
+    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
     <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
@@ -402,39 +401,48 @@ <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
       </span>The @region rule</a>
     </ul>
 
-   <li><a href="#pseudo_elements"><span class=secno>5.
+   <li><a href="#multi-column-regions"><span class=secno>5.
+    </span>Multi-column regions</a>
+    <ul class=toc>
+     <li><a href="#multi-column-regions-and-overflow"><span class=secno>5.1.
+      </span>Multi-column regions and overflow</a>
+
+     <li><a href="#regions"><span class=secno>5.2. </span> </a>
+    </ul>
+
+   <li><a href="#pseudo_elements"><span class=secno>6.
     </span>Pseudo-elements</a>
     <ul class=toc>
-     <li><a href="#processing-model"><span class=secno>5.1. </span>Processing
+     <li><a href="#processing-model"><span class=secno>6.1. </span>Processing
       model</a>
     </ul>
 
-   <li><a href="#cssom_view_and_css_regions"><span class=secno>6.
+   <li><a href="#cssom_view_and_css_regions"><span class=secno>7.
     </span>CSSOM view and CSS regions</a>
     <ul class=toc>
-     <li><a href="#the-namedflow-interface"><span class=secno>6.1. </span>The
+     <li><a href="#the-namedflow-interface"><span class=secno>7.1. </span>The
       NamedFlow interface</a>
 
-     <li><a href="#extension-to-the-element-interface"><span class=secno>6.2.
+     <li><a href="#extension-to-the-element-interface"><span class=secno>7.2.
       </span>Extension to the Element interface</a>
 
-     <li><a href="#region-flow-layout-events"><span class=secno>6.3.
+     <li><a href="#region-flow-layout-events"><span class=secno>7.3.
       </span>Region flow layout events</a>
     </ul>
 
-   <li><a href="#relation-to-other-specifications"><span class=secno>7.
+   <li><a href="#relation-to-other-specifications"><span class=secno>8.
     </span>Relation to other specifications</a>
 
-   <li><a href="#usecases"><span class=secno>8. </span>Use Cases</a>
+   <li><a href="#usecases"><span class=secno>9. </span>Use Cases</a>
 
-   <li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
+   <li><a href="#conformance"><span class=secno>10. </span>Conformance</a>
 
-   <li><a href="#changes"><span class=secno>10. </span>Changes</a>
+   <li><a href="#changes"><span class=secno>11. </span>Changes</a>
     <ul class=toc>
-     <li><a href="#changes_from_June_09_2011"><span class=secno>10.1.
+     <li><a href="#changes_from_June_09_2011"><span class=secno>11.1.
       </span>Changes from November 29<sup>th</sup> 2011 version</a>
 
-     <li><a href="#changes_from_June_09_2011"><span class=secno>10.2.
+     <li><a href="#changes_from_June_09_2011"><span class=secno>11.2.
       </span>Changes from June 09<sup>th</sup> 2011 version</a>
     </ul>
 
@@ -452,7 +460,7 @@ <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
 
    <li class=no-num><a href="#property-index">Property index</a>
 
-   <li><a href="#issue-manager0"><span class=secno>11. </span>Issue
+   <li><a href="#issue-manager0"><span class=secno>12. </span>Issue
     manager</a>
   </ul>
   <!--end-toc-->
@@ -757,7 +765,10 @@ <h3 id=regions><span class=secno>2.1. </span>Regions</h3>
    a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
    container box</a> and has an associated <a href="#named-flow0"><em>named
    flow</em></a> (see the &lsquo;<a href="#flow-from"><code
-   class=property>flow-from</code></a>&rsquo; property).
+   class=property>flow-from</code></a>&rsquo; property). The <a
+   href="http://dev.w3.org/csswg/css3-multicol/#column-box">column boxes</a>
+   of multi-column elements which have an associated <a
+   href="#named-flow0"><em>named flow</em></a> are also regions.
 
   <h3 id=named-flow><span class=secno>2.2. </span>Named flow</h3>
 
@@ -1768,7 +1779,76 @@ <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
    not receive the region styling specified for region &lsquo;<code
    class=property>A</code>&rsquo;.</div>
 
-  <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
+  <h2 id=multi-column-regions><span class=secno>5. </span>Multi-column
+   regions</h2>
+
+  <p>Column boxes of a <a
+   href="http://dev.w3.org/csswg/css3-multicol/#multi-column-element">multi-column</a>
+   element that has an assigned <a href="#named-flow0"><em>named
+   flow</em></a> are regions. This means that a multi-column element can be
+   used as a convenient short-hand to create multiple regions into which
+   content flows. For example:
+
+  <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;div id="article"&gt;...&lt;div&gt;
+&lt;div id="multicol"&gt&lt;/div&gt;
+&lt;div id="remainder"&gt;&lt;/div&gt;</pre>
+
+   <p>is equivalent but simpler than, for example:</p>
+
+   <pre>
+&lt;style&gt;    
+   #flex {
+       display: flex;
+       flex-pack: justify;
+   }
+   #flex > div {
+       flow-from: article;
+       width: calc(50% - 0.5em);
+   }
+
+   #remainder {
+       flow-from: article;
+       height: auto;
+   }
+&lt;/style&gt;
+
+&lt;div id="article"&gt;...&lt;div&gt;
+&lt;div id="flex"&gt;
+   &lt;div /&gt;
+   &lt;div /&gt;
+&lt;/div&gt;
+&lt;div id="remainder"&gt;&lt;/div&gt;</pre>
+  </div>
+
+  <h3 id=multi-column-regions-and-overflow><span class=secno>5.1.
+   </span>Multi-column regions and overflow</h3>
+
+  <p class=note>Overflow of column boxes that are regions is handled
+   according to the same rules as other regions. If the content does not fit
+   in the region, then the rest of the content flow into regions that follow
+   in the region chain.
+
+  <h3 id=regions><span class=secno>5.2. </span></h3>
+
+  <h2 id="pseudo_elements"><span class=secno>6. </span>Pseudo-elements</h2>
 
   <div class=issue-marker data-bug_id=15188 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Bug-15188</a>
@@ -1790,7 +1870,7 @@ <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
    rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>) let content authors mark
    the beginning and end of a region with such markers.
 
-  <h3 id=processing-model><span class=secno>5.1. </span>Processing model</h3>
+  <h3 id=processing-model><span class=secno>6.1. </span>Processing model</h3>
 
   <p>The &lsquo;<code class=css>::before</code>&rsquo; content is laid out in
    the region prior to any other content coming from the flow. Note that it
@@ -1817,7 +1897,7 @@ <h3 id=processing-model><span class=secno>5.1. </span>Processing model</h3>
    and can accommodate for the &lsquo;<code class=css>::after</code>&rsquo;
    box.
 
-  <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
+  <h2 id="cssom_view_and_css_regions"><span class=secno>7. </span>CSSOM view
    and CSS regions</h2>
 
   <div class=issue-marker data-bug_id=15679 data-bug_status=NEW> <a
@@ -1854,7 +1934,7 @@ <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
     regions it is part of.</p>
   </div>
 
-  <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
+  <h3 id=the-namedflow-interface><span class=secno>7.1. </span>The NamedFlow
    interface</h3>
 
   <div class=issue-marker data-bug_id=14948 data-bug_status=NEW> <a
@@ -1978,7 +2058,7 @@ <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
    interface, authors can easily check if all content has been fitted into
    existing regions. If it has, the overflow property would be false.
 
-  <h3 id=extension-to-the-element-interface><span class=secno>6.2.
+  <h3 id=extension-to-the-element-interface><span class=secno>7.2.
    </span>Extension to the Element interface</h3>
 
   <p>When an region is an actual <a
@@ -2069,7 +2149,7 @@ <h3 id=extension-to-the-element-interface><span class=secno>6.2.
    extension is only available to regions that are document elements and not
    to regions that are pseudo-elements.</div>
 
-  <h3 id=region-flow-layout-events><span class=secno>6.3. </span>Region flow
+  <h3 id=region-flow-layout-events><span class=secno>7.3. </span>Region flow
    layout events</h3>
 
   <div class=issue-marker data-bug_id=15009 data-bug_status=NEW> <a
@@ -2134,7 +2214,7 @@ <h3 id=region-flow-layout-events><span class=secno>6.3. </span>Region flow
       </ul>
   </table>
 
-  <h2 id=relation-to-other-specifications><span class=secno>7.
+  <h2 id=relation-to-other-specifications><span class=secno>8.
    </span>Relation to other specifications</h2>
 
   <p>This specification is related to other specifications as described in
@@ -2158,17 +2238,17 @@ <h2 id=relation-to-other-specifications><span class=secno>7.
     aligning content flowing in separate regions.
   </ol>
 
-  <h2 id=usecases><span class=secno>8. </span>Use Cases</h2>
+  <h2 id=usecases><span class=secno>9. </span>Use Cases</h2>
 
   <p>Use cases are described on <a
    href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this
    page</a>.
 
-  <h2 id=conformance><span class=secno>9. </span>Conformance</h2>
+  <h2 id=conformance><span class=secno>10. </span>Conformance</h2>
 
-  <h2 id=changes><span class=secno>10. </span>Changes</h2>
+  <h2 id=changes><span class=secno>11. </span>Changes</h2>
 
-  <h3 id="changes_from_June_09_2011"><span class=secno>10.1. </span>Changes
+  <h3 id="changes_from_June_09_2011"><span class=secno>11.1. </span>Changes
    from <a
    href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">November
    29<sup>th</sup> 2011</a> version</h3>
@@ -2242,9 +2322,14 @@ <h3 id="changes_from_June_09_2011"><span class=secno>10.1. </span>Changes
    <li>Fixed Web IDL issues as reported in <a
     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15931">Issue
     15931</a>
+
+   <li>Added text to explain support for multi-column elements as required by
+    <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Issue
+    15191</a> and <a
+    href="http://www.w3.org/Style/CSS/Tracker/actions/375">Action 375</a>.
   </ul>
 
-  <h3 id="changes_from_June_09_2011"><span class=secno>10.2. </span>Changes
+  <h3 id="changes_from_June_09_2011"><span class=secno>11.2. </span>Changes
    from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June
    09<sup>th</sup> 2011</a> version</h3>
 
@@ -2737,7 +2822,7 @@ <h2 class=no-num id=index>Index</h2>
     title=break-inside><strong>4.3.</strong></a>
 
    <li>contentNodes, <a href="#dom-namedflow-contentnodes"
-    title=contentNodes><strong>6.1.</strong></a>
+    title=contentNodes><strong>7.1.</strong></a>
 
    <li>current-region, <a href="#current-region"
     title=current-region><strong>2.3.</strong></a>
@@ -2749,45 +2834,45 @@ <h2 class=no-num id=index>Index</h2>
     title=flow-into><strong>4.1.</strong></a>
 
    <li>getRegionFlowRanges, <a href="#dom-element-getregionflowranges"
-    title=getRegionFlowRanges><strong>6.2.</strong></a>
+    title=getRegionFlowRanges><strong>7.2.</strong></a>
 
    <li>getRegionsByContentNode(), <a
     href="#dom-namedflow-getregionsbycontentnodes"
-    title="getRegionsByContentNode()"><strong>6.1.</strong></a>
+    title="getRegionsByContentNode()"><strong>7.1.</strong></a>
 
    <li><a href="#dom-namedflow-collection-item"><code
     class=idl>item(index)</code></a>, <a
     href="#dom-namedflow-collection-item"
-    title="item(index)"><strong>6.1.</strong></a>
+    title="item(index)"><strong>7.1.</strong></a>
 
    <li><a href="#dom-namedflow-collection-length"><code
     class=idl>length</code></a>, <a href="#dom-namedflow-collection-length"
-    title=length><strong>6.1.</strong></a>
+    title=length><strong>7.1.</strong></a>
 
    <li><a href="#dom-namedflow-name"><code class=idl>name</code></a>, <a
-    href="#dom-namedflow-name" title=name><strong>6.1.</strong></a>
+    href="#dom-namedflow-name" title=name><strong>7.1.</strong></a>
 
    <li><a href="#dom-namedflow"><code class=idl>NamedFlow</code></a>, <a
-    href="#dom-namedflow" title=NamedFlow><strong>6.1.</strong></a>
+    href="#dom-namedflow" title=NamedFlow><strong>7.1.</strong></a>
 
    <li>named flow, <a href="#named-flow0"
     title="named flow"><strong>2.2.</strong></a>
 
    <li><a href="#dom-namedflow-collection"><code
     class=idl>NamedFlowCollection</code></a>, <a
     href="#dom-namedflow-collection"
-    title=NamedFlowCollection><strong>6.1.</strong></a>
+    title=NamedFlowCollection><strong>7.1.</strong></a>
 
    <li><a href="#dom-namedflow-overflow"><code class=idl>overflow</code></a>,
     <a href="#dom-namedflow-overflow"
-    title=overflow><strong>6.1.</strong></a>
+    title=overflow><strong>7.1.</strong></a>
 
    <li>region, <a href="#region" title=region>2.1.</a>
 
    <li><a href="#dom-element-regionoverflow"><code
     class=idl>regionOverflow</code></a>, <a
     href="#dom-element-regionoverflow"
-    title=regionOverflow><strong>6.2.</strong></a>
+    title=regionOverflow><strong>7.2.</strong></a>
 
    <li>region-overflow, <a href="#region-overflow"
     title=region-overflow><strong>4.4.</strong></a>
@@ -2814,7 +2899,7 @@ <h2 class=no-num id=property-index>Property index</h2>
   <script src=BugzillaTrackerCSSRegions.js type="text/javascript"></script>
 
   <div id=issue-manager>
-   <h2 id=issue-manager0><span class=secno>11. </span>Issue manager</h2>
+   <h2 id=issue-manager0><span class=secno>12. </span>Issue manager</h2>
 
    <form action="#"></form>
    <label> <input checked name=issue-filter type=radio value=all> All issues