OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Reftest Reference</title> | |
5 <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> | |
6 <link rel="stylesheet" type="text/css" href="../resources/font-smoothing
-disabler.css"> | |
7 <style> | |
8 ol { | |
9 list-style-type: none; | |
10 counter-reset: items 0; | |
11 } | |
12 ol>li { | |
13 counter-increment: items; | |
14 } | |
15 li::before { | |
16 content: counter(items) ". "; | |
17 display: inline-block; | |
18 width: 1.5em; | |
19 margin-right: .3em; | |
20 text-align: right; | |
21 } | |
22 | |
23 ol.double>li { | |
24 counter-increment: items 2; | |
25 } | |
26 ol.double>li::before { | |
27 content: counter(items, upper-latin) ". "; | |
28 } | |
29 | |
30 ol.down-ten { | |
31 counter-reset: items 11; | |
32 } | |
33 ol.down-ten>li { | |
34 counter-increment: items -1; | |
35 } | |
36 ol.down-ten>li::before { | |
37 content: counter(items, upper-roman) ". "; | |
38 width: 2em; | |
39 } | |
40 | |
41 .region { | |
42 background-color: lightgray; | |
43 margin: 1em; | |
44 float: left; | |
45 width: 18em; | |
46 height: 15em; | |
47 } | |
48 | |
49 #region1 { | |
50 width: 12em; | |
51 } | |
52 | |
53 #region2 { | |
54 width: 12em; | |
55 } | |
56 </style> | |
57 </head> | |
58 <body> | |
59 <p>The test passes if there are three gray rectangles as follows:<br> | |
60 1. the first one contains a numbered, 4 items list<br> | |
61 2. the second contains two numbered, 3 items lists – each list
uses letters for numbering, starting with 'B.' and skipping every other letter
(<em>e.g.</em> B, D, F)<br> | |
62 3. the last rectangle contains a descending numbered list: it's numb
ered using roman numerals, starting at X (10), in decreasing order; after the se
cond item there's an inner numbered list with 2 items, again descendingly number
ed with roman numerals, starting at 10; finally, before the last item there's an
other inner numbered list with 2 items, labeled with letters, more precisely, th
e letters B and D</p> | |
63 <div class="region" id="region1"> | |
64 <ol id="list1"> | |
65 <li>First list, item 1</li> | |
66 <li>First list, item 2</li> | |
67 <li>First list, item 3</li> | |
68 <li>First list, item 4</li> | |
69 </ol> | |
70 </div> | |
71 <div class="region" id="region2"> | |
72 <ol id="list21" class="double"> | |
73 <li>List 2-1, item B</li> | |
74 <li>List 2-1, item D</li> | |
75 <li>List 2-1, item F</li> | |
76 </ol> | |
77 <ol id="list22" class="double" start="4"> | |
78 <li>List 2-2, item B</li> | |
79 <li>List 2-2, item D</li> | |
80 <li>List 2-2, item F</li> | |
81 </ol> | |
82 </div> | |
83 <div class="region" id="region3"> | |
84 <ol id="list31" class="down-ten"> | |
85 <li>Outer list, item X</li> | |
86 <li>Outer list, item IX | |
87 <ol class="down-ten"> | |
88 <li>Inner list 1, item X</li> | |
89 <li>Inner list 1, item IX</li> | |
90 </ol> | |
91 </li> | |
92 <li>Outer list, item VIII</li> | |
93 <li>Outer list, item VII</li> | |
94 <li>Outer list, item VI | |
95 <ol class="double"> | |
96 <li>Inner list 2, item B</li> | |
97 <li>Inner list 2, item D</li> | |
98 </ol> | |
99 </li> | |
100 <li>Outer list, item V</li> | |
101 </ol> | |
102 </div> | |
103 </body> | |
104 </html> | |
OLD | NEW |