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

csswg/css3-regions Overview.html,1.21,1.22 Overview.src.html,1.23,1.24 alternate-spec-style.css,1.7,1.8 style-toggle.js,1.1,1.2

From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 24 Oct 2011 23:48:48 +0000
To: public-css-commits@w3.org
Message-Id: <E1RIUG8-0000Io-1A@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv1129

Modified Files:
	Overview.html Overview.src.html alternate-spec-style.css 
	style-toggle.js 
Log Message:
Updated with recent comments and feedback. Changes added to log. Added alternate stylesheet

Index: style-toggle.js
===================================================================
RCS file: /sources/public/csswg/css3-regions/style-toggle.js,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- style-toggle.js	4 May 2011 05:32:27 -0000	1.1
+++ style-toggle.js	24 Oct 2011 23:48:45 -0000	1.2
@@ -1,5 +1,4 @@
 (function() {
-
     var defaultStyleText = 'default spec. style';
     var additionalStyleText = "additional spec. style";
     var toggle;
@@ -8,24 +7,32 @@
     function toggleStyle() {
         var st = document.getElementById('st');
 
-        if (st.disabled === true) {
-            st.disabled = false;
+        if (st.hasAttribute('disabled') === true) {
+            st.removeAttribute('disabled');
             toggle.textContent = defaultStyleText;
         } else {
-            st.disabled = true;
+            st.setAttribute('disabled', 'true');
             toggle.textContent = additionalStyleText;
         }
     }
 
     window.onload = function() {
+        var st = document.getElementById('st');
         var divHead = document.getElementById('div-head');
+        var defaultText = additionalStyleText;
+        
+        if (st.hasAttribute('disabled') === false) {
+            defaultText = defaultStyleText;
+        }
+        
         toggle = document.createElement('a');
 
 		divHead.insertBefore(toggle, divHead.firstChild);
-        toggle.textContent = defaultStyleText;
+        toggle.textContent = defaultText;
         toggle.setAttribute('class', 'toggle');
         toggle.setAttribute('href', '#');
-        toggle.addEventListener("DOMActivate", toggleStyle, false);
+        toggle.addEventListener("click", toggleStyle, false);
     };
+    
 })();
 

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.21
retrieving revision 1.22
diff -u -d -r1.21 -r1.22
--- Overview.html	30 Sep 2011 22:31:27 -0000	1.21
+++ Overview.html	24 Oct 2011 23:48:45 -0000	1.22
@@ -2,15 +2,32 @@
 "http://www.w3.org/TR/html4/strict.dtd">
 
 <html lang=en>
- <head profile="http://www.w3.org/2006/03/hcard"><meta content="text/html;
-  charset=utf-8" http-equiv=Content-Type>
+ <head profile="http://www.w3.org/2006/03/hcard"><meta
+  content="text/html; charset=utf-8" http-equiv=Content-Type>
 
   <title>CSS Regions Module Level 3</title>
   <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 href=alternate-spec-style.css id=st rel=stylesheet title="additional
-  spec styles" type="text/css">
+  <link disabled 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">
+         a.toggle {
+             position: fixed;
+             top: 0.5em;
+             right: 0.5em;
+         	font-size: smaller;
+         	color: gray;
+         	opacity: 0.2;
+         }
+
+         a.toggle:hover {
+             opacity: 1;
+             color: #46A4E9;
+         }
+       </style>
 
  <body>
   <div class=head id=div-head> <!--begin-logo-->
@@ -19,14 +36,14 @@
 
    <h1 id=css-regions-module>CSS Regions Module</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 September
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 October
     2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-regions-20110930/">http://www.w3.org/csswg/css3-regions</a>
+     href="http://www.w3.org/TR/2011/ED-css3-regions-20111024/">http://www.w3.org/csswg/css3-regions</a>
 
     <dt>Latest version:
 
@@ -51,13 +68,13 @@
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> &copy; 2011 <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>, <a
-    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <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>,
+    <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
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -148,6 +165,12 @@
     <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-ltiframgt-ltobjectgt-ltemb"><span
+        class=secno>4.1.1. </span>&lsquo;<code
+        class=property>flow-into</code>&rsquo; and &lt;ifram&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>
@@ -256,8 +279,9 @@
 
   <p>Consider the layout illustrated in figure 1.
 
-  <div class=figure> <img alt="multiple chained regions which should receive
-   content from a flow" src="images/regions-intro.svg" width=400>
+  <div class=figure> <img
+   alt="multiple chained regions which should receive content from a flow"
+   src="images/regions-intro.svg" width=400>
    <p class=caption>Layout requiring sophisticated content flow</p>
   </div>
 
@@ -288,8 +312,8 @@
    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"
+  <div class=figure> <img
+   alt="Sample rendering showing a single thread of text flowing through a chain of regions"
    src="images/regions-intro-rendering.png" width=450>
    <p class=caption>Sample rendering for desired layout</p>
   </div>
@@ -391,8 +415,9 @@
    fitted, more content is subject to the contextual selectors, resulting in
    more dark blue text into region 1.
 
-  <div class=figure> <img alt="Illustrate how changing region styling affects
-   the flow of content." src="images/region-styling.png" width=450>
+  <div class=figure> <img
+   alt="Illustrate how changing region styling affects the flow of content."
+   src="images/region-styling.png" width=450>
    <p class=caption>Different rendering with a different region styling</p>
   </div>
 
@@ -494,12 +519,12 @@
     <tr>
      <th>Value:
 
-     <td>&lt;ident&gt; | auto
+     <td>&lt;ident&gt; | none | inherit
 
     <tr>
      <th>Initial:
 
-     <td>auto
+     <td>none
 
     <tr>
      <th>Applies to:
@@ -528,7 +553,7 @@
   </table>
 
   <dl>
-   <dt>auto
+   <dt>none
 
    <dd>The element is not moved to a named flow and normal CSS processing
     takes place.
@@ -541,7 +566,8 @@
     id=specified-flow>specified flow</dfn>. The values &lsquo;<code
     class=property>none</code>&rsquo;, &lsquo;<code
     class=property>inherit</code>&rsquo;, &lsquo;<code
-    class=property>default</code>&rsquo; and &lsquo;<code
+    class=property>default</code>&rsquo;, &lsquo;<code
+    class=property>auto</code>&rsquo; and &lsquo;<code
     class=property>initial</code>&rsquo; are invalid flow names.
   </dl>
 
@@ -553,9 +579,9 @@
   <p>The children of an element with a specified flow may themselves have a
    specified flow.
 
-  <p>If an element has a the same specified flow value as one of its
-   ancestors, it becomes a sibling of it's ancestor for the purpose of layout
-   in the regions laying out content content from that flow.
+  <p>If an element has the same specified flow as one of its ancestors, it
+   becomes a sibling of it's ancestor for the purpose of layout in the
+   regions laying out content from that flow.
 
   <p>The &lsquo;<a href="#flow-into"><code
    class=property>flow-into</code></a>&rsquo; property does not affect the
@@ -569,6 +595,11 @@
    flow establish the rectangle that is the initial containing block of the
    named flow.
 
+  <p>The first region defines the <a
+   href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing
+   mode</a> for the entire flow. The writing mode on subsequent regions is
+   ignored.
+
   <p>Elements in a named flow are sequenced in document order.
 
   <div class=note>
@@ -599,9 +630,18 @@
     unintended results.</p>
   </div>
 
+  <h4 id=flow-into-and-ltiframgt-ltobjectgt-ltemb><span class=secno>4.1.1.
+   </span>&lsquo;<a href="#flow-into"><code
+   class=property>flow-into</code></a>&rsquo; and &lt;ifram&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">I-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
@@ -665,7 +705,7 @@
     <tr>
      <th>Value:
 
-     <td>none | &lt;ident&gt;
+     <td>&lt;ident&gt; | none | inherit
 
     <tr>
      <th>Initial:
@@ -873,24 +913,16 @@
 
   <p>If a region's &lsquo;<code class=property>width</code>&rsquo; property
    is computed to &lsquo;<code class=property>auto</code>&rsquo;, its
-   resolved width is &lsquo;<code class=css>0</code>&rsquo;.
+   resolved value is computed based on the region's <em>::before</em> and
+   <em>::after</em> generated content only.
 
   <h4 id=auto-height-on-regions><span class=secno>4.2.2. </span>Auto height
    on regions</h4>
 
   <p>If a region's &lsquo;<code class=property>height</code>&rsquo; property
-   is computed to &lsquo;<code class=property>auto</code>&rsquo;, its height
-   is computed as described in the <a
-   href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">Computing
-   heights and margins</a> section of the CSS 2.1 specification (see <a
-   href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>) where:
-
-  <ul>
-   <li>Children, in the context of CSS regions, means the remainder of the
-    regions's associated flow.
-
-   <li>Last line box means the last line box in the region's associated flow.
-  </ul>
+   is computed to &lsquo;<code class=property>auto</code>&rsquo;, its
+   resolved value is computed based on the region's <em>::before</em> and
+   <em>::after</em> generated content only.
 
   <h3 id=region-flow-break><span class=secno>4.3. </span>Region flow break
    properties: &lsquo;<a href="#break-before"><code
@@ -1179,14 +1211,22 @@
 
    <dt>break
 
-   <dd>If the content fits within the <em>region element</em>, then this
-    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.
+   <dd>
+    <p>If the content fits within the <em>region element</em>, then this
+     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>
+
+    <p>Flow content that follows the last break in the last region, if any is
+     not rendered.</p>
   </dl>
 
+  <p>The &lsquo;<a href="#region-overflow"><code
+   class=property>region-overflow</code></a>&rsquo; property does not
+   influence the size of the region it applies to.
+
   <p>The following code sample illustrates the usage of the &lsquo;<a
    href="#region-overflow"><code
    class=property>region-overflow</code></a>&rsquo; property.
@@ -1215,8 +1255,8 @@
   </div>
 
   <div class=figure>
-   <table style="border: 1px solid gray;width: 100%;" summary="Different
-    values for the region-overflow property - Illustration.">
+   <table style="border: 1px solid gray;width: 100%;"
+    summary="Different values for the region-overflow property - Illustration.">
     <tbody>
      <tr>
       <td>&lsquo;<code class=css>flow-into: "article"</code>&rsquo;
@@ -1228,8 +1268,9 @@
        &lsquo;<code class=css>overflow:visible</code>&rsquo;
 
      <tr>
-      <td rowspan=3 style="vertical-align: top;"><img alt="regions receiving
-       the flow content" src="images/region-overflow-flow.png">
+      <td rowspan=3 style="vertical-align: top;"><img
+       alt="regions receiving the flow content"
+       src="images/region-overflow-flow.png">
 
       <td><img alt="result if region-overflow is set to 'break'"
        src="images/region-overflow-regions.png">
@@ -1275,6 +1316,12 @@
   <p>An &lsquo;<code class=css>@region</code>&rsquo; rule contains style
    declarations specific to particular regions.
 
+  <pre>
+@region &lt;selector&gt; {
+    ... CSS styling rules ...
+}         
+    </pre>
+
   <p>The &lsquo;<code class=css>@region</code>&rsquo; rule consists of the
    keyword &lsquo;<code class=css>@region</code>&rsquo; followed by a <a
    href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
@@ -1356,12 +1403,6 @@
     class=property>width</code>&rsquo; property</a>
   </ol>
 
-  <pre><code class=css>
-<strong>@region &lt;selector&gt; {
-    ... CSS styling rules ...
-}</strong>          
-</code></pre>
-
   <div class=example id=region-style-example>
    <p>In the following example, the named flow &lsquo;<code
     class=css>article_flow</code>&rsquo; flows through &lsquo;<code
@@ -1399,9 +1440,9 @@
         
 </pre>
 
-   <div id="region_styling_illustration"> <img alt="Illustration showing how
-    a named flow content fits into regions to illustrate the @region
-    styling." id="region_styling_img_2" name="region_styling_img_2"
+   <div id="region_styling_illustration"> <img
+    alt="Illustration showing how a named flow content fits into regions to illustrate the @region styling."
+    id="region_styling_img_2" name="region_styling_img_2"
     src="images/region-styling-2.png">
     <ul class=swatch-list>
      <li><span class=swatch style="background:#1C75BC">&nbsp;</span>div div_1
@@ -1476,13 +1517,18 @@
    <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where
    the rule does not influence the selectors' specificity.
 
-  <p>&nbsp;
-
   <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"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
 
+  <div class=note> Region styling does not apply to nested regions. If a
+   region &lsquo;<code class=property>A</code>&rsquo; receives content from a
+   flow that contains region &lsquo;<code class=property>B</code>&rsquo;, the
+   content that flows into &lsquo;<code class=property>B</code>&rsquo; does
+   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>
 
   <p><em>This section is normative.</em>
@@ -1560,8 +1606,12 @@
    <span title=named-flow>named flow</span> instances.</code>
 
   <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="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
+[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="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
 };               
 </pre>
 
@@ -1570,7 +1620,8 @@
 
   <pre class=idl>
 interface <a href="#dom-namedflow">NamedFlow</a> {
-  readonly attribute boolean <a href=dom-namedflow-overflow>overflow</a>;
+  readonly attribute boolean <a
+   href=dom-namedflow-overflow>overflow</a>;
 };    
     
 </pre>
@@ -1595,9 +1646,14 @@
    class=idl>Element</code></a> provides that functionality.
 
   <pre class=idl>
-[Supplemental] interface <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-745549614">Element</a> {
-    readonly attribute <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> <a href="#dom-element-regionoverflow">regionOverflow</a>;
-    getter <a href="#">Range</a>[] <a href="#dom-element-getregionflowranges">getRegionFlowRanges()</a>;
+[Supplemental] interface <a
+   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-745549614">Element</a> {
+    readonly attribute <a
+   href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> <a
+   href="#dom-element-regionoverflow">regionOverflow</a>;
+    getter <a
+   href="#">Range</a>[] <a
+   href="#dom-element-getregionflowranges">getRegionFlowRanges()</a>;
 };               
     
 </pre>
@@ -1688,8 +1744,8 @@
   <div class=issue-marker><a
    href="http://wiki.csswg.org/spec/css3-regions?&#issue-10should-the-regionlayoutupdate-event-by-sync-or-async">I-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">
+  <table border=0 cellpadding=2 cellspacing=0 class=event-desc
+   summary="This table contains information about the semantics of the given event type">
    <tbody>
     <tr class="assert must">
      <th>Type
@@ -1963,6 +2019,47 @@
 
    <li>Removed the &lsquo;<code class=property>region-order</code>&rsquo;
     property following implementation feedback.
+
+   <li>Specified that region-overflow does not influence a region's size.
+
+   <li>Specified that the flow's writing mode is defined by the first
+    region's writing mode following <a
+    href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0306.html">mailing
+    list discussion</a>.
+
+   <li>Made iframe, object and embed support of flow-into optional following
+    <a
+    href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0073.html">mailing
+    list discussion</a>.
+
+   <li>Clarified that flow content following the last break in the last
+    region is not rendered, following <a
+    href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0167.html">mailing
+    list discussions.</a>
+
+   <li>Modified the rule for computing the width and height of a region when
+    they are set to auto, following <a
+    href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0216.html">a
+    mailing list discussion.</a>
+
+   <li>Added &lsquo;<code class=property>auto</code>&rsquo; to the list of
+    invalid flow identifiers.
+
+   <li>Made &lsquo;<code class=property>none</code>&rsquo; the initial value
+    for &lsquo;<a href="#flow-into"><code
+    class=property>flow-into</code></a>&rsquo; and aligned with &lsquo;<a
+    href="#flow-from"><code class=property>flow-from</code></a>&rsquo;, as
+    explained in this <a
+    href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>.
+    Also allowed the &lsquo;<code class=property>inherit</code>&rsquo; value
+    on &lsquo;<a href="#flow-from"><code
+    class=property>flow-from</code></a>&rsquo; and &lsquo;<a
+    href="#flow-into"><code class=property>flow-into</code></a>&rsquo; (same
+    email).
+
+   <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>.
   </ul>
 
   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -2134,8 +2231,8 @@
    <li>region-overflow, <a href="#region-overflow"
     title=region-overflow><strong>4.4.</strong></a>
 
-   <li>specified flow, <a href="#specified-flow" title="specified
-    flow"><strong>4.1.</strong></a>
+   <li>specified flow, <a href="#specified-flow"
+    title="specified flow"><strong>4.1.</strong></a>
   </ul>
   <!--end-index-->
 

Index: alternate-spec-style.css
===================================================================
RCS file: /sources/public/csswg/css3-regions/alternate-spec-style.css,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- alternate-spec-style.css	30 Sep 2011 19:56:07 -0000	1.7
+++ alternate-spec-style.css	24 Oct 2011 23:48:45 -0000	1.8
@@ -1,42 +1,222 @@
+@import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);
+@import url(http://fonts.googleapis.com/css?family=Inconsolata);
 
-div.issue-marker {
-    position: absolute;
-    left: 5px;
-    z-index: 100;
-    padding-left: 1em;
-    border: 1px solid rgba(255, 0, 0, 0.3);
-    border-left: 1em solid red;
-    padding: 5px;
+body {
+    font-family: 'Sorts Mill Goudy', 'OFS Sorts Mill Goudy', Garamond, serif;
+    font-size: 16px;
+    width: 36em;
+    color: #2f2f2f;
+    line-height: 1.5em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #4f4f4f;
     font-weight: bold;
-    font-size: 11px;
-    -webkit-box-shadow: 1px 1px 6px rgba(255, 0, 0, 0.15);
-    -moz-box-shadow: 1px 1px 6px rgba(255, 0, 0, 0.15);
-    box-shadow: 1px 1px 6px rgba(255, 0, 0, 0.15);
+}
+
+h2, h3, h4, h5, h6 {
+    margin-top: 1.2em;
+}
+
+h1, h2, h3, h4, h5, h6, table, th, tr, td {
+    font-family: 'Sorts Mill Goudy', 'OFS Sorts Mill Goudy', Garamond, serif;
+}
+
+h1+h2 {
+    font-weight: normal;
+    margin-top: 0em;
+    margin-bottom: 2em;
+}
+
+h1 {
+    margin-bottom: 0em;
+    line-height: 1em;
+}
+
+a, a:visited, a:link, :link {
+    color: #46A4E9;
+}
+
+a[href]:hover {
+    color: #005A9C;
     background-color: white;
-    -webkit-transform: rotateZ(-30deg) translateZ(0);
-    -moz-transform: rotate(-30deg);
-    transform: rotate(-30deg);
 }
 
+.secno {
+    color: #3f3f3f;
+}
+
+.toc a {
+    color: #3f3f3f;
+}
+
+.toc a:hover {
+    color: #46A4E9;
+    background-color: white;
+}
+
+.css, .property {
+    color: #46A4E9;
+}
+pre {
+    margin-left: 0em;
+    line-height: 1.4em;
+}
+
+pre, code {
+    font-family: Inconsolata, monospace;
+    font-size: 83%;
+    line-height: 1.4em;
+}
+
+code.xml {
+    color: #3f3f3f;
+}
+
+code > pre {
+    font-size: 100%;
+}
+
+div.example:before {
+    color: #808080  ;
+	background: none;
+	border: none;
+	text-transform: none;
+	font-weight: bold;
+	width: 100%;
+	display: block;
+}
+
+div.example {
+	background: none;
+	padding: 0.75em;
+	margin: 1em 0;
+	border-top: thin solid rgba(0, 0, 0, 0.1);
+	border-bottom: thin solid rgba(0, 0, 0, 0.1);
+	border-left: none;
+	position: relative;
+	clear: both;
+}
+
+div.example {
+	color: #303030
+}
+
+div.issue {
+	color: red;
+	margin-top: 1em;
+	padding: 0.5em;
+	border-left: 1ex solid red;
+	padding-left: 1em;
+	position: relative;
+	color: gray;
+	padding-right: 10em;
+}
+
+div.issue:before {
+	content: "Issue " counter(issue);
+	background: none;
+	padding: 0;
+	margin: 0 0 0.7em 0;
+	border: none;
+	font-weight: bold;
+	color: gray;
+	display: block;
+}
 
 .issue {
 	counter-increment: issue;
 }
 
+table.propdef {
+    background: none;
+    border-left: none;
+}
+
+table.propdef td, table.propdef-extra td, 
+table.descdef td, table.propdef th, 
+table.propdef-extra th, table.descdef th {
+    padding: 0.5em;
+    vertical-align: baseline;
+    border-bottom: thin solid rgba(0, 0, 0, 0.2);
+}
+
+table.propdef > tbody > tr:last-child th,
+table.propdef-extra > tbody > tr:last-child th,
+table.descdef > tbody > tr:last-child th,
+table.propdef > tbody > tr:last-child td,
+table.propdef-extra > tbody > tr:last-child td,
+table.descdef > tbody > tr:last-child td {
+    border-bottom: thin solid rgba(0, 0, 0, 0.2);
+}
+
+table.propdef tr:first-child td, table.propdef tr:first-child th {
+    border-top: thin solid rgba(0, 0, 0, 0.2);
+}
+
+table.propdef tr:nth-child(odd) {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+p.note {
+	border: none;
+	border-left: 1ex solid rgba(0, 0, 0, 0.1);
+    background: none;
+}
+
+div.note {
+	margin-top: 1em;
+	padding: 0.5em;
+	border: none;
+	border-left: 1ex solid rgba(0, 0, 0, 0.1);
+	padding-left: 1em;
+	padding-bottom: 1em;
+	position: relative;
+	background: none;
+}
+
+div.note:before {
+	content: "Note " counter(note);
+	background: none;
+	padding: 0;
+	margin: 0 0 0.7em 0;
+	border: none;
+	font-weight: bold;
+	display: block;
+}
+
+div.note p {
+	color: black;
+}
+
+div.note p:before {
+	color: #1C75BC;
+}
+
+.note {
+	counter-increment: note;
+}
+
 pre.code {
 	margin-top: 1em;
-	padding: 1em;
-	border-left: 0.5em solid gray;
+	padding: 0.5em;
+	border-left: 1ex solid gray;
 	padding-left: 1em;
 	position: relative;
 	background: #F0F0F0;
 	margin-left: 0px;
 }
 
-.toggle {
+a.toggle {
 	font-size: smaller;
 	color: gray;
 	float: right;
+	opacity: 0.2;
+}
+
+a.toggle:hover {
+    opacity: 1;
+    color: #46A4E9;
 }
 
 pre.idl {
@@ -80,12 +260,8 @@
 	width: 70ex;
 }
 
-.event-desc {
-    background-color: #DEF;
-}
 .event-desc td, .event-desc th {
-    padding: 0.5em;
-    border-bottom: 1px solid #BBD7E9;
+	border: 1px solid gray;
 }
 
 .event-desc th {
@@ -99,4 +275,111 @@
 
 p {
 	margin-bottom: 1em;
+}
+
+
+table.values-desc {
+    border-collapse: collapse;
+    margin-top: 0.5em;
+}
+
+.values-desc td {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 0.5em;
+}
+
+.values-desc td:first-child {
+    font-weight: bold;
+}
+
+.values-desc tr:nth-child(odd) {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+.values-desc th {
+    font-weight: bold;
+}
+
+table.values-desc {
+    border-left: none;
+    padding-left: 1ex;
+}
+
+.figure {
+    page-break-inside: avoid;
+}
+
+#default-fragment-shader:before {
+    content: "Default fragment shader";
+}
+
+#default-vertex-shader:before {
+    content: "Default vertex shader";
+}
+
+.table .caption::before {
+    counter-increment: table;
+    content: '';
+}
+
+span.highlight {
+    color: #46A4E9;
+}
+
+span.highlight2 {
+    color: #E00000;
+}
+
+span.fade {
+    color: rgba(0, 0, 0, 0.4);
+}
+
+table.values-desc td:first-child {
+    min-width: 28ex;
+}
+
+#div-head > h1:before {
+    content: '';
+    background-image: url(http://www.w3.org/2008/site/images/logo-w3c-mobile-lg);
+    display: block;
+    width: 90px;
+    height: 53px;
+    position: absolute;
+    margin-left: -120px;
+    border-radius: 0.2em;
+    -webkit-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
+    -ms-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
+    -o-box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
+    box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
+}
+
+img[alt='W3C'] {
+    display: none;
+}
+
+
+div.issue-marker {
+    position: absolute;
+    left: 5px;
+    z-index: 100;
+    padding-left: 1em;
+    border: 1px solid rgba(255, 0, 0, 0.3);
+    border-left: 1em solid red;
+    padding: 5px;
+    font-weight: bold;
+    font-size: 11px;
+    -webkit-box-shadow: 1px 1px 6px rgba(255, 0, 0, 0.15);
+    -moz-box-shadow: 1px 1px 6px rgba(255, 0, 0, 0.15);
+    box-shadow: 1px 1px 6px rgba(255, 0, 0, 0.15);
+    background-color: white;
+    -webkit-transform: rotateZ(-30deg) translateZ(0);
+    -moz-transform: rotate(-30deg);
+    transform: rotate(-30deg);
+}
+
+
+.issue {
+	counter-increment: issue;
 }
\ No newline at end of file

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.23
retrieving revision 1.24
diff -u -d -r1.23 -r1.24
--- Overview.src.html	30 Sep 2011 22:31:27 -0000	1.23
+++ Overview.src.html	24 Oct 2011 23:48:45 -0000	1.24
@@ -9,7 +9,26 @@
         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">
+       type="text/css" disabled title="additional spec styles">
+
+             <script type="text/javascript" src="style-toggle.js"></script>
+
+       <style type="text/css">
+         a.toggle {
+             position: fixed;
+             top: 0.5em;
+             right: 0.5em;
+         	font-size: smaller;
+         	color: gray;
+         	opacity: 0.2;
+         }
+
+         a.toggle:hover {
+             opacity: 1;
+             color: #46A4E9;
+         }
+       </style>
+
 
 </head>
 
@@ -344,13 +363,13 @@
         <tr>
             <th>Value:</th>
 
-            <td>&lt;ident&gt; | auto</td>
+            <td>&lt;ident&gt; | none | inherit</td>
         </tr>
 
         <tr>
             <th>Initial:</th>
 
-            <td>auto</td>
+            <td>none</td>
         </tr>
 
         <tr>
@@ -385,7 +404,7 @@
     </table>
 
     <dl>
-        <dt>auto</dt>
+        <dt>none</dt>
 
         <dd>The element is not moved to a named flow and normal CSS processing takes place.</dd>
 
@@ -393,7 +412,7 @@
 
         <dd>The element is placed into the flow with the name '&lt;ident&gt;'. The
         element is said to have a <dfn id="specified-flow">specified
-        flow</dfn>. The values 'none', 'inherit', 'default' and 'initial' are invalid flow
+        flow</dfn>. The values 'none', 'inherit', 'default', 'auto' and 'initial' are invalid flow
         names.</dd>
     </dl>
 
@@ -405,9 +424,9 @@
     <p>The children of an element with a specified flow may themselves have a
     specified flow.</p>
 
-    <p>If an element has a the same specified flow value as one of its
+    <p>If an element has the same specified flow as one of its
     ancestors, it becomes a
-    sibling of it's ancestor for the purpose of layout in the regions laying out content
+    sibling of it's ancestor for the purpose of layout in the regions laying out
     content from that flow.</p>
 
     <p>The 'flow-into' property does not affect the CSS cascade and inheritance for
@@ -418,6 +437,8 @@
     <p>The edges of the first region in a region chain associated with a named flow establish 
         the rectangle that is the initial containing block of the named flow.</p>
 
+    <p>The first region defines the <a href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a> for the entire flow. The writing mode on subsequent regions is ignored.</p>
+
     <p>Elements in a named flow are sequenced in document order.</p>
 
     <div class="note">
@@ -437,8 +458,13 @@
         selector for setting the 'flow-into' property to avoid unintended results.</p> 
     </div>
 
-    
+
+    <h4>'flow-into' and &lt;ifram&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">I-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=
@@ -490,7 +516,7 @@
         <tr>
             <th>Value:</th>
 
-            <td>none | &lt;ident&gt;</td>
+            <td>&lt;ident&gt; | none | inherit</td>
         </tr>
 
         <tr>
@@ -689,17 +715,13 @@
     
     <h4>Auto width on regions</h4>
     
-    <p>If a region's 'width' property is computed to 'auto', its resolved width is '0'.</p>
+    <p>If a region's 'width' property is computed to 'auto', its resolved value is computed based on the
+        region's <em>::before</em> and <em>::after</em> generated content only.</p>
     
     <h4>Auto height on regions</h4>
     
-    <p>If a region's 'height' property is computed to 'auto', its height is computed as 
-        described in the <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">Computing heights and margins</a> section of the CSS 2.1 specification (see [[CSS21]]) where:</p>
-        
-    <ul>
-        <li>Children, in the context of CSS regions, means the remainder of the regions's associated flow.</li>
-        <li>Last line box means the last line box in the region's associated flow.</li>
-    </ul>
+    <p>If a region's 'height' property is computed to 'auto', its resolved value is computed based on the
+        region's <em>::before</em> and <em>::after</em> generated content only.</p>
 
     <h3 id=
     "region-flow-break">Region
@@ -1007,14 +1029,21 @@
 
         <dt>break</dt>
 
-        <dd>If the content fits within the <em>region element</em>, then this
+        <dd><p>If the content fits within the <em>region element</em>, then this
         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.</dd>
+        a natural break point.</p>
+        
+        <p>Flow content that follows the last break in the last region, if any is not rendered.</p>
+        
+        
+        </dd>
     </dl>
 
+    <p>The 'region-overflow' property does not influence the size of the region it applies to.</p>
+    
     <p>The following code sample illustrates the usage of the 'region-overflow'
     property.</p>
 
@@ -1101,6 +1130,12 @@
     <p>An '@region' rule contains style declarations specific to particular
     regions.</p>
 
+        <pre>
+@region &lt;selector&gt; {
+    ... CSS styling rules ...
+}         
+    </pre>
+
     <p>The '@region' rule consists of the keyword '@region' followed by a
     <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
     and a declarations block. The '@region' rule and the selector constitute
@@ -1137,11 +1172,6 @@
     </ol>
     
     
-    <pre><code class="css">
-<strong>@region &lt;selector&gt; {
-    ... CSS styling rules ...
-}</strong>          
-</code></pre>
 
     <div class="example" id="region-style-example">
         <p>In the following example, the named flow 'article_flow' flows
@@ -1252,11 +1282,15 @@
     appearing in '@media' rules declaration blocks (see [[MEDIAQ]]), where the
     rule does not influence the selectors' specificity.</p>
 
-    <p>&nbsp;</p>
-
     <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 [[!CSS21]].</p>
+    
+    <div class="note">
+        Region styling does not apply to nested regions. If a region
+        'A' receives content from a flow that contains region 'B', the content that
+        flows into 'B' does not receive the region styling specified for region 'A'.
+    </div>
 
     <h2 id="pseudo_elements">Pseudo-elements</h2>
 
@@ -1581,6 +1615,22 @@
             how 'display:run-in' works with regions.</li>
         <li>Modified the @region style rule to remove the ::region-lines pseudo-selector.</li>
         <li>Removed the 'region-order' property following implementation feedback.</li>
+        <li>Specified that region-overflow does not influence a region's size.</li>
+        <li>Specified that the flow's writing mode is defined by the first region's writing mode 
+            following <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0306.html">mailing list discussion</a>.</li>
+        <li>Made iframe, object and embed support of flow-into optional following 
+            <a href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0073.html">mailing list discussion</a>.</li>
+        <li>Clarified that flow content following the last break in the last region is not rendered,
+            following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0167.html">mailing list
+                discussions.</li>
+        <li>Modified the rule for computing the width and height of a region when they are set to auto,
+            following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0216.html">a mailing list 
+                discussion.</a></li>
+        <li>Added 'auto' to the list of invalid flow identifiers.</li>
+        <li>Made 'none' the initial value for 'flow-into' and aligned with 'flow-from', as 
+            explained in this <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>.
+            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>
     </ul>
     
     <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
Received on Monday, 24 October 2011 23:48:51 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 24 October 2011 23:48:52 GMT