3 The number and width of columns

Chapter 3 - The number and width of columns - 3 The number and width of columns

Go to the relevant page of the specification.

grid-inline-multicol-001
'column-*' properties from inline grid container does not apply to grid items
This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container.
grid-multicol-001
'column-*' properties from grid container does not apply to grid items
This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container.
multicol-columns-001 (ahem)
columns shorthand (basic)
This test checks that 'columns: 100px 6' shorthand correctly set 'column-width' and 'column-count' properties.
multicol-columns-002 (ahem)
columns shorthand (basic)
This test checks that 'columns: 6 100px' shorthand correctly set 'column-width' and 'column-count' properties.
multicol-columns-003 (ahem)
columns shorthand (basic)
This test checks that 'columns: 100px auto' shorthand correctly set 'column-width' and 'column-count' properties.
multicol-columns-004 (ahem)
columns shorthand (basic)
This test checks that 'columns: auto 100px' shorthand correctly set 'column-width' and 'column-count' properties.
multicol-columns-005 (ahem)
columns shorthand (basic)
This test checks that 'columns: 6' shorthand correctly set 'column-width' and 'column-count' properties. 'columns: 6' is equivalent to 'column-width: auto' and 'column-count: 6'.
multicol-columns-006 (ahem)
columns shorthand (basic)
This test checks that 'columns: 6 auto' shorthand correctly set 'column-width' and 'column-count' properties.
multicol-columns-007 (ahem)
columns shorthand (basic)
This test checks that 'columns: auto 6' shorthand correctly set 'column-width' and 'column-count' properties.
multicol-columns-invalid-001 (ahem, invalid)
invalid columns shorthand
This test checks that 'columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored.
multicol-columns-invalid-002 (ahem, invalid)
invalid columns shorthand
This test checks that 'columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored.
multicol-columns-toolong-001 (ahem)
narrower inline content inside wider colum box
This test checks the rendering of inline content (2em) inside wider (3em) column boxes.
multicol-count-computed-001 (ahem)
multicolumn | column-rule
multicol-count-computed-002 (ahem)
multicolumn | column-rule
multicol-count-computed-003 (ahem)
column-rule and overflow inside (complex test)
This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st column-rule.
multicol-count-computed-005 (ahem)
column-rule and overflow inside (complex test)
This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st column-rule.
multicol-count-large-001 (ahem)
multicolumn | column-count
multicol-count-large-002 (ahem)
multicolumn | column-count
multicol-count-negative-001 (ahem, invalid)
negative 'column-count' value
This test checks that a specified negative 'column-count' value is invalid and ignored.
multicol-count-negative-002 (ahem, invalid)
zero 'column-count' value
This test checks that a specified 0 'column-count' value is invalid and ignored.
multicol-count-non-integer-001 (ahem, invalid)
non-integer 'column-count' value
This test checks that a specified real 'column-count' value is invalid and ignored.
multicol-count-non-integer-002 (ahem, invalid)
non-integer 'column-count' value
This test checks that a specified real 'column-count' value is invalid and ignored.
multicol-count-non-integer-003 (ahem, invalid)
non-integer 'column-count' value
This test checks that a specified real 'column-count' value is invalid and ignored.
multicol-inherit-003 (ahem)
multicolumn | inheritance
multicol-shorthand-001 (ahem, invalid)
multicolumn | invalid
multicol-table-cell-001 (ahem)
column-count and table-cell (basic)
This test checks that 'column-count' applies to elements with 'display' set to 'table-cell'.
multicol-table-cell-height-001 (ahem)
column-count and height of table-cell (basic)
This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height.
multicol-table-cell-height-002 (ahem)
column-count and height of table-cell (basic)
This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height. A set height for a table-cell still remains the minimum height required by the content, even when its layout is influenced by, conditioned by a multi-column layout.
multicol-width-001 (ahem)
column-width (basic)
multicol-width-002 (ahem)
column-width (basic)
multicol-width-003 (ahem)
column-width (basic)
multicol-width-count-001 (ahem)
column-count and column-width (basic)
multicol-width-ems-001
multicolumn | column-width