Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge r241746 - [css-grid] Handle indefinite percentages in fit-conte…
…nt() https://bugs.webkit.org/show_bug.cgi?id=194509 Patch by Oriol Brufau <obrufau@igalia.com> on 2019-02-18 Reviewed by Javier Fernandez. LayoutTests/imported/w3c: Import WPT test. * web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage-expected.txt: Added. * web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html: Added. * web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log: Source/WebCore: Test: imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html If the size of the grid container depends on the size of its tracks, a percentage in fit-content() is indefinite. Without this patch, some places treated this case as fit-content(0), which prevented the grid container from growing enough to contain the max-content contribution of its grid items. This patch treats such fit-content() as minmax(auto, max-content), but once the size of the grid container is known and it is laid out "for real", then the percentage is definite and it's used. * rendering/GridTrackSizingAlgorithm.cpp: (WebCore::GridTrackSizingAlgorithm::gridTrackSize const): (WebCore::GridTrackSizingAlgorithm::initializeTrackSizes):
- Loading branch information
1 parent
d2d7754
commit 81a91b5
Showing
6 changed files
with
108 additions
and
7 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
7 changes: 7 additions & 0 deletions
7
...web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage-expected.txt
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,7 @@ | ||
|
|
||
| PASS fit-content(0%) | ||
| PASS fit-content(50%) | ||
| PASS fit-content(75%) | ||
| PASS fit-content(100%) | ||
| PASS fit-content(150%) | ||
|
|
61 changes: 61 additions & 0 deletions
61
...ted/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.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,61 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Grid Layout Test: indefinite percentage in fit-content()</title> | ||
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizes" title="7.2.1. Track Sizes"> | ||
| <meta name="assert" content="Checks that an indefinite percentage in fit-content lets the grid container grow enough to contain the max-content contribution of its grid items."> | ||
| <style> | ||
| .container { | ||
| width: 200px; | ||
| margin-top: 10px; | ||
| } | ||
| .grid { | ||
| display: inline-grid; | ||
| background: blue; | ||
| } | ||
| .item { | ||
| background: orange; | ||
| } | ||
| .item::before, .item::after { | ||
| content: ''; | ||
| float: left; | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
| </style> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
|
|
||
| <div id="log"></div> | ||
|
|
||
| <script> | ||
| "use strict"; | ||
| function clamp(value, min, max) { | ||
| return Math.max(min, Math.min(max, value)); | ||
| } | ||
| const minContent = 50; | ||
| const maxContent = 100; | ||
| for (const percentage of [0, 50, 75, 100, 150]) { | ||
| const container = document.createElement("div"); | ||
| container.className = "container"; | ||
| document.body.appendChild(container); | ||
| const grid = document.createElement("div"); | ||
| grid.className = "grid"; | ||
| grid.style.gridTemplateColumns = `fit-content(${percentage}%)`; | ||
| container.appendChild(grid); | ||
| const item = document.createElement("div"); | ||
| item.className = "item"; | ||
| grid.appendChild(item); | ||
| test(function() { | ||
| const colSize = clamp(percentage * maxContent / 100, minContent, maxContent); | ||
| const height = colSize < maxContent ? maxContent : minContent; | ||
| assert_equals(item.offsetWidth, colSize, "Grid item width"); | ||
| assert_equals(item.offsetHeight, height, "Grid item height"); | ||
| assert_equals(grid.offsetWidth, maxContent, "Grid container width"); | ||
| assert_equals(grid.offsetHeight, height, "Grid container height"); | ||
| assert_equals(getComputedStyle(grid).gridTemplateColumns, colSize + "px", | ||
| "Grid column size"); | ||
| }, `fit-content(${percentage}%)`); | ||
| } | ||
| </script> |
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