Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-grid] Subtract scrollbar in ComputeReplacedLogicalHeightUsing()
In LayoutBox::ComputeReplacedLogicalHeightUsing() we were using the OverrideContentLogicalHeight() plus scrollbar height, that was wrong and we should subtract the scrollbar too. This caused issues to resolve the percentage heights on grid item replaced children, if the grid item has a scrollbar. To fix the issue we just need to follow the suggestion in the TODO and use OverrideContentLogicalHeight() directly. This was the last place using OverrideContentAndScrollbarLogicalHeight() so we can get rid of it. The patch removes that method together with OverrideContentAndScrollbarLogicalWidth() that was no longer used. BUG=837141 TEST=external/wpt/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html Change-Id: I28cf6e65c21e6314808c4430515f06c07d4a739e Reviewed-on: https://chromium-review.googlesource.com/1035003 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#554834}
- Loading branch information
1 parent
615504b
commit 538eeda
Showing
2 changed files
with
183 additions
and
0 deletions.
There are no files selected for viewing
92 changes: 92 additions & 0 deletions
92
css/css-grid/grid-items/percentage-size-replaced-subitems-001-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,92 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Refttest Reference: Percentage size on child of a grid item with margin, border, padding and scrollbar</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <style> | ||
| .grid { | ||
| display: inline-block; | ||
| border: solid 5px black; | ||
| width: 150px; | ||
| height: 100px; | ||
| margin: 10px; | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .item { | ||
| overflow: scroll; | ||
| border: solid magenta; | ||
| border-width: 12px 9px 6px 3px; | ||
| margin: 1px 2px 3px 4px; | ||
| padding: 5px 15px 10px 20px; | ||
| background: cyan; | ||
| width: calc(100% - 6px); | ||
| height: calc(100% - 4px); | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| img { | ||
| width: 100%; | ||
| height: 100%; | ||
| display: block; | ||
| } | ||
|
|
||
| .horizontalTB { writing-mode: horizontal-tb; } | ||
| .verticalLR { writing-mode: vertical-lr; } | ||
| .verticalRL { writing-mode: vertical-rl; } | ||
| </style> | ||
|
|
||
| <p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item horizontalTB"> | ||
| <img src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item horizontalTB"> | ||
| <img class="verticalLR" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item horizontalTB"> | ||
| <img class="verticalRL" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalLR"> | ||
| <img src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalLR"> | ||
| <img class="horizontalTB" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalLR"> | ||
| <img class="verticalRL" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalRL"> | ||
| <img src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalRL"> | ||
| <img class="horizontalTB" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalRL"> | ||
| <img class="verticalRL" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> |
91 changes: 91 additions & 0 deletions
91
css/css-grid/grid-items/percentage-size-replaced-subitems-001.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,91 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Test: Percentage size on replaced child of a grid item with margin, border, padding and scrollbar</title> | ||
| <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> | ||
| <link rel="match" href="percentage-size-replaced-subitems-001-ref.html"> | ||
| <meta name="assert" content="Checks that grid items replaced children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar."> | ||
| <style> | ||
| .grid { | ||
| display: inline-grid; | ||
| border: solid 5px black; | ||
| grid: 100px / 150px; | ||
| margin: 10px; | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .item { | ||
| overflow: scroll; | ||
| border: solid magenta; | ||
| border-width: 12px 9px 6px 3px; | ||
| margin: 1px 2px 3px 4px; | ||
| padding: 5px 15px 10px 20px; | ||
| background: cyan; | ||
| } | ||
|
|
||
| img { | ||
| width: 100%; | ||
| height: 100%; | ||
| display: block; | ||
| } | ||
|
|
||
| .horizontalTB { writing-mode: horizontal-tb; } | ||
| .verticalLR { writing-mode: vertical-lr; } | ||
| .verticalRL { writing-mode: vertical-rl; } | ||
| </style> | ||
|
|
||
| <p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item horizontalTB"> | ||
| <img src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item horizontalTB"> | ||
| <img class="verticalLR" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item horizontalTB"> | ||
| <img class="verticalRL" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalLR"> | ||
| <img src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalLR"> | ||
| <img class="horizontalTB" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalLR"> | ||
| <img class="verticalRL" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalRL"> | ||
| <img src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalRL"> | ||
| <img class="horizontalTB" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid"> | ||
| <div class="item verticalRL"> | ||
| <img class="verticalRL" src="support/100x100-green.png" /> | ||
| </div> | ||
| </div> |