[css-regions] update ::region to match ::content

Author: astearns

css-regions/Overview.html

@@ -12,7 +12,7 @@
    rel=dcterms.rights>
   <meta content="CSS Regions Module Level 1" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-11-26 name=dcterms.date>
+  <meta content=2013-11-27 name=dcterms.date>
   <meta content="Vincent Hardy" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
   <meta content="Alan Stearns" name=dcterms.creator>
@@ -46,7 +46,7 @@
 
    <h1 id=css-regions-module>CSS Regions Module Level 1</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 November
     2013</h2>
 
    <dl>
@@ -235,7 +235,7 @@ <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
       </span>The region-fragment property</a>
 
      <li><a href="#the-region-pseudo-element"><span class=secno>3.5.
-      </span>The ::region() functional pseudo-element</a>
+      </span>The ::region pseudo-element</a>
     </ul>
 
    <li><a href="#multi-column-regions"><span class=secno>4.
@@ -534,21 +534,20 @@ <h3 id=region-styling><span class=secno>1.2. </span>CSS Region names and
   <div class=example>
    <pre>
 &lt;style&gt;
-  #region1::region(p) {
+  #region1::region p {
     color: #0C3D5F;
     font-weight: bold;
   }
 &lt;/style&gt;</pre>
   </div>
 
-  <p>The <code class=css>::region()</code> functional pseudo-element takes a
-   <code class=css>p</code> selector as an argument in this example. The
-   color and font-weight declarations will apply to any fragments of
-   paragraphs that are displayed in <code class=css>#region1</code>. The
-   following figure shows how the rendering changes if we apply this styling
-   specific to <code>#region1</code>. Note how less text fits into this box
-   now that the ‘<code class=property>font-weight</code>’ is bold instead
-   of normal.
+  <p>The <code class=css>::region</code> pseudo-element is followed by a
+   <code class=css>p</code> relative selector in this example. The color and
+   font-weight declarations will apply to any fragments of paragraphs that
+   are displayed in <code class=css>#region1</code>. The following figure
+   shows how the rendering changes if we apply this styling specific to
+   <code>#region1</code>. Note how less text fits into this box now that the
+   ‘<code class=property>font-weight</code>’ is bold instead of normal.
 
   <div class=figure> <img
    alt="Illustrate how changing region styling affects the flow of content."
@@ -1428,46 +1427,37 @@ <h3 id=the-region-fragment-property><span class=secno>3.4. </span>The
     href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>).
   </div>
 
-  <h3 id=the-region-pseudo-element><span class=secno>3.5. </span>The
-   ::region() functional pseudo-element</h3>
+  <h3 id=the-region-pseudo-element><span class=secno>3.5. </span>The ::region
+   pseudo-element</h3>
 
-  <p>A ::region() functional pseudo-element can be appended to a selector
-   that matches a <a href="#css-region">CSS Region</a>, and takes a selector
-   as an argument. This allows style declarations to be applied to fragments
-   of named flow content flowing through particular regions.
+  <p>A ::region pseudo-element represents a relationship between a selector
+   that matches a <a href="#css-region">CSS Region</a>, and a relative
+   selector that matches some named flow content. This allows style
+   declarations to be applied to fragments of named flow content flowing into
+   particular regions.
 
   <pre>
-&lt;region selector&gt;::region(&lt;content selector&gt;) {
+&lt;region selector&gt;::region &lt;content selector&gt;  {
     ... CSS styling declarations ...
 }         
     </pre>
 
-  <div class=issue-marker> <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23238">Issue-23238</a>
-
-   <div class=issue-details>
-    <p class=short-desc>Region styling syntax should sync with ‘<code
-     class=property>distributed</code>’ from Shadow DOM
-   </div>
-  </div>
-
-  <p>When the ::region() pseudo-element is appended to a <a
+  <p>When the ::region pseudo-element is appended to a <a
    href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
    that matches one or more <a href="#css-region" title="CSS Region">CSS
    Regions</a>, this creates a ‘<code class=css>flow fragment</code>’
    selector. The flow fragment selector specifies which range of elements in
-   the flow can be matched by the selector argument. The selector argument
+   the flow can be matched by the relative selector. The relative selector
    can match elements in the range(s) (see <a href="#ref-DOM"
    rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) of the named flow that are
-   displayed in the selected region(s).
+   displayed fully or partially in the selected region(s).
 
   <p>Elements that are fully or partially in the flow fragment range may
-   match a selector argument. However, the style declarations only apply to
+   match the relative selector. However, the style declarations only apply to
    the fragment of the element that is displayed in the corresponding
    region(s).
 
-  <p>Only a limited list of properties apply to a ::region() functional
-   pseudo-element:
+  <p>Only a limited list of properties apply to a ::region pseudo-element:
 
   <ol>
    <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a>
@@ -1537,7 +1527,7 @@ <h3 id=the-region-pseudo-element><span class=secno>3.5. </span>The
 
   <div class=example id=region-style-example>
    <p>In the following example, the <a href="#named-flow0">named flow</a>
-    ‘<code class=property>article-flow</code>’ flows through ‘<code
+    ‘<code class=property>article-flow</code>’ flows into ‘<code
     class=css>region-1</code>’ and ‘<code class=css>region-2</code>’.
 
    <pre>
@@ -1551,7 +1541,7 @@ <h3 id=the-region-pseudo-element><span class=secno>3.5. </span>The
   }
 
   /* region styling */
-  <strong>#region-1::region(p)</strong> {
+  <strong>#region-1::region p </strong> {
     margin-right: 5em;
   }
 &lt;/style&gt;     
@@ -1586,19 +1576,18 @@ <h3 id=the-region-pseudo-element><span class=secno>3.5. </span>The
    </div>
 
    <p>The region styling applies to flow content that fits in ‘<code
-    class=css>region-1</code>’. The selector argument matches ‘<code
+    class=css>region-1</code>’. The relative selector matches ‘<code
     class=css>p-1</code>’ and ‘<code class=css>p-2</code>’ because
     these paragraphs flow into ‘<code class=css>region-1</code>’. Only
     the fragment of ‘<code class=css>p-2</code>’ that flows into ‘<code
     class=css>region-1</code>’ is styled with the pseudo-element.
   </div>
 
-  <p>All of the selectors in a ::region() functional pseudo-element
-   contribute to its <a
+  <p>All of the selectors in a ::region pseudo-element contribute to its <a
    href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>.
-   So the specificity of the ::region() pseudo-element in the example above
+   So the specificity of the ::region pseudo-element in the example above
    would combine the id selector's specificity with the specificity of the
-   type selector in the argument, resulting in a specificity of 101.
+   type selector, resulting in a specificity of 101.
 
   <p>Selectors that match a given element or element fragment (as described
    above), participate in the <a
@@ -2842,6 +2831,8 @@ <h3 id="changes_from_May_28_2013"><span class=secno>12.1. </span>Changes
    28<sup>th</sup> 2013</a> version</h3>
 
   <ul>
+   <li>Changed ::region() to ::region
+
    <li>display:none elements do not become CSS Regions
 
    <li>Clarify accessibility interactions with flow-into

css-regions/Overview.src.html

@@ -286,15 +286,15 @@ <h3 id="region-styling">CSS Region names and styling</h3>
     <div class="example">
         <pre>
 &lt;style&gt;
-  #region1::region(p) {
+  #region1::region p {
     color: #0C3D5F;
     font-weight: bold;
   }
 &lt;/style&gt;</pre>
     </div>
 
-    <p>The <code class="css">::region()</code> functional pseudo-element
-      takes a <code class="css">p</code> selector as an argument in this example. 
+    <p>The <code class="css">::region</code> pseudo-element
+      is followed by a <code class="css">p</code> relative selector in this example. 
       The color and font-weight declarations will apply 
       to any fragments of paragraphs that are
       displayed in <code class="css">#region1</code>. 
@@ -1257,55 +1257,49 @@ <h3 id="the-region-fragment-property">The region-fragment property</h3>
     </div>
 
     <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 
-        content. See the 'overflow' property definition
-        ([[CSS21]]).</p>
+        <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 content. 
+        See the 'overflow' property definition ([[CSS21]]).</p>
     </div>
 
-    <h3 id="the-region-pseudo-element">The ::region() functional pseudo-element</h3>
+    <h3 id="the-region-pseudo-element">The ::region pseudo-element</h3>
 
-    <p>A ::region() functional pseudo-element can be appended 
-      to a selector that matches a <span>CSS Region</span>, 
-      and takes a selector as an argument. 
+    <p>A ::region pseudo-element represents a relationship between  
+      a selector that matches a <span>CSS Region</span>, 
+      and a relative selector that matches some named flow content. 
       This allows style declarations to be applied 
       to fragments of named flow content flowing 
-      through particular regions.</p>
+      into particular regions.</p>
 
         <pre>
-&lt;region selector&gt;::region(&lt;content selector&gt;) {
+&lt;region selector&gt;::region &lt;content selector&gt;  {
     ... CSS styling declarations ...
 }         
     </pre>
 
-    <div class="issue-marker">
-        <a href=
-        "https://www.w3.org/Bugs/Public/show_bug.cgi?id=23238">Issue-23238</a>
-
-        <div class="issue-details">
-            <p class="short-desc">Region styling syntax should sync with 'distributed' from Shadow DOM</p>
-        </div>
-    </div>
-
-    <p>When the ::region() pseudo-element is appended to a 
+    <p>When the ::region pseudo-element is appended to a 
     <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 
     that matches one or more <span title="CSS Region">CSS Regions</span>,  
     this creates a 'flow fragment' selector. 
     The flow fragment selector specifies 
     which range of elements in the flow 
-    can be matched by the selector argument. 
-    The selector argument can match elements 
+    can be matched by the relative selector. 
+    The relative selector can match elements 
     in the range(s) (see [[!DOM]]) of the named flow 
-    that are displayed in the selected region(s).</p>
+    that are displayed fully or partially 
+    in the selected region(s).</p>
 
     <p>Elements that are fully or partially 
-      in the flow fragment range may match a selector argument. 
+      in the flow fragment range may match the relative selector. 
       However, the style declarations only apply 
       to the fragment of the element 
       that is displayed in the corresponding region(s).</p>
 
-    <p>Only a limited list of properties apply to a ::region() functional pseudo-element:</p>
+    <p>Only a limited list of properties apply to a ::region pseudo-element:</p>
 
     <ol>
         <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li>
@@ -1331,7 +1325,7 @@ <h3 id="the-region-pseudo-element">The ::region() functional pseudo-element</h3>
 
     <div class="example" id="region-style-example">
         <p>In the following example, the <span>named flow</span> 'article-flow' flows
-        through 'region-1' and 'region-2'.</p>
+        into 'region-1' and 'region-2'.</p>
         <pre>
 &lt;style&gt;
   #div-1 {
@@ -1343,7 +1337,7 @@ <h3 id="the-region-pseudo-element">The ::region() functional pseudo-element</h3>
   }
 
   /* region styling */
-  <strong>#region-1::region(p)</strong> {
+  <strong>#region-1::region p </strong> {
     margin-right: 5em;
   }
 &lt;/style&gt;     
@@ -1386,7 +1380,7 @@ <h3 id="the-region-pseudo-element">The ::region() functional pseudo-element</h3>
 
         <p>The region styling applies 
           to flow content that fits in 'region-1'. 
-          The selector argument matches 'p-1' and 'p-2' 
+          The relative selector matches 'p-1' and 'p-2' 
           because these paragraphs 
           flow into 'region-1'. 
           Only the fragment of 'p-2' 
@@ -1395,12 +1389,12 @@ <h3 id="the-region-pseudo-element">The ::region() functional pseudo-element</h3>
     </div>
 
     <p>All of the selectors 
-      in a ::region() functional pseudo-element 
+      in a ::region pseudo-element 
       contribute to its <a href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>. 
-      So the specificity of the ::region() pseudo-element 
+      So the specificity of the ::region pseudo-element 
       in the example above would combine 
       the id selector's specificity 
-      with the specificity of the type selector in the argument, 
+      with the specificity of the type selector, 
       resulting in a specificity of 101.</p>
 
     <p>Selectors that match a given element or element fragment (as described above),
@@ -2446,6 +2440,7 @@ <h2 id="changes">Changes</h2>
     <h3 id="changes_from_May_28_2013">Changes from <a href="http://www.w3.org/TR/2013/WD-css3-regions-20130528/">May 28<sup>th</sup> 2013</a> version</h3>
 
     <ul>
+      <li>Changed ::region() to ::region</li>
       <li>display:none elements do not become CSS Regions</li>
       <li>Clarify accessibility interactions with flow-into</li> 
       <li>Change NamedFlowCollection to NamedFlowMap</li>