- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 24 Oct 2011 23:48:48 +0000
- To: public-css-commits@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> © 2011 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</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>®</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
‘<code class=property>flow-into</code>’ property</a>
+ <ul class=toc>
+ <li><a href="#flow-into-and-ltiframgt-ltobjectgt-ltemb"><span
+ class=secno>4.1.1. </span>‘<code
+ class=property>flow-into</code>’ and <ifram>,
+ <object>, <embed></a>
+ </ul>
<li><a href="#the-flow-from-property"><span class=secno>4.2. </span>The
‘<code class=property>flow-from</code>’ 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><ident> | auto
+ <td><ident> | 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 ‘<code
class=property>none</code>’, ‘<code
class=property>inherit</code>’, ‘<code
- class=property>default</code>’ and ‘<code
+ class=property>default</code>’, ‘<code
+ class=property>auto</code>’ and ‘<code
class=property>initial</code>’ 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 ‘<a href="#flow-into"><code
class=property>flow-into</code></a>’ 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>‘<a href="#flow-into"><code
+ class=property>flow-into</code></a>’ and <ifram>,
+ <object>, <embed></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 ‘<a
+ href="#flow-into"><code class=property>flow-into</code></a>’
+ property on the <iframe>, <object> and <embed> elements.
+
<p> If the ‘flow-into’ property is specified on an <code
class=html><iframe></code>, an <code
class=html><object></code> or a <code
@@ -665,7 +705,7 @@
<tr>
<th>Value:
- <td>none | <ident>
+ <td><ident> | none | inherit
<tr>
<th>Initial:
@@ -873,24 +913,16 @@
<p>If a region's ‘<code class=property>width</code>’ property
is computed to ‘<code class=property>auto</code>’, its
- resolved width is ‘<code class=css>0</code>’.
+ 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 ‘<code class=property>height</code>’ property
- is computed to ‘<code class=property>auto</code>’, 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 ‘<code class=property>auto</code>’, 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: ‘<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 ‘<a href="#region-overflow"><code
+ class=property>region-overflow</code></a>’ property does not
+ influence the size of the region it applies to.
+
<p>The following code sample illustrates the usage of the ‘<a
href="#region-overflow"><code
class=property>region-overflow</code></a>’ 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>‘<code class=css>flow-into: "article"</code>’
@@ -1228,8 +1268,9 @@
‘<code class=css>overflow:visible</code>’
<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 ‘<code class=css>@region</code>’ rule contains style
declarations specific to particular regions.
+ <pre>
+@region <selector> {
+ ... CSS styling rules ...
+}
+ </pre>
+
<p>The ‘<code class=css>@region</code>’ rule consists of the
keyword ‘<code class=css>@region</code>’ followed by a <a
href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
@@ -1356,12 +1403,6 @@
class=property>width</code>’ property</a>
</ol>
- <pre><code class=css>
-<strong>@region <selector> {
- ... CSS styling rules ...
-}</strong>
-</code></pre>
-
<div class=example id=region-style-example>
<p>In the following example, the named flow ‘<code
class=css>article_flow</code>’ flows through ‘<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"> </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>
-
<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 ‘<code class=property>A</code>’ receives content from a
+ flow that contains region ‘<code class=property>B</code>’, the
+ content that flows into ‘<code class=property>B</code>’ does
+ not receive the region styling specified for region ‘<code
+ class=property>A</code>’.</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 ‘<code class=property>region-order</code>’
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 ‘<code class=property>auto</code>’ to the list of
+ invalid flow identifiers.
+
+ <li>Made ‘<code class=property>none</code>’ the initial value
+ for ‘<a href="#flow-into"><code
+ class=property>flow-into</code></a>’ and aligned with ‘<a
+ href="#flow-from"><code class=property>flow-from</code></a>’, as
+ explained in this <a
+ href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>.
+ Also allowed the ‘<code class=property>inherit</code>’ value
+ on ‘<a href="#flow-from"><code
+ class=property>flow-from</code></a>’ and ‘<a
+ href="#flow-into"><code class=property>flow-into</code></a>’ (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><ident> | auto</td>
+ <td><ident> | 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 '<ident>'. 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 <ifram>, <object>, <embed></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 <iframe>, <object>
+ and <embed> elements.</p>
+
<p>
If the ‘flow-into’ property is specified on an
<code class=
@@ -490,7 +516,7 @@
<tr>
<th>Value:</th>
- <td>none | <ident></td>
+ <td><ident> | 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 <selector> {
+ ... 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 <selector> {
- ... 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> </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 UTC