mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 19:27:44 +00:00
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.
This commit is contained in:
parent
dcbfb61816
commit
0e15561df0
7 changed files with 246 additions and 98 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue