CSS Multi-column Layout Module Level 1 CR Test Suite

Column gaps and rules (45 tests)

Test Refs Flags Info
+ 4 Column gaps and rules
multicol-count-computed-001 = Ahem multicolumn | column-rule
multicol-count-computed-002 = Ahem multicolumn | column-rule
multicol-inherit-004 = Ahem multicolumn | inheritance
multicol-rule-001 = Ahem column-rule exceeding column-gap
  • If a column rule is wider than its gap, then the adjacent column boxes overlap the rule. This test checks that if inline content of column boxes uses only 1 twentieth (1/20) of each of the adjacent column box width, then the column rule must shine through 19 twentieths (19/20) of each of the adjacent column boxes (and above their respective backgrounds).
multicol-rule-002 = Ahem multicolumn | column-rule
multicol-rule-003 = Ahem column-rule (basic)
multicol-rule-004 = Ahem 'column-fill: balance' and column-rule
  • This test checks that when 'column-fill: balance' distributes equally inline content into column boxes in a way that does not completely fill column boxes, then column-rule must nevertheless still be painted entirely, that is for the whole length of column boxes, even though the whole inline content may not fill the whole length of the column boxes.
multicol-rule-fraction-003 = Ahem multicolumn | column-rule
multicol-rule-px-001 = Ahem multicolumn | column-rule
multicol-rule-stacking-001 = Ahem multicolumn | column-count, stacking
+ 4.1 ‘column-gap’
multicol-gap-000 = Ahem column-gap (basic)
  • This test checks that column gap appears between two columns.
multicol-gap-001 = AhemOptional 'column-gap: normal'
  • This test checks that the 'normal' column gap is 1em, which is suggested -- and not prescribed -- by the specification.
multicol-gap-002 = Ahem column-gap (basic)
multicol-gap-003 = AhemOptional 'column-gap: normal'
multicol-gap-fraction-001 = Ahem 'column-gap' with increasing values
multicol-gap-large-001 = Ahem 'column-gap' with large value
  • This test checks that when 'column-gap' is large and when used 'column-width' is narrow, then content extends into column-gap until its middle and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'.
multicol-gap-large-002 = Ahem 'column-gap' with large value
multicol-gap-negative-001 = AhemInvalid column-gap with negative value
multicol-height-001 = Ahem column-count and height
  • This test checks that length of column rules is equal to the length of the columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly.
+ 4.2 ‘column-rule-color’
multicol-rule-color-inherit-001 = Ahem column-rule-color: inherit
  • This test checks that, by default, column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case column-rule-color will be inherited from the parent's column-rule-color value.
multicol-rule-color-inherit-002 = Ahem column-rule-color: inherit (complex)
  • In this test, div#parent's computed 'column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's 'column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's 'column-rule-color'.
+ 4.3 ‘column-rule-style’
multicol-rule-style-groove-001 = Ahem 'column-rule-style' groove
multicol-rule-style-inset-001 = Ahem 'column-rule-style' inset
multicol-rule-style-outset-001 = Ahem 'column-rule-style' outset
multicol-rule-style-ridge-001 = Ahem 'column-rule-style' ridge
+ 4.4 ‘column-rule-width’
multicol-rule-fraction-001 = Ahem column-rule-width
multicol-rule-fraction-002 = Ahem wide column-rule-width painted above background-color
  • This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes above the background of the multi-column element but below the inline content inside the multicol element. In this test, the blue column-rule is painted above the yellow background-color but below (under) the black Ahem glyphs.
multicol-rule-large-001 = Ahem excessively wide column-rule-width
  • This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes; its painting will be above background of multi-column element but below the inline content inside the multicol element.
multicol-rule-large-002 Ahem over-excessively wide column-rule-width
  • This test checks that if a column rule is over-excessively wide, even wider than window viewport, then the column rule will exceed the window viewport width but will not generate an horizontal scrollbar since column rules do not take up space.
multicol-rule-percent-001 = AhemInvalid column-rule-width and percentage unit (basic)
  • This test checks that the column-rule-width property does not accept percentage unit in its values.
multicol-rule-samelength-001 = Ahem 'column-rule-width' has same lenght as 'column-gap'
multicol-rule-shorthand-001 = AhemInvalid 'column-rule' shorthand
+ 4.5 ‘column-rule’
multicol-rule-000 = Ahem column-rule shorthand (basic)
multicol-rule-color-001 = Ahem column-rule-color (basic)
multicol-rule-dashed-000 = Ahem column-rule shorthand with 'dashed' border style
multicol-rule-dotted-000 = Ahem column-rule shorthand with 'dotted' border style
multicol-rule-double-000 = Ahem column-rule shorthand with 'double' border style
multicol-rule-groove-000 = Ahem column-rule shorthand with 'groove' border style
multicol-rule-hidden-000 = Ahem column-rule shorthand with 'hidden' border style
multicol-rule-inset-000 = Ahem column-rule shorthand with 'inset' border style
  • 'border-style' values of column-rule are interpreted as in the collapsing border model in which case 'inset' value is drawn the same as 'ridge'.
multicol-rule-none-000 = Ahem column-rule shorthand with 'none' border style
multicol-rule-outset-000 = Ahem column-rule shorthand with 'outset' border style
  • 'border-style' values of column-rule are interpreted as in the collapsing border model in which case 'outset' value is drawn the same as 'groove'.
multicol-rule-ridge-000 = Ahem column-rule shorthand with 'ridge' border style
multicol-rule-solid-000 = Ahem column-rule shorthand with 'solid' border style
multicol-span-000 = AhemBitmaps column-span (basic)