# HG changeset patch
# User Simon Sapin <simon.sapin@exyr.org>
# Date 1361406412 -3600
# Node ID 0dff950123a28944291f53fdd73408964ef54bf0
# Parent  b3accb3444d839d4d035938868bae8c4068f9e59
[css3-page] Rewrite page selector specificity for multiple pseudo-classes.

Update to Selectors 4 language, while we’re at it.

diff -r b3accb3444d8 -r 0dff950123a2 css3-page/Overview.html
--- a/css3-page/Overview.html	Wed Feb 20 16:24:59 2013 -0800
+++ b/css3-page/Overview.html	Thu Feb 21 01:26:52 2013 +0100
@@ -9,7 +9,7 @@
    rel=dcterms.rights>
   <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-02-20 name=dcterms.issued>
+  <meta content=2013-02-21 name=dcterms.issued>
   <meta content="Melinda Grant" name=dcterms.creator>
   <meta content="Håkon Wium Lie" name=dcterms.creator>
   <meta content="Elika J. Etemad" name=dcterms.creator>
@@ -99,14 +99,14 @@
 
     <h1>CSS Paged Media Module Level 3</h1>
 
-    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 20 February 2013</h2>
+    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 21 February 2013</h2>
 
     <dl>
      <dt>This version:
 
      <dd><a
       href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
-     <!-- <dd><a href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130220</a></dd> -->
+     <!-- <dd><a href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130221</a></dd> -->
 
      <dt>Latest version:
 
@@ -194,7 +194,7 @@
    <p>This document contains the <abbr
     title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
     Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
-    of 20 February 2013. The Last Call period ends on <span
+    of 21 February 2013. The Last Call period ends on <span
     class=fudge>TBD</span>.
 
    <p>Expected next revision to this document is another LCWD, due to the
@@ -1068,28 +1068,46 @@
     the computations defined in the <a
     href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:
 
+   <p>Each comma-separated selectors in the same ‘<code
+    class=css>@page</code>’ rule match pages with its own specificity.
+    ‘<code class=css>@page</code>’ rules without selectors are considered
+    to have a single, empty selector (whose specificity is zero.)
+
    <ul>
-    <li>if the page selector has a named page, f=1; else f=0
-
-    <li>if the page selector has a ‘<code class=css>:first</code>’ or
-     ‘<code class=css>:blank</code>’ pseudo-class, g=1; else g=0
-
-    <li>if the page selector has a ‘<code class=css>:left</code>’ or
-     ‘<code class=css>:right</code>’ pseudo-class, h=1; else h=0
+    <li>Count the number of page names (= <var>f</var>)
+     <p class=note>This is 0 or 1.
+
+    <li>Count the number of ‘<code class=css>:first</code>’ or ‘<code
+     class=css>:blank</code>’ pseudo-classes (= <var>g</var>)
+
+    <li>Count the number of ‘<code class=css>:left</code>’ or ‘<code
+     class=css>:right</code>’ pseudo-classes (= <var>h</var>)
    </ul>
 
-   <p>Concatenating the three numbers f-g-h gives the specificity.
+   <p> Specificities are compared by comparing the three components in order:
+    the specificity with <var>f</var> larger a value is more specific; if the
+    two <var>f</var> values are tied, then the specificity with a larger
+    <var>g</var> value is more specific; if the two <var>g</var> values are
+    also tied, then the specificity with a larger <var>h</var> value is more
+    specific; if all the values are tied, the two specifities are equal.
+
+   <p> Due to storage limitations, implementations may have limitations on
+    the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values
+    higher than the limit must be clamped to that limit, and not overflow.
+
+   <p class=note> Note: Repeated occurrances of the same pseudo-classes are
+    allowed and do increase specificity.
 
    <div class=example>
     <p>Some page specificity calculation examples follow:
 
     <pre>
-      @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
-      @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
-      @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
-      @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
-      @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
-      @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
+@page { } /* specificity = (0,0,0) */
+@page :left { } /* specificity = (0,0,1) */
+@page :first { } /* specificity = (0,1,0) */
+@page artsy { } /* specificity = (1,0,0) */
+@page artsy:left { } /* specificity = (1,0,1) */
+@page artsy:first { } /* specificity = (1,1,0) */
 </pre>
    </div>
 
@@ -1098,11 +1116,11 @@
 
     <pre>
 @page {
-margin-left: 3cm;
+  margin-left: 3cm;
 }
 
 @page :left {
-margin-left: 4cm;
+  margin-left: 4cm;
 }
 </pre>
 
@@ -1119,20 +1137,20 @@
 
     <pre>
 @page :first {
-color: green;
-
-@top-left {
-  content: "foo";
-  color: blue;
+  color: green;
+
+  @top-left {
+    content: "foo";
+    color: blue;
+  }
+  @top-right {
+    content: "bar";
+  }
 }
-@top-right {
-  content: "bar";
-}
-}
 
 @page { color: red;
-@top-center {
-  content: "Page " counter(page);
+  @top-center {
+    content: "Page " counter(page);
   }
 }
 </pre>
diff -r b3accb3444d8 -r 0dff950123a2 css3-page/Overview.src.html
--- a/css3-page/Overview.src.html	Wed Feb 20 16:24:59 2013 -0800
+++ b/css3-page/Overview.src.html	Thu Feb 21 01:26:52 2013 +0100
@@ -769,24 +769,48 @@
 computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>
 module:</p>
 
+<p>Each comma-separated selectors in the same ''@page'' rule
+  match pages with its own specificity.
+  ''@page'' rules without selectors are considered to have a single,
+  empty selector (whose specificity is zero.)
+
 <ul>
-  <li>if the page selector has a named page, f=1; else f=0</li>
-  <li>if the page selector has a ':first' or ':blank' pseudo-class, g=1; else g=0</li>
-  <li>if the page selector has a ':left' or ':right' pseudo-class, h=1; else h=0</li>
+  <li>Count the number of page names (= <var>f</var>)
+    <p class="note">This is 0 or 1.
+  <li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>)
+  <li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)
 </ul>
 
-<p>Concatenating the three numbers f-g-h gives the specificity.</p>
+<p>
+ Specificities are compared by comparing the three components in order:
+ the specificity with <var>f</var> larger a value is more specific;
+ if the two <var>f</var> values are tied,
+ then the specificity with a larger <var>g</var> value is more specific;
+ if the two <var>g</var> values are also tied,
+ then the specificity with a larger <var>h</var> value is more specific;
+ if all the values are tied, the two specifities are equal.
+
+<p>
+  Due to storage limitations,
+  implementations may have limitations on
+  the size of <var>f</var>, <var>g</var>, or <var>h</var>.
+  If so, values higher than the limit must be clamped to that limit,
+  and not overflow.
+
+<p class="note">
+Note: Repeated occurrances of the same pseudo-classes are allowed
+  and do increase specificity.
 
 <div class="example">
 
 <p>Some page specificity calculation examples follow:</p>
 <pre>
-      @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
-      @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
-      @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
-      @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
-      @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
-      @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
+@page { } /* specificity = (0,0,0) */
+@page :left { } /* specificity = (0,0,1) */
+@page :first { } /* specificity = (0,1,0) */
+@page artsy { } /* specificity = (1,0,0) */
+@page artsy:left { } /* specificity = (1,0,1) */
+@page artsy:first { } /* specificity = (1,1,0) */
 </pre>
 </div>
 
@@ -795,21 +819,20 @@
 <p>Consider the following usage example:</p>
 <pre>
 @page {
-margin-left: 3cm;
+  margin-left: 3cm;
 }
 
 @page :left {
-margin-left: 4cm;
+  margin-left: 4cm;
 }
 </pre>
 
-<p>Due to the higher specificity of the pseudo-class selector, the left margin on
-left pages will be 4cm and all other pages
-(the right-facing pages) will have a left margin of 3cm.</p>
+<p>Due to the higher specificity of the pseudo-class selector,
+the left margin on left pages will be 4cm and all other pages
+(the right-facing pages) will have a left margin of 3cm.
 </div>
 
 <div class="example">
-
 <p>In this example, the higher specificity of the green rules wins over the red
 rule.
 Therefore the first page will have blue text in the top-left page-margin box
@@ -817,20 +840,20 @@
 while subsequent pages will have red text in the page-margin boxes.</p>
 <pre>
 @page :first {
-color: green;
+  color: green;
 
-@top-left {
-  content: "foo";
-  color: blue;
-}
-@top-right {
-  content: "bar";
-}
+  @top-left {
+    content: "foo";
+    color: blue;
+  }
+  @top-right {
+    content: "bar";
+  }
 }
 
 @page { color: red;
-@top-center {
-  content: "Page " counter(page);
+  @top-center {
+    content: "Page " counter(page);
   }
 }
 </pre>