WeasySuite - 12.5.1 Lists: the 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' properties

Chapter 12 - Generated content, automatic numbering, and lists - 12.5.1 Lists: the 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' properties

Go to the relevant page of the specification.

bidi-list-001: direction:rtl - unordered list
direction:rtl should apply to unordered lists, putting bullets on the right
bidi-list-002: direction:rtl - nested unordered list
direction:rtl should apply to nested unordered lists, putting bullets on the right and offset leftwards
bidi-list-003: direction:rtl - ordered list
direction:rtl should apply to nested ordered lists, putting bullets on the right and offset leftwards
bidi-list-004: text-align: justify and direction:rtl - unordered list
text-align: justify should apply to unordered lists in rtl context without affecting their rtlness
bidi-list-005: text-align: left and direction:rtl - unordered list
text-align:left should be applied to unordered list in rtl context without affecting its rtlness
bidi-list-006: text-align: right and direction:rtl - unordered list
text-align:right should be applied to unordered list in rtl context without affecting its rtlness
bidi-list-007: text-align: center and direction:rtl - unordered list
text-align: center should apply to unordered lists in rtl context without affecting their rtlness
counter-reset-increment-002: counter-reset - negative value with positive counter-increment
A positive counter-increment can apply to a counter-reset that is negative.
list-alignment-001: List style numbering alignment
That the list numbering is aligned consistently.
list-bidi-000: outside list-item marker position in BIDI
The list-item marker is on the right side for an RTL item and on the left side for an LTR one.
list-style-001: List-style with only list-style-type as a value
The shorthand property 'list-style' applies 'list-style-type'.
list-style-002: List-style with only list-style-position as a value
The shorthand property 'list-style' applies 'list-style-position'.
list-style-003 (image): List-style with only list-style-image as a value
The shorthand property 'list-style' applies 'list-style-image'.
list-style-004: List-style with list-style-type list-style-position as values
The shorthand property 'list-style' applies 'list-style-type' and 'list-style-position'.
list-style-005 (image): List-style with list-style-type list-style-image as values
The shorthand property 'list-style' applies 'list-style-type' and 'list-style-image'.
list-style-006: List-style with 'list-style-position' and 'list-style-type' as values
The shorthand property 'list-style' applies 'list-style-position' and 'list-style-type'.
list-style-007 (image): List-style with list-style-position list-style-image as values
The shorthand property 'list-style' applies 'list-style-position' and 'list-style-image'.
list-style-008 (image): List-style with list-style-image list-style-type as values
The shorthand property 'list-style' applies 'list-style-image' and 'list-style-type'.
list-style-009 (image): List-style with list-style-image list-style-position as values
The shorthand property 'list-style' applies 'list-style-image' and 'list-style-position'.
list-style-010: List-style: list-style-type list-style-position list-style-image
The shorthand property 'list-style' applies 'list-style-type', 'list-style-position' and 'list-style-image'.
list-style-011: List-style with list-style-type list-style-image list-style-position as values
The shorthand property 'list-style' applies 'list-style-type', 'list-style-image' and 'list-style-position'.
list-style-012: List-style with list-style-position list-style-type list-style-image as values
The shorthand property 'list-style' applies 'list-style-position', 'list-style-type' and 'list-style-image'.
list-style-013: List-style with list-style-position list-style-image list-style-type as values
The shorthand property 'list-style' applies 'list-style-position', 'list-style-image' and 'list-style-type'.
list-style-014: List-style with list-style-image list-style-type list-style-position as values
The shorthand property 'list-style' applies 'list-style-image', 'list-style-type' and 'list-style-position'.
list-style-015: List-style with list-style-image list-style-position list-style-type as values
The shorthand property 'list-style' applies 'list-style-image', 'list-style-position' and 'list-style-type'.
list-style-016: List-style inheriting a single value
The shorthand property 'list-style' set to 'inherit' inherits a single value from the parent.
list-style-017: List-style inheriting two values
The shorthand property 'list-style' set to 'inherit' inherits two values from the parent.
list-style-018: List-style inheriting three values
The shorthand property 'list-style' set to 'inherit' inherits three values from the parent.
list-style-019 (image): list-style - initial value
'list-style' property is a shorthand notation that sets the three properties 'list-style-type', 'list-style-image' and 'list-style-position'. If one of the 3 list-style properties is not specified explicitly, then such 'list-style' property is assigned its initial value as indicated in its property definition.
list-style-applies-to-001: List-style applied to elements with 'display' set to 'table-row-group'
The 'list-style' property applies to elements with 'display' set to 'table-row-group'.
list-style-applies-to-002: List-style applied to elements with 'display' set to 'table-header-group'
The 'list-style' property applies to elements with 'display' set to 'table-header-group'.
list-style-applies-to-003: List-style applied to elements with 'display' set to 'table-footer-group'
The 'list-style' property applies to elements with 'display' set to 'table-footer-group'.
list-style-applies-to-004: List-style applied to elements with 'display' set to 'table-row'
The 'list-style' property applies to elements with 'display' set to 'table-row'.
list-style-applies-to-005: List-style applied to elements with 'display' set to 'table-column-group'
The 'list-style' property applies to elements with 'display' set to 'table-column-group'.
list-style-applies-to-006: List-style applied to elements with 'display' set to 'table-column'
The 'list-style' property applies to elements with 'display' set to 'table-column'.
list-style-applies-to-007: List-style applied to elements with 'display' set to 'table-cell'
The 'list-style' property applies to elements with 'display' set to 'table-cell'.
list-style-applies-to-008: List-style applied to elements with 'display' set to 'inline'
The 'list-style' property applies to elements with 'display' set to 'inline'.
list-style-applies-to-009: List-style applied to elements with 'display' set to 'block'
The 'list-style' property applies to elements with 'display' set to 'block'.
list-style-applies-to-010: List-style applied to elements with 'display' set to 'list-item'
The 'list-style' property applies to elements with 'display' set to 'list-item'.
list-style-applies-to-012: List-style applied to elements with 'display' set to 'inline-block'
The 'list-style' property applies to elements with 'display' set to 'inline-block'.
list-style-applies-to-013: List-style applied to elements with 'display' set to 'table'
The 'list-style' property applies to elements with 'display' set to 'table'.
list-style-applies-to-014: List-style applied to elements with 'display' set to 'inline-table'
The 'list-style' property applies to elements with 'display' set to 'inline-table'.
list-style-applies-to-015: List-style applied to elements with 'display' set to 'table-caption'
The 'list-style' property applies to elements with 'display' set to 'table-caption'.
list-style-image-001 (image): List-style-image set to 'inherit'
The 'list-style-image' property set to 'inherit' inherits its value from the parent element.
list-style-image-002 (image): List-style-image set using the url() function
The 'list-style-image' property set to the url() function properly renders an image.
list-style-image-003 (image): List-style-image set to 'none'
The 'list-style-image' property set to 'none' does not render any image.
list-style-image-004: CSS List Images: invalid
list-style-image-005: CSS Lists: list-item with list-style-image
list-style-image-006: list-style-image in rtl context
list-style-image should be positioned to the right in rtl context
list-style-image-applies-to-001 (image): List-style-image applied to elements with 'display' set to 'table-row-group'
The 'list-style-image' property applies to elements with 'display' set to 'table-row-group'.
list-style-image-applies-to-002 (image): List-style-image applied to elements with 'display' set to 'table-header-group'
The 'list-style-image' property applies to elements with 'display' set to 'table-header-group'.
list-style-image-applies-to-003 (image): List-style-image applied to elements with 'display' set to 'table-footer-group'
The 'list-style-image' property applies to elements with 'display' set to 'table-footer-group'.
list-style-image-applies-to-004 (image): List-style-image applied to elements with 'display' set to 'table-row'
The 'list-style-image' property applies to elements with 'display' set to 'table-row'.
list-style-image-applies-to-005 (image): List-style-image applied to elements with 'display' set to 'table-column-group'
The 'list-style-image' property applies to elements with 'display' set to 'table-column-group'.
list-style-image-applies-to-006 (image): List-style-image applied to elements with 'display' set to 'table-column'
The 'list-style-image' property applies to elements with 'display' set to 'table-column'.
list-style-image-applies-to-007 (image): List-style-image applied to elements with 'display' set to 'table-cell'
The 'list-style-image' property applies to elements with 'display' set to 'table-cell'.
list-style-image-applies-to-008 (image): List-style-image applied to elements with 'display' set to 'inline'
The 'list-style-image' property applies to elements with 'display' set to 'inline'.
list-style-image-applies-to-009 (image): List-style-image applied to elements with 'display' set to 'block'
The 'list-style-image' property applies to elements with 'display' set to 'block'.
list-style-image-applies-to-010 (image): List-style-image applied to elements with 'display' set to 'list-item'
The 'list-style-image' property applies to elements with 'display' set to 'list-item'.
list-style-image-applies-to-012 (image): List-style-image applied to elements with 'display' set to 'inline-block'
The 'list-style-image' property applies to elements with 'display' set to 'inline-block'.
list-style-image-applies-to-013 (image): List-style-image applied to elements with 'display' set to 'table'
The 'list-style-image' property applies to elements with 'display' set to 'table'.
list-style-image-applies-to-014 (image): List-style-image applied to elements with 'display' set to 'inline-table'
The 'list-style-image' property applies to elements with 'display' set to 'inline-table'.
list-style-image-applies-to-015 (image): List-style-image applied to elements with 'display' set to 'table-caption'
The 'list-style-image' property applies to elements with 'display' set to 'table-caption'.
list-style-position-001: Marker box position - first-child block box with 'overflow'
The position of a first-child block box inside a principal box must not be affected by 'overflow' being applied to the first-child, when marker box is positioned outside the principal box
list-style-position-002: Marker box position - descendant block box with 'overflow'
The position of a descendant block box inside a principal box must not be affected by 'overflow' being applied to the descendant, when marker box is positioned outside the principal box
list-style-position-003: Marker box position - list-item overflow - 'list-style-position:inside'
'overflow' applied to principal box and presence of child block box (in normal flow) must have no affect on visibility or position of marker box
list-style-position-004 (may): Marker box position - list-item overflow - 'list-style-position:outside'
'overflow' applied to the list-item must not clip the marker box
list-style-position-005: Marker box position (inside principal box) - block box in normal flow (as child of principal box)
Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (in normal flow) must create a new stacking context below the marker box
list-style-position-006: Marker box position (inside principal box) - block box with 'float:left' (as child of principal box)
Since a marker box is the first inline element in the principal box when 'list-style-position:inside', the following block box (floated to the left) must visually appear before the marker box in the rendered document
list-style-position-007: Marker box position (inside principal box) - block box with 'float:right' (as child of principal box)
list-style-position-008: Marker box position (outside principal box) - floated-left child
A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-009: Marker box position (outside principal box) - floated-right child
A floated element (as a child of the principal box) should not affect the horizontal position of the marker box (positioned outside principal box) in relation to the principal box's content
list-style-position-010: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The presence of the :before pseudo element in this context, must have no affect on the position of the marker box of the associated element as it must still appear to the outside left edge of it's own principal box (since 'list-style-position:outside').
list-style-position-011: Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-012: Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-013: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The position of the marker box of the associated element must still appear to the outside left edge of it's principal box (since 'list-style-position:outside') and should be positioned towards the top of this principal box. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).
list-style-position-014: Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's principal box (since 'list-style-position:outside').
list-style-position-015: Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). Since this :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the :before pseudo element must still appear to the outside left edge of it's associated element's principal box (since 'list-style-position:outside').
list-style-position-016: Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) the :before pseudo element.
list-style-position-017: Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, The document tree content of the associated element must appear alongside (after) the :before pseudo element. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).
list-style-position-019 (ahem): list-style-position - text-indent
Text-indent should only format the indentation of the first line of text of a list-item's principal block box when the list-item's list-style-position is set to outside
list-style-position-020: List-style-position set to 'inside'
The 'list-style-position' property set to 'inside' places the marker inside of the list item principal block box.
list-style-position-021: List-style-position set to 'outside'
The 'list-style-position' property set to 'outside' places the marker outside of the list item principal block box.
list-style-position-022: List-style-position set to 'inherit'
The 'list-style-position' property set to 'inherit' retrieves its value from its parent element.
list-style-position-023: Nested inside list markers (ltr)
list-style-position-024: Nested inside list markers (rtl)
list-style-position-025: list-style-position in rtl context
list-style-position:inside in rtl context should let text flow below the bullet on the right side
list-style-position-applies-to-001: List-style-position applied to elements with 'display' set to 'table-row-group'
The 'list-style-position' property applies to elements with 'display' set to 'table-row-group'.
list-style-position-applies-to-002: List-style-position applied to elements with 'display' set to 'table-header-group'
The 'list-style-position' property applies to elements with 'display' set to 'table-header-group'.
list-style-position-applies-to-003: List-style-position applied to elements with 'display' set to 'table-footer-group'
The 'list-style-position' property applies to elements with 'display' set to 'table-footer-group'.
list-style-position-applies-to-004: List-style-position applied to elements with 'display' set to 'table-row'
The 'list-style-position' property applies to elements with 'display' set to 'table-row'.
list-style-position-applies-to-005: List-style-position applied to elements with 'display' set to 'table-column-group'
The 'list-style-position' property applies to elements with 'display' set to 'table-column-group'.
list-style-position-applies-to-006: List-style-position applied to elements with 'display' set to 'table-column'
The 'list-style-position' property applies to elements with 'display' set to 'table-column'.
list-style-position-applies-to-007: List-style-position applied to elements with 'display' set to 'table-cell'
The 'list-style-position' property applies to elements with 'display' set to 'table-cell'.
list-style-position-applies-to-008: List-style-position applied to elements with 'display' set to 'inline'
The 'list-style-position' property applies to elements with 'display' set to 'inline'.
list-style-position-applies-to-009: List-style-position applied to elements with 'display' set to 'block'
The 'list-style-position' property applies to elements with 'display' set to 'block'.
list-style-position-applies-to-010: List-style-position applied to elements with 'display' set to 'list-item'
The 'list-style-position' property applies to elements with 'display' set to 'list-item'.
list-style-position-applies-to-012: List-style-position applied to elements with 'display' set to 'inline-block'
The 'list-style-position' property applies to elements with 'display' set to 'inline-block'.
list-style-position-applies-to-013: List-style-position applied to elements with 'display' set to 'table'
The 'list-style-position' property applies to elements with 'display' set to 'table'.
list-style-position-applies-to-014: List-style-position applied to elements with 'display' set to 'inline-table'
The 'list-style-position' property applies to elements with 'display' set to 'inline-table'.
list-style-position-applies-to-015: List-style-position applied to elements with 'display' set to 'table-caption'
The 'list-style-position' property applies to elements with 'display' set to 'table-caption'.
list-style-position-inside-002: inside list-item marker position wrt :before and :after
The list-item marker is on the right side for an RTL item and on the left side for an LTR one.
list-style-type-001: List-style-type set to 'disc'
The 'list-style-type' property set to 'disc' renders the correct list item marker.
list-style-type-002: List-style-type set to 'circle'
The 'list-style-type' property set to 'circle' renders the correct list item marker.
list-style-type-003: List-style-type set to 'square'
The 'list-style-type' property set to 'square' renders the correct list item marker.
list-style-type-004: List-style-type set to 'decimal'
The 'list-style-type' property set to 'decimal' renders the correct list item marker.
list-style-type-005: List-style-type set to 'decimal-leading-zero'
The 'list-style-type' property set to 'decimal-leading-zero' renders the correct list item marker.
list-style-type-006: List-style-type set to 'lower-roman'
The 'list-style-type' property set to 'lower-roman' renders the correct list item marker.
list-style-type-007: List-style-type set to 'upper-roman'
The 'list-style-type' property set to 'upper-roman' renders the correct list item marker.
list-style-type-008: List-style-type set to 'lower-greek'
The 'list-style-type' property set to 'lower-greek' renders the correct list item marker.
list-style-type-009: List-style-type set to 'lower-latin'
The 'list-style-type' property set to 'lower-latin' renders the correct list item marker.
list-style-type-010: List-style-type set to 'upper-latin'
The 'list-style-type' property set to 'upper-latin' renders the correct list item marker.
list-style-type-011: List-style-type set to 'armenian'
The 'list-style-type' property set to 'armenian' renders the correct list item marker.
list-style-type-012: List-style-type set to 'georgian'
The 'list-style-type' property set to 'georgian' renders the correct list item marker.
list-style-type-013: List-style-type set to 'lower-alpha'
The 'list-style-type' property set to 'lower-alpha' renders the correct list item marker.
list-style-type-014: List-style-type set to 'upper-alpha'
The 'list-style-type' property set to 'upper-alpha' renders the correct list item marker.
list-style-type-015: List-style-type set to 'none'
The 'list-style-type' property set to 'none' does not display a marker bullet.
list-style-type-016: List-style-type set to 'inherit'
The 'list-style-type' property set to 'inherit' inherits the value from the parent element.
list-style-type-017: CSS Lists: Negative Numbers
list-style-type-018: list-style-type in rtl context
list-style-type should be correctly applied in rtl context
list-style-type-applies-to-001: List-style-type applied to elements with 'display' set to 'table-row-group'
The 'list-style-type' property applies to elements with 'display' set to 'table-row-group'.
list-style-type-applies-to-002: List-style-type applied to elements with 'display' set to 'table-header-group'
The 'list-style-type' property applies to elements with 'display' set to 'table-header-group'.
list-style-type-applies-to-003: List-style-type applied to elements with 'display' set to 'table-footer-group'
The 'list-style-type' property applies to elements with 'display' set to 'table-footer-group'.
list-style-type-applies-to-004: List-style-type applied to elements with 'display' set to 'table-row'
The 'list-style-type' property applies to elements with 'display' set to 'table-row'.
list-style-type-applies-to-005: List-style-type applied to elements with 'display' set to 'table-column-group'
The 'list-style-type' property applies to elements with 'display' set to 'table-column-group'.
list-style-type-applies-to-006: List-style-type applied to elements with 'display' set to 'table-column'
The 'list-style-type' property applies to elements with 'display' set to 'table-column'.
list-style-type-applies-to-007: List-style-type applied to elements with 'display' set to 'table-cell'
The 'list-style-type' property applies to elements with 'display' set to 'table-cell'.
list-style-type-applies-to-008: List-style-type applied to elements with 'display' set to 'inline'
The 'list-style-type' property applies to elements with 'display' set to 'inline'.
list-style-type-applies-to-009: List-style-type applied to elements with 'display' set to 'block'
The 'list-style-type' property applies to elements with 'display' set to 'block'.
list-style-type-applies-to-010: List-style-type applied to elements with 'display' set to 'list-item'
The 'list-style-type' property applies to elements with 'display' set to 'list-item'.
list-style-type-applies-to-012: List-style-type applied to elements with 'display' set to 'inline-block'
The 'list-style-type' property applies to elements with 'display' set to 'inline-block'.
list-style-type-applies-to-013: List-style-type applied to elements with 'display' set to 'table'
The 'list-style-type' property applies to elements with 'display' set to 'table'.
list-style-type-applies-to-014: List-style-type applied to elements with 'display' set to 'inline-table'
The 'list-style-type' property applies to elements with 'display' set to 'inline-table'.
list-style-type-applies-to-015: List-style-type applied to elements with 'display' set to 'table-caption'
The 'list-style-type' property applies to elements with 'display' set to 'table-caption'.
list-style-type-armenian-001: list-style-type - armenian, up to 100
Setting list-style-type to armenian will cause list numbering to format numbers up to 9,999 in the way described in CSS3 Lists module.
list-style-type-georgian-001: list-style-type - georgian
Setting list-style-type to georgian will cause list numbering to format numbers in the way described in the CSS3 Lists module plus corrections by George Chavchanidze.
list-style-type-lower-greek-001: list-style-type - lower-greek
Setting list-style-type to lower-greek will cause list numbering to format numbers in the way described in the CSS3 Lists module.
lists-alpha-wrap-001: Alphabetic list wrapping
Alphabetic list wrapping does not exert unexpected behavior to a user.
width-inherit-001: Inheriting Explicit Widths
The computed width is inherited, even if the 'width' property does not apply.