blob: 9dd7fb37da951abd0525b8fcda74134ec2a5544c [file] [log] [blame]
<!DOCTYPE HTML>
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4" />
<style>
li:before {
content: counter(list-item) " ";
}
li:after {
content: " " counter(list-item);
}
</style>
<h2>Test counter(list-item), using generated content</h2>
<div style="float: left; width: 200px">
Ordered lists
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol start="30">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol>
<li>a</li>
<li>b</li>
<li value="30">c</li>
<li>d</li>
<li value="35">e</li>
<li>f</li>
</ol>
</div>
<div style="float: left; width: 200px">
Reversed ordered lists
<ol reversed>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol start="30" reversed>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol reversed>
<li>a</li>
<li>b</li>
<li value="30">c</li>
<li>d</li>
<li value="35">e</li>
<li>f</li>
</ol>
</div>
<div style="float: left; width: 200px">
Unordered lists
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li value="30">c</li>
<li>d</li>
<li value="35">e</li>
<li>f</li>
</ul>
</div>
<div style="float: left; width: 200px">
Some simple combinations with directives
<ol style="counter-reset: list-item 100">
<li>a</li>
<li style="counter-increment: list-item 200">b</li>
<li style="counter-reset: list-item 400">c</li>
<li style="counter-reset: list-item 500; counter-increment: list-item 600">d</li>
</ol>
<ol start="30">
<li>a</li>
<li style="counter-increment: list-item 200">b</li>
<li style="counter-reset: list-item 400">c</li>
<li style="counter-reset: list-item 500; counter-increment: list-item 600">d</li>
</ol>
</div>