parity · multicol

break-after — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-break-after-column · column

break-after:column inside a fixed-height multicol container starts the following block at the top of the next column; catches multicol layout that only supports automatic fill or break-before:column.

PASS exact match multicol-break-column-outside-noop · column-outside-multicol-noop

break-after:column outside a column fragmentation context must not force a page break; catches implementations that alias all forced break values to page breaks.

break-before — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-break-before-avoid-column · avoid-column

break-before:avoid-column keeps a heading with the following paragraph in the same column when possible; catches parsers that ignore avoid-column and split adjacent blocks across columns.

PASS exact match multicol-break-before-column · column

break-before:column inside a column-fill:auto multicol container must move the block to the top of the next column; catches multicol layout that ignores forced column break values.

break-inside — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-break-inside-avoid · avoid

Six fixed-height cards with break-inside: avoid flowed across two columns; each atomic card stays whole within a column.

PASS exact match multicol-break-inside-avoid-column · avoid-column

break-inside:avoid-column pushes a straddling card whole to the next column; catches column fragmenters that geometrically slice every crossing block.

column-count — 100.00% verified visual parity PASS 4 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-column-count-text · text-flow

Four short ParitySans paragraphs balanced across a two-column container (column-count: 2); tests text fragmentation and column balancing.

PASS exact match multicol-column-count-three · three

Six fixed-height bordered blocks flowed into a three-column container (column-count: 3); tests column fragmentation into equal-width tracks.

PASS exact match multicol-count-and-width · count-and-width

column-count: 2 with column-width: 100px; count caps the used columns (max), width is the minimum, so two columns are used.

PASS exact match multicol-invalid-fractional-column-count-preserves-prior-value · invalid-fractional-declaration-discard

A fractional column-count is invalid and is discarded, preserving the earlier two-column layout instead of truncating 1.5 to one column.

column-fill — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-column-fill-auto · auto

column-fill: auto with a definite height fills each column to the box height in turn, leaving the last column short.

PASS exact match multicol-column-fill-balance · balance

column-fill: balance (explicit) distributes content into equal-height columns.

PASS exact match multicol-column-fill-balance-all · balance-all · 2 pages

page 1

page 2

column-fill:balance-all balances every page fragment of a multicol flow, not only the final fragment; catches parsers that collapse balance-all to balance or auto.

column-fragmentation — 100.00% verified visual parity PASS 5 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-column-rule-page-break · wide-gap-rule-page-break · 2 pages

page 1

page 2

A two-column container with a wide column-gap and a centered column-rule spanning a page break: the gap and rule are reproduced identically in the fresh row of columns on page 2 (CSS Multicol L1 §2/§3). Twelve 50px blocks (six per page) span two pages. The multi-page harness asserts the page COUNT (2) and diffs both pages.

PASS exact match multicol-forced-overflow-columns · forced-overflow-columns

Forced break-after:column values can create an actual third overflow column beyond the two used columns; catches layouts that cap physical columns or ignore forced column breaks.

PASS exact match multicol-overflow-columns-auto · overflow-columns-auto-fill

A fixed-height two-column container with column-fill:auto creates additional overflow columns inline instead of vertical overflow; catches layouts that let the last used column absorb all remaining content.

PASS exact match multicol-page-break-flow · page-break-flow · 2 pages

page 1

page 2

An auto-height two-column container (column-count: 2; column-fill: auto) with twelve 50px blocks on a 150px page: the columns fill page 1, then continue as a fresh row of column boxes on page 2 (CSS Multicol L1 §2), rather than overflowing and being clipped. Multi-page reference (page-count gate).

PASS exact match multicol-three-cols-page-break · three-cols-page-break · 2 pages

page 1

page 2

A column-count:3, column-fill:auto container taller than the page: the three columns fill page 1, then content continues as a fresh row of three columns on page 2 (CSS Multicol L1 §2). Eighteen 40px blocks (nine per page) span two pages. The multi-page harness asserts the page COUNT (2) and diffs both pages.

column-gap — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-column-gap · px

Three-column container with an explicit 40px column-gap separating the tracks; tests inter-column spacing.

PASS exact match multicol-column-gap-normal · normal

Three-column container with no explicit column-gap; the normal default (1em = font-size) separates the tracks.

PASS exact match multicol-column-gap-percentage · percentage

column-gap:10% must resolve against the multicol container and narrow the three columns accordingly; catches parsers that store percentages but drop them during column layout.

column-progression — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-direction-rtl-columns · direction-rtl

direction:rtl places the first multicol column on the right side of the container; catches physical left-to-right column offset code.

PASS exact match multicol-writing-mode-vertical-rl · writing-mode-vertical-rl · 2 pages

page 1

page 2

writing-mode:vertical-rl changes multicol line boxes and column progression instead of rendering ordinary horizontal left-to-right columns; catches multicol layout that ignores writing mode.

column-rule — 100.00% verified visual parity PASS 4 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS visually equivalent · no rejecting defect · thresholded evidence 0.22% · raw 0.22% (2750 px) multicol-column-rule · solidPASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 47.4

why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline

Three-column container with a 6px solid column-rule painted in each gap, spanning the full content-box height.

regions (4 total; showing 4 representatives)

Complete component census grouped by dominant raster class; representative details are bounded.

Complete dominant-class aggregates

class	regions	pixels	union bbox (CSS px)	largest px	maximum magnitude
ColorErr	4	2750	144,2 → 316,178	1100	total 0.3% · largest 0.1%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	144,2 → 144,178	0.1	ΔRGB(28,242,152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	150,2 → 150,178	0.07	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,2 → 310,178	0.07	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	316,2 → 316,178	0.07	ΔRGB(28,242,152)	antialiasing coverage residue on a shared outline

source · cases/multicol/multicol-column-rule.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>multicol column-rule</title>
6<style>
7  @page { size: 584px 224px; margin: 0; }
8  html { font-family: ParitySans; line-height: 1.5; }
9  * { margin: 0; box-sizing: border-box; }
10  html, body { background: #ffffff; }
11  .cols {
12    column-count: 3;
13    column-gap: 40px;
14    column-rule: 6px solid #d6005a;
15    width: 460px;
16    height: 180px;
17    margin: 20px;
18    background: #f2f2f2;
19    border: 2px solid #333333;
20  }
21  .block {
22    height: 50px;
23    margin-bottom: 8px;
24    background: #2ec4b6;
25    border: 2px solid #0a4a44;
26  }
27</style>
28</head>
29<body>
30  <div class="cols">
31    <div class="block"></div>
32    <div class="block"></div>
33    <div class="block"></div>
34    <div class="block"></div>
35    <div class="block"></div>
36    <div class="block"></div>
37  </div>
38</body>
39</html>

PASS visually equivalent · no rejecting defect · thresholded evidence 0.09% · raw 0.09% (1100 px) multicol-column-rule-longhands · longhandsPASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 64.4

why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline

column-rule-width/style/color set as separate longhands (thick solid blue).

regions (2 total; showing 2 representatives)

Complete component census grouped by dominant raster class; representative details are bounded.

Complete dominant-class aggregates

class	regions	pixels	union bbox (CSS px)	largest px	maximum magnitude
ColorErr	2	1100	145,2 → 310,178	550	total 0.1% · largest 0.07%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	145,2 → 145,178	0.07	ΔRGB(-232,-184,-102)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,2 → 310,178	0.07	ΔRGB(232,184,102)	antialiasing coverage residue on a shared outline

source · cases/multicol/multicol-column-rule-longhands.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>multicol column-rule longhands</title>
6<style>
7  @page { size: 584px 224px; margin: 0; }
8  html { font-family: ParitySans; line-height: 1.5; }
9  * { margin: 0; box-sizing: border-box; }
10  html, body { background: #ffffff; }
11  .cols {
12    column-count: 3;
13    column-gap: 40px;
14    column-rule-width: thick;
15    column-rule-style: solid;
16    column-rule-color: #0a3a8c;
17    width: 460px;
18    height: 180px;
19    margin: 20px;
20    background: #f2f2f2;
21    border: 2px solid #333333;
22  }
23  .block {
24    height: 50px;
25    margin-bottom: 8px;
26    background: #ffbf00;
27    border: 2px solid #7a5b00;
28  }
29</style>
30</head>
31<body>
32  <div class="cols">
33    <div class="block"></div>
34    <div class="block"></div>
35    <div class="block"></div>
36    <div class="block"></div>
37    <div class="block"></div>
38    <div class="block"></div>
39  </div>
40</body>
41</html>

PASS exact match multicol-column-rule-empty-suppressed · empty-adjacent-columns

Column rules must not paint beside empty columns when only the first column has content; catches renderers that draw rules in every column gap whenever column-count is greater than one.

PASS exact match multicol-column-rule-wider-than-gap · wider-than-gap

A column rule wider than the gap is centered in the gap and overlaps columns without widening the gutter; catches layouts that add rule width to column placement.

column-rule-style — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS visually equivalent · no rejecting defect · thresholded evidence 0.19% · raw 0.19% (2435 px) multicol-column-rule-dashed · dashedPASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 38.0

why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline

Three-column container with a 6px dashed column-rule painted in each gap.

regions (25 total; showing 25 representatives)

Complete component census grouped by dominant raster class; representative details are bounded.

Complete dominant-class aggregates

class	regions	pixels	union bbox (CSS px)	largest px	maximum magnitude
ColorErr	25	2435	144,2 → 316,178	150	total 0.3% · largest 0.02%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	144,2 → 150,14	0.02	ΔRGB(4,31,20)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,20 → 150,32	0.02	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,38 → 150,51	0.02	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,57 → 150,69	0.02	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,75 → 150,87	0.02	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,93 → 150,105	0.02	ΔRGB(19,158,99)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,111 → 150,123	0.02	ΔRGB(19,158,99)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,130 → 150,141	0.02	ΔRGB(19,158,99)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,148 → 150,160	0.02	ΔRGB(19,158,99)	antialiasing coverage residue on a shared outline
AntialiasCoverage	144,166 → 150,178	0.02	ΔRGB(19,158,99)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,93 → 316,105	0.01	ΔRGB(-9,-84,-53)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,111 → 316,123	0.01	ΔRGB(-9,-84,-53)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,130 → 316,141	0.01	ΔRGB(-9,-84,-53)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,148 → 316,160	0.01	ΔRGB(-9,-84,-53)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,166 → 316,178	0.01	ΔRGB(-9,-84,-53)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,2 → 316,14	0.009264	ΔRGB(4,31,20)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,20 → 316,32	0.009264	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,38 → 316,51	0.009264	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,57 → 316,69	0.009264	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,75 → 316,87	0.009264	ΔRGB(10,86,54)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,2 → 310,14	0.004570	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,20 → 310,32	0.004570	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,39 → 310,50	0.004570	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,57 → 310,68	0.004570	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	310,75 → 310,87	0.004570	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline

source · cases/multicol/multicol-column-rule-dashed.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>multicol column-rule dashed</title>
6<style>
7  @page { size: 584px 224px; margin: 0; }
8  html { font-family: ParitySans; line-height: 1.5; }
9  * { margin: 0; box-sizing: border-box; }
10  html, body { background: #ffffff; }
11  .cols {
12    column-count: 3;
13    column-gap: 40px;
14    column-rule: 6px dashed #d6005a;
15    width: 460px;
16    height: 180px;
17    margin: 20px;
18    background: #f2f2f2;
19    border: 2px solid #333333;
20  }
21  .block {
22    height: 50px;
23    margin-bottom: 8px;
24    background: #2ec4b6;
25    border: 2px solid #0a4a44;
26  }
27</style>
28</head>
29<body>
30  <div class="cols">
31    <div class="block"></div>
32    <div class="block"></div>
33    <div class="block"></div>
34    <div class="block"></div>
35    <div class="block"></div>
36    <div class="block"></div>
37  </div>
38</body>
39</html>

PASS visually equivalent · no rejecting defect · thresholded evidence 0.17% · raw 0.17% (2204 px) multicol-column-rule-double · doublePASS via CSS-scale observation: sub-CSS shared-colour coverageAntialiasCoverageΔE 47.3

why: visually accepted coverage phase; raw antialiasing coverage residue on a shared outline

Three-column container with a 9px double column-rule (two thin parallel lines) in each gap.

regions (6 total; showing 6 representatives)

Complete component census grouped by dominant raster class; representative details are bounded.

Complete dominant-class aggregates

class	regions	pixels	union bbox (CSS px)	largest px	maximum magnitude
ColorErr	6	2204	146,2 → 317,178	551	total 0.3% · largest 0.07%

Representative region details (worst-first)

class	bbox (CSS px)	area%	magnitude	reason
AntialiasCoverage	311,2 → 311,178	0.07	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	317,2 → 317,178	0.07	ΔRGB(-28,-242,-152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	146,2 → 146,178	0.07	ΔRGB(28,242,152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	308,2 → 308,178	0.07	ΔRGB(28,242,152)	antialiasing coverage residue on a shared outline
AntialiasCoverage	146,2 → 146,2	0.000124	ΔRGB(7,-3,1)	antialiasing coverage residue on a shared outline
AntialiasCoverage	152,2 → 152,2	0.000124	ΔRGB(7,-3,1)	antialiasing coverage residue on a shared outline

source · cases/multicol/multicol-column-rule-double.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>multicol column-rule double</title>
6<style>
7  @page { size: 584px 224px; margin: 0; }
8  html { font-family: ParitySans; line-height: 1.5; }
9  * { margin: 0; box-sizing: border-box; }
10  html, body { background: #ffffff; }
11  .cols {
12    column-count: 3;
13    column-gap: 40px;
14    column-rule: 9px double #d6005a;
15    width: 460px;
16    height: 180px;
17    margin: 20px;
18    background: #f2f2f2;
19    border: 2px solid #333333;
20  }
21  .block {
22    height: 50px;
23    margin-bottom: 8px;
24    background: #2ec4b6;
25    border: 2px solid #0a4a44;
26  }
27</style>
28</head>
29<body>
30  <div class="cols">
31    <div class="block"></div>
32    <div class="block"></div>
33    <div class="block"></div>
34    <div class="block"></div>
35    <div class="block"></div>
36    <div class="block"></div>
37  </div>
38</body>
39</html>

PASS exact match multicol-column-rule-none · none

column-rule-style: none draws no rule and consumes no space; the gap matches a plain column-gap.

column-span — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-column-span-all · all

A banner element with column-span: all spanning the full width above six blocks distributed into three columns.

column-width — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-column-width · px

Container using column-width: 140px so the column count is derived from the available inline size.

PASS exact match multicol-column-width-wide · wider-than-container

column-width larger than the container width collapses to a single column.

columns — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

PASS exact match multicol-columns-count-only · count-only

columns: 4 shorthand with only a column-count; four equal-width tracks.

PASS exact match multicol-columns-shorthand · shorthand

columns: 120px 3 shorthand setting both column-width and column-count at once.

PASS exact match multicol-columns-width-only · width-only

columns: 140px shorthand with only a column-width; the used column count is derived from the inline size.

multicol — 100.00% verified visual parity

break-after — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

break-before — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

break-inside — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

column-count — 100.00% verified visual parity PASS 4 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

column-fill — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

column-fragmentation — 100.00% verified visual parity PASS 5 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

column-gap — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

column-progression — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

column-rule — 100.00% verified visual parity PASS 4 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

Complete dominant-class aggregates

Representative region details (worst-first)

Complete dominant-class aggregates

Representative region details (worst-first)

column-rule-style — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

Complete dominant-class aggregates

Representative region details (worst-first)

Complete dominant-class aggregates

Representative region details (worst-first)

column-span — 100.00% verified visual parity PASS 1 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

column-width — 100.00% verified visual parity PASS 2 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑

columns — 100.00% verified visual parity PASS 3 · FAIL 0 · REFERENCE-DISPUTED 0all categories ↑