RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 11:32:43 +00:00
Code Issues Activity Actions
serenity/Base/res/html/misc/lists.html
Sam Atkins 0e15561df0 LibWeb: Implement and use ListStyleStyleValue 
Yes, the name is silly, but it's a StyleValue for list-style, so...
yeah. :^)

Since `list-style-type` and `list-style-image` can both have `none` as a
value, and can appear in any order, we have to handle it separately, and
then assign either or both of those to `none` depending on how many
`none`s there are, and whether those sub-properties already have values.

Added some extra test cases to lists.html to cover list-style-image and
list-style-position parts of the list-style shorthand, and the `none`
values.
2021-08-14 12:45:01 +02:00

264 lines
6.8 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>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: 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>
<h2>ol</h2>
<p>default</p>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</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>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-alpha</p>
<ol style="list-style: lower-alpha;">
<li>First</li>
<li>Second</li>
<li>Third</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>
<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>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>
<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>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: lower-roman</p>
<ol style="list-style: lower-roman;">
<li>First</li>
<li>Second</li>
<li>Third</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: outside lower-roman url(list-file.png)</p>
<ol style="list-style: outside lower-roman url(custome-list-item-2.png);">
<li>First</li>
<li>Second</li>
<li>Third</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>
<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