<!
DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html xmlns=
"http://www.w3.org/1999/xhtml">
<
head>
<
title>CSS
2.
1 Test Suite: Order of counters in out-of-flow content</
title>
<
link rel=
"help" href=
"http://www.w3.org/TR/CSS21/generate.html#counters"/>
<
link rel=
"help" href=
"http://www.w3.org/TR/CSS21/generate.html#propdef-content"/>
<
link rel=
"help" href=
"http://www.w3.org/TR/CSS21/syndata.html#counter"/>
<
style type=
"text/css">
ul { display: block; margin:
0; padding:
0; counter-reset: c; }
li { counter-increment: c; }
li,
div { display: block; margin:
0; padding:
0;
width:
3em; border: thin solid; }
li:before,
div:before { content: counter(c); }
#four { border: none; }
#four:before { content:
""; content: none; }
#two { float: left; }
#three { position: relative; }
#four { position: relative; }
#four
div { position: absolute; left:
8em; }
#six { position: absolute; top:
5em; left:
12em; }
#eight { position: fixed; top:
8em; left:
4em; }
</
style>
</
head>
<
body>
<
p>The number pairs (same digit repeated twice)
"11" through
"44"
should appear on this page.</
p>
<
ul>
<
li id=
"one">
1</
li>
<
li id=
"two">
2</
li>
<
li id=
"three">
3</
li>
<
li id=
"four"><
div>
4</
div></
li>
<
li id=
"five">
5</
li>
<
li id=
"six">
6</
li>
<
li id=
"seven">
7</
li>
<
li id=
"eight">
8</
li>
<
li id=
"nine">
9</
li>
</
ul>
</
body>
</
html>