-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[GridFragmentation] Propagate break-before/break-after from container.
...when unfragmented). This patch captures the break-before/break-after values for grid row(s) when unfragmented. We pass in a break-between vector into |PlaceItems| which will then use this to set the break-before/break-after on the fragment. We also use these values to add the correct break-before/break-after on the grid container. Bug: 614667 Change-Id: Ie529efe0e5bfe53262d10d874149ffc5c6e67100 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3453286 Reviewed-by: Morten Stenshorne <[email protected]> Reviewed-by: Alison Maher <[email protected]> Commit-Queue: Ian Kilpatrick <[email protected]> Cr-Commit-Position: refs/heads/main@{#972206}
- Loading branch information
1 parent
9b62565
commit 4d6dd10
Showing
5 changed files
with
72 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> | ||
| <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="background: red; position: relative; width: 100px; height: 100px; column-fill: auto; columns: 2; gap: 0;"> | ||
| <div style="background: green; height: 50px;"></div> | ||
| <div style="background: green; display: grid; grid-template-columns: auto auto; height: 50px;"> | ||
| <div></div> | ||
| <div style="break-before: column;"></div> <!-- Should result in a column break before the grid container. --> | ||
| </div> | ||
| <div style="background: green; height: 50px;"></div> | ||
| <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> | ||
| </div> |
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,13 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> | ||
| <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="background: red; position: relative; width: 100px; height: 100px; column-fill: auto; columns: 2; gap: 0;"> | ||
| <div style="background: green; display: grid; grid-template-columns: auto auto; height: 50px;"> | ||
| <div style="break-after: column;"></div> <!-- Should result in a column break after the grid container. --> | ||
| <div></div> | ||
| </div> | ||
| <div style="background: green; height: 50px;"></div> | ||
| <div style="background: green; height: 50px;"></div> | ||
| <div style="background: green; position: absolute; width: 50px; height: 50px; bottom: 0; left: 0;"></div> | ||
| </div> |
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,15 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <title>Tests that break precedence for a grid row is correctly calculated.</title> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> | ||
| <div style="display: grid; grid-template-rows: 50px 100px;"> | ||
| <div style="background: green;"></div> | ||
| <div style="background: green; break-before: avoid; display: grid; grid-template-columns: auto auto;"> | ||
| <div></div> | ||
| <div style="break-before: column;"></div> <!-- This break-before should be propagated to the outermost grid row. --> | ||
| </div> | ||
| </div> | ||
| <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> | ||
| </div> |
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,15 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <title>Tests that break precedence for a grid row is correctly calculated.</title> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;"> | ||
| <div style="display: grid; grid-template-rows: 50px 100px;"> | ||
| <div style="background: green; break-after: avoid; display: grid; grid-template-columns: auto auto;"> | ||
| <div style="break-after: column;"></div> <!-- This break-after should be propagated to the outermost grid row. --> | ||
| <div></div> | ||
| </div> | ||
| <div style="background: green;"></div> | ||
| </div> | ||
| <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> | ||
| </div> |
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,16 @@ | ||
| <!DOCTYPE html> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#pagination"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <title>Tests that break precedence for a grid row is correctly calculated.</title> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <div style="position: relative; width: 100px; height: 100px; columns: 4; column-gap: 0; column-fill: auto; background: red;"> | ||
| <div style="display: grid; grid-template-rows: 50px 50px 200px;"> | ||
| <div style="background: green;"></div> | ||
| <div style="background: green; break-before: avoid; break-after: avoid; display: grid; grid-template-columns: auto auto;"> | ||
| <div style="break-before: column; break-after: column;"></div> <!-- The break values should be propagated to the outermost rows. --> | ||
| <div></div> | ||
| </div> | ||
| <div style="background: green;"></div> | ||
| </div> | ||
| <div style="background: green; position: absolute; width: 50px; height: 50px; left: 0; bottom: 0;"></div> | ||
| </div> |