Morten Stenshorne
0e402a4119
Automatic update from web-platform-tests Add support for column wrapping in multicol. This introduces two new CSS properties - `column-height` and `column-wrap`. `column-wrap` takes `nowrap` (initial) or `wrap`. When wrapping is enabled, and all columns in the inline direction have been used, rather than overflowing in the inline direction, a new row for columns is created below the current row, separated by `row-gap`. Note that, even prior to this change, there is some de-facto column wrapping taking place, when a multicol container is nested inside another fragmentation context (pagination, for instance). In such cases, when all columns have been used, we obviously want to move to the next outer fragmentainer (e.g. page), rather than overflowing in the inline direction. This happens, even if `column-wrap` is `nowrap`. It may be that we want a third `column-wrap` value to get the same behavior as multicols have "always" had, so that `nowrap` can be honored strictly instead, which might be less confusing. Columns may not be taller than what's specified by `column-height`. If `column-height` is `auto` (the initial value), the height used is the content-box height of the multicol container. The spec says that the `column` shorthand property should include these new properties (in addition to `column-width` and `column-count`), but this hasn't been added to the implementation yet. See https://drafts.csswg.org/css-multicol-2/#columns Missing in this CL: Column rule painting doesn't understand row wrapping. Will follow up. Similarly for scroll snapping. All new functionality is behind a new "experimental" runtime flag: MulticolColumnWrapping css/css-typed-om/the-stylepropertymap/properties/column-height.html based on column-width.html in the same directory. Bug: 403183884 Change-Id: I54f488c4524edbb641725829c7e41dbc2cb3613f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6371628 Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1435945} -- wpt-commits: f67622eac150a74aed36a66a27c5d66cc39cb09d wpt-pr: 51502
16 lines
863 B
HTML
16 lines
863 B
HTML
<!DOCTYPE html>
|
|
<title>column-height and column-wrap in outer multicol, nested multicol</title>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#ch">
|
|
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#cwr">
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
<div style="position:relative; width:100px; height:100px; background:red;">
|
|
<div style="columns:2; height:100px; gap:10px 0; column-height:60px; column-wrap:wrap;">
|
|
<div style="columns:2; gap:0;">
|
|
<div style="height:360px; background:green;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="position:absolute; top:60px; left:0; width:100px; height:10px; background:green;"></div>
|
|
</div>
|