counters-scope-000

Counter scope

WeasyPrint

This browser

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Test: Counter scope</title>
 5   <link rel="author" title="L. David Baron" href="http://dbaron.org/">
 6   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#scope">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counters">
 8   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-content">
 9   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#counter">
10   <style type="text/css">
11 
12   body { white-space: nowrap; }
13 
14 
15   .scope { counter-reset: c 1; }
16   .scope:before, .scope:after { content: counter(c); }
17   .c:before { content: counter(c); }
18 
19   .one:before { counter-reset: c 2; }
20   .two { counter-reset: c 3; }
21 
22   </style>
23  </head>
24  <body>
25 
26  <p>The next 2 lines should be identical:</p>
27 
28  <div>
29    <span class="scope"><span class="one c"><span class="c"></span></span><span class="c"></span></span><span class="c"></span>
30    <span class="scope"><span class="two c"><span class="c"></span></span><span class="c"></span></span><span class="c"></span>
31  </div>
32 
33  <div>
34    122111
35    133331
36  </div>
37 
38  </body>
39 </html>