- 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