Chapter 6 - Spanning columns - 6.1 ‘column-span’
Go to the relevant page of the specification.
- multicol-fill-auto-block-children-002
-
'column-fill: auto' and 'column-span: all' (complex)
This test checks that if 'column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a 'column-span: all' element will occupy more space in a multi-column element than a 'column-span: none' element, therefore reducing available space for content in column boxes. - multicol-span-all-001 (ahem)
-
'column-span' element (basic)
- multicol-span-all-002 (ahem)
-
'column-span' element - large margin-left and 'overflow: hidden'
- multicol-span-all-003 (ahem)
-
'column-span: all' (basic)
This test checks that 'column-span: all' spans across all column boxes and that content in the normal flow (in this test, the '55555 55555 55555 55555') that appears before the element is automatically balanced across all columns before the element appears. - multicol-span-all-child-001 (ahem, may)
-
'column-span: all' element with block children (complex)
This test checks how a spanning element with block children is rendered inside a multi-column element with a set height which is insufficient for rendering the entire spanning element. Since the available height (10em)is insufficient to render the spanning element (height needed: 3 times 4em) entirely inside the multi-column element, then UA may treat 'column-span: all' as 'column-span: none'. - multicol-span-all-child-002 (may)
-
'column-span: all' element with block children (complex)
This test checks how spanning elements with block children is rendered inside a multi-column element with a set height which is insufficient for rendering both spanning elements entirely. Since available space (height of 8em) is insufficient to render both spanning elements (4 times 4em plus 2em) entirely inside the multi-column element, then UA may treat 'column-span: all' as 'column-span: none'. - multicol-span-all-margin-001 (ahem, may)
-
'column-span: all' element and width exceeding available multi-colum width (complex)
This test checks that when 'overflow' is set to 'hidden' on a multi-column element, then any spanning ('column-span: all') element exceeding the available width of the multi-column should be clipped accordingly. - multicol-span-all-margin-002 (ahem)
-
'column-span: all' element
- multicol-span-all-margin-bottom-001 (ahem)
-
'column-span: all' element with vertical margins and width exceeding available multi-colum width (complex)
- multicol-span-all-margin-nested-001 (ahem)
-
vertically adjacent spanning elements with nested margins (complex)
In this test, the first h4 element would collapse its margin bottom with the top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child. - multicol-span-all-margin-nested-002 (ahem)
-
vertically adjacent spanning elements with nested margins (complex)
In this test, the first h4 element would collapse its margin bottom with the resulting (from a margin collapsing with its nested h4 element) of top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child. - multicol-span-float-001 (ahem)
-
floating a column-spanning element
This test checks that 'column-span' does not apply to floating element.