[css3-page] Rewrite page selector specificity for multiple pseudo-classes.
authorSimon Sapin <simon.sapin@exyr.org>
Thu, 21 Feb 2013 01:26:52 +0100
changeset 75130dff950123a2
parent 7512 b3accb3444d8
child 7514 99534755e1af
[css3-page] Rewrite page selector specificity for multiple pseudo-classes.

Update to Selectors 4 language, while we’re at it.
css3-page/Overview.html
css3-page/Overview.src.html
     1.1 --- a/css3-page/Overview.html	Wed Feb 20 16:24:59 2013 -0800
     1.2 +++ b/css3-page/Overview.html	Thu Feb 21 01:26:52 2013 +0100
     1.3 @@ -9,7 +9,7 @@
     1.4     rel=dcterms.rights>
     1.5    <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
     1.6    <meta content=text name=dcterms.type>
     1.7 -  <meta content=2013-02-20 name=dcterms.issued>
     1.8 +  <meta content=2013-02-21 name=dcterms.issued>
     1.9    <meta content="Melinda Grant" name=dcterms.creator>
    1.10    <meta content="Håkon Wium Lie" name=dcterms.creator>
    1.11    <meta content="Elika J. Etemad" name=dcterms.creator>
    1.12 @@ -99,14 +99,14 @@
    1.13  
    1.14      <h1>CSS Paged Media Module Level 3</h1>
    1.15  
    1.16 -    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 20 February 2013</h2>
    1.17 +    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 21 February 2013</h2>
    1.18  
    1.19      <dl>
    1.20       <dt>This version:
    1.21  
    1.22       <dd><a
    1.23        href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
    1.24 -     <!-- <dd><a href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130220</a></dd> -->
    1.25 +     <!-- <dd><a href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130221</a></dd> -->
    1.26  
    1.27       <dt>Latest version:
    1.28  
    1.29 @@ -194,7 +194,7 @@
    1.30     <p>This document contains the <abbr
    1.31      title="Cascading Style Sheets">CSS3</abbr> Paged Media Module W3C Last
    1.32      Call <a href="/2005/10/Process-20051014/tr.html#RecsWD">Working Draft</a>
    1.33 -    of 20 February 2013. The Last Call period ends on <span
    1.34 +    of 21 February 2013. The Last Call period ends on <span
    1.35      class=fudge>TBD</span>.
    1.36  
    1.37     <p>Expected next revision to this document is another LCWD, due to the
    1.38 @@ -1068,28 +1068,46 @@
    1.39      the computations defined in the <a
    1.40      href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:
    1.41  
    1.42 +   <p>Each comma-separated selectors in the same ‘<code
    1.43 +    class=css>@page</code>’ rule match pages with its own specificity.
    1.44 +    ‘<code class=css>@page</code>’ rules without selectors are considered
    1.45 +    to have a single, empty selector (whose specificity is zero.)
    1.46 +
    1.47     <ul>
    1.48 -    <li>if the page selector has a named page, f=1; else f=0
    1.49 -
    1.50 -    <li>if the page selector has a ‘<code class=css>:first</code>’ or
    1.51 -     ‘<code class=css>:blank</code>’ pseudo-class, g=1; else g=0
    1.52 -
    1.53 -    <li>if the page selector has a ‘<code class=css>:left</code>’ or
    1.54 -     ‘<code class=css>:right</code>’ pseudo-class, h=1; else h=0
    1.55 +    <li>Count the number of page names (= <var>f</var>)
    1.56 +     <p class=note>This is 0 or 1.
    1.57 +
    1.58 +    <li>Count the number of ‘<code class=css>:first</code>’ or ‘<code
    1.59 +     class=css>:blank</code>’ pseudo-classes (= <var>g</var>)
    1.60 +
    1.61 +    <li>Count the number of ‘<code class=css>:left</code>’ or ‘<code
    1.62 +     class=css>:right</code>’ pseudo-classes (= <var>h</var>)
    1.63     </ul>
    1.64  
    1.65 -   <p>Concatenating the three numbers f-g-h gives the specificity.
    1.66 +   <p> Specificities are compared by comparing the three components in order:
    1.67 +    the specificity with <var>f</var> larger a value is more specific; if the
    1.68 +    two <var>f</var> values are tied, then the specificity with a larger
    1.69 +    <var>g</var> value is more specific; if the two <var>g</var> values are
    1.70 +    also tied, then the specificity with a larger <var>h</var> value is more
    1.71 +    specific; if all the values are tied, the two specifities are equal.
    1.72 +
    1.73 +   <p> Due to storage limitations, implementations may have limitations on
    1.74 +    the size of <var>f</var>, <var>g</var>, or <var>h</var>. If so, values
    1.75 +    higher than the limit must be clamped to that limit, and not overflow.
    1.76 +
    1.77 +   <p class=note> Note: Repeated occurrances of the same pseudo-classes are
    1.78 +    allowed and do increase specificity.
    1.79  
    1.80     <div class=example>
    1.81      <p>Some page specificity calculation examples follow:
    1.82  
    1.83      <pre>
    1.84 -      @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
    1.85 -      @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
    1.86 -      @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
    1.87 -      @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
    1.88 -      @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
    1.89 -      @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
    1.90 +@page { } /* specificity = (0,0,0) */
    1.91 +@page :left { } /* specificity = (0,0,1) */
    1.92 +@page :first { } /* specificity = (0,1,0) */
    1.93 +@page artsy { } /* specificity = (1,0,0) */
    1.94 +@page artsy:left { } /* specificity = (1,0,1) */
    1.95 +@page artsy:first { } /* specificity = (1,1,0) */
    1.96  </pre>
    1.97     </div>
    1.98  
    1.99 @@ -1098,11 +1116,11 @@
   1.100  
   1.101      <pre>
   1.102  @page {
   1.103 -margin-left: 3cm;
   1.104 +  margin-left: 3cm;
   1.105  }
   1.106  
   1.107  @page :left {
   1.108 -margin-left: 4cm;
   1.109 +  margin-left: 4cm;
   1.110  }
   1.111  </pre>
   1.112  
   1.113 @@ -1119,20 +1137,20 @@
   1.114  
   1.115      <pre>
   1.116  @page :first {
   1.117 -color: green;
   1.118 -
   1.119 -@top-left {
   1.120 -  content: "foo";
   1.121 -  color: blue;
   1.122 +  color: green;
   1.123 +
   1.124 +  @top-left {
   1.125 +    content: "foo";
   1.126 +    color: blue;
   1.127 +  }
   1.128 +  @top-right {
   1.129 +    content: "bar";
   1.130 +  }
   1.131  }
   1.132 -@top-right {
   1.133 -  content: "bar";
   1.134 -}
   1.135 -}
   1.136  
   1.137  @page { color: red;
   1.138 -@top-center {
   1.139 -  content: "Page " counter(page);
   1.140 +  @top-center {
   1.141 +    content: "Page " counter(page);
   1.142    }
   1.143  }
   1.144  </pre>
     2.1 --- a/css3-page/Overview.src.html	Wed Feb 20 16:24:59 2013 -0800
     2.2 +++ b/css3-page/Overview.src.html	Thu Feb 21 01:26:52 2013 +0100
     2.3 @@ -769,24 +769,48 @@
     2.4  computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>
     2.5  module:</p>
     2.6  
     2.7 +<p>Each comma-separated selectors in the same ''@page'' rule
     2.8 +  match pages with its own specificity.
     2.9 +  ''@page'' rules without selectors are considered to have a single,
    2.10 +  empty selector (whose specificity is zero.)
    2.11 +
    2.12  <ul>
    2.13 -  <li>if the page selector has a named page, f=1; else f=0</li>
    2.14 -  <li>if the page selector has a ':first' or ':blank' pseudo-class, g=1; else g=0</li>
    2.15 -  <li>if the page selector has a ':left' or ':right' pseudo-class, h=1; else h=0</li>
    2.16 +  <li>Count the number of page names (= <var>f</var>)
    2.17 +    <p class="note">This is 0 or 1.
    2.18 +  <li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>)
    2.19 +  <li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)
    2.20  </ul>
    2.21  
    2.22 -<p>Concatenating the three numbers f-g-h gives the specificity.</p>
    2.23 +<p>
    2.24 + Specificities are compared by comparing the three components in order:
    2.25 + the specificity with <var>f</var> larger a value is more specific;
    2.26 + if the two <var>f</var> values are tied,
    2.27 + then the specificity with a larger <var>g</var> value is more specific;
    2.28 + if the two <var>g</var> values are also tied,
    2.29 + then the specificity with a larger <var>h</var> value is more specific;
    2.30 + if all the values are tied, the two specifities are equal.
    2.31 +
    2.32 +<p>
    2.33 +  Due to storage limitations,
    2.34 +  implementations may have limitations on
    2.35 +  the size of <var>f</var>, <var>g</var>, or <var>h</var>.
    2.36 +  If so, values higher than the limit must be clamped to that limit,
    2.37 +  and not overflow.
    2.38 +
    2.39 +<p class="note">
    2.40 +Note: Repeated occurrances of the same pseudo-classes are allowed
    2.41 +  and do increase specificity.
    2.42  
    2.43  <div class="example">
    2.44  
    2.45  <p>Some page specificity calculation examples follow:</p>
    2.46  <pre>
    2.47 -      @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
    2.48 -      @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
    2.49 -      @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
    2.50 -      @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
    2.51 -      @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
    2.52 -      @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
    2.53 +@page { } /* specificity = (0,0,0) */
    2.54 +@page :left { } /* specificity = (0,0,1) */
    2.55 +@page :first { } /* specificity = (0,1,0) */
    2.56 +@page artsy { } /* specificity = (1,0,0) */
    2.57 +@page artsy:left { } /* specificity = (1,0,1) */
    2.58 +@page artsy:first { } /* specificity = (1,1,0) */
    2.59  </pre>
    2.60  </div>
    2.61  
    2.62 @@ -795,21 +819,20 @@
    2.63  <p>Consider the following usage example:</p>
    2.64  <pre>
    2.65  @page {
    2.66 -margin-left: 3cm;
    2.67 +  margin-left: 3cm;
    2.68  }
    2.69  
    2.70  @page :left {
    2.71 -margin-left: 4cm;
    2.72 +  margin-left: 4cm;
    2.73  }
    2.74  </pre>
    2.75  
    2.76 -<p>Due to the higher specificity of the pseudo-class selector, the left margin on
    2.77 -left pages will be 4cm and all other pages
    2.78 -(the right-facing pages) will have a left margin of 3cm.</p>
    2.79 +<p>Due to the higher specificity of the pseudo-class selector,
    2.80 +the left margin on left pages will be 4cm and all other pages
    2.81 +(the right-facing pages) will have a left margin of 3cm.
    2.82  </div>
    2.83  
    2.84  <div class="example">
    2.85 -
    2.86  <p>In this example, the higher specificity of the green rules wins over the red
    2.87  rule.
    2.88  Therefore the first page will have blue text in the top-left page-margin box
    2.89 @@ -817,20 +840,20 @@
    2.90  while subsequent pages will have red text in the page-margin boxes.</p>
    2.91  <pre>
    2.92  @page :first {
    2.93 -color: green;
    2.94 +  color: green;
    2.95  
    2.96 -@top-left {
    2.97 -  content: "foo";
    2.98 -  color: blue;
    2.99 -}
   2.100 -@top-right {
   2.101 -  content: "bar";
   2.102 -}
   2.103 +  @top-left {
   2.104 +    content: "foo";
   2.105 +    color: blue;
   2.106 +  }
   2.107 +  @top-right {
   2.108 +    content: "bar";
   2.109 +  }
   2.110  }
   2.111  
   2.112  @page { color: red;
   2.113 -@top-center {
   2.114 -  content: "Page " counter(page);
   2.115 +  @top-center {
   2.116 +    content: "Page " counter(page);
   2.117    }
   2.118  }
   2.119  </pre>