content-counters-007

content: counters(c, ".", lower-roman)

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: content: counters(c, ".", lower-roman)</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#propdef-content">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#counter">
 8   <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counter-styles">
 9   <meta http-equiv="Content-Style-Type" content="text/css">
10   <style type="text/css">
11 
12   body { white-space: nowrap; }
13 
14 
15   body, #test span:first-child { counter-reset: c; }
16   p, #test span { counter-increment: c; }
17   #test span:before { content: counters(c, ".", lower-roman); }
18 
19   </style>
20  </head>
21  <body>
22 
23  <p>The following two lines should look the same:</p>
24 
25  <div id="test">
26    <span></span>
27    <span></span>
28    <span></span>
29    <span></span>
30    <span></span>
31    <span></span>
32    <span></span>
33    <span></span>
34    <span></span>
35    <span></span>
36    <span></span>
37    <span></span>
38    <span style="counter-reset: c 48"></span>
39    <span></span>
40    <span style="counter-reset: c 388"></span>
41    <span></span>
42    <span style="counter-reset: c 3488"></span>
43    <span></span>
44    <span></span>
45  </div>
46 
47  <div>
48    i.i
49    i.ii
50    i.iii
51    i.iv
52    i.v
53    i.vi
54    i.vii
55    i.viii
56    i.ix
57    i.x
58    i.xi
59    i.xii
60    i.xlix
61    i.l
62    i.ccclxxxix
63    i.cccxc
64    i.mmmcdlxxxix
65    i.mmmcdxc
66    i.mmmcdxci
67  </div>
68 
69  </body>
70 </html>