Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FlexNG] Don't clamp flex row-gaps when fragmenting
We don't clamp flex item margins when an item breaks before to more accurately handle alignment. Thus, we should similarly do the same for row gaps. Currently, we will clamp row gaps (or at least part of row gaps - there were other bugs uncovered while investigating), so this CL updates the logic to correctly preserve the row gap, matching Firefox's behavior. To accomplish this, we needed to adjust item offsets based on various cases, but we only want to make this adjustment the first time the row breaks before. Thus, the break before row tracking in NGFlexBreakTokenData was updated to an enum of three values to keep track of whether the break token represents a break before a row, as well as whether or not it is the first time we have broken before that row. Additionally, when we perform the logic to determine if a row should break before, we needed to update the call site to pass in the adjusted row offset to ensure we are handling breaks correctly. Bug: 1413089 Change-Id: Ieb9cc4470cd96146cddf4f330aefdd06af1a1626 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4335769 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1117559}
- Loading branch information
1 parent
e6e9d25
commit 5bb636e
Showing
17 changed files
with
572 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
...b_tests/external/wpt/css/css-break/flexbox/multi-line-row-flex-fragmentation-065-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <title> | ||
| Multi-line row flex fragmentation: row gaps should not be truncated by | ||
| fragmentainer breaks (similar to flex-item margins). | ||
| </title> | ||
| <style> | ||
| .multicol { | ||
| columns: 2; | ||
| column-fill: auto; | ||
| width: 300px; | ||
| height: 100px; | ||
| margin: 20px; | ||
| background: yellow; | ||
| } | ||
| .flex { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| background: gray; | ||
| } | ||
| .flex > div { | ||
| contain: size; | ||
| width: 100%; | ||
| height: 50px; | ||
| background: cyan; | ||
| } | ||
| </style> | ||
| <p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> | ||
| <div class="multicol"> | ||
| <div class="flex"> | ||
| <div></div> | ||
| <div style="margin-top:100px;"></div> | ||
| <div style="margin-top:100px;"></div> | ||
| <div style="margin-top:100px;"></div> | ||
| </div> | ||
| </div> |
37 changes: 37 additions & 0 deletions
37
...k/web_tests/external/wpt/css/css-break/flexbox/multi-line-row-flex-fragmentation-065.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <!DOCTYPE html> | ||
| <title> | ||
| Multi-line row flex fragmentation: row gaps should not be truncated by | ||
| fragmentainer breaks (similar to flex-item margins). | ||
| </title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> | ||
| <link rel="match" href="multi-line-row-flex-fragmentation-065-ref.html"> | ||
| <style> | ||
| .multicol { | ||
| columns: 2; | ||
| column-fill: auto; | ||
| width: 300px; | ||
| height: 100px; | ||
| margin: 20px; | ||
| background: yellow; | ||
| } | ||
| .flex { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| background: gray; | ||
| } | ||
| .flex > div { | ||
| contain: size; | ||
| width: 100%; | ||
| height: 50px; | ||
| background: cyan; | ||
| } | ||
| </style> | ||
| <p>Flex row gaps should <strong>not</strong> be truncated when a row breaks.</p> | ||
| <div class="multicol"> | ||
| <div class="flex" style="row-gap:100px;"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.