commit 3ba255cbe8c5e657da0370b1d0f7844743e7a04f parent fcc8ca151bb2f21e9e4f7adc18afb7af3bc5f4c8 Author: Morten Stenshorne <mstensho@chromium.org> Date: Tue, 21 Oct 2025 10:38:01 +0000 Bug 1992853 [wpt PR 55259] - Honor column-height more strictly., a=testonly Automatic update from web-platform-tests Honor column-height more strictly. Resolution here: https://github.com/w3c/csswg-drafts/issues/11976#issuecomment-3206088562 Don't let spanners disturb the row rhythm, but instead let them consume from the available row height. Move them to the next row if they don't fit, and there is already content in the row. Let them overflow subsequent rows if they are too tall to fit a full row. Introduce a `%` (modulo) operator to LayoutUnit for this task. Always make a row as tall as specified. Don't let column balancing or forced breaks shorten it. multicol-gap-decorations-007.html is now failing, and it doesn't make sense, at this time, to change it so that it passes, since it hasn't been decided how rows should fragment (within an outer fragmentation context) yet. Mark it as failing. Bug: 403183884, 440040889 Change-Id: I9002154661db2956030092b97594b6112fb87d76 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7008371 Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1532093} -- wpt-commits: 7231a6d3c2fb95d5ff80d0fe464ef08ba04b02ff wpt-pr: 55259 Diffstat:
18 files changed, 439 insertions(+), 389 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-002-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-002-ref.html @@ -7,36 +7,21 @@ } .outer { + position: relative; border: 2px solid rgb(96 139 168); width: 200px; height: 200px; } - .container1 { + .container { position: absolute; - top: 2px; column-gap: 10px; display: flex; } - .items1 { + .item { background: rgb(96 139 168 / 0.2); - height: 40px; - margin: 0px; - width: 60px; - } - - .container2 { - position: absolute; - top: 60px; - column-gap: 10px; - display: flex; - } - - .items2 { - background: rgb(96 139 168 / 0.2); - height: 130px; - margin: 0px; + height: 100%; width: 60px; } @@ -45,24 +30,14 @@ height: 10px; width: 200px; background: gold; - left: 2px; + left: 0; top: 120px; } - .column-gap1 { - position: absolute; - height: 40px; - width: 10px; - background: blue; - top: 2px; - } - - .column-gap2 { + .column-gap { position: absolute; - height: 142px; width: 10px; background: blue; - top: 60px; } .spanner { @@ -70,27 +45,36 @@ background: cyan; width: 200px; height: 18px; - top: 42px; - left: 2px; + top: 40px; + left: 0; opacity: 0.5; } </style> <div class="outer"> - <div class="container1"> - <div class="items1"></div> - <div class="items1"></div> - <div class="items1"></div> + <div class="container" style="top:0; height:40px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="container" style="top:58px; height:2px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="container2"> - <div class="items2"></div> - <div class="items2"></div> - <div class="items2"></div> + <div class="container" style="top:70px; height:130px;"> + <div class="item"></div> + <div class="item"></div> + <!-- Remove the 6px consumed after the spanner in the first row: --> + <div class="item" style="height:124px;"></div> </div> - <div class="column-gap1" style="left:62px;"></div> - <div class="column-gap1" style="left:132px;"></div> - <div class="column-gap2" style="left:62px;"></div> - <div class="column-gap2" style="left:132px;"></div> - <div class="row-gap"></div> + <div class="column-gap" style="top:0; left:60px; height:40px;"></div> + <div class="column-gap" style="top:0; left:130px; height:40px;"></div> + <div class="column-gap" style="top:58px; left:60px; height:2px;"></div> + <div class="column-gap" style="top:58px; left:130px; height:2px;"></div> + <div class="column-gap" style="top:70px; left:60px; height:130px;"></div> + <div class="column-gap" style="top:70px; left:130px; height:130px;"></div> + <div class="row-gap" style="top:60px;"></div> + <div class="row-gap" style="top:130px;"></div> <div class="spanner"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-008-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-008-ref.html @@ -7,36 +7,21 @@ } .outer { + position: relative; border: 2px solid rgb(96 139 168); width: 200px; height: 200px; } - .container1 { + .container { position: absolute; - top: 2px; column-gap: 10px; display: flex; } - .items1 { + .item { background: rgb(96 139 168 / 0.2); - height: 40px; - margin: 0px; - width: 60px; - } - - .container2 { - position: absolute; - top: 60px; - column-gap: 10px; - display: flex; - } - - .items2 { - background: rgb(96 139 168 / 0.2); - height: 130px; - margin: 0px; + height: 100%; width: 60px; } @@ -44,31 +29,15 @@ position: absolute; height: 10px; width: 200px; - left: 2px; - top: 120px; - display: flex; - column-gap: 10px; - } - - .row-gap-items { - width: 200px; background: gold; + left: 0; + top: 120px; } - .column-gap1 { - position: absolute; - height: 40px; - width: 10px; - background: blue; - top: 2px; - } - - .column-gap2 { + .column-gap { position: absolute; - height: 60px; width: 10px; background: blue; - top: 60px; } .spanner { @@ -76,38 +45,36 @@ background: cyan; width: 200px; height: 18px; - top: 42px; - left: 2px; + top: 40px; + left: 0; opacity: 0.5; } - - .column-gap3 { - position: absolute; - height: 72px; - width: 10px; - background: blue; - top: 130px; - } </style> + <div class="outer"> - <div class="container1"> - <div class="items1"></div> - <div class="items1"></div> - <div class="items1"></div> + <div class="container" style="top:0; height:40px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="container2"> - <div class="items2"></div> - <div class="items2"></div> - <div class="items2"></div> + <div class="container" style="top:58px; height:2px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="row-gap"> - <div class="row-gap-items"></div> + <div class="container" style="top:70px; height:130px;"> + <div class="item"></div> + <div class="item"></div> + <!-- Remove the 6px consumed after the spanner in the first row: --> + <div class="item" style="height:124px;"></div> </div> + <div class="column-gap" style="top:0; left:60px; height:40px;"></div> + <div class="column-gap" style="top:0; left:130px; height:40px;"></div> + <div class="column-gap" style="top:58px; left:60px; height:2px;"></div> + <div class="column-gap" style="top:58px; left:130px; height:2px;"></div> + <div class="column-gap" style="top:70px; left:60px; height:130px;"></div> + <div class="column-gap" style="top:70px; left:130px; height:130px;"></div> + <div class="row-gap" style="top:60px;"></div> + <div class="row-gap" style="top:130px;"></div> <div class="spanner"></div> - <div class="column-gap1" style="left:62px;"></div> - <div class="column-gap1" style="left:132px;"></div> - <div class="column-gap2" style="left:62px;"></div> - <div class="column-gap2" style="left:132px;"></div> - <div class="column-gap3" style="left:62px;"></div> - <div class="column-gap3" style="left:132px;"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-009-ref.html @@ -7,68 +7,40 @@ } .outer { + position: relative; border: 2px solid rgb(96 139 168); width: 200px; height: 200px; } - .container1 { + .container { position: absolute; - top: 2px; column-gap: 10px; display: flex; } - .items1 { + .item { background: rgb(96 139 168 / 0.2); - height: 40px; - margin: 0px; - width: 60px; - } - - .container2 { - position: absolute; - top: 60px; - column-gap: 10px; - display: flex; - } - - .items2 { - background: rgb(96 139 168 / 0.2); - height: 130px; - margin: 0px; + height: 100%; width: 60px; } .row-gap { position: absolute; height: 10px; - width: 204px; - left: 0px; + left: -2px; + right: -2px; top: 120px; - display: flex; - column-gap: 6px; } - - .row-gap-items { - width: 204px; + .row-gap > div { + width: 100%; + height: 100%; background: gold; } - - .column-gap1 { + .column-gap { position: absolute; - height: 44px; width: 10px; background: blue; - top: 0px; - } - - .column-gap2 { - position: absolute; - height: 64px; - width: 10px; - background: blue; - top: 58px; } .spanner { @@ -76,39 +48,42 @@ background: cyan; width: 200px; height: 18px; - top: 42px; - left: 2px; + top: 40px; + left: 0; opacity: 0.5; } - - .column-gap3 { - position: absolute; - height: 76px; - width: 10px; - background: blue; - top: 128px; - } </style> <div class="outer"> - <div class="container1"> - <div class="items1"></div> - <div class="items1"></div> - <div class="items1"></div> + <div class="container" style="top:0; height:40px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="container" style="top:58px; height:2px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="container" style="top:70px; height:130px;"> + <div class="item"></div> + <div class="item"></div> + <!-- Remove the 6px consumed after the spanner in the first row: --> + <div class="item" style="height:124px;"></div> </div> - <div class="container2"> - <div class="items2"></div> - <div class="items2"></div> - <div class="items2"></div> + <div class="row-gap" style="top:60px;"> + <div></div> </div> - <div class="row-gap"> - <div class="row-gap-items"></div> + <div class="row-gap" style="top:130px;"> + <div></div> </div> - <div class="column-gap1" style="left:62px;"></div> - <div class="column-gap1" style="left:132px;"></div> - <div class="column-gap2" style="left:62px;"></div> - <div class="column-gap2" style="left:132px;"></div> + <div class="column-gap" style="top:-2px; left:60px; height:44px;"></div> + <div class="column-gap" style="top:-2px; left:130px; height:44px;"></div> + <div class="column-gap" style="top:56px; left:60px; height:6px;"></div> + <div class="column-gap" style="top:56px; left:130px; height:6px;"></div> + <div class="column-gap" style="top:68px; left:60px; height:64px;"></div> + <div class="column-gap" style="top:68px; left:130px; height:64px;"></div> + <div class="column-gap" style="top:138px; left:60px; height:64px;"></div> + <div class="column-gap" style="top:138px; left:130px; height:64px;"></div> <div class="spanner"></div> - <div class="column-gap3" style="left:62px;"></div> - <div class="column-gap3" style="left:132px;"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-010-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-010-ref.html @@ -7,82 +7,40 @@ } .outer { + position: relative; border: 2px solid rgb(96 139 168); width: 200px; height: 200px; } - .container1 { + .container { position: absolute; - top: 2px; column-gap: 10px; display: flex; } - .items1 { + .item { background: rgb(96 139 168 / 0.2); - height: 40px; - margin: 0px; - width: 60px; - } - - .container2 { - position: absolute; - top: 60px; - column-gap: 10px; - display: flex; - } - - .items2 { - background: rgb(96 139 168 / 0.2); - height: 60px; - margin: 0px; - width: 60px; - } - - .container3 { - position: absolute; - top: 130px; - column-gap: 10px; - display: flex; - } - - .items3 { - background: rgb(96 139 168 / 0.2); - height: 60px; - margin: 0px; + height: 100%; width: 60px; } .row-gap { position: absolute; + column-gap: 10px; height: 10px; - width: 204px; - left: 4px; - top: 120px; - display: flex; - column-gap: 14px; + left: 2px; + right: 2px; } - - .row-gap-items { - width: 196px; + .row-gap > div { + width: 100%; + height: 100%; background: gold; } - - .column-gap1 { + .column-gap { position: absolute; - height: 36px; width: 10px; background: blue; - top: 4px; - } - - .column-gap2 { - position: absolute; - height: 56px; - width: 10px; - background: blue; - top: 62px; } .spanner { @@ -90,44 +48,45 @@ background: cyan; width: 200px; height: 18px; - top: 42px; - left: 2px; + top: 40px; + left: 0; opacity: 0.5; } - - .column-gap3 { - position: absolute; - height: 68px; - width: 10px; - background: blue; - top: 132px; - } </style> <div class="outer"> - <div class="container1"> - <div class="items1"></div> - <div class="items1"></div> - <div class="items1"></div> + <div class="container" style="top:0; height:40px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="container" style="top:58px; height:2px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="container" style="top:70px; height:60px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="container2"> - <div class="items2"></div> - <div class="items2"></div> - <div class="items2"></div> + <div class="container" style="top:140px; height:60px;"> + <div class="item"></div> + <div class="item"></div> + <!-- Remove the 6px consumed after the spanner in the first row: --> + <div class="item" style="height:54px;"></div> </div> - <div class="container3"> - <div class="items3"></div> - <div class="items3"></div> - <div class="items3"></div> + <div class="column-gap" style="top:2px; left:60px; height:36px;"></div> + <div class="column-gap" style="top:2px; left:130px; height:36px;"></div> + <div class="column-gap" style="top:72px; left:60px; height:56px;"></div> + <div class="column-gap" style="top:72px; left:130px; height:56px;"></div> + <div class="column-gap" style="top:142px; left:60px; height:56px;"></div> + <div class="column-gap" style="top:142px; left:130px; height:56px;"></div> + <div class="row-gap" style="top:60px;"> + <div></div> </div> - <div class="row-gap"> - <div class="row-gap-items"></div> + <div class="row-gap" style="top:130px;"> + <div></div> </div> - <div class="column-gap1" style="left:62px;"></div> - <div class="column-gap1" style="left:132px;"></div> - <div class="column-gap2" style="left:62px;"></div> - <div class="column-gap2" style="left:132px;"></div> <div class="spanner"></div> - <div class="column-gap3" style="left:62px;"></div> - <div class="column-gap3" style="left:132px;"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-011-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-011-ref.html @@ -7,76 +7,39 @@ } .outer { + position: relative; border: 2px solid rgb(96 139 168); width: 200px; height: 200px; } - .container1 { + .container { position: absolute; - top: 2px; column-gap: 10px; display: flex; } - .items1 { + .item { background: rgb(96 139 168 / 0.2); - height: 40px; - margin: 0px; - width: 60px; - } - - .container2 { - position: absolute; - top: 60px; - column-gap: 10px; - display: flex; - } - - .items2 { - background: rgb(96 139 168 / 0.2); - height: 60px; - margin: 0px; - width: 60px; - } - - .container3 { - position: absolute; - top: 130px; - column-gap: 10px; - display: flex; - } - - .items3 { - background: rgb(96 139 168 / 0.2); - height: 60px; - margin: 0px; + height: 100%; width: 60px; } .row-gap { position: absolute; height: 2px; + margin: 4px 0; width: 200px; background: gold; - left: 2px; - top: 124px; + left: 0; + top: 120px; } - .column-gap1 { + .column-gap { position: absolute; - height: 40px; width: 2px; + margin: 0 4px; background: blue; - top: 2px; - } - - .column-gap2 { - position: absolute; - height: 60px; - width: 2px; - background: blue; - top: 60px; } .spanner { @@ -84,34 +47,43 @@ background: cyan; width: 200px; height: 18px; - top: 42px; - left: 2px; + top: 40px; + left: 0; opacity: 0.5; } </style> <div class="outer"> - <div class="container1"> - <div class="items1"></div> - <div class="items1"></div> - <div class="items1"></div> + <div class="container" style="top:0; height:40px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="container" style="top:58px; height:2px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="container2"> - <div class="items2"></div> - <div class="items2"></div> - <div class="items2"></div> + <div class="container" style="top:70px; height:60px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="container3"> - <div class="items3"></div> - <div class="items3"></div> - <div class="items3"></div> + <div class="container" style="top:140px; height:60px;"> + <div class="item"></div> + <div class="item"></div> + <!-- Remove the 6px consumed after the spanner in the first row: --> + <div class="item" style="height:54px;"></div> </div> - <div class="column-gap1" style="left:66px;"></div> - <div class="column-gap1" style="left:136px;"></div> - <div class="column-gap2" style="left:66px;"></div> - <div class="column-gap2" style="left:136px;"></div> - <div class="column-gap2" style="top: 130px; height: 72px; left:66px;"></div> - <div class="column-gap2" style="top: 130px; height: 72px; left:136px;"></div> - <div class="row-gap"></div> + <div class="column-gap" style="top:0; left:60px; height:40px;"></div> + <div class="column-gap" style="top:0; left:130px; height:40px;"></div> + <div class="column-gap" style="top:58px; left:60px; height:2px;"></div> + <div class="column-gap" style="top:58px; left:130px; height:2px;"></div> + <div class="column-gap" style="top:70px; left:60px; height:60px;"></div> + <div class="column-gap" style="top:70px; left:130px; height:60px;"></div> + <div class="column-gap" style="top:140px; left:60px; height:60px;"></div> + <div class="column-gap" style="top:140px; left:130px; height:60px;"></div> + <div class="row-gap" style="top:60px;"></div> + <div class="row-gap" style="top:130px;"></div> <div class="spanner"></div> </div> diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-012-ref.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-012-ref.html @@ -7,68 +7,39 @@ } .outer { + position: relative; border: 2px solid rgb(96 139 168); width: 200px; height: 200px; } - .container1 { + .container { position: absolute; - top: 2px; column-gap: 10px; display: flex; } - .items1 { + .item { background: rgb(96 139 168 / 0.2); - height: 40px; - margin: 0px; - width: 60px; - } - - .container2 { - position: absolute; - top: 60px; - column-gap: 10px; - display: flex; - } - - .items2 { - background: rgb(96 139 168 / 0.2); - height: 60px; - margin: 0px; - width: 60px; - } - - .container3 { - position: absolute; - top: 130px; - column-gap: 10px; - display: flex; - } - - .items3 { - background: rgb(96 139 168 / 0.2); - height: 60px; - margin: 0px; + height: 100%; width: 60px; } .row-gap { position: absolute; height: 2px; + margin: 4px 0; width: 200px; background: gold; - left: 2px; - top: 124px; + left: 0; + top: 120px; } - .column-gap1 { + .column-gap { position: absolute; - height: 118px; width: 2px; + margin: 0 4px; background: blue; - top: 2px; } .spanner { @@ -76,31 +47,41 @@ background: cyan; width: 200px; height: 18px; - top: 42px; - left: 2px; + top: 40px; + left: 0; opacity: 0.5; } </style> + <div class="outer"> - <div class="container1"> - <div class="items1"></div> - <div class="items1"></div> - <div class="items1"></div> + <div class="container" style="top:0; height:40px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="container" style="top:58px; height:2px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="container2"> - <div class="items2"></div> - <div class="items2"></div> - <div class="items2"></div> + <div class="container" style="top:70px; height:60px;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> </div> - <div class="container3"> - <div class="items3"></div> - <div class="items3"></div> - <div class="items3"></div> + <div class="container" style="top:140px; height:60px;"> + <div class="item"></div> + <div class="item"></div> + <!-- Remove the 6px consumed after the spanner in the first row: --> + <div class="item" style="height:54px;"></div> </div> - <div class="column-gap1" style="left:66px;"></div> - <div class="column-gap1" style="left:136px;"></div> - <div class="column-gap1" style="top: 130px; height: 72px;left:66px;"></div> - <div class="column-gap1" style="top: 130px; height: 72px;left:136px;"></div> - <div class="row-gap"></div> + <div class="column-gap" style="top:0; left:60px; height:60px;"></div> + <div class="column-gap" style="top:0; left:130px; height:60px;"></div> + <div class="column-gap" style="top:70px; left:60px; height:60px;"></div> + <div class="column-gap" style="top:70px; left:130px; height:60px;"></div> + <div class="column-gap" style="top:140px; left:60px; height:60px;"></div> + <div class="column-gap" style="top:140px; left:130px; height:60px;"></div> + <div class="row-gap" style="top:60px;"></div> + <div class="row-gap" style="top:130px;"></div> <div class="spanner"></div> </div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-006.html b/testing/web-platform/tests/css/css-multicol/column-height-006.html @@ -4,18 +4,35 @@ <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"> +<style> + .row_gap_filler { + position: absolute; + width: 100px; + height: 5px; + background: green; + } +</style> <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; column-fill:auto; column-height:10px; column-wrap:wrap; gap:10px 0;"> + <div style="columns:2; column-fill:auto; column-height:5px; column-wrap:wrap; gap:5px 0;"> <div style="background:green;"> - <div style="height:40px;"></div> - <div style="column-span:all; height:10px; background:green;"></div> <div style="height:20px;"></div> - <div style="column-span:all; height:10px; background:green;"></div> - <div style="height:40px;"></div> - <div style="column-span:all; height:10px; background:green;"></div> + <div style="column-span:all; height:5px; background:green;"></div> + <div style="height:10px;"></div> + <div style="column-span:all; height:5px; background:green;"></div> + <div style="height:20px;"></div> + <!-- This spanner takes up almost two rows. --> + <div style="column-span:all; height:12px; background:green;"></div> + <div style="height:16px;"></div> </div> </div> - <div style="position:absolute; top:10px; left:0; width:100px; height:10px; background:green;"></div> - <div style="position:absolute; top:70px; left:0; width:100px; height:10px; background:green;"></div> + <div class="row_gap_filler" style="top:5px;"></div> + <div class="row_gap_filler" style="top:15px;"></div> + <div class="row_gap_filler" style="top:25px;"></div> + <div class="row_gap_filler" style="top:35px;"></div> + <div class="row_gap_filler" style="top:45px;"></div> + <div class="row_gap_filler" style="top:55px;"></div> + <div class="row_gap_filler" style="top:65px;"></div> + <div class="row_gap_filler" style="top:85px;"></div> + <div class="row_gap_filler" style="top:95px;"></div> </div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-013.html b/testing/web-platform/tests/css/css-multicol/column-height-013.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>column-height, column-wrap, spanner</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"> +<style> + .row_gap_filler { + position: absolute; + width: 100px; + height: 10px; + background: green; + } +</style> +<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; column-height:20px; column-wrap:wrap; gap:10px 0;"> + <div style="background:green;"> + <div style="height:10px;"></div> + <div style="column-span:all; height:5px; background:green;"></div> + <div style="height:30px;"></div> + <div style="column-span:all; height:15px; background:green;"></div> + <div style="column-span:all; height:15px; background:green;"></div> + <div style="height:30px;"></div> + </div> + </div> + <div class="row_gap_filler" style="top:20px;"></div> + <div class="row_gap_filler" style="top:50px;"></div> + <div class="row_gap_filler" style="top:80px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-014.html b/testing/web-platform/tests/css/css-multicol/column-height-014.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Unused space in last row, balanced columns</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="width:100px; height:100px; background:red;"> + <div style="columns:2; column-height:25px; column-wrap:wrap; gap:0; background:green;"> + <div style="height:160px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-015.html b/testing/web-platform/tests/css/css-multicol/column-height-015.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Unused space in last row, column-fill:auto</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="width:100px; height:100px; background:red;"> + <div style="columns:2; column-height:25px; column-wrap:wrap; gap:0; column-fill:auto; background:green;"> + <div style="height:160px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-016.html b/testing/web-platform/tests/css/css-multicol/column-height-016.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Unused space in rows due to forced breaks</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="width:100px; height:100px; background:red;"> + <div style="columns:2; column-height:25px; column-wrap:wrap; gap:0; background:green;"> + <div style="height:1px; break-after:column;"></div> + <div style="height:1px; break-after:column;"></div> + <div style="height:1px; break-after:column;"></div> + <div style="height:1px; break-after:column;"></div> + <div style="height:1px; break-after:column;"></div> + <div style="height:1px; break-after:column;"></div> + <div style="height:1px; break-after:column;"></div> + <div style="height:1px; break-after:column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-017.html b/testing/web-platform/tests/css/css-multicol/column-height-017.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Spanner that protrudes into row gap</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; column-height:40px; column-wrap:wrap; gap:20px 0;"> + <div style="column-span:all; height:50px; background:green;"></div> + <div style="height:80px; background:green;"></div> + </div> + <div style="position:absolute; top:50px; width:100%; height:10px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-018.html b/testing/web-platform/tests/css/css-multicol/column-height-018.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Spanner that is moved to next row and protrudes into row gap</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; column-height:20px; column-wrap:wrap; gap:10px 0;"> + <div style="height:20px; background:green;"></div> + <div style="column-span:all; height:25px; background:green;"></div> + <div style="height:60px; background:green;"></div> + </div> + <div style="position:absolute; top:10px; width:100%; height:20px; background:green;"></div> + <div style="position:absolute; top:55px; width:100%; height:5px; background:green;"></div> + <div style="position:absolute; top:80px; width:100%; height:10px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-019.html b/testing/web-platform/tests/css/css-multicol/column-height-019.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Spanner taking up several rows</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; column-height:5px; column-wrap:wrap; gap:5px 0;"> + <div style="column-span:all; height:85px; background:green;"></div> + <div style="height:10px; background:green;"></div> + </div> + <div style="position:absolute; top:85px; width:100%; height:5px; background:green;"></div> + <div style="position:absolute; top:95px; width:100%; height:5px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-height-020.html b/testing/web-platform/tests/css/css-multicol/column-height-020.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Column balancing, auto block-size, specified column-height</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; column-height:20px; column-wrap:wrap; gap:10px 0;"> + <div style="height:50px; background:green;"></div> + <div style="column-span:all; height:10px; background:green;"></div> + <div style="height:70px; background:green;"></div> + </div> + <div style="position:absolute; top:20px; width:100%; height:10px; background:green;"></div> + <div style="position:absolute; top:50px; width:100%; height:10px; background:green;"></div> + <div style="position:absolute; top:80px; width:100%; height:10px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-wrap-no-constraints-001.html b/testing/web-platform/tests/css/css-multicol/column-wrap-no-constraints-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Auto height, column balancing, and column-wrap:wrap</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<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> +<!-- Rows are allowed to wrap, but the block-size of the multicol container is + unconstrained, and there is no column-height specified, so there should be + just one row. --> +<div style="width:100px; height:100px; background:red;"> + <div style="columns:2; gap:20px 0; column-wrap:wrap;"> + <div style="height:200px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/column-wrap-no-constraints-002.html b/testing/web-platform/tests/css/css-multicol/column-wrap-no-constraints-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Auto height, column balancing, and column-wrap:wrap, forced breaks</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<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> +<!-- Rows are allowed to wrap, and, although the block-size of the multicol + container is unconstrained, and there's no column-height specified, there + should be multiple rows, due to forced breaks. --> +<div style="position:relative; width:100px; height:100px; background:red;"> + <div style="columns:2; gap:10px 0; column-wrap:wrap;"> + <div style="break-after:column; height:20px; background:green;"></div> + <div style="break-after:column; height:20px; background:green;"></div> + <div style="break-after:column; height:50px; background:green;"></div> + <div style="break-after:column; height:50px; background:green;"></div> + <div style="break-after:column; height:10px; background:green;"></div> + <div style="break-after:column; height:10px; background:green;"></div> + </div> + <div style="position:absolute; top:20px; width:100%; height:10px; background:green;"></div> + <div style="position:absolute; top:80px; width:100%; height:10px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/zero-column-height.html b/testing/web-platform/tests/css/css-multicol/crashtests/zero-column-height.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>zero column-height</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"> + +<!-- zero row-gap --> +<div style="columns:2; column-fill:auto; column-height:0px; row-gap:0px; column-wrap:wrap;"> + <div style="height:10px;"></div> + <div style="height:10px;"></div> +</div> + +<!-- non-zero row-gap --> +<div style="columns:2; column-fill:auto; column-height:0px; row-gap:100px; column-wrap:wrap;"> + <div style="height:10px;"></div> + <div style="height:10px;"></div> +</div> + +<!-- zero row-gap with spanner --> +<div style="columns:2; column-fill:auto; column-height:0px; row-gap:0px; column-wrap:wrap;"> + <div style="height:10px;"></div> + <div style="column-span:all; height:10px;"></div> + <div style="height:10px;"></div> +</div>