commit 79dac8881ddfbdcbe5b4b8b783f6d4282ca627f8 parent 5a5277e3621260972bbfe06560a2c54c19758862 Author: Morten Stenshorne <mstensho@chromium.org> Date: Fri, 10 Oct 2025 07:49:06 +0000 Bug 1992493 [wpt PR 55239] - Clean up main gap code in multicol, fix spanner margin regression., a=testonly Automatic update from web-platform-tests Clean up main gap code in multicol, fix spanner margin regression. The gap logic around spanners was more complicated than it had to be. We'd sometimes go back and remove a gap previously inserted. Delay insertion of spanner-end gaps until we're done with the last spanner (if there are more than one in a consecutive chain), instead of inserting it after every spanner, only to remove it again if there's another spanner right away. Simplify range calculation of the cross gap range that's affected by a subsequent main gap. Just store the index to the first column gap on the row as the range start. The range end will simply be the last cross gap inserted at the point of inserting another main gap. This new behavior means that there'll be no end-spanner gap if the multicol fragment ends with a spanner. An end-spanner gap will now only be created if it precedes another line of columns. Update the gap geometry code to allow for this. Finally, insert main gaps before spanners at the *margin edge* of the spanner. This fixes a regression that had no test coverage. Add test. The new test multicol-gap-decorations-021.html is just for improved test coverage. I nearly broke this while working on this. Bug: 357648037 Change-Id: Ie66ea81569e92bad590fff1bc6e72e5b89eca4a6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7006097 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/main@{#1525474} -- wpt-commits: aa697a166a6cf7d68e1e3ae0c4beda0ddf1e8ea0 wpt-pr: 55239 Diffstat:
3 files changed, 34 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-021.html b/testing/web-platform/tests/css/css-gaps/multicol/multicol-gap-decorations-021.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Row rule and single-column mulitcol</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decoration-shorthands"> +<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="columns:1/20px; width:100px; height:100px; gap:10px; row-rule:10px solid green; background:red;"> + <div style="height:70px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-020-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-020-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + .bar { + width: 100px; + height: 25px; + background: blue; + } +</style> +<p>There should be three identical blue bars below.</p> +<div class="bar"></div> +<div class="bar" style="margin:10px 0;"></div> +<div class="bar"></div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-020.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-020.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Column rules before and after spanner with margins</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-span"> +<link rel="match" href="multicol-span-all-020-ref.html"> +<p>There should be three identical blue bars below.</p> +<div style="columns:2; width:100px; column-gap:20px; column-rule:20px solid blue;"> + <div style="height:50px; background:blue;"></div> + <div style="column-span:all; margin:10px 0; height:25px; background:blue;"></div> + <div style="height:50px; background:blue;"></div> +</div>