<!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>
