RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 12:37:45 +00:00
Code Issues Activity Actions

LibWeb: Implement and use ListStyleStyleValue

Browse source 
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.
This commit is contained in:
Sam Atkins 2021-08-03 15:56:51 +01:00 • committed by Andreas Kling
parent dcbfb61816
commit 0e15561df0
7 changed files with 246 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

84
Base/res/html/misc/lists.html
View file

@ -32,6 +32,18 @@
<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>
@ -175,6 +187,78 @@
<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>