-
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.
[line-clamp] Make the sizes of line-clamped boxes account for margins
Chromium's implementation of (-webkit-)line-clamp in LayoutNG, until now, set the size of a clamped box to the logical block offset at which the last inflow child before the clamp point ends, and it cleared the end margin strut. This meant that if a clamp point was nested in multiple block boxes, the bottom margins of those boxes would be ignored. With the collapse version of `line-clamp`, instead, the sizes of clamped boxes should be the same as if they had no content after the clamp point. To achieve this, rather than storing the intrinsic block size offset at the clamp point, we store the `PreviousInflowPosition`. Then, in `BlockLayoutAlgorithm::FinishLayout`, the size is determined based on the previous inflow position at clamp point, rather than based on the one at the end of the box's hidden children. Bug: 40336192 Change-Id: I9810d2d1b00d4a9e28c0f5f92653f7d3cbed454c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5683304 Reviewed-by: Ian Kilpatrick <[email protected]> Commit-Queue: Andreu Botella <[email protected]> Cr-Commit-Position: refs/heads/main@{#1324525}
- Loading branch information
1 parent
e256feb
commit c6d660e
Showing
6 changed files
with
202 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,33 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Overflow: when clamping by lines, margins are respected</title> | ||
| <link rel="author" title="Andreu Botella" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> | ||
| <link rel="match" href="reference/line-clamp-022-ref.html"> | ||
| <meta name="assert" content="When line-clamp is used with a number of lines, the box and its clamped children should be sized taking margins into account."> | ||
| <style> | ||
| .clamp { | ||
| line-clamp: 4; | ||
| font: 16px / 32px serif; | ||
| padding: 4px; | ||
| background-color: yellow; | ||
| border: 2px solid black; | ||
| } | ||
| .inner { | ||
| background-color: purple; | ||
| margin: 4px; | ||
| /* Having a border means the margins of the .inner boxes won't collapse */ | ||
| border: 1px solid black; | ||
| } | ||
| .inner .inner { | ||
| background-color: orange; | ||
| white-space: pre; | ||
| } | ||
| </style> | ||
| <div class="clamp"><div class="inner"><div class="inner">Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4 | ||
| Line 5 | ||
| Line 6</div></div></div> | ||
| <p>Following content.</p> |
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,31 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Overflow: when clamping by lines, collapsed margins are respected</title> | ||
| <link rel="author" title="Andreu Botella" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> | ||
| <link rel="match" href="reference/line-clamp-023-ref.html"> | ||
| <meta name="assert" content="When line-clamp is used with a number of lines, the box and its clamped children should be sized taking margin collapsing into account."> | ||
| <style> | ||
| .clamp { | ||
| line-clamp: 4; | ||
| font: 16px / 32px serif; | ||
| padding: 4px; | ||
| background-color: yellow; | ||
| border: 2px solid black; | ||
| } | ||
| .inner { | ||
| background-color: orange; | ||
| margin: 4px; | ||
| /* There is no border, so the margins of the .inner boxes will collapse */ | ||
| } | ||
| .inner .inner { | ||
| white-space: pre; | ||
| } | ||
| </style> | ||
| <div class="clamp"><div class="inner"><div class="inner">Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4 | ||
| Line 5 | ||
| Line 6</div></div></div> | ||
| <p>Following content.</p> |
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,46 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Overflow: when clamping by lines, margins of hidden boxes are ignored</title> | ||
| <link rel="author" title="Andreu Botella" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> | ||
| <link rel="match" href="reference/line-clamp-022-ref.html"> | ||
| <meta name="assert" content="When line-clamp is used with a number of lines, the margins of boxes after the clamp point should not affect the sizing of boxes."> | ||
| <style> | ||
| .clamp { | ||
| line-clamp: 4; | ||
| font: 16px / 32px serif; | ||
| padding: 4px; | ||
| background-color: yellow; | ||
| border: 2px solid black; | ||
| } | ||
| .inner { | ||
| background-color: purple; | ||
| margin: 4px; | ||
| /* Having a border means the margins of the .inner boxes won't collapse */ | ||
| border: 1px solid black; | ||
| } | ||
| .inner .inner { | ||
| background-color: orange; | ||
| white-space: pre; | ||
| } | ||
| .clamped-margin { | ||
| /* These boxes are after the clamp point, so their margins should not affect | ||
| * the size of their parent boxes. */ | ||
| background-color: red; | ||
| margin: 20px; | ||
| height: 20px; | ||
| } | ||
| </style> | ||
| <div class="clamp"> | ||
| <div class="inner"> | ||
| <div class="inner">Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4 | ||
| Line 5 | ||
| Line 6</div> | ||
| <div class="clamped-margin"></div> | ||
| </div> | ||
| <div class="clamped-margin"></div> | ||
| </div> | ||
| <p>Following content.</p> |
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,44 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Overflow: when clamping by lines, margins of hidden boxes are ignored</title> | ||
| <link rel="author" title="Andreu Botella" href="mailto:[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> | ||
| <link rel="match" href="reference/line-clamp-023-ref.html"> | ||
| <meta name="assert" content="When line-clamp is used with a number of lines, the box and its clamped children should be sized taking margins into account."> | ||
| <style> | ||
| .clamp { | ||
| line-clamp: 4; | ||
| font: 16px / 32px serif; | ||
| padding: 4px; | ||
| background-color: yellow; | ||
| border: 2px solid black; | ||
| } | ||
| .inner { | ||
| background-color: orange; | ||
| margin: 4px; | ||
| /* There is no border, so the margins of the .inner boxes will collapse */ | ||
| } | ||
| .inner .inner { | ||
| white-space: pre; | ||
| } | ||
| .clamped-margin { | ||
| /* These boxes are after the clamp point, so their margins should not affect | ||
| * the size of their parent boxes. */ | ||
| background-color: red; | ||
| margin: 20px; | ||
| height: 20px; | ||
| } | ||
| </style> | ||
| <div class="clamp"> | ||
| <div class="inner"> | ||
| <div class="inner">Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4 | ||
| Line 5 | ||
| Line 6</div> | ||
| <div class="clamped-margin"></div> | ||
| </div> | ||
| <div class="clamped-margin"></div> | ||
| </div> | ||
| <p>Following content.</p> |
25 changes: 25 additions & 0 deletions
25
css/css-overflow/line-clamp/reference/line-clamp-022-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,25 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Reference</title> | ||
| <style> | ||
| .clamp { | ||
| font: 16px / 32px serif; | ||
| padding: 4px; | ||
| background-color: yellow; | ||
| border: 2px solid black; | ||
| } | ||
| .inner { | ||
| background-color: purple; | ||
| margin: 4px; | ||
| border: 1px solid black; | ||
| } | ||
| .inner .inner { | ||
| background-color: orange; | ||
| white-space: pre; | ||
| } | ||
| </style> | ||
| <div class="clamp"><div class="inner"><div class="inner">Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4…</div></div></div> | ||
| <p>Following content.</p> |
23 changes: 23 additions & 0 deletions
23
css/css-overflow/line-clamp/reference/line-clamp-023-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,23 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Reference</title> | ||
| <style> | ||
| .clamp { | ||
| font: 16px / 32px serif; | ||
| padding: 4px; | ||
| background-color: yellow; | ||
| border: 2px solid black; | ||
| } | ||
| .inner { | ||
| background-color: orange; | ||
| margin: 4px; | ||
| } | ||
| .inner .inner { | ||
| white-space: pre; | ||
| } | ||
| </style> | ||
| <div class="clamp"><div class="inner"><div class="inner">Line 1 | ||
| Line 2 | ||
| Line 3 | ||
| Line 4…</div></div></div> | ||
| <p>Following content.</p> |