User:SMcCandlish/Sandbox/Styling ordered and unordered list markers

Some test cases for styling list appearance. Some results are not necessarily as expected, because the site-wide stylesheet is using a  for unordered lists, and this overrides. While  will override, this is not always desirable; in such cases, one will want to use   then a.

Unordered list test cases
-only  Foo Bar   Foo Bar  FAIL

only:  Foo Bar</li> </ul> <ul style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ul> FAIL

Both (redundant): <ul style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ul> <ul style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ul> FAIL

, using  instead: <ul style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ul> <ul style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ul> OK

LI, using  instead: <ul> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ul> <ul> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ul> OK

Both (redundant), using : <ul style="list-style-type: square;"> <li style="list-style-type: square;">Foo</li> <li style="list-style-type: square;">Bar</li> </ul> <ul style="list-style-type: square;"> <li style="list-style-type: square;">Foo</li> <li style="list-style-type: square;">Bar</li> </ul> FAIL

This means neither alone will work either.

, using  instead: <ul style="list-style: square;"> <li>Foo</li> <li>Bar</li> </ul> <ul style="list-style: square;"> <li>Foo</li> <li>Bar</li> </ul> OK

, using  instead: <ul> <li style="list-style: square;">Foo</li> <li style="list-style: square;">Bar</li> </ul> <ul> <li style="list-style: square;">Foo</li> <li style="list-style: square;">Bar</li> </ul> OK

Both (redundant), clearing with  first: <ul style="list-style-image: none; list-style-type: none;"> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul> <ul style="list-style-image: none; list-style-type: none;"> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul> OK

This means  will also work here, but we need to see if these work non-redundantly.

, clearing with  first: <ul style="list-style-image: none; list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ul> <ul style="list-style-image: none; list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ul> OK

, clearing with  first: <ul> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul> <ul> <li style="list-style-image: none; list-style-type: none;">Foo</li> <li style="list-style-image: none; list-style-type: none;">Bar</li> </ul> OK

Default (HTML) <ul> <li>Foo</li> <li>Bar</li> </ul> <ul> <li>Foo</li> <li>Bar</li> </ul>

Default (Wikimarkup ): *Foo *Bar
 * Foo
 * Bar

Both specific and general code work fine with ordered lists
These are not using an image in the default stylesheet, so there is nothing to override.

ALL of these work.

-only <ol style="list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ol> <ol style="list-style-type: none;"> <li>Foo</li> <li>Bar</li> </ol>

only: <ol> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol> <ol> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol>

Both (redundant): <ol style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol> <ol style="list-style-type: none;"> <li style="list-style-type: none;">Foo</li> <li style="list-style-type: none;">Bar</li> </ol>

, using  instead: <ol style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ol> <ol style="list-style: none;"> <li>Foo</li> <li>Bar</li> </ol>

, using  instead: <ol> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol> <ol> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol>

Both (redundant): <ol style="list-style: none;"> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol> <ol style="list-style: none;"> <li style="list-style: none;">Foo</li> <li style="list-style: none;">Bar</li> </ol>

Default (HTML) <ol> <li>Foo</li> <li>Bar</li> </ol> <ol> <li>Foo</li> <li>Bar</li> </ol>

Default (Wikimarkup ): #Foo #Bar
 * Foo
 * Bar