- Revision
- 241746
- Author
- commit-qu...@webkit.org
- Date
- 2019-02-18 15:40:50 -0800 (Mon, 18 Feb 2019)
Log Message
[css-grid] Handle indefinite percentages in fit-content()
https://bugs.webkit.org/show_bug.cgi?id=194509
Patch by Oriol Brufau <obru...@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):
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (241745 => 241746)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2019-02-18 23:40:44 UTC (rev 241745)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2019-02-18 23:40:50 UTC (rev 241746)
@@ -1,3 +1,16 @@
+2019-02-18 Oriol Brufau <obru...@igalia.com>
+
+ [css-grid] Handle indefinite percentages in fit-content()
+ https://bugs.webkit.org/show_bug.cgi?id=194509
+
+ Reviewed by Javier Fernandez.
+
+ 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:
+
2019-02-12 Rob Buis <rb...@igalia.com>
Align with Fetch on data: URLs
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage-expected.txt (0 => 241746)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage-expected.txt 2019-02-18 23:40:50 UTC (rev 241746)
@@ -0,0 +1,7 @@
+
+PASS fit-content(0%)
+PASS fit-content(50%)
+PASS fit-content(75%)
+PASS fit-content(100%)
+PASS fit-content(150%)
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html (0 => 241746)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html 2019-02-18 23:40:50 UTC (rev 241746)
@@ -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=""
+<link rel="help" href="" 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=""
+<script src=""
+
+<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>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log (241745 => 241746)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log 2019-02-18 23:40:44 UTC (rev 241745)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/w3c-import.log 2019-02-18 23:40:50 UTC (rev 241746)
@@ -20,6 +20,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html
Modified: trunk/Source/WebCore/ChangeLog (241745 => 241746)
--- trunk/Source/WebCore/ChangeLog 2019-02-18 23:40:44 UTC (rev 241745)
+++ trunk/Source/WebCore/ChangeLog 2019-02-18 23:40:50 UTC (rev 241746)
@@ -1,3 +1,26 @@
+2019-02-18 Oriol Brufau <obru...@igalia.com>
+
+ [css-grid] Handle indefinite percentages in fit-content()
+ https://bugs.webkit.org/show_bug.cgi?id=194509
+
+ Reviewed by Javier Fernandez.
+
+ 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):
+
2019-02-18 John Wilander <wilan...@apple.com>
Check the existence of the frame in Document::hasFrameSpecificStorageAccess() and Document::setHasFrameSpecificStorageAccess()
Modified: trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp (241745 => 241746)
--- trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2019-02-18 23:40:44 UTC (rev 241745)
+++ trunk/Source/WebCore/rendering/GridTrackSizingAlgorithm.cpp 2019-02-18 23:40:50 UTC (rev 241746)
@@ -645,7 +645,7 @@
auto& trackSize = rawGridTrackSize(direction, translatedIndex);
if (trackSize.isFitContent())
- return trackSize;
+ return isRelativeGridLengthAsAuto(trackSize.fitContentTrackBreadth(), direction) ? GridTrackSize(Length(Auto), Length(MaxContent)) : trackSize;
GridLength minTrackBreadth = trackSize.minTrackBreadth();
GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
@@ -1099,7 +1099,6 @@
ASSERT(!m_hasPercentSizedRowsIndefiniteHeight);
Vector<GridTrack>& allTracks = tracks(m_direction);
- const bool hasDefiniteFreeSpace = !!availableSpace();
const bool indefiniteHeight = m_direction == ForRows && !m_renderGrid->hasDefiniteLogicalHeight();
LayoutUnit maxSize = std::max(0_lu, availableSpace().valueOr(0_lu));
// 1. Initialize per Grid track variables.
@@ -1111,11 +1110,8 @@
track.setGrowthLimit(initialGrowthLimit(trackSize, track.baseSize()));
track.setInfinitelyGrowable(false);
- if (trackSize.isFitContent()) {
- GridLength gridLength = trackSize.fitContentTrackBreadth();
- if (!gridLength.isPercentage() || hasDefiniteFreeSpace)
- track.setGrowthLimitCap(valueForLength(gridLength.length(), maxSize));
- }
+ if (trackSize.isFitContent())
+ track.setGrowthLimitCap(valueForLength(trackSize.fitContentTrackBreadth().length(), maxSize));
if (trackSize.isContentSized())
m_contentSizedTracksIndex.append(i);
if (trackSize.maxTrackBreadth().isFlex())
