1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flying Saucer: CSS List Support</title>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
<style type="text/css">
h3 { font-weight: bold; }
li { font-family: sans-serif; }
#image-bullet li { list-style-image: url(bullet.gif); }
#posout li { list-style-position: outside; }
#posin li { list-style-position: inside; }
#failover li { list-style-type: square;
list-style-image: url(invalid.gif); }
#shorthand li { list-style: square outside; }
#inherit_test { list-style: square; }
#square li { list-style-type: square; }
#disc li { list-style-type: disc; }
#circle li { list-style-type: circle; }
#decimal li { list-style-type: decimal; }
#decimal-leading-zero li { list-style-type: decimal-leading-zero; }
#lower-roman li { list-style-type: lower-roman; }
#upper-roman li { list-style-type: upper-roman; }
#lower-greek li { list-style-type: lower-greek; }
#lower-latin li { list-style-type: lower-latin; }
#upper-latin li { list-style-type: upper-latin; }
#none li { list-style-type: none; }
</style>
</head>
<body>
<p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
<p class="link right-link"><a href="demoNav:forward">Next Page</a></p>
<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
<span id="pagebyline">
CSS
<ul>
<li>List</li>
<li>Element</li>
<li>Support</li>
</ul>
</span>
<p><b>List support includes</b>: Full support for ordered and unordered lists, image bullets for lists, list style types,
numbered lists, and so on.</p>
<br />
<h3>Unordered List Items with default style</h3>
<ul>
<li>List text list text list text list text</li>
<li>more item more item more item more item</li>
</ul>
<h3>Ordered List Items with default style</h3>
<ol>
<li>List text list text list text list text</li>
<li>more item more item more item more item</li>
</ol>
<h3>List Items with image bullets</h3>
<ol id="image-bullet">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Position Outside</h3>
<ol id="posout">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Position Inside</h3>
<ol id="posin">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Failover</h3>
<p>The image shouldn't load and a square should be used instead</p>
<ol id="failover">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Shorthand Test</h3>
<p>It should have squares with outside position</p>
<ol id="shorthand">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Inheritance test with squares</h3>
<ol id="inherit_test">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Square Items</h3>
<ol id="square">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Disc Items</h3>
<ol id="disc">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Circle Items</h3>
<ol id="circle">
<li>first item</li>
<li>second item</li>
</ol>
<h3>Decimal Items</h3>
<ol id="decimal">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
<h3>Decimal Leading Zero Items</h3>
<p><i>Just does decimal for now</i></p>
<ol id="decimal-leading-zero">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
<h3>Lower Roman Items</h3>
<p><i>Roman numerals not valid past 4000</i></p>
<ol id="lower-roman">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
<h3>Upper Roman Items</h3>
<ol id="upper-roman">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
<h3>Lower Greek Items</h3>
<p><i>not supported yet. does decimal instead</i></p>
<ol id="lower-greek">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
<h3>Lower Latin Items</h3>
<p><i>not tested past Z</i></p>
<ol id="lower-latin">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
<h3>Upper Latin Items</h3>
<ol id="upper-latin">
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
<h3>None Items</h3>
<ol id="none">
<li>first item</li>
<li>second item</li>
</ol>
</body>
</html>
|
