OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Test: flow-into on ordered lists that use a single CSS counte
r and ::before for list numbering</title> | |
5 <link rel="author" title="Mihai Balan" href="mibalan@adobe.com"> | |
6 <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and
-rules" /> | |
7 <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-
property" /> | |
8 <link rel="stylesheet" type="text/css" href="../resources/font-smoothing
-disabler.css"> | |
9 <meta name="flags" content=""> | |
10 <meta name="assert" content="The flow-into property can be applied to or
dered lists. Multiple lists using a single counter displayed in generated conten
t and extracted in a named flow should render in regions just as without regions
."> | |
11 <style> | |
12 ol { | |
13 list-style-type: none; | |
14 counter-reset: items 0; | |
15 } | |
16 ol>li { | |
17 counter-increment: items; | |
18 } | |
19 li::before { | |
20 content: counter(items) ". "; | |
21 display: inline-block; | |
22 width: 1.5em; | |
23 margin-right: .3em; | |
24 text-align: right; | |
25 } | |
26 | |
27 ol.double>li { | |
28 counter-increment: items 2; | |
29 } | |
30 ol.double>li::before { | |
31 content: counter(items, upper-latin) ". "; | |
32 } | |
33 | |
34 ol.down-ten { | |
35 counter-reset: items 11; | |
36 } | |
37 ol.down-ten>li { | |
38 counter-increment: items -1; | |
39 } | |
40 ol.down-ten>li::before { | |
41 content: counter(items, upper-roman) ". "; | |
42 width: 2em; | |
43 } | |
44 | |
45 #list1 { | |
46 -webkit-flow-into: flow1; | |
47 } | |
48 #list21, #list22 { | |
49 -webkit-flow-into: flow2; | |
50 } | |
51 #list31 { | |
52 -webkit-flow-into: flow3; | |
53 } | |
54 | |
55 .region { | |
56 background-color: lightgray; | |
57 margin: 1em; | |
58 float: left; | |
59 width: 18em; | |
60 height: 15em; | |
61 } | |
62 #region1 { | |
63 -webkit-flow-from: flow1; | |
64 width: 12em; | |
65 } | |
66 #region2 { | |
67 -webkit-flow-from: flow2; | |
68 width: 12em; | |
69 } | |
70 #region3 { | |
71 -webkit-flow-from: flow3; | |
72 } | |
73 </style> | |
74 </head> | |
75 <body> | |
76 <p>The test passes if there are three gray rectangles as follows:<br> | |
77 1. the first one contains a numbered, 4 items list<br> | |
78 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> | |
79 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> | |
80 <ol id="list1"> | |
81 <li>First list, item 1</li> | |
82 <li>First list, item 2</li> | |
83 <li>First list, item 3</li> | |
84 <li>First list, item 4</li> | |
85 </ol> | |
86 <ol id="list21" class="double"> | |
87 <li>List 2-1, item B</li> | |
88 <li>List 2-1, item D</li> | |
89 <li>List 2-1, item F</li> | |
90 </ol> | |
91 <ol id="list22" class="double" start="4"> | |
92 <li>List 2-2, item B</li> | |
93 <li>List 2-2, item D</li> | |
94 <li>List 2-2, item F</li> | |
95 </ol> | |
96 <ol id="list31" class="down-ten"> | |
97 <li>Outer list, item X</li> | |
98 <li>Outer list, item IX | |
99 <ol class="down-ten"> | |
100 <li>Inner list 1, item X</li> | |
101 <li>Inner list 1, item IX</li> | |
102 </ol> | |
103 </li> | |
104 <li>Outer list, item VIII</li> | |
105 <li>Outer list, item VII</li> | |
106 <li>Outer list, item VI | |
107 <ol class="double"> | |
108 <li>Inner list 2, item B</li> | |
109 <li>Inner list 2, item D</li> | |
110 </ol> | |
111 </li> | |
112 <li>Outer list, item V</li> | |
113 </ol> | |
114 <div class="region" id="region1"></div> | |
115 <div class="region" id="region2"></div> | |
116 <div class="region" id="region3"></div> | |
117 </body> | |
118 </html> | |
OLD | NEW |