- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 24 Jan 2012 03:15:32 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv1806
Modified Files:
Overview.html Overview.src.html alternate-spec-style.css
Added Files:
issue_details.css issue_tracker.js
Log Message:
Added review comments from Fantasai
--- NEW FILE: issue_details.css ---
.issue-details{
margin:0.5em 0 0;
background:#eee;
padding:0.5em;
border:1px solid #ddd;
}
.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;
}
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.36
retrieving revision 1.37
diff -u -d -r1.36 -r1.37
--- Overview.html 16 Dec 2011 19:11:20 -0000 1.36
+++ Overview.html 24 Jan 2012 03:15:29 -0000 1.37
@@ -56,23 +56,15 @@
color: #2f2f2f;
}
- .big.note:before {
- content: "NOTE";
- display: block;
- color: rgba(0, 0, 0, 0.15);
- font-weight: bold;
- margin-bottom: 0.5em;
- }
-
#mobile-logo {
display: none;
}
-
</style>
<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="alternate spec style" type="text/css">
+ <!-- <script type="text/javascript" src="issue_tracker.js"></script> -->
<body>
<div class=head id=div-head>
@@ -85,14 +77,14 @@
<h1 id=css-regions-module>CSS Regions Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 December
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 January
+ 2012</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-regions-20111216/">http://www.w3.org/csswg/css3-regions</a>
+ href="http://www.w3.org/TR/2012/ED-css3-regions-20120124/">http://www.w3.org/csswg/css3-regions</a>
<dt>Latest version:
@@ -118,7 +110,7 @@
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2011 <a
+ rel=license>Copyright</a> © 2012 <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
@@ -151,8 +143,8 @@
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
document</h2>
- <p class="big note">This document uses an experimental style sheet. We
- welcome your feedback on the styles at <a
+ <p class="big note"><span class=note-prefix>Note </span>This document uses
+ an experimental style sheet. We welcome your feedback on the styles at <a
href="mailto:site-comments@w3.org">site-comments@w3.org</a>.</p>
<!--begin-status-->
@@ -547,8 +539,6 @@
<h2 id=relation-to-document-events><span class=secno>3. </span>Relation to
document events</h2>
- <p><em>This section is normative.</em>
-
<p>The CSS regions module does not alter the normal processing of events in
the document tree. In particular, if an event occurs on an element that is
part of a named flow, the <a
@@ -661,9 +651,7 @@
<p>Elements in a named flow are sequenced in document order.
- <div class=note>
- <p><em>This note is informative.</em></p>
-
+ <div class=note><span class=note-prefix>Note </span>
<p>The ‘<a href="#flow-into"><code
class=property>flow-into</code></a>’ property moves an element into
the flow and the interplay with selectors should be considered carefully.</p>
@@ -692,7 +680,7 @@
<p>The ‘<a href="#flow-into"><code
class=property>flow-into</code></a>’ property does not apply to the
<code class=css>::first-line</code> and <code
- class=css>::first-character</code>.
+ class=css>::first-letter</code> pseudo-elements.
<p>The effect of ‘<a href="#flow-into"><code
class=property>flow-into</code></a>’ on generated content such as
@@ -784,11 +772,11 @@
then the element does not format any content visually.
</dl>
- <p class=note>A region's document children are not visually formatted
- unless they are directed to a named flow referenced by one or more
- regions.
+ <p class=note><span class=note-prefix>Note </span>A region's document
+ children are not visually formatted unless they are directed to a named
+ flow referenced by one or more regions.
- <div class=note>
+ <div class=note><span class=note-prefix>Note </span>
<p>An element becomes a region when its ‘<a href="#flow-from"><code
class=property>flow-from</code></a>’ property is set to a valid
<ident> value, even if there is no content contributing to the
@@ -827,9 +815,7 @@
<p>If the ‘<code class=property>content</code>’ property is
defined on a region, it has no effect on the region's visual formatting.
- <div class=note>
- <p><em>This note is informative.</em></p>
-
+ <div class=note><span class=note-prefix>Note </span>
<p>With regions, an element may be split across multiple regions and these
regions may overlap (for example if they are absolutely positioned). So
fragments of the same element can overlap each other. Since each element
@@ -881,17 +867,17 @@
<h4 id=auto-width-on-regions><span class=secno>4.2.1. </span>Auto width on
regions</h4>
- <p>If a region's ‘<code class=property>width</code>’ property
- is computed to ‘<code class=property>auto</code>’, its
- resolved value is computed based on the region's <em>::before</em> and
+ <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
<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
- resolved value is computed based on the region's <em>::before</em> and
+ <p>A computed value of ‘<code class=property>auto</code>’ for a
+ region's ‘<code class=property>height</code>’ property becomes
+ a used value calculated 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
@@ -1113,7 +1099,7 @@
after a forced page/column/region break will be preserved. A forced
page/column/region break is a break that does not occur naturally.
- <p><strong>Note:</strong> When the ‘<code
+ <p><strong>Note</strong> When the ‘<code
class=property>avoid</code>’ value is used, regions may overflow. In
that case the ‘<a href="#dom-namedflow-overflow"><code
class=property>overflow</code></a>’ property specified on the region
@@ -1265,7 +1251,7 @@
<p class=caption>Different values for the region-overflow property</p>
</div>
- <div class=note>
+ <div class=note><span class=note-prefix>Note </span>
<p>The ‘<a href="#dom-namedflow-overflow"><code
class=property>overflow</code></a>’ property is honored on a
region: if region content overflows, such as the borders of elements on
@@ -1292,12 +1278,12 @@
<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>
- and a declarations block. The ‘<code class=css>@region</code>’
- rule and the selector constitute the region's ‘<code class=css>flow
- segment</code>’ selector. The region's flow segment selector
- specifies which range of elements in the flow are subject to the following
- declaration blocks: it applies to the range (see <a
- href="#DOM-LEVEL-2-TRAVERSAL-RANGE"
+ and a block of style rules. The ‘<code
+ class=css>@region</code>’ rule and the selector constitute the
+ region's ‘<code class=css>flow segment</code>’ selector. The
+ region's flow segment selector specifies which range of elements in the
+ flow are subject to the style rules in the following block: it applies to
+ the range (see <a href="#DOM-LEVEL-2-TRAVERSAL-RANGE"
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).
@@ -1477,7 +1463,7 @@
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
+ <div> Region styling does not apply to nested regions. For example, 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
@@ -1544,7 +1530,7 @@
be needed to accommodate for the additional space required to fit the
larger text or some regions may need to be removed for smaller text.
- <div class=note>
+ <div class=note><span class=note-prefix>Note </span>
<p>Since an element may be split into multiple regions, invoking <code
class=idl><a
href="http://www.w3.org/TR/cssom-view/#dom-element-getclientrects">getClientRects</a></code>
@@ -1687,9 +1673,9 @@
href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMException-INVALID_ACCESS_ERR"><code
class=idl>INVALID_ACCESS_ERR</code></a> error code.
- <div class=note> The Element interface extension is only available to
- regions that are document elements and not to regions that are
- pseudo-elements.</div>
+ <div class=note><span class=note-prefix>Note </span> The Element interface
+ extension is only available to regions that are document elements and not
+ to regions that are pseudo-elements.</div>
<h3 id=region-flow-layout-events><span class=secno>6.3. </span>Region flow
layout events</h3>
@@ -1795,6 +1781,12 @@
resolved" since these divs where not displayed.
<li>Minor updates to the alternate stylesheet.
+
+ <li>Removed "This section is normative" paragraphs since in CSS
+ specifications, sections are normative unless otherwise specified.
+
+ <li>Removed "This section is informative" paragraphs since in CSS
+ specifications notes are always informative.
</ul>
<h3 id="changes_from_June_09_2011"><span class=secno>10.2. </span>Changes
--- NEW FILE: issue_tracker.js ---
(function(){
// Singleton used to generate unique, incremental tokens
var TokenManager = (function(){
var index = 0;
return {
getToken: function(prefix){
index++;
return (prefix)? prefix + index : index;
}
}
})();
// Templating engine
var TemplateManager = (function(){
/*
Convert an HTML string into a valid node structure.
@param {String} string The string HTML to be converted to nodes
@return {DocumentFragment} a DocumentFragment with the node structure
*/
var _convertStringToNode = function(string){
// make a temporary container
var temp = document.createElement("div");
// let the parser turn the template into a valid node structure
temp.innerHTML = string;
// create document fragment as payload container
var fragment = document.createDocumentFragment();
while(temp.firstChild){
// extract nodes from the temp container into the payload container
fragment.appendChild(temp.firstChild)
}
return fragment;
}
var _createTemplateFn = function(replaceVars, template){
return function(data){
if (replaceVars.length && data !== null){
var templateClone = template;
for (var i = 0, len = replaceVars.length; i < len; i++){
// extract just the variable name, without template markers
var key = replaceVars[i].replace("{{","").replace("}}","");
// do we have a value for this template variable?
if (data[key]){
// global regex pattern based on template variable
var pattern = new RegExp(replaceVars[i], "g");
// replace template variable with real data
templateClone = templateClone.replace(pattern, data[key]);
}
}
}
// return a nicely wrapped node structure to be appended to the document
return _convertStringToNode(templateClone)
}
}
return {
/*
Create a template function from a string of HTML markup
Extract template variables for quick reuse.
@param {String} template A string of HTML with template variables marked as {{variable-name}}
@return {Function} A function that expects a data object to populate the template
*/
compile: function(template){
if (typeof template !== "string"){
throw new TypeError("Invalid templateString type. Expected 'String', got " + typeof templateString)
}
// look for all the varialbes to be replaced. they look like {{varName}}
var replaceVars = template.match(/{{[\w_-]*}}/g);
return _createTemplateFn(replaceVars, template)
}
}
})();
/*
Attach a LINK element with a stylesheet to the current document
@param {String} href The location of the stylesheet
@return {Undefined}
*/
var addStylesheet = function(href){
var el = document.createElement("link");
el.rel = "stylesheet";
el.type = "text/css";
el.href = href;
document.head.appendChild(el);
}
/*
Convert an object into an array.
Useful for treating NodeList or ClassList as arrays
@param {Object} list
@return {Array}
*/
var arrayify = function(list){
return [].slice.call(list);
};
var getXMLAsObject = function(url, callbackFn){
// create a script element as a payload container for the YQL response
var script = document.createElement("script"),
// URL to YQL service used for cross-domain requests
// see http://developer.yahoo.com/yql/guide/
baseURL = "http://query.yahooapis.com/v1/public/yql",
// get an unique token for the script element (used to identify the callback and cleanup)
temp = TokenManager.getToken("issue_tracker_");
// create a public wrapper for the callback function because we are working in a private scope
window[temp] = function(fn){
return function(response){
// run the callback within the private scope
fn.call(this, response);
// cleanup
var el = document.getElementById(temp);
el.parentNode.removeChild(el);
delete window[temp];
}
}(callbackFn);
// data to be added to the URL request
var data = {
// see http://developer.yahoo.com/yql/guide/select_statement.html
q: encodeURIComponent("select * from xml where url='" + url + "'"),
format: "json",
callback: temp
}
var paramArr = [];
for (var i in data){
paramArr.push(i + "=" + data[i])
}
script.id = temp;
script.src = baseURL + "?" + paramArr.join("&");
script.type = "text/javascript";
// trigger the JSONP request
document.head.appendChild(script)
};
function getAllBugLinks(){
var issueMarkers = document.querySelectorAll(".issue-marker");
// container for links to bugs in Bugzilla
var issueLinks = [];
// convert NodeList to Array
issueMarkers = arrayify(issueMarkers);
// extract links to bugs in Bugzilla
issueMarkers.forEach(function(item, index){
// get all anchors from this issue maker
var anchors = item.querySelectorAll("a");
// convert NodeList to Array
anchors = arrayify(anchors);
anchors.forEach(function(item, index){
issueLinks.push(item)
});
});
return issueLinks;
}
document.addEventListener("DOMContentLoaded", function(){
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>';
var issueTemplate = TemplateManager.compile(issueTemplateString);
// get anchors with links to bugs in Bugzilla
var issueLinks = getAllBugLinks();
// run through bug links and request details
issueLinks.forEach(function(item, index){
if (!item.href){
return
}
var url = item.href;
if (url.indexOf("&ctype=xml") < 0){
url += "&ctype=xml";
}
getXMLAsObject(url, function(data){
// 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 node = issueTemplate(bugData);
item.parentNode.insertBefore(node, item.nextSibling);
}
});
})
}, false)
})()
Index: alternate-spec-style.css
===================================================================
RCS file: /sources/public/csswg/css3-regions/alternate-spec-style.css,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- alternate-spec-style.css 16 Dec 2011 19:11:20 -0000 1.17
+++ alternate-spec-style.css 24 Jan 2012 03:15:30 -0000 1.18
@@ -219,8 +219,7 @@
background: none;
}
-div.note:before {
- content: "Note " counter(note);
+span.note-prefix {
background: none;
padding: 0;
margin: 0 0 0.7em 0;
@@ -229,6 +228,10 @@
display: block;
}
+span.note-prefix::after {
+ content: counter(note);
+}
+
div.note p {
color: black;
}
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.41
retrieving revision 1.42
diff -u -d -r1.41 -r1.42
--- Overview.src.html 16 Dec 2011 19:11:20 -0000 1.41
+++ Overview.src.html 24 Jan 2012 03:15:30 -0000 1.42
@@ -59,25 +59,18 @@
color: #2f2f2f;
}
- .big.note:before {
- content: "NOTE";
- display: block;
- color: rgba(0, 0, 0, 0.15);
- font-weight: bold;
- margin-bottom: 0.5em;
- }
-
#mobile-logo {
display: none;
}
-
</style>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
- <link id="st" href="alternate-spec-style.css" rel="stylesheet"
+ <link id="st" href="alternate-spec-style.css" rel="stylesheet"
type="text/css" title="alternate spec style">
+
+ <!-- <script type="text/javascript" src="issue_tracker.js"></script> -->
</head>
@@ -137,7 +130,7 @@
<h2 class="no-num no-toc" id="status-of-this-document">Status of this
document</h2>
- <p class="big note">This document uses an experimental style
+ <p class="big note"><span class="note-prefix">Note </span>This document uses an experimental style
sheet. We welcome your feedback on the styles at
<a href="mailto:site-comments@w3.org">site-comments@w3.org</a>.</p>
@@ -391,8 +384,6 @@
<h2 id="relation-to-document-events">Relation to document events</h2>
- <p><em>This section is normative.</em></p>
-
<p>The CSS regions module does not alter the normal processing of
events in the document tree. In particular, if an event occurs on an
element that is part of a named flow, the <a href=
@@ -496,8 +487,7 @@
<p>Elements in a named flow are sequenced in document order.</p>
- <div class="note">
- <p><em>This note is informative.</em></p>
+ <div class="note"><span class="note-prefix">Note </span>
<p>The 'flow-into' property moves an
element into the flow and the interplay with selectors should be considered carefully.</p>
<p>For example, </p>
@@ -514,7 +504,7 @@
</div>
- <p>The 'flow-into' property does not apply to the <code class="css">::first-line</code> and <code class="css">::first-character</code>.</p>
+ <p>The 'flow-into' property does not apply to the <code class="css">::first-line</code> and <code class="css">::first-letter</code> pseudo-elements.</p>
<p>The effect of 'flow-into' on generated content such as <code class="css">::marker</code>,
<code class="css">::before</code> and <code class="css">::after</code>
@@ -598,10 +588,10 @@
</dd>
</dl>
- <p class="note">A region's document children are not visually formatted unless they are directed to a named flow
+ <p class="note"><span class="note-prefix">Note </span>A region's document children are not visually formatted unless they are directed to a named flow
referenced by one or more regions.</p>
- <div class="note"><p>An element becomes a region when its 'flow-from' property is set to a valid
+ <div class="note"><span class="note-prefix">Note </span><p>An element becomes a region when its 'flow-from' property is set to a valid
<ident> value, even if there is no content contributing to the referenced flow.
For example:</p>
<pre>
@@ -633,8 +623,7 @@
<p>If the 'content' property is defined on a region, it has no effect on the region's
visual formatting.</p>
- <div class="note">
- <p><em>This note is informative.</em></p>
+ <div class="note"><span class="note-prefix">Note </span>
<p>With regions, an element may be split across multiple regions and these
regions may overlap (for example if they are absolutely positioned).
So fragments of the same element can overlap each other.
@@ -686,13 +675,13 @@
<h4>Auto width on regions</h4>
- <p>If a region's 'width' property is computed to 'auto', its resolved value is computed based on the
+ <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>
<h4>Auto height on regions</h4>
- <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>
+ <p>A computed value of 'auto' for a region's 'height' property becomes a used value calculated based on
+ the region's <em>::before</em> and <em>::after</em> generated content only.</p>
<h3 id=
"region-flow-break">Region
@@ -928,7 +917,7 @@
after a forced page/column/region break will be preserved. A forced
page/column/region break is a break that does not occur naturally.</p>
- <p><strong>Note:</strong> When the 'avoid' value is used, regions may
+ <p><strong>Note</strong> When the 'avoid' value is used, regions may
overflow. In that case the 'overflow' property specified on the region
element should be used to determine how to render the overflow.</p>
@@ -1086,7 +1075,7 @@
property</p>
</div>
- <div class="note">
+ <div class="note"><span class="note-prefix">Note </span>
<p>The 'overflow' property is honored on a region: if region content overflows,
such as the borders of elements on the
last line, the 'overflow' property controls the visibility of the overflowing
@@ -1107,10 +1096,10 @@
<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
+ and a block of style rules. The '@region' rule and the selector constitute
the region's 'flow segment' selector. The region's flow segment selector
- specifies which range of elements in the flow are subject to the following
- declaration blocks: it applies to the range (see
+ specifies which range of elements in the flow are subject to the style rules in the
+ following block: it applies to the range (see
[[DOM-LEVEL-2-TRAVERSAL-RANGE]]) from the region's flow that flows in the
selected region(s).</p>
@@ -1241,8 +1230,8 @@
participate in the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS Cascading
order</a> as defined in [[!CSS21]].</p>
- <div class="note">
- Region styling does not apply to nested regions. If a region
+ <div>
+ Region styling does not apply to nested regions. For example, 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>
@@ -1293,7 +1282,7 @@
regions may be needed to accommodate for the additional space required to
fit the larger text or some regions may need to be removed for smaller text.</p>
- <div class="note">
+ <div class="note"><span class="note-prefix">Note </span>
<p>Since an element may be split into multiple regions, invoking
<code class="idl"><a href=
"http://www.w3.org/TR/cssom-view/#dom-element-getclientrects">getClientRects</a></code>
@@ -1416,7 +1405,7 @@
method throws a <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-17189187"><code class="idl">DOMException</code></a> with the
<a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMException-INVALID_ACCESS_ERR"><code class="idl">INVALID_ACCESS_ERR</code></a> error code.</p>
- <div class="note">
+ <div class="note"><span class="note-prefix">Note </span>
The Element interface extension is only available to regions that are
document elements and not to regions that are pseudo-elements.
</div>
@@ -1482,6 +1471,9 @@
previous pass at removing pseudo-code from the examples).</li>
<li>Removed divs with class set to "issue moved", "issue stale" and "issue resolved" since these divs where not displayed.
<li>Minor updates to the alternate stylesheet.</li>
+ <li>Removed "This section is normative" paragraphs since in CSS specifications, sections are normative unless
+ otherwise specified.</li>
+ <li>Removed "This section is informative" paragraphs since in CSS specifications notes are always informative.</li>
</ul>
Received on Tuesday, 24 January 2012 03:15:39 UTC