Integrated bug descriptions into markers. Tweaked stylesheet.

Author: vhardy

css3-regions/Overview.html

@@ -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 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 January
      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 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
 
   <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 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
    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 @@ <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
    <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 &lsquo;<code
    class=property>A</code>&rsquo; and to flow an article's text from region
    &lsquo;<code class=css>1</code>&rsquo;, to region &lsquo;<code
@@ -486,6 +563,14 @@ <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions
 
   <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 @@ <h3 id=the-flow-from-property><span class=secno>4.2. </span>The &lsquo;<a
    class=property>flow-from</code></a>&rsquo; 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 @@ <h3 id=the-flow-from-property><span class=secno>4.2. </span>The &lsquo;<a
    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 @@ <h3 id=the-flow-from-property><span class=secno>4.2. </span>The &lsquo;<a
   <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 &lsquo;<code class=property>auto</code>&rsquo; for a
    region's &lsquo;<code class=property>width</code>&rsquo; property becomes
    a used value calculated based on the region's <em>::before</em> and
@@ -1234,8 +1334,12 @@ <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
    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 &lsquo;<code class=css>flow
    segment</code>&rsquo; may match any of the selectors found in the style
@@ -1244,8 +1348,12 @@ <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
 
   <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 @@ <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
     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 &lsquo;<code
    class=css>@region</code>&rsquo; rule is calculated as <a
    href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the
@@ -1423,7 +1538,13 @@ <h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
 
   <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 @@ <h3 id=processing-model><span class=secno>5.1. </span>Processing model</h3>
   <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 @@ <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
    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 @@ <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
   <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 @@ <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
 [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 @@ <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
   <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=extension-to-the-element-interface><span class=secno>6.2.
   <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 @@ <h3 id="changes_from_June_09_2011"><span class=secno>10.1. </span>Changes
     class=property>partial</code>&rsquo; 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 @@ <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
 
    <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.