- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 31 Jan 2012 11:58:47 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv31102
Modified Files:
Overview.html Overview.src.html alternate-spec-style.css
issue_tracker.js
Log Message:
Integrated bug descriptions into markers. Tweaked stylesheet.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.42
retrieving revision 1.43
diff -u -d -r1.42 -r1.43
--- Overview.html 25 Jan 2012 20:00:31 -0000 1.42
+++ Overview.html 31 Jan 2012 11:58:45 -0000 1.43
@@ -16,11 +16,6 @@
/* License font the following two fonts: fonts/Droid-Serif-fontfacekit/Google Android License.txt */
@import url(fonts/Droid-Serif-fontfacekit/stylesheet.css);
@import url(fonts/Droid-Sans-Mono-fontfacekit/stylesheet.css);
-
- /*
- @import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
- @import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
- */
a.toggle {
position: fixed;
@@ -59,6 +54,60 @@
#mobile-logo {
display: none;
}
+
+ @media screen and (min-width: 58em){
+ .issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
+ text-align: right;
+ }
+ }
+
+ @media screen and (max-width: 58em){
+ .issue-marker {
+ }
+
+ .issue-marker a:link {
+ padding-left: 0.5em;
+ }
+ }
+
+
+
+ .issue-marker {
+ background:#eee;
+ border:1px solid #ddd;
+ font-size: 1em;
+ }
+
+ .issue-marker a:link {
+ color: #c00;
+ background: none;
+ font-weight: normal;
+ padding-right: 0.5em;
+ }
+
+ .issue-details {
+ padding:0.5em;
+ font-size: 0.8em;
+ line-height: 1.5;
+ }
+
+ .issue-details p{
+ padding:0;
+ margin:0;
+ }
+
+ .issue-details .status{
+ background:#333;
+ color:white;
+ float:left;
+ padding:0.15em 0.8em;
+ font-size:0.8em;
+ margin-right:0.8em;
+ text-transform:uppercase;
+ }
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
@@ -77,14 +126,14 @@
<h1 id=css-regions-module>CSS Regions Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 January
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 January
2012</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2012/ED-css3-regions-20120125/">http://www.w3.org/csswg/css3-regions</a>
+ href="http://www.w3.org/TR/2012/ED-css3-regions-20120131/">http://www.w3.org/csswg/css3-regions</a>
<dt>Latest version:
@@ -97,6 +146,12 @@
href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a>
+ <dt>Issues:
+
+ <dd><a
+ href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=CSS%20Regions&resolution=---">Bugzilla
+ Bugs for CSS regions</a>
+
<dt>Editors:
<dd class=vcard><span class=fn>Vincent Hardy</span>, <span
@@ -301,6 +356,13 @@
<p><em>This section is non-normative.</em>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15159">Bug-15159</a>
+ <div class=issue-details>
+ <p class=short-desc>Add code samples to the CSS regions use cases page</p>
+ </div>
+ </div>
+
<p>Capturing the complex layouts of a typical magazine, newspaper, or
textbook requires capabilities beyond those available in existing CSS
modules. This is the purpose of the CSS regions module.
@@ -315,6 +377,14 @@
another, where the areas are the multi-column element's column boxes and
the flow is made of the multi-column element's children.
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15733">Bug-15733</a>
+ <div class=issue-details>
+ <p class=short-desc>Should the region specification define a mechanism to
+ create blocks that can be regions with CSS syntax?</p>
+ </div>
+ </div>
+
<p>However, for more complex layouts, content needs to flow from one area
of the page to the next without limitation of the areas' sizes and
positions. These arbitrary areas are the target of specific content flows.
@@ -334,6 +404,13 @@
<p class=caption>Layout requiring sophisticated content flow</p>
</div>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15131">Bug-15131</a>
+ <div class=issue-details>
+ <p class=short-desc>Add layout to initial example</p>
+ </div>
+ </div>
+
<p>The designer's intent is to position an image in region ‘<code
class=property>A</code>’ and to flow an article's text from region
‘<code class=css>1</code>’, to region ‘<code
@@ -486,6 +563,14 @@
<h3 id=regions><span class=secno>2.1. </span>Regions</h3>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15186">Bug-15186</a>
+ <div class=issue-details>
+ <p class=short-desc>Is a mechanism to auto-generate regions necessary in
+ order to support reusable style sheets?</p>
+ </div>
+ </div>
+
<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 <a href="#named-flow0"><em>named
@@ -694,8 +779,12 @@
class=property>flow-from</code></a>’ property makes an element a
region and associates it with a named flow.
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a></div>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15191">Bug-15191</a>
+ <div class=issue-details>
+ <p class=short-desc>Should we allow multi-column elements to be regions?</p>
+ </div>
+ </div>
<table class=propdef summary="flow-from property definition">
<tbody>
@@ -801,8 +890,12 @@
empty named flow and, consequently, its children are not formatted
visually.</div>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a></div>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15189">Bug-15189</a>
+ <div class=issue-details>
+ <p class=short-desc>Should regions be non-breakable?</p>
+ </div>
+ </div>
<p><span title=region>Regions</span> create a new <a
href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking
@@ -862,6 +955,13 @@
<h4 id=auto-width-on-regions><span class=secno>4.2.1. </span>Auto width on
regions</h4>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15741">Bug-15741</a>
+ <div class=issue-details>
+ <p class=short-desc>Regions intrinsic size</p>
+ </div>
+ </div>
+
<p>A computed value of ‘<code class=property>auto</code>’ for a
region's ‘<code class=property>width</code>’ property becomes
a used value calculated based on the region's <em>::before</em> and
@@ -1234,8 +1334,12 @@
rel=biblioentry>[DOM-LEVEL-2-TRAVERSAL-RANGE]<!--{{DOM-LEVEL-2-TRAVERSAL-RANGE}}--></a>)
from the region's flow that flows in the selected region(s).
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a></div>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15713">Bug-15713</a>
+ <div class=issue-details>
+ <p class=short-desc>Model for styling element fragments</p>
+ </div>
+ </div>
<p>Elements that are fully or partially in the ‘<code class=css>flow
segment</code>’ may match any of the selectors found in the style
@@ -1244,8 +1348,12 @@
<p>Only a limited list of properties can be set in a region style rule:
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a></div>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15190">Bug-15190</a>
+ <div class=issue-details>
+ <p class=short-desc>List of region style properties</p>
+ </div>
+ </div>
<ol>
<li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a>
@@ -1396,6 +1504,13 @@
class=html>region_1</code> is styled with this rule.</p>
</div>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15734">Bug-15734</a>
+ <div class=issue-details>
+ <p class=short-desc>@region and specificity</p>
+ </div>
+ </div>
+
<p>The specificity of the selectors in a ‘<code
class=css>@region</code>’ rule is calculated as <a
href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the
@@ -1423,7 +1538,13 @@
<h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
- <p><em>This section is normative.</em>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15188">Bug-15188</a>
+ <div class=issue-details>
+ <p class=short-desc>add functionality for having textual describtion like
+ "continued here" or "continued on page x" to regions.</p>
+ </div>
+ </div>
<p>It can be useful to visually mark the content to highlight that a
content thread is flowing from region to region. For example, a marker
@@ -1467,7 +1588,12 @@
<h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
and CSS regions</h2>
- <p><em>This section is normative.</em>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15679">Bug-15679</a>
+ <div class=issue-details>
+ <p class=short-desc>elementFromPoint and CSS regions</p>
+ </div>
+ </div>
<p>Since content may flow into multiple regions, authors need a way to
determine if there are enough regions to flow all the content from a named
@@ -1476,6 +1602,13 @@
content on a mobile phone with a small screen may require more regions
than on a large desktop display.
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15010">Bug-15010</a>
+ <div class=issue-details>
+ <p class=short-desc>Need to add a CSSRegionRule to Region OM</p>
+ </div>
+ </div>
+
<p>Another example where creating more regions might be needed: if the user
may change the font size of text flowing through regions, new regions may
be needed to accommodate for the additional space required to fit the
@@ -1492,6 +1625,14 @@
<h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
interface</h3>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?14948">Bug-14948</a>
+ <div class=issue-details>
+ <p class=short-desc>What should getFlowByName return if there is no flow
+ with the given name?</p>
+ </div>
+ </div>
+
<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
@@ -1501,8 +1642,7 @@
[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>
-getFlowByName(<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>
@@ -1536,9 +1676,12 @@
<p>The <dfn
id=dom-namedflow-getregionsbycontentnodes>getRegionsByContentNode()</dfn>
method gets a collection of regions that contain at least part of the
- target content node. This can be used to navigate by bookmark in paginated
- view: the method returns regions containing the bookmarked element, which
- are then passed to pagination UI to show desired region or page.
+ target content node. The returned <code class=idl>NodeList</code> is live:
+ every time the method is called with the same <code class=idl>node</code>
+ argument, it must return the same object, and the object is always up to
+ date.This can be used to navigate by bookmark in paginated view: the
+ method returns regions containing the bookmarked element, which are then
+ passed to pagination UI to show desired region or page.
<p>With the <a href="#dom-namedflow"><code class=idl>NamedFlow</code></a>
interface, authors can easily check if all content has been fitted into
@@ -1631,6 +1774,13 @@
<h3 id=region-flow-layout-events><span class=secno>6.3. </span>Region flow
layout events</h3>
+ <div class=issue-marker> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?15009">Bug-15009</a>
+ <div class=issue-details>
+ <p class=short-desc>Should we have additional events for CSS Regions?</p>
+ </div>
+ </div>
+
<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
@@ -1764,6 +1914,10 @@
class=property>partial</code>’ styling needs to be defined. See <a
href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0480.html">mailing
list feedback</a>.
+
+ <li>Clarified that the <code>NodeList</code> returned by <a
+ href="#dom-namedflow-getregionsbycontentnodes"><code>getRegionsByContentNode</code></a>
+ is live.
</ul>
<h3 id="changes_from_June_09_2011"><span class=secno>10.2. </span>Changes
@@ -2047,6 +2201,8 @@
<li>Arno Gourdol, Adobe Systems, Inc.
+ <li>Håkon Wium Lie, Opera Software.
+
<li>Mihnea Ovidenie, Adobe Systems, Inc.
<li>Virgil Palanciuc, Adobe Systems, Inc.
Index: issue_tracker.js
===================================================================
RCS file: /sources/public/csswg/css3-regions/issue_tracker.js,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- issue_tracker.js 24 Jan 2012 03:15:30 -0000 1.1
+++ issue_tracker.js 31 Jan 2012 11:58:45 -0000 1.2
@@ -173,13 +173,13 @@
function getAllBugLinks(){
var issueMarkers = document.querySelectorAll(".issue-marker");
- // container for links to bugs in Bugzilla
+ // container for links to bugs in <span class="note-prefixNote
var issueLinks = [];
// convert NodeList to Array
issueMarkers = arrayify(issueMarkers);
- // extract links to bugs in Bugzilla
+ // extract links to bugs in <span class="note-prefixNote
issueMarkers.forEach(function(item, index){
// get all anchors from this issue maker
@@ -199,21 +199,28 @@
document.addEventListener("DOMContentLoaded", function(){
- addStylesheet("issue_details.css");
+ // addStylesheet("issue_details.css");
// template for issue details
var issueTemplateString = '<div class="issue-details"> \
<span class="status" title="Bug status in Bugzilla">{{bug_status}}</span> \
<p>{{short_desc}}</p> \
</div>';
+
+ // <div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a></div>
+ var issueTemplateString = '<div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?{{bug_id}}">Bug-{{bug_id}}</a> \
+ <div class="issue-details"> \
+ <p class="short-desc">{{short_desc}}</p> \
+ </div>\
+ </div>';
var issueTemplate = TemplateManager.compile(issueTemplateString);
- // get anchors with links to bugs in Bugzilla
+ // get anchors with links to bugs in <span class="note-prefixNote
var issueLinks = getAllBugLinks();
// run through bug links and request details
- issueLinks.forEach(function(item, index){
+ /* issueLinks.forEach(function(item, index){
if (!item.href){
return
}
@@ -227,15 +234,59 @@
// validate response from the service
if (data && data.query && data.query.results && data.query.results.bugzilla && data.query.results.bugzilla.bug){
- var bugData = data.query.results.bugzilla.bug;
+ var bugData = data.query.results.<span class="note-prefixNote.bug;
var node = issueTemplate(bugData);
item.parentNode.insertBefore(node, item.nextSibling);
+
+ // console.log(JSON.stringify(data));
}
});
- })
+ }); */
+
+ // Get all the bugs on regions.
+ var bugList = [15679,
+ ,14749
+ ,14948
+ ,15009
+ ,15010
+ ,15116
+ ,15741
+ ,15131
+ ,15159
+ ,15186
+ ,15187
+ ,15188
+ ,15189
+ ,15190
+ ,15191
+ ,15713
+ ,15733
+ ,15734]
+
+ var bugsURL = "https://www.w3.org/Bugs/Public/show_bug.cgi?ctype=xml";
+
+ bugList.forEach(function (item, index) {
+ bugsURL += "&id=" + item;
+ });
+
+ // Compare the bugs in Bugzilla with the ones found in the specification.
+
+ // var openBugsURL = "https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=CSS%20Regions&resolution=---&ctype=xml";
+ /* var insertHere = document.getElementById('issues-place-holder');
+
+ getXMLAsObject(bugsURL, function (data) {
+ // validate response from the service
+ if (data && data.query && data.query.results && data.query.results.bugzilla && data.query.results.bugzilla.bug){
+ // console.log(JSON.stringify(data));
+ data.query.results.bugzilla.bug.forEach(function (item, index) {
+ var node = issueTemplate(item);
+ insertHere.appendChild(node);
+ });
+ }
+ });*/
}, false)
Index: alternate-spec-style.css
===================================================================
RCS file: /sources/public/csswg/css3-regions/alternate-spec-style.css,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -d -r1.18 -r1.19
--- alternate-spec-style.css 24 Jan 2012 03:15:30 -0000 1.18
+++ alternate-spec-style.css 31 Jan 2012 11:58:45 -0000 1.19
@@ -1,6 +1,6 @@
body {
font-family: 'DroidSerifRegular', 'Droid Serif', serif;
- font-size: 14px;
+ font-size: 15px;
color: #2f2f2f;
line-height: 1.7em;
padding-left: 8em;
@@ -16,7 +16,7 @@
box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.2);
}
-@media screen and (min-width: 68em){
+@media screen and (min-width: 58em){
body {
max-width: 50em;
}
@@ -132,11 +132,11 @@
}
div.example {
- background: none;
+ background-color: rgba(0, 0, 0, 0.04);
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-top: thin solid rgba(0, 0, 0, 0.2);
+ border-bottom: thin solid rgba(0, 0, 0, 0.2);
border-left: none;
position: relative;
clear: both;
@@ -374,17 +374,3 @@
min-width: 28ex;
}
-
-
-.issue-marker {
- position: absolute;
- width: 20ex;
- margin-left: -22ex;
- text-align: right;
- }
-
-.issue-marker a {
- color: #c00;
- background: none;
- font-weight: normal;
- }
\ No newline at end of file
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.47
retrieving revision 1.48
diff -u -d -r1.47 -r1.48
--- Overview.src.html 25 Jan 2012 20:00:32 -0000 1.47
+++ Overview.src.html 31 Jan 2012 11:58:45 -0000 1.48
@@ -19,11 +19,6 @@
/* License font the following two fonts: fonts/Droid-Serif-fontfacekit/Google Android License.txt */
@import url(fonts/Droid-Serif-fontfacekit/stylesheet.css);
@import url(fonts/Droid-Sans-Mono-fontfacekit/stylesheet.css);
-
- /*
- @import url(http://fonts.googleapis.com/css?family=Droid+Serif:700,400,400italic,700italic);
- @import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
- */
a.toggle {
position: fixed;
@@ -62,6 +57,60 @@
#mobile-logo {
display: none;
}
+
+ @media screen and (min-width: 58em){
+ .issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
+ text-align: right;
+ }
+ }
+
+ @media screen and (max-width: 58em){
+ .issue-marker {
+ }
+
+ .issue-marker a:link {
+ padding-left: 0.5em;
+ }
+ }
+
+
+
+ .issue-marker {
+ background:#eee;
+ border:1px solid #ddd;
+ font-size: 1em;
+ }
+
+ .issue-marker a:link {
+ color: #c00;
+ background: none;
+ font-weight: normal;
+ padding-right: 0.5em;
+ }
+
+ .issue-details {
+ padding:0.5em;
+ font-size: 0.8em;
+ line-height: 1.5;
+ }
+
+ .issue-details p{
+ padding:0;
+ margin:0;
+ }
+
+ .issue-details .status{
+ background:#333;
+ color:white;
+ float:left;
+ padding:0.15em 0.8em;
+ font-size:0.8em;
+ margin-right:0.8em;
+ text-transform:uppercase;
+ }
</style>
<link rel="stylesheet" type="text/css"
@@ -105,6 +154,9 @@
<dt>Previous version:</dt>
<dd><a href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a>
+
+ <dt>Issues:</dt>
+ <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=CSS%20Regions&resolution=---">Bugzilla Bugs for CSS regions</dd>
<dt>Editors:</dt>
@@ -117,7 +169,7 @@
</dl><!--begin-copyright--><!--end-copyright-->
<hr title="Separator for header">
</div>
-
+
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>The CSS regions module allows content to flow across multiple areas
@@ -163,6 +215,16 @@
<p><em>This section is non-normative.</em></p>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15159">Bug-15159</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Add code samples to the CSS regions use
+ cases page</p>
+ </div>
+ </div>
+
<p>Capturing the complex layouts of a typical magazine, newspaper, or
textbook requires capabilities beyond those available in existing CSS
modules. This is the purpose of the CSS regions module.</p>
@@ -175,7 +237,17 @@
<p>The multi-column model is an example of flowing content from one area to
another, where the areas are the multi-column element's column boxes and
the flow is made of the multi-column element's children.</p>
+
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15733">Bug-15733</a>
+ <div class="issue-details">
+ <p class="short-desc">Should the region specification define a
+ mechanism to create blocks that can be regions with CSS
+ syntax?</p>
+ </div>
+ </div>
<p>However, for more complex layouts, content needs to flow from one area
of the page to the next without limitation of the areas' sizes and
positions. These arbitrary areas are the target of specific content flows.
@@ -188,6 +260,7 @@
<p>Consider the layout illustrated in figure 1.</p>
+
<div class="figure">
<img src="images/regions-intro.svg" width="400" alt=
"multiple chained regions which should receive content from a flow">
@@ -195,9 +268,19 @@
<p class="caption">Layout requiring sophisticated content flow</p>
</div>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15131">Bug-15131</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Add layout to initial example</p>
+ </div>
+ </div>
+
<p>The designer's intent is to position an image in region 'A' and to flow
an article's text from region '1', to region '2', '3' and '4'.</p>
+
<p>The following code snippet shows the content to flow between the regions
1, 2, 3 and 4.</p>
<pre>
@@ -334,12 +417,22 @@
<h3 id="regions">Regions</h3>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15186">Bug-15186</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Is a mechanism to auto-generate regions
+ necessary in order to support reusable style sheets?</p>
+ </div>
+ </div>
+
<p class="index" title="region" id="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 'flow-from'
property).</p>
-
+
<h3 id="named-flow">Named flow</h3>
<p>A <dfn>named flow</dfn> is the ordered sequence of elements
@@ -512,8 +605,15 @@
<h3 id="the-flow-from-property">The 'flow-from' property</h3>
<p>The 'flow-from' property makes an element a region and associates it with a named flow.</p>
- <div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a></div>
-
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15191">Bug-15191</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Should we allow multi-column elements to
+ be regions?</p>
+ </div>
+ </div>
<table class="propdef" summary="flow-from property definition">
<tr>
<th>Name:</th>
@@ -615,7 +715,15 @@
are not formatted visually.
</div>
- <div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a></div>
+
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15189">Bug-15189</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Should regions be non-breakable?</p>
+ </div>
+ </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>
@@ -671,6 +779,15 @@
<h4>Auto width on regions</h4>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15741">Bug-15741</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Regions intrinsic size</p>
+ </div>
+ </div>
+
<p>A computed value of 'auto' for a region's 'width' property becomes a used value calculated based on the
region's <em>::before</em> and <em>::after</em> generated content only.</p>
@@ -1050,8 +1167,15 @@
[[DOM-LEVEL-2-TRAVERSAL-RANGE]]) from the region's flow that flows in the
selected region(s).</p>
- <div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a></div>
-
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15713">Bug-15713</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Model for styling element fragments</p>
+ </div>
+ </div>
+
<p>Elements that are fully or partially in the 'flow segment' may match any of the
selectors found in the style rule. However, the style rules only apply to the
portion of the element that falls into the corresponding region.</p>
@@ -1059,7 +1183,15 @@
<p>Only a limited list of properties can be set in a region style rule:</p>
- <div class="issue-marker"><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a></div>
+
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15190">Bug-15190</a>
+
+ <div class="issue-details">
+ <p class="short-desc">List of region style properties</p>
+ </div>
+ </div>
<ol>
<li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li>
@@ -1170,6 +1302,15 @@
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15734">Bug-15734</a>
+
+ <div class="issue-details">
+ <p class="short-desc">@region and specificity</p>
+ </div>
+ </div>
+
<p>The specificity of the selectors in a '@region' rule is calculated as
<a href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in
the CSS Selectors module (see [[SELECT]]). In other words, the '@region'
@@ -1190,7 +1331,16 @@
<h2 id="pseudo_elements">Pseudo-elements</h2>
- <p><em>This section is normative.</em></p>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15188">Bug-15188</a>
+
+ <div class="issue-details">
+ <p class="short-desc">add functionality for having textual
+ describtion like "continued here" or "continued on page x" to
+ regions.</p>
+ </div>
+ </div>
<p>It can be useful to visually mark the content to highlight
that a content thread is flowing from region to region. For example, a marker such
@@ -1220,7 +1370,14 @@
<h2 id="cssom_view_and_css_regions">CSSOM view and CSS regions</h2>
- <p><em>This section is normative.</em></p>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15679">Bug-15679</a>
+
+ <div class="issue-details">
+ <p class="short-desc">elementFromPoint and CSS regions</p>
+ </div>
+ </div>
<p>Since content may flow into multiple regions, authors need a way to
determine if there are enough regions to flow all the content from a named
@@ -1229,6 +1386,16 @@
content on a mobile phone with a small screen may require more regions than
on a large desktop display.</p>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15010">Bug-15010</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Need to add a CSSRegionRule to Region
+ OM</p>
+ </div>
+ </div>
+
<p>Another example where creating more regions might be needed: if
the user may change the font size of text flowing through regions, new
regions may be needed to accommodate for the additional space required to
@@ -1244,6 +1411,16 @@
<h3 id="the-namedflow-interface">The NamedFlow interface</h3>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?14948">Bug-14948</a>
+
+ <div class="issue-details">
+ <p class="short-desc">What should getFlowByName return if there
+ is no flow with the given name?</p>
+ </div>
+ </div>
+
<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
@@ -1251,9 +1428,7 @@
<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>
-getFlowByName(<a href=
-"http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMString">DOMString</a> name);
+ <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>
@@ -1278,7 +1453,10 @@
</p>
<p>The <dfn id="dom-namedflow-getregionsbycontentnodes">getRegionsByContentNode()</dfn> method gets a
- collection of regions that contain at least part of the target content node. This can be used
+ collection of regions that contain at least part of the target content node. The returned
+ <code class="idl">NodeList</code> is live: every time the method is called with the
+ same <code class="idl">node</code> argument, it must return the same object, and the
+ object is always up to date.This can be used
to navigate by bookmark in paginated view: the method returns regions containing the
bookmarked element, which are then passed to pagination UI to show desired region or page.</p>
@@ -1364,6 +1542,16 @@
<h3 id="region-flow-layout-events">Region flow layout events</h3>
+ <div class="issue-marker">
+ <a href=
+ "https://www.w3.org/Bugs/Public/show_bug.cgi?15009">Bug-15009</a>
+
+ <div class="issue-details">
+ <p class="short-desc">Should we have additional events for CSS
+ Regions?</p>
+ </div>
+ </div>
+
<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>
@@ -1436,6 +1624,7 @@
<li>Clarified that @region style rules only apply to the 'portion' of an element that falls into
the corresponding region and added an issue that the model for 'partial' styling needs to
be defined. See <a href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0480.html">mailing list feedback</a>.</li>
+ <li>Clarified that the <code>NodeList</code> returned by <code>getRegionsByContentNode</code> is live.</li>
</ul>
@@ -1573,6 +1762,7 @@
<li>Andrei Bucur, Adobe Systems, Inc.</li>
<li>Alexandru Chiculita, Adobe Systems, Inc.</li>
<li>Arno Gourdol, Adobe Systems, Inc.</li>
+ <li>Håkon Wium Lie, Opera Software.</li>
<li>Mihnea Ovidenie, Adobe Systems, Inc.</li>
<li>Virgil Palanciuc, Adobe Systems, Inc.</li>
<li>Christoph Päper</li>
Received on Tuesday, 31 January 2012 11:58:50 UTC