diff options
| author | Sam Atkins <atkinssj@gmail.com> | 2021-08-03 15:56:51 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2021-08-14 12:45:01 +0200 |
| commit | 0e15561df08a5fe0d080cbd3a2dcb1b0c750a24b (patch) | |
| tree | b5324674ba0a4e1bec888b166859d0478e32b895 /Base/res/html/misc/lists.html | |
| parent | dcbfb618169858dcea1a654505c55f72b6e277b7 (diff) | |
| download | serenity-0e15561df08a5fe0d080cbd3a2dcb1b0c750a24b.zip | |
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.
Diffstat (limited to 'Base/res/html/misc/lists.html')
| -rw-r--r-- | Base/res/html/misc/lists.html | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/Base/res/html/misc/lists.html b/Base/res/html/misc/lists.html index 1c72a0b392..643ca41ed7 100644 --- a/Base/res/html/misc/lists.html +++ b/Base/res/html/misc/lists.html @@ -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> |