Blitz - WPT: counter-list-item.html

wpt / css / css-lists / counter-list-item.html

<!DOCTYPE HTML>
<link rel="help" href="https://drafts.csswg.org/css-lists/#list-item-counter">
<link rel="match" href="counter-list-item-ref.html">

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

/css/css-lists/counter-list-item-ref.html

<!DOCTYPE HTML>

<h2>Test counter(list-item), using generated content</h2>

<div style="float: left; width: 200px">

Ordered lists

<ol>
    <li>1 a 1</li>
    <li>2 b 2</li>
    <li>3 c 3</li>
</ol>

<ol>
    <li value="30">30 a 30</li>
    <li value="31">31 b 31</li>
    <li value="32">32 c 32</li>
</ol>

<ol>
    <li>1 a 1</li>
    <li>2 b 2</li>
    <li value="30">30 c 30</li>
    <li value="31">31 d 31</li>
    <li value="35">35 e 35</li>
    <li value="36">36 f 36</li>
</ol>

</div>

<div style="float: left; width: 200px">

Reversed ordered lists

<ol>
    <li value="3">3 a 3</li>
    <li value="2">2 b 2</li>
    <li value="1">1 c 1</li>
</ol>

<ol>
    <li value="30">30 a 30</li>
    <li value="29">29 b 29</li>
    <li value="28">28 c 28</li>
</ol>

<ol>
    <li value="32">32 a 32</li>
    <li value="31">31 b 31</li>
    <li value="30">30 c 30</li>
    <li value="29">29 d 29</li>
    <li value="35">35 e 35</li>
    <li value="34">34 f 34</li>
</ol>

</div>

<div style="float: left; width: 200px">

Unordered lists

<ul>
    <li>1 a 1</li>
    <li>2 b 2</li>
    <li>3 c 3</li>
</ul>

<ul>
    <li>1 a 1</li>
    <li>2 b 2</li>
    <li>30 c 30</li>
    <li>31 d 31</li>
    <li>35 e 35</li>
    <li>36 f 36</li>
</ul>

</div>