add multi-column layout support [breaking!]

[RonaldTreur]

First things first: this is a breaking change!

What is this about?

It is about making sure the polyfill also works nicely with the CSS Multi-column Layout Module (Level 1), for which the specification can be read here: https://www.w3.org/TR/css-multicol-1/

Browsers already offer multi-column support, but unfortunately this polyfill will break if columns are used.

The changes

This patch could also have been named: break content that overflows horizontally as well as vertically, instead of only checking vertical overflow

This is considered a breaking change: Previously content that overflowed a region horizontally was left intact and all but ignored by the algorithm. With this change that ends. If content overflows horizontally, the algorithm will extract the overflowing content and everything thereafter and (if possible) move it to the next region.

The reason for this is that when columns are activated in CSS*, content will no longer overflow vertically, but will instead overflow horizontally.

(*) Below is an example of how to split a region (or in this case, all regions) into 2 columns:

[data-css-region] > cssregion {
	display: block !important;
	height: 100%;
	column-count: 2;
	column-gap: 6em;
}

Safari

The way Safari has implemented Multi-column support means that the bounding rectangle for a split element (over two columns) remains intact (as if the content was not split at all). This would lead to the algorithm detecting vertical overflow and cutting off the content.

To prevent this from happening, we first check overflow without using bounding boxes, by simply comparing offsetHeight with scrollHeight and similarly for the width. The subsequent algorithm then checks each element's bounding rectangle only for the dimension(s) for which overflow was previously detected (could be both, try to prevent that!).

Bonus (future) support for additional break-before/after/inside-values

The polyfill does not support all possible values for break-inside/before/after. Unfortunately (up until this point in time) neither do browsers.

However, when support for this will grow in browsers, more and more of this will just work for regions (that contain columns) as well. Since it is the browser that creates an additional column to the side (overflowing the right-side region-boundary), it is the browser's support for these CSS properties that will first be parsed, before this polyfill starts taking a look.

In effect that means that region-specific values will still be parsed by the region, but all others are first parsed by the browser's rendering-engine.

[FremyCompany]

This is fantastic! You're right that I never considered multi column elements because I assumed one would simulate one by adding two regions where the column content would be, but there are downsides to that in the case of the last region because you can't autobalance between then.

I'll give this another look in the coming days but at first sight this looks well commented!

Ideally we would commit a couple of examples showcasing this with this change.