W3C home > Mailing lists > Public > public-css-commits@w3.org > November 2011

csswg/css3-regions Overview.html,1.28,1.29 Overview.src.html,1.31,1.32 style-toggle.js,1.5,1.6

From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 22 Nov 2011 17:09:23 +0000
To: public-css-commits@w3.org
Message-Id: <E1RStqV-00037n-Lt@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv11995

Modified Files:
	Overview.html Overview.src.html style-toggle.js 
Log Message:
Added resolutions from last F2F meeting

Index: style-toggle.js
===================================================================
RCS file: /sources/public/csswg/css3-regions/style-toggle.js,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- style-toggle.js	29 Oct 2011 01:02:28 -0000	1.5
+++ style-toggle.js	22 Nov 2011 17:09:21 -0000	1.6
@@ -20,7 +20,7 @@
     window.onload = function() {
         var st = document.getElementById('st');
         var divHead = document.getElementById('div-head');
-        var defaultText = additionalStyleText;
+        var defaultText = defaultStyleText;
         
         toggle = document.createElement('a');
 

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.28
retrieving revision 1.29
diff -u -d -r1.28 -r1.29
--- Overview.html	29 Oct 2011 01:02:28 -0000	1.28
+++ Overview.html	22 Nov 2011 17:09:21 -0000	1.29
@@ -9,8 +9,8 @@
   <link href=default.css rel=stylesheet type="text/css">
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   type="text/css">
-  <link disabled href=alternate-spec-style.css id=st
-  rel="alternate stylesheet" title="additional spec styles" type="text/css">
+  <link href=alternate-spec-style.css id=st rel=stylesheet
+  title="additional spec styles" type="text/css">
   <script src=style-toggle.js type="text/javascript"></script>
 
   <style type="text/css">
@@ -61,25 +61,27 @@
    <p><a href="http://www.w3.org/"><img alt=W3C height=48
     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--></p>
 
-   <h1 id=css-regions-module>CSS Regions Module</h1>
+   <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 October
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 November
     2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-regions-20111029/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2011/ED-css3-regions-20111122/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
     <dd><a
-     href="http://www.w3.org/TR/css3-regions">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a>
 
     <dt>Previous version:
 
-    <dd>none
+    <dd><a
+     href="http://www.w3.org/TR/2011/WD-css3-regions-20111124/">http://www.w3.org/TR/2011/WD-css3-regions-20111124/</a>
+     
 
     <dt>Editors:
 
@@ -160,6 +162,12 @@
    W3C Patent Policy</a>.</p>
   <!--end-status-->
 
+  <p>This draft is related to the drafts about Multi-column Layout <a
+   href="#CSSMULTICOL">[CSSMULTICOL]</a>, Grid Layout <a
+   href="#CSS3GRID">[CSS3GRID]</a>, Flexible Box Layout <a
+   href="#CSS3FLEXBOX">[CSS3FLEXBOX]</a>, and Template Layout <a
+   href="#CSSTEMPLATELAYOUT">[CSSTEMPLATELAYOUT]</a>.
+
   <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
   <!--begin-toc-->
 
@@ -192,12 +200,6 @@
     <ul class=toc>
      <li><a href="#the-flow-into-property"><span class=secno>4.1. </span>The
       &lsquo;<code class=property>flow-into</code>&rsquo; property</a>
-      <ul class=toc>
-       <li><a href="#flow-into-and-ltiframegt-ltobjectgt-ltem"><span
-        class=secno>4.1.1. </span>&lsquo;<code
-        class=property>flow-into</code>&rsquo; and &lt;iframe&gt;,
-        &lt;object&gt;, &lt;embed&gt;</a>
-      </ul>
 
      <li><a href="#the-flow-from-property"><span class=secno>4.2. </span>The
       &lsquo;<code class=property>flow-from</code>&rsquo; property</a>
@@ -245,11 +247,13 @@
    <li><a href="#relation-to-other-specifications"><span class=secno>7.
     </span>Relation to other specifications</a>
 
-   <li><a href="#conformance"><span class=secno>8. </span>Conformance</a>
+   <li><a href="#usecases"><span class=secno>8. </span>Use Cases</a>
 
-   <li><a href="#changes"><span class=secno>9. </span>Changes</a>
+   <li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
+
+   <li><a href="#changes"><span class=secno>10. </span>Changes</a>
     <ul class=toc>
-     <li><a href="#changes_from_June_09_2011"><span class=secno>9.1.
+     <li><a href="#changes_from_June_09_2011"><span class=secno>10.1.
       </span>Changes from June 09<sup>th</sup> 2011 version</a>
     </ul>
 
@@ -334,6 +338,16 @@
         
 </pre>
 
+  <p>And the following snippet shows an example of elements that will be used
+   as regions.
+
+  <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;        
+    </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
@@ -345,14 +359,17 @@
    <p class=caption>Sample rendering for desired layout</p>
   </div>
 
-  <p>Since the CSS regions module is independent of the layout of regions and
-   the mechanism used to create them, the following assumes there is a CSS
-   selector for the regions and, for the purpose of the example, the
-   selectors for regions 1, 2, 3 and 4 show as &lsquo;<code
-   class=css>&lt;region1_sel&gt;</code>&rsquo;, &lsquo;<code
-   class=css>&lt;region2_sel&gt;</code>&rsquo;, &lsquo;<code
-   class=css>&lt;region3_sel&gt;</code>&rsquo; and &lsquo;<code
-   class=css>&lt;region4_sel&gt;</code>&rsquo; respectively.
+  <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.
+
+  <p>The following code example illustrates how the content of the
+   <code>article</code> element becomes a flow and how the areas &lsquo;<code
+   class=css>region1</code>&rsquo;, &lsquo;<code
+   class=css>region2</code>&rsquo;, &lsquo;<code
+   class=css>region3</code>&rsquo; and &lsquo;<code
+   class=css>region4</code>&rsquo; become regions that consume the
+   &lsquo;<code class=css>article_flow</code>&rsquo; content.
 
   <div class=example>
    <pre>
@@ -362,8 +379,7 @@
     <strong>flow-into: article_flow;</strong>
 }
 
-&lt;region1_sel&gt;, &lt;region2_sel&gt;, 
-&lt;region3_sel&gt;, &lt;region4_sel&gt; {
+#region1, #region2, #region3, #region4 {
     <strong>flow-from: article_flow;</strong>
 }
 &lt;/style&gt;
@@ -377,19 +393,18 @@
    class=css>article_flow</code>&rsquo; named flow. Setting the elements'
    &lsquo;<a href="#flow-from"><code
    class=property>flow-from</code></a>&rsquo; property to &lsquo;<code
-   class=css>article_flow</code>&rsquo; makes them regions and associates
-   these regions with the named flow: the flow is &lsquo;<code
+   class=css>article_flow</code>&rsquo; on elements makes them regions and
+   associates these regions with the named flow: the flow is &lsquo;<code
    class=css>poured</code>&rsquo; into the desired regions.
 
   <h3 id=region-styling><span class=secno>1.2. </span>Regions styling</h3>
 
   <p>Region styling allows content to be styled depending on the region it
-   flows into. It is a form of context-based styling, similar to <a
-   href="#CSSMEDIAQUERIES">Media Queries</a> <a href="#MEDIAQ"
-   rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> which enable or disable
-   selectors depending on the rendering context. With region styling,
-   additional selectors may apply depending on the region into which content
-   flows.
+   flows into. It is a form of context-based styling, similar to Media
+   Queries <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>
+   which enable or disable selectors depending on the rendering context. With
+   region styling, additional selectors may apply depending on the region
+   into which content flows.
 
   <p>In our example, the designer wants to make text flowing into region 1
    larger, bold and dark blue. In addition, <code
@@ -418,7 +433,7 @@
  * Additional styling to apply to content when it falls into 
  * region1
  */
-<strong>@region &lt;region1_sel&gt; {</strong>
+<strong>@region #region1 {</strong>
     #article {
         font-weight: bold;
         color: #0C3D5F;
@@ -457,8 +472,8 @@
 
   <p class=index id=region title=region>A region is an element that generates
    a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
-   container box</a> and has an associated <em>named flow</em> (see the
-   &lsquo;<a href="#flow-from"><code
+   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).
 
   <div class="issue moved">
@@ -472,7 +487,7 @@
 
   <h3 id=named-flow><span class=secno>2.2. </span>Named flow</h3>
 
-  <p>A <def name=named-flow>named flow</def> is the ordered sequence of
+  <p>A <dfn id=named-flow0>named flow</dfn> is the ordered sequence of
    elements associated with a flow with a given identifier. Elements in a
    named flow are ordered according to the document order.
 
@@ -500,8 +515,8 @@
   <p><span title=region>Regions</span> are organized in to a <span
    title=region-chain>region chain</span>.
 
-  <p>Each region in turn consumes content from its associated <span
-   title=named-flow>named flow</span>. The named flow content is positioned
+  <p>Each region in turn consumes content from its associated <a
+   href="#named-flow0">named flow</a>. The named flow content is positioned
    in the <dfn id=current-region title=current-region>current region</dfn>
    until a natural or forced region break occurs, at which point the <a
    href="#current-region" title=current-region>current region</a> becomes the
@@ -657,46 +672,6 @@
     unintended results.</p>
   </div>
 
-  <h4 id=flow-into-and-ltiframegt-ltobjectgt-ltem><span class=secno>4.1.1.
-   </span>&lsquo;<a href="#flow-into"><code
-   class=property>flow-into</code></a>&rsquo; and &lt;iframe&gt;,
-   &lt;object&gt;, &lt;embed&gt;</h4>
-
-  <div class=issue-marker><a
-   href="http://wiki.csswg.org/spec/css3-regions?&#issue-19special-behavior-of-iframe-flow">Issue-19</a></div>
-
-  <p>Optionally, implementations can support the &lsquo;<a
-   href="#flow-into"><code class=property>flow-into</code></a>&rsquo;
-   property on the &lt;iframe&gt;, &lt;object&gt; and &lt;embed&gt; elements.
-
-  <p> If the ‘flow-into’ property is specified on an <code
-   class=html>&lt;iframe&gt;</code>, an <code
-   class=html>&lt;object&gt;</code> or a <code
-   class=html>&lt;embed&gt;</code> element, the ‘display’ property is
-   computed to ‘none’ and the referenced document within the element is
-   used as the named flow. In the case of the <code
-   class=html>&lt;object&gt;</code> element if fallback occurs and the
-   fallback element has a referenced document then that document is used as
-   the named flow, otherwise the fallback element itself is added to the
-   named flow.
-
-  <p> Any properties set on the <code class=html>&lt;iframe&gt;</code>/<code
-   class=html>&lt;object&gt;</code>/<code class=html>&lt;embed&gt;</code>
-   elements (including margin, border, padding, background) have no effect.
-   This redirection of content does not change representation of the elements
-   in the document tree, just as for any other source of named flow; in this
-   case the <code class=html>&lt;iframe&gt;</code> still provides security
-   checks for script in content (and sandbox if required). Events and CSS
-   cascading work the same way as in a documents hosted in regular <code
-   class=html>&lt;iframe&gt;</code>s.
-
-  <p> Region styling applies to content coming from <code
-   class=html>&lt;iframe&gt;</code>/<code
-   class=html>&lt;object&gt;</code>/<code class=html>&lt;embed&gt;</code>
-   sources the same way it applies to other flow content.
-
-  <p><br>
-
   <p>The &lsquo;<a href="#flow-into"><code
    class=property>flow-into</code></a>&rsquo; property does not apply to the
    <code class=css>::first-line</code> and <code
@@ -712,9 +687,6 @@
    href="#flow-from"><code class=property>flow-from</code></a>&rsquo;
    property</h3>
 
-  <div class=issue-marker><a
-   href="http://wiki.csswg.org/spec/css3-regions?&#issue-18interplay-of-flow-from-and-content">Issue-18</a></div>
-
   <p>The &lsquo;<a href="#flow-from"><code
    class=property>flow-from</code></a>&rsquo; property makes an element a
    region and associates it with a named flow.
@@ -776,9 +748,14 @@
 
    <dt><strong>&lt;ident&gt;</strong>
 
-   <dd> The element becomes a <span>region</span> and is ordered in a
-    <span>region chain</span> according to its document order. The content
-    from the flow with the <a
+   <dd> If the &lsquo;<code class=property>content</code>&rsquo; property
+    computes to something else than &lsquo;<code
+    class=property>normal</code>&rsquo;, the element does not become a
+    region. If the &lsquo;<code class=property>content</code>&rsquo; property
+    computes to &lsquo;<code class=property>normal</code>&rsquo;, then the
+    element becomes a <span>region</span> and is ordered in a <span>region
+    chain</span> according to its document order. 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">broken into segments</a> and
     visually formatted in the <a
@@ -799,7 +776,7 @@
     class=property>flow-from</code></a>&rsquo; property is set to a valid
     &lt;ident&gt; value, even if there is no content contributing to the
     referenced flow. For example:</p>
-   <code></code>
+
    <pre>
 &lt;style&gt;
   .article{
@@ -821,89 +798,8 @@
    empty named flow and, consequently, its children are not formatted
    visually.</div>
 
-  <div class="issue resolved">
-   <p><a
-    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">Third
-    resolution on Regions at the Seattle Face to Face meeting, July 2011</a>.
-    Superseded by resolution during
-
-   <p><strong>content: flow-from(&lt;flow-name&gt;) v.s. flow-from:
-    &lt;flow-name&gt;</strong></p>
-
-   <p><a
-    href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">WG
-    Conference Call, CSSWG Minutes and Resolutions 2011-06-15</a>.</p>
-
-   <p>See <a
-    href="http://wiki.csswg.org/spec/css3-regions#contentflow-flow-from-name-vs-flow-fromflow-name">issue</a></p>
-  </div>
-
-  <div class="issue stale">
-   <p>NOTE: stale issue because the spec. now contains a way to address these
-    requirements.</p>
-
-   <p>Should we consider adding the ability to do the following:</p>
-
-   <ul>
-    <li>Support repeatable content. For example, have a repeatable heading at
-     the start of each region where content flows.
-
-    <li>Support flow breaking marks. It might be very useful to support a
-     <em>mark</em> (such as "<code class=html>...</code>") at the region
-     breaking points to indicate that content has been broken out and is
-     continuing on a different region.</li>
-    <!--
-            <li>Support "atomic pull-outs". For example, we could have a named
-            flow made of a set of atomic quotes that should be placed, one by
-            one, in discrete regions. In that use case, we would need a
-            property to specify that content should be taken atomically from
-            the flow. May be something like the following.
-                <pre class="code">
-&lt;div id="quote_1" class="quote"&gt;...&lt;/div&gt;
-...
-&lt;div id="quote_n" class="quote"&gt;...&lt;/div&gt;
-
-&lt;div id="pull-out-1" class="pull-out"&gt;&lt;/div&gt;
-...
-&lt;div id="pull-out-n" class="pull-out"&gt;&lt;/div&gt;
-
-&lt;style&gt;
-.quote {
-    flow-into: "quotes";
-}
-
-.pull-out {
-    content: flow-from(quotes);
-    content-consume: atomic;
-}
-&lt;/style&gt;
-                    
-</pre>
-            </li>
-            -->
-   </ul>
-  </div>
-
-  <div class="issue resolved">
-   <p><a
-    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">First
-    resolution on Regions at the Seattle Face to Face meeting, July 2011</a>
-
-   <p><a
-    href="http://lists.w3.org/Archives/Public/www-style/2011May/0521.html">Mailing
-    list comment</a></p>
-
-   <p>&lsquo;<code class=css>content: flow-from(&lt;ident&gt;)</code>&rsquo;
-    moves an element to a named flow. Should we allow the content to be
-    copied to a flow instead of moved to a flow. For example:</p>
-
-   <div class=code> #quote_A { flow-into: "quotes"; content: contents; }</div>
-
-   <p>would keep &lsquo;<code class=css>#quote_A</code>&rsquo; in the normal
-    flow but also copy its content to the &lsquo;<code
-    class=css>quotes</code>&rsquo; flow. This essentially clones the node and
-    raises questions regarding DOM access, CSSOM view and the computed style.</p>
-  </div>
+  <div class=issue-marker><a
+   href="http://wiki.csswg.org/spec/css3-regions#issue-23should-regions-be-non-breakable">Issue-23</a></div>
 
   <p><span title=region>Regions</span> create a new <a
    href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking
@@ -927,13 +823,15 @@
     model.</p>
   </div>
 
-  <p> Floats or other exclusions (see [[CSS3EXCLUSIONS]]) potentially impact
-   the content laid out in regions, just as for non-regions.
+  <p> Floats or other exclusions (see <a href="#CSS3-EXCLUSIONS"
+   rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>)
+   potentially impact the content laid out in regions, just as for
+   non-regions.
 
   <div class=example>
    <p>In the following example, the inline content coming from the <code
-    class=html>body_text</code> <span title=named-flow>named flow</span>
-    wraps around the <code class=html>#float</code> box.</p>
+    class=html>body_text</code> <a href="#named-flow0">named flow</a> wraps
+    around the <code class=html>#float</code> box.</p>
 
    <pre>
     &lt;style&gt;
@@ -1252,8 +1150,8 @@
 
   <p>The &lsquo;<a href="#region-overflow"><code
    class=property>region-overflow</code></a>&rsquo; property controls the
-   behavior of the <em id=last-region>last region</em> associated with a
-   <span>named flow</span>.
+   behavior of the <em id=last-region>last region</em> associated with a <a
+   href="#named-flow0">named flow</a>.
 
   <dl>
    <dt>auto
@@ -1271,8 +1169,8 @@
      property has no effect. If the content does not fit within the
      <em>region element</em>, the content breaks as if flow was going to
      continue in a subsequent region. See the <a
-     href="#breaking-rules">breaking rules</a> section. A forced region break
-     takes precedence over a natural break point.</p>
+     href="#regions-flow-breaking-rules">breaking rules</a> section. A forced
+     region break takes precedence over a natural break point.</p>
 
     <p>Flow content that follows the last break in the last region, if any is
      not rendered.</p>
@@ -1365,9 +1263,6 @@
   <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
    rule</h3>
 
-  <div class=issue-marker><a
-   href="http://wiki.csswg.org/spec/css3-regions?&#issue-14region-lines-pseudo-selector">Issue-14</a></div>
-
   <p>An &lsquo;<code class=css>@region</code>&rsquo; rule contains style
    declarations specific to particular regions.
 
@@ -1396,7 +1291,7 @@
   <p>Only a limited list of properties can be set in a region style rule:
 
   <div class=issue-marker><a
-   href="http://wiki.csswg.org/spec/css3-regions?&#issue-20list-of-region-style-properties">Issue-20</a></div>
+   href="http://wiki.csswg.org/spec/css3-regions#issue-20list-of-region-style-properties">Issue-20</a></div>
 
   <ol>
    <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a>
@@ -1553,7 +1448,7 @@
   </div>
 
   <div class="issue moved"> <a
-   href="http://wiki.csswg.org/spec/css3-regions?&#issue-14region-lines-pseudo-selector">Moved
+   href="http://wiki.csswg.org/spec/css3-regions#issue-14region-lines-pseudo-selector">Moved
    to specification Wiki</a>. There is <a
    href="http://lists.w3.org/Archives/Public/www-style/2011May/0518.html">concern</a>
    that the &lsquo;<code class=css>first-line</code>&rsquo; precedent is
@@ -1573,8 +1468,9 @@
    the rule does not influence the selectors' specificity.
 
   <p>Consequently, selectors that match a given element (as describe above),
-   participate in the <a href="CSS2.1%20section%206.4.1">CSS Cascading
-   order</a> as defined in <a href="#CSS21"
+   participate in the <a
+   href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS
+   Cascading order</a> as defined in <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
   <div class=note> Region styling does not apply to nested regions. If a
@@ -1655,23 +1551,24 @@
   <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
    interface</h3>
 
-  <p>The <code class=idl>getFlowByName<a
+  <p>The <code class=idl>getFlowByName</code> method on the <a
    href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document"><code
    class=idl>Document</code></a> interface provides access to the document's
-   <span title=named-flow>named flow</span> instances.</code>
+   <a href="#named-flow0">named flow</a> instances.
 
   <pre class=idl>
 [Supplemental] interface <a
    href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document">Document</a> {
   <a
-   href="#dom-namedflow">NamedFlow</a> <a
-   href="#dom-document-getflowbyname">getFlowByName(</a><a
+   href="#dom-namedflow">NamedFlow</a>
+getFlowByName(<a
    href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
 };               
 </pre>
 
   <p>The <dfn id=dom-namedflow><code class=idl>NamedFlow</code></dfn>
-   interface offers a representation of the <span>named flow</span>.
+   interface offers a representation of the <a href="#named-flow0">named
+   flow</a>.
 
   <pre class=idl>
 interface <a href="#dom-namedflow">NamedFlow</a> {
@@ -1744,8 +1641,8 @@
     class=idl>overflow</code></a> property value can be used to control the
     visibility of the overflowing content. This means that the region is the
     last one in the <span title=region-chain>region chain</span> and not able
-    to fit the remaining content from the <span title=named-flow>named
-    flow</span>.
+    to fit the remaining content from the <a href="#named-flow0">named
+    flow</a>.
 
    <dt>&lsquo;<code class=property>fit</code>&rsquo;
 
@@ -1754,17 +1651,17 @@
     box</a>. It does not overflow. If the region is the last one in the <span
     title=region-chain>region chain</span>, it means that the content fits
     without overflowing. If the region is not the last one in the region
-    chain, that means the <span title=named-flow>named flow</span> content is
+    chain, that means the <a href="#named-flow0">named flow</a> content is
     further fitted in subsequent regions. In particular, in this last case,
-    that means the region may have received no content from the <span
-    title=named-flow>named flow</span> (for example if the region is too
+    that means the region may have received no content from the <a
+    href="#named-flow0">named flow</a> (for example if the region is too
     small to accommodate any content).
 
    <dt>&lsquo;<code class=property>empty</code>&rsquo;
 
    <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 document order.
+    <a href="#named-flow0">named flow</a> was fitted in regions with a lower
+    document order.
 
    <dt>&lsquo;<code class=property>undefined</code>&rsquo;
 
@@ -1812,9 +1709,6 @@
    Targets</a> dispatch <code class=idl>regionLayoutUpdate</code> events when
    there is a possible layout change of their named flow segment.
 
-  <div class=issue-marker><a
-   href="http://wiki.csswg.org/spec/css3-regions?&#issue-10should-the-regionlayoutupdate-event-by-sync-or-async">Issue-10</a></div>
-
   <table border=0 cellpadding=2 cellspacing=0 class=event-desc
    summary="This table contains information about the semantics of the given event type">
    <tbody>
@@ -1826,7 +1720,7 @@
     <tr class="assert must">
      <th>Interface
 
-     <td><a href="#events-UIEvent"><code>UIEvent</code></a>
+     <td><code>UIEvent</code>
 
     <tr class="assert must">
      <th>Sync / Async
@@ -1858,9 +1752,8 @@
 
      <td>
       <ul>
-       <li><a href="#events-event-type-target"><code
-        class=attribute-name>Event.target</code></a>: region whose layout may
-        have changed
+       <li><code class=attribute-name>Event.target</code>: region whose
+        layout may have changed
       </ul>
   </table>
 
@@ -1872,25 +1765,33 @@
    related to the following specifications:
 
   <ol>
-   <li>CSS Exclusions Module [[CSS3EXCLUSIONS]]. This module defines a
-    generic way to define arbitrarily shaped exclusions into which content
-    can flow or around which content can flow. This can be seen as an
-    extension to the way CSS floats provide rectangular areas into which
-    content flows and around which content flows. In advanced layout designs,
-    it is expected that the CSS Exclusions module will be commonly combined
-    with the CSS regions module.
+   <li>CSS Exclusions Module <a href="#CSS3-EXCLUSIONS"
+    rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>. This
+    module defines a generic way to define arbitrarily shaped exclusions into
+    which content can flow or around which content can flow. This can be seen
+    as an extension to the way CSS floats provide rectangular areas into
+    which content flows and around which content flows. In advanced layout
+    designs, it is expected that the CSS Exclusions module will be commonly
+    combined with the CSS regions module.
 
-   <li>CSS Line Grid Module [[CSS3LINEGRID]]. This module defines a concept
-    of line grid to align the position of lines in different elements. The
-    line grid functionality is related and needed for aligning content
-    flowing in separate regions.
+   <li>CSS Line Grid Module <a href="#CSS3-LINE-GRID"
+    rel=biblioentry>[CSS3-LINE-GRID]<!--{{CSS3-LINE-GRID}}--></a>. This
+    module defines a concept of line grid to align the position of lines in
+    different elements. The line grid functionality is related and needed for
+    aligning content flowing in separate regions.
   </ol>
 
-  <h2 id=conformance><span class=secno>8. </span>Conformance</h2>
+  <h2 id=usecases><span class=secno>8. </span>Use Cases</h2>
 
-  <h2 id=changes><span class=secno>9. </span>Changes</h2>
+  <p>Use cases are described on <a
+   href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this
+   page</a>.
 
-  <h3 id="changes_from_June_09_2011"><span class=secno>9.1. </span>Changes
+  <h2 id=conformance><span class=secno>9. </span>Conformance</h2>
+
+  <h2 id=changes><span class=secno>10. </span>Changes</h2>
+
+  <h3 id="changes_from_June_09_2011"><span class=secno>10.1. </span>Changes
    from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June
    09<sup>th</sup> 2011</a> version</h3>
 
@@ -2134,6 +2035,23 @@
 
    <li>Added additional DOM interface following <a
     href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>.
+
+   <li>Clarified that a region becomes a region only if its &lsquo;<code
+    class=property>content</code>&rsquo; property computes to normal,
+    following the resolution of <a
+    href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue
+    22</a>.
+
+   <li>Removed text about special iframe behavior as a result of <a
+    href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>.
+
+   <li>Made the selectors explicit in the initial section code examples,
+    following discussion in <a
+    href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October
+    2011</a> face to face meeting.
+
+   <li>Added section on use cases following <a
+    href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>.
   </ul>
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -2220,6 +2138,16 @@
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
+   <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
+
+   <dd>Vincent Hardy. <a
+    href="http://dev.w3.org/csswg/css3-exclusions/"><cite>CSS Exclusions
+    Module.</cite></a> Proposal for a CSS module. (Retrieved 15 November
+    2011) URL: <a
+    href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a>
+    </dd>
+   <!---->
+
    <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]
 
    <dd>Alex Mogilevsky; et al. <a
@@ -2230,6 +2158,15 @@
     </dd>
    <!---->
 
+   <dt id=CSS3-LINE-GRID>[CSS3-LINE-GRID]
+
+   <dd>Koji Ishii. <a href="http://dev.w3.org/csswg/css-line-grid/"><cite>CSS
+    Line Grid Module.</cite></a> Proposal for a CSS module. (Retrieved 26
+    October 2011) URL: <a
+    href="http://dev.w3.org/csswg/css-line-grid/">http://dev.w3.org/csswg/css-line-grid/</a>
+    </dd>
+   <!---->
+
    <dt id=CSS3PAGE>[CSS3PAGE]
 
    <dd>H&#229;kon Wium Lie; Melinda Grant. <a
@@ -2297,6 +2234,9 @@
    <li><a href="#dom-namedflow"><code class=idl>NamedFlow</code></a>, <a
     href="#dom-namedflow" title=NamedFlow><strong>6.1.</strong></a>
 
+   <li>named flow, <a href="#named-flow0"
+    title="named flow"><strong>2.2.</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>

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.31
retrieving revision 1.32
diff -u -d -r1.31 -r1.32
--- Overview.src.html	21 Nov 2011 23:14:38 -0000	1.31
+++ Overview.src.html	22 Nov 2011 17:09:21 -0000	1.32
@@ -6,9 +6,14 @@
   <title>CSS Regions Module Level 3</title>
   <link rel="stylesheet" type="text/css" href="default.css">
 
- <link id="st" href="alternate-spec-style.css" rel="alternate stylesheet" 
+
+  <link rel="stylesheet" type="text/css"
+        href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
+
+ <link id="st" href="alternate-spec-style.css" rel="stylesheet" 
        type="text/css" title="additional spec styles">
 
+
              <script type="text/javascript" src="style-toggle.js"></script>
 
        <style type="text/css">
@@ -53,10 +58,6 @@
              display: none;
          }
        </style>
-
-
-  <link rel="stylesheet" type="text/css"
-        href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
 </head>
 
 
@@ -197,6 +198,15 @@
         
 </pre>
 
+    <p>And the following snippet shows an example of elements that will be used
+        as regions.</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;        
+    </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
@@ -209,12 +219,13 @@
         <p class="caption">Sample rendering for desired layout</p>
     </div>
 
-    <p>Since the CSS regions module is independent of the layout of regions and
-    the mechanism used to create them, the following assumes there is a CSS
-    selector for the regions and, for the purpose of the example, the selectors
-    for regions 1, 2, 3 and 4 show as ''&lt;region1_sel&gt;'',
-    ''&lt;region2_sel&gt;'', ''&lt;region3_sel&gt;'' and
-    ''&lt;region4_sel&gt;'' respectively.</p>
+    <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.</p>
+    
+    <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>
 
     <div class="example">
         <pre>
@@ -224,8 +235,7 @@
     <strong>flow-into: article_flow;</strong>
 }
 
-&lt;region1_sel&gt;, &lt;region2_sel&gt;, 
-&lt;region3_sel&gt;, &lt;region4_sel&gt; {
+#region1, #region2, #region3, #region4 {
     <strong>flow-from: article_flow;</strong>
 }
 &lt;/style&gt;
@@ -234,7 +244,8 @@
     
     <p>The 'article_flow' value on the 'flow-into' property directs the ''#article''
         element to the 'article_flow' named flow. Setting the elements' 'flow-from' property
-        to 'article_flow' makes them regions and associates these regions with the named flow: the flow is
+        to 'article_flow' on elements makes them regions and associates these regions 
+        with the named flow: the flow is
         ''poured'' into the desired regions.</p>
 
     <h3 id="region-styling">Regions styling</h3>
@@ -273,7 +284,7 @@
  * Additional styling to apply to content when it falls into 
  * region1
  */
-<strong>@region &lt;region1_sel&gt; {</strong>
+<strong>@region #region1 {</strong>
     #article {
         font-weight: bold;
         color: #0C3D5F;
@@ -487,38 +498,6 @@
     </div>
 
 
-    <h4>'flow-into' and &lt;iframe&gt;, &lt;object&gt;, &lt;embed&gt;</h4>
-    <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-19special-behavior-of-iframe-flow">Issue-19</a></div>
-    
-    <p>Optionally, implementations can support the 'flow-into' property on the &lt;iframe&gt;, &lt;object&gt;
-        and &lt;embed&gt; elements.</p>
-        
-    <p>
-        If the ‘flow-into’ property is specified on an
-        <code class=
-        "html">&lt;iframe&gt;</code>, an <code class=
-        "html">&lt;object&gt;</code> or a <code class=
-        "html">&lt;embed&gt;</code> element, the 
-        ‘display’ property is computed to ‘none’ and the referenced document within the element is used as the named flow. 
-        In the case of the <code class="html">&lt;object&gt;</code> element if fallback occurs and the fallback element has a referenced document then that 
-        document is used as the named flow, otherwise the fallback element itself is added to the named flow.
-    </p>
-    <p>
-        Any properties set on the <code class=
-        "html">&lt;iframe&gt;</code>/<code class=
-        "html">&lt;object&gt;</code>/<code class=
-        "html">&lt;embed&gt;</code> elements (including margin, border, padding, background) have no effect. 
-        This redirection of content does not change representation of the elements in the document tree, just as for any other 
-        source of named flow; in this case the <code class="html">&lt;iframe&gt;</code> still provides security checks for script in content (and sandbox if required).
-        Events and CSS cascading work the same way as in a documents hosted in regular <code class="html">&lt;iframe&gt;</code>s.
-    </p>
-    <p>
-        Region styling applies to content coming from <code class=
-        "html">&lt;iframe&gt;</code>/<code class=
-        "html">&lt;object&gt;</code>/<code class=
-        "html">&lt;embed&gt;</code> sources the same way it applies to other flow content.
-    </p>
-    
     <p>The 'flow-into' property does not apply to the <code class="css">::first-line</code> and <code class="css">::first-character</code>.</p> 
     
     <p>The effect of 'flow-into' on generated content such as <code class="css">::marker</code>, 
@@ -527,10 +506,8 @@
         
     <h3 id="the-flow-from-property">The 'flow-from' property</h3>
 
-    <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-18interplay-of-flow-from-and-content">Issue-18</a></div>
-    
     <p>The 'flow-from' property makes an element a region and associates it with a named flow.</p>
-    <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-12should-we-allow-multi-column-elements-to-be-regions">Issue-12</a></div>
+    <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions?&#issue-12should-we-allow-multi-column-elements-to-be-regions">Issue-12</a></div>
     
     <table class="propdef" summary="flow-from property definition">
         <tr>
@@ -593,7 +570,9 @@
         <dt><strong>&lt;ident&gt;</strong></dt>
 
         <dd>
-            The element becomes a <span>region</span> and is ordered in a
+            If the 'content' property computes to something else than 'normal', the element 
+            does not become a region.
+            If the 'content' property computes to 'normal', then the element becomes a <span>region</span> and is ordered in a
             <span>region chain</span> according to its document order. 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">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
@@ -630,82 +609,8 @@
         selector is still associated with that empty named flow and, consequently, its children
         are not formatted visually.
         </div>
-    <div class="issue resolved">
-        <p><a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">Third resolution on
-            Regions at the Seattle Face to Face meeting, July 2011</a>. Superseded by resolution during 
-            
-        <p><strong>content: flow-from(&lt;flow-name&gt;) v.s. flow-from: &lt;flow-name&gt;</strong></p>
-
-        <p><a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">WG Conference Call, CSSWG Minutes and Resolutions 2011-06-15</a>.</p>
-        
-        <p>See <a href="http://wiki.csswg.org/spec/css3-regions#issue-1-contentfrom-flow-flow-name-vs-flow-fromflow-name">issue</a></p>
-    </div>
-    <div class="issue stale">
         
-        <p>NOTE: stale issue because the spec. now contains a way to address these 
-            requirements.</p>
-            
-        <p>Should we consider adding the ability to do the following:</p>
-
-        <ul>
-            <li>Support repeatable content. For example, have a repeatable
-            heading at the start of each region where content flows.</li>
-
-            <li>Support flow breaking marks. It might be very useful to support
-            a <em>mark</em> (such as "<code class="html">...</code>") at the
-            region breaking points to indicate that content has been broken out
-            and is continuing on a different region.</li><!--
-            <li>Support "atomic pull-outs". For example, we could have a named
-            flow made of a set of atomic quotes that should be placed, one by
-            one, in discrete regions. In that use case, we would need a
-            property to specify that content should be taken atomically from
-            the flow. May be something like the following.
-                <pre class="code">
-&lt;div id="quote_1" class="quote"&gt;...&lt;/div&gt;
-...
-&lt;div id="quote_n" class="quote"&gt;...&lt;/div&gt;
-
-&lt;div id="pull-out-1" class="pull-out"&gt;&lt;/div&gt;
-...
-&lt;div id="pull-out-n" class="pull-out"&gt;&lt;/div&gt;
-
-&lt;style&gt;
-.quote {
-    flow-into: "quotes";
-}
-
-.pull-out {
-    content: flow-from(quotes);
-    content-consume: atomic;
-}
-&lt;/style&gt;
-                    
-</pre>
-            </li>
-            -->
-        </ul>
-    </div>
-
-    <div class="issue resolved">
-        <p><a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">First resolution on
-            Regions at the Seattle Face to Face meeting, July 2011</a>
-            
-        <p><a href=
-        "http://lists.w3.org/Archives/Public/www-style/2011May/0521.html">Mailing
-        list comment</a></p>
-
-        <p>''content: flow-from(&lt;ident&gt;)'' moves an element to a named
-        flow. Should we allow the content to be copied to a flow instead of
-        moved to a flow. For example:</p>
-
-        <div class="code">
-            #quote_A { flow-into: "quotes"; content: contents; }
-        </div>
-
-        <p>would keep ''#quote_A'' in the normal flow but also copy its content
-        to the ''quotes'' flow. This essentially clones the node and raises
-        questions regarding DOM access, CSSOM view and the computed style.</p>
-    </div>
+        <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-23should-regions-be-non-breakable">Issue-23</a></div>
 
     <p><span title="region">Regions</span> create a new <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking context</a>. <span title="region">Regions</span> establish a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting Context</a>.</p>
     
@@ -1175,8 +1080,6 @@
 
     <h3 id="the-at-region-style-rule">The @region rule</h3>
 
-    <div class="issue-marker"><a href="http://wiki.csswg.org/spec/css3-regions#issue-14region-lines-pseudo-selector">Issue-14</a></div>
-    
     <p>An '@region' rule contains style declarations specific to particular
     regions.</p>
 
@@ -1535,8 +1438,6 @@
     <p>Region <a href="http://www.w3.org/TR/DOM-Level-3-Events/#glossary-event">Event Targets</a> 
     dispatch <code class="idl">regionLayoutUpdate</code> events when there is a possible layout change of their named flow segment.</p>
     
-    <div class='issue-marker'><a href="http://wiki.csswg.org/spec/css3-regions#issue-10should-the-regionlayoutupdate-event-by-sync-or-async">Issue-10</a></div>
-    
     <table class="event-desc" border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0">
                 <tbody><tr class="assert must"><th>Type</th>
                 <td class="eventname"><strong><code>regionLayoutUpdate</code></strong></td></tr>
@@ -1576,6 +1477,11 @@
         elements. The line grid functionality is related and needed for
         aligning content flowing in separate regions.</li>
     </ol>
+    
+    <h2 id="usecases">Use Cases</h2>
+    
+    <p>Use cases are described on <a href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">this
+            page</a>.</p>
 
     <h2 id="conformance">Conformance</h2>
     
@@ -1693,6 +1599,13 @@
             Also allowed the 'inherit' value on 'flow-from' and 'flow-into' (same email).</li>
         <li>Added note about nested region styling following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0650.html">a mailing list discussion</a>.</li>
         <li>Added additional DOM interface following <a href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>.</li>
+        <li>Clarified that a region becomes a region only if its 'content' property computes to 
+            normal, following the resolution of <a href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue 22</a>.</li>
+        <li>Removed text about special iframe behavior as a result of 
+            <a href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>.</li>
+        <li>Made the selectors explicit in the initial section code examples, following
+            discussion in <a href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October 2011</a> face to face meeting.</li>
+        <li>Added section on use cases following <a href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>.</li>
     </ul>
     
     <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
Received on Tuesday, 22 November 2011 17:09:35 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 November 2011 17:09:36 GMT