CSS3 multicol test suite

Basic column layout

Tests 1-4 should all have three columns, and they should look identical.

columns: 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-count: 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

columns: 200px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-width: 200px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

Reducing the number of columns

In the two tests below, the multicol element is not wide enough for tree columns (due to a column gap, and the width of the content area, respectively), and the content will therefore be laid out in 2 columns. The two tests should look very similar. (They are, however, not identical: test #5 has a 1px gap between columns, and the multicol element of test #6 has a width of 598px instead of 600px.)

column-gap: 1px; column-width: 200px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

box-sizing: border-box; column-width: 200px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

Column gaps

column-width: 200px; column-gap: 200px

In this test, there should be two columns with a 200px gap between them. The visual effect is that it looks like there is an empty middle column in between the two columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Basic column rules

The two tests below should look identical. They both have a 3-column textual layout identical to tests 1-4. Also, they have a 1px lime-colored rule between the columns.

column-rule: 1px solid lime

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule-width: 1px; column-rule-style: solid; column-rule-color: lime

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

Column rule styles

The tests below are identical, except that the column-rule-style differs.

column-rule: 10px lime none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime dashed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime solid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime double

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime groove

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime ridge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime inset

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

column-rule: 10px lime outset

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

Column rule widths

column-rule: thin lime solid

In the test below, the column rule should be as as wide as the border around this word.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

The two tests below should look identical.

column-rule: 500px solid lime

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

background: lime

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

Balanced columns

The two tests and the reference rendering below should look identical; each column should have one sentence.

column-fill: balance

The first sentence.
The second sentence.
The third sentence.

column-fill: balance

The first sentence.

The second sentence.

The third sentence.

The first sentence. The second sentence. The third sentence.

Balanced columns & constrained height

Below there is one test and one reference rendering. They should look the alike.

height: 10em; column-fill: balance

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Constrained heights

column-count: 2; height: 8em

In this test, the height of the multicol element is constrained and the content of the multicol element no longer fits. Therefore, more columns are created outside the multicol element, in the inline direction. Below, there should be two columns with a yellow background. These two colums should be centered, with a third column added on the right side. The thirds column should not have a yellow background. There should be a 1px green rule between all three columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

Column breaks

Below are two tests and one reference rendering simulated with a table. These two tests have column breaks before and after their paragraphs, respectively. All three renditions should have three columns with one paragraph in each column.

break-before: column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

break-after: column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Column breaks with overflow

There should be four columns below. The first three columns should be inside the multicol box, while the last column should be in the overflow area outside the multicol box. All four columns should have the same content.

break-after: column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat.

Column spans

Below is one test and one reference rendering. The body text should be laid out in 2x2 columns, with the headling between them. The two renditions should look the same.

column-span: all

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

This element spans all columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.

This element spans all columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit cursus euismod. Quisque orci dolor, interdum sed vestibulum eget, eleifend non diam. Suspendisse potenti. Aliquam id justo ut augue vehicula placerat. Donec dignissim eros nec lacus egestas sed eleifend tellus ultrices. Aliquam at nisl et sapien gravida sagittis. Morbi pellentesque dolor sit amet dolor mattis semper. Nullam porta tincidunt dui, ac scelerisque enim interdum a. In ut arcu velit. Sed egestas fermentum sapien vel sodales.