ErisCyan / minerva
Transfer to URL with SHA Find file
Newer
Older
minerva / Base / res / html / misc / lists.html
@minerva minerva on 13 Jul 9 KB Initial commit
Raw Blame History 
<!DOCTYPE html>
<html>

<head>
    <title>Lists Tests</title>
</head>

<body>
    <h1>Lists Tests</h1>
    <h2>ul</h2>
    <p>default</p>
    <ul>
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>Multiple levels</p>
    <ul>
        <li>First</li>
        <li>Second
            <ul>
                <li>Sub-1</li>
                <li>Sub-2
                    <ul>
                        <li>Sub-sub-1</li>
                        <li>Sub-sub-2</li>
                        <li>Sub-sub-3</li>
                    </ul>
                </li>
                <li>Sub-3</li>
            </ul>
        </li>
    </ul>

    <p>Multiple levels of numbers</p>
    <ol>
        <li>First</li>
        <li>Second
            <ol>
                <li>Sub-1</li>
                <li>Sub-2
                    <ol>
                        <li>Sub-sub-1</li>
                        <li>Sub-sub-2</li>
                        <li>Sub-sub-3</li>
                    </ol>
                </li>
                <li>Sub-3</li>
            </ol>
        </li>
    </ol>

    <p>list-style: disc</p>
    <ul style="list-style: disc;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: square</p>
    <ul style="list-style: square;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: circle</p>
    <ul style="list-style: circle;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: linear-gradient(to top left, red, green)</p>
    <ul style="list-style: linear-gradient(to top left, red, green);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: inside url(list-item.png)</p>
    <ul style="list-style: inside disc url(custom-list-item.png);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: outside url(list-item.png)</p>
    <ul style="list-style: outside disc url(custom-list-item.png);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: outside url(90s-bg.png)</p>
    <ul style="list-style-image: url(90s-bg.png);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: outside url(data:image/png)</p>
    <ul style="list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TiyItDhYVcchQnSyIijpqFYpQodQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxcnRSdJES/5cUWsR4cNyPd/ced+8AoV5mqtkxBqiaZaTiMTGTXRU7XxFAP0Low7TETH0umUzAc3zdw8fXuyjP8j735wgpOZMBPpF4lumGRbxBPLVp6Zz3icOsKCnE58SjBl2Q+JHrsstvnAsOCzwzbKRT88RhYrHQxnIbs6KhEk8SRxRVo3wh47LCeYuzWq6y5j35C4M5bWWZ6zSHEMcilpCECBlVlFCGhSitGikmUrQf8/APOv4kuWRylcDIsYAKVEiOH/wPfndr5ifG3aRgDAi82PbHMNC5CzRqtv19bNuNE8D/DFxpLX+lDsx8kl5raZEjoGcbuLhuafIecLkDDDzpkiE5kp+mkM8D72f0TVmg9xboXnN7a+7j9AFIU1eJG+DgEBgpUPa6x7u72nv790yzvx+Qz3KzTE+QWQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QFFw0jJiBTcq0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAUUlEQVQY02NgIAS+mJj8/2Ji8h+dzQhjMIiLQ1QyMjIw/IcIMaFIMDDAJRCSOAB+SZ4zZxgZXr5EFWVlZeDZupWREdnFMLt5tm5lxOolBmIBACPVG38xjEKaAAAAAElFTkSuQmCC);">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <h2>ol</h2>
    <p>default</p>
    <ol>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>

    <p>with start offset</p>
    <ol start="20">
        <li>Item 20</li>
        <li>Item 21</li>
        <li>Item 22</li>
    </ol>

    <p>with different order</p>
    <ol>
        <li>Item 1</li>
        <li value="5">Item 5</li>
        <li value="2">Item 2</li>
        <li>Item 3</li>
    </ol>

    <p>list-style: decimal</p>
    <ol style="list-style: decimal;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>

    <p>list-style: decimal-leading-zero</p>
    <ol style="list-style: decimal-leading-zero;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: lower-alpha</p>
    <ol style="list-style: lower-alpha;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: upper-alpha</p>
    <ol style="list-style: upper-alpha;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: upper-roman</p>
    <ol style="list-style: upper-roman;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: lower-roman</p>
    <ol style="list-style: lower-roman;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <p>list-style: outside lower-roman url(list-file.png)</p>
    <ol style="list-style: outside lower-roman url(custom-list-item-2.png);">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li value="5">Another Entry</li>
        <li value="2">Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
        <li>Another Entry</li>
    </ol>

    <h2>'none' values</h2>
    <p>list-style: none</p>
    <ul style="list-style: none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: none square</p>
    <ul style="list-style: none square;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: square none</p>
    <ul style="list-style: square none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: url(list-item.png) none</p>
    <ul style="list-style: url(custom-list-item.png) none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: none none </p>
    <ul style="list-style: none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: inside none none</p>
    <ul style="list-style: inside none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: square none none (error)</p>
    <ul style="list-style: square none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

    <p>list-style: none none none (is an error)</p>
    <ul style="list-style: none none none;">
        <li>Entry one</li>
        <li>Another entry</li>
    </ul>

</body>

</html>