Javier Contreras
6154a1932c
Automatic update from web-platform-tests [gap-decorations] Suppress full effective gaps for flex containers This CL makes sure we suppress row and column gaps as per https://github.com/w3c/csswg-drafts/issues/11520#issuecomment-2628423830. This was already implemented for any gaps created by the `gap` properties, in CL:6666279 and CL:6657779, but after https://github.com/w3c/csswg-drafts/issues/12922#issuecomment-3814532173 it had to be extended to apply for the full effective gaps. This involves any space between items/lines created by `align-content` and `justify-content`. We move `effective_gap_between_lines` to be passed around so that we are able to use it in the fragmentation path for when we need it to be suppressed. We add the relevant tests for this, and adjust one test to account for this new behavior as well. Bug: 357648037, 394042462 Change-Id: I1aa9769dee6b9799bda6bf3a4a2374ab809e65cb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7615749 Commit-Queue: Javier Contreras <javiercon@microsoft.com> Reviewed-by: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1595674} -- wpt-commits: 6d44f5fe73b31d0e3a8058d9d82852a759bfa62e wpt-pr: 58336
49 lines
1.2 KiB
HTML
49 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>
|
|
Suppress column flexbox gaps: row gaps (including any additional space from content distribution)
|
|
if it's split across fragmentainer breaks or is the last content before a break.
|
|
Tests justify-content: space-between.
|
|
</title>
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11520">
|
|
<link rel="match" href="multi-line-column-flex-fragmentation-059-ref.html">
|
|
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
|
|
<style>
|
|
.multi-column {
|
|
columns: 2;
|
|
height: 60px;
|
|
column-width: 60px;
|
|
width: 130px;
|
|
gap: 10px;
|
|
}
|
|
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
#flexbox {
|
|
border: 2px solid rgb(96 139 168);
|
|
width: 60px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
height: 110px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item {
|
|
width: 60px;
|
|
height: 25px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
</style>
|
|
<div class="multi-column">
|
|
<div id="flexbox">
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
</div>
|