CSS1 list test page

Elements with a 'list-item' value on the 'display' properties are formatted as other block-level elements with the addition of a list-item marker. Through a style sheet, the type of list marker can be set (either an image or one of several glyph-based markers), and the position can be set to either 'inside' or 'outside'. No further information about the positioning of the list-item marker (e.g. which side the marker is on) can be expressed in CSS1.

list-style-type

The lists below test the possible value on the 'list-style-type' property. On some of the lists, the value is set using the shorthand 'list-style' property, but the rendering should be identical.

disc

The list-item marker should be a filled disc in the same color as the text of the LI elements.

• the first item is red
• the second item is blue

circle

The list-item marker should be an open circle where the circumference has the same color as the text of the LI elements

• the first item is red
• the first item is blue

square

The list-item marker should be a square in the same color as the text of the LI elements. In the example below, the OL element is used instead of the UL element. However, since the 'list-style' property has been set to 'square', there should be no digits or letters in the list-item marker.

1. first item
2. second item

decimal

The list-item marker should be a decimal number (1, 2, etc). The number should be in the same color as the text of the LI elements. In the example below, the UL element is used instead of the expected OL element. However, since the 'list-style' property has been set to 'decimal', the presentation should use decimal numbers.

• first item
• second item

lower-roman

The list-item marker should be use lowercase roman numericals (i, ii, iii, iv, v etc).

1. the first item
2. the second item
3. the third item
4. the fourth item
5. the fifth item

upper-roman

The list-item marker should be use uppercase roman numericals (I, II, III, IV, V etc).

1. the first item
2. the second item
3. the third item
4. the fourth item
5. the fifth item

lower-alpha

The list-item marker should be use lowercase letters (e.g. a, b, c etc) for the first and third list items. The second list item should use uppercase letters (as described below).

1. the first item
2. the second item
3. the third item

upper-alpha

The list-item marker should be use lowercase letters (e.g. A, B, C etc) for the first and third list items. The second list item should use lowercase letters (as described above).

1. the first item
2. the second item
3. the third item

none

Due to a 'none' value on 'list-style', the list below should have no list-item marker. The formatting should therefore be identical to elements with a 'display' value of 'block'.

1. the first item
2. the second item
3. the third item

list-style-image

The list below uses an image (depicting the copyright symbol) as the list-item marker. If the image is not available, a square has been specified as a fallback value.

• first item
• second item

list-style-position

outside

In the list below, the markers should be outside the box into which the content of the LI element is floated. Using CSS1, it's not possible to specify the position of the box, but in western left-to-right top-to-bottom scripts the marker is expected to be to the left side of box, aligned with the first line of text.

• This is the first item in a list that has two items in total. In order for this test to work, this list item must be long enough so that the text spans at least two lines.
• This is the second item in a list that has two items in total. In order for this test to work, this list item must be long enough so that the text spans at least two lines.

Here is a sample ASCII rendering:

o This is the first item in a list that has two items in total. In
  order for this test to work, this list item must be long enough so
  that the text spans at least two lines.

o This is the second item in a list that has two items in total. In
  order for this test to work, this list item must be long enough so
  that the text spans at least two lines.

Note that fonts, margins etc are not accurately depicted in the ASCII rendering.

inside

In the list below, the markers should be inside the box into which the content of the LI element is floated and the size of the box will grow correspondingly. Although not explicitly stated in the CSS1 specification, the marker is expected to be placed before the content of the LI element.

• This is the first item in a list that has two items in total. In order for this test to work, this list item must be long enough so that the text spans at least two lines.
• This is the second item in a list that has two items in total. In order for this test to work, this list item must be long enough so that the text spans at least two lines.

Here is a sample ASCII rendering:

  o This is the first item in a list that has two items in total. In
  order for this test to work, this list item must be long enough so
  that the text spans at least two lines.

  o This is the second item in a list that has two items in total. In
  order for this test to work, this list item must be long enough so
  that the text spans at least two lines.

Note that fonts, margins etc are not accuratly depicted in the ASCII rendering.

DIV UL { 
  margin: 0; 
  background: red; 
  list-style: outside square;
}

DIV UL LI { 
  background: lime;
  margin-top: 6px; 
  margin-right: 6px;
  margin-left: 40px; 
  margin-bottom: 6px;
  padding: 0; 
  border: 0 
}