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 list-style-image for unordered lists, and this overrides list-style-type. While list-style will override that, this is not always desirable; in such cases, one will want to use list-style-image: none; then a list-style-type.

Unordered list test cases

UL-only

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

• Foo
• Bar

FAIL

LI only:

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

• Foo
• Bar

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>

• Foo
• Bar

FAIL

UL, using list-style: none instead:

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

• Foo
• Bar

OK

LI, using list-style: none instead:

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

• Foo
• Bar

OK

Both (redundant), using list-style-type: square:

 <ul style="list-style-type: square;">
 <li style="list-style-type: square;">Foo</li>
 <li style="list-style-type: square;">Bar</li>
 </ul>

• Foo
• Bar

FAIL

This means neither alone will work either.

UL, using list-style: square instead:

 <ul style="list-style: square;">
 <li>Foo</li>
 <li>Bar</li>
 </ul>

• Foo
• Bar

OK

LI, using list-style: square instead:

 <ul>
 <li style="list-style: square;">Foo</li>
 <li style="list-style: square;">Bar</li>
 </ul>

• Foo
• Bar

OK

Both (redundant), clearing with list-style-image: none 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>

• Foo
• Bar

OK

This means list-style-type: square will also work here, but we need to see if these work non-redundantly.

UL, clearing with list-style-image: none first:

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

• Foo
• Bar

OK

LI, clearing with list-style-image: none 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>

• Foo
• Bar

OK

Default (HTML)

 <ul>
 <li>Foo</li>
 <li>Bar</li>
 </ul>

• Foo
• Bar

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.

OL-only

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

1. Foo
2. Bar

LI only:

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

1. Foo
2. Bar

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>

1. Foo
2. Bar

OL, using list-style instead:

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

1. Foo
2. Bar

LI, using list-style instead:

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

1. Foo
2. Bar

Both (redundant):

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

1. Foo
2. Bar

Default (HTML)

 <ol>
 <li>Foo</li>
 <li>Bar</li>
 </ol>

1. Foo
2. Bar

Default (Wikimarkup #):

#Foo
#Bar

1. Foo
2. Bar