system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity
serenity/Base/res/html/misc/lists.html
Bastiaan van der Plaat 1cdbfc2ff1 LibWeb: Add ol start and li value attributes support
2023-11-09 16:10:54 +01:00

334 lines
9.4 KiB
HTML
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>
Reference in a new issue View git blame Copy permalink