- Revision
- 140583
- Author
- [email protected]
- Date
- 2013-01-23 13:36:53 -0800 (Wed, 23 Jan 2013)
Log Message
[CSS Grid Layout] Add support for max-content
https://bugs.webkit.org/show_bug.cgi?id=107604
Reviewed by Tony Chang.
Source/WebCore:
Tests: fast/css-grid-layout/minmax-max-content-resolution-columns.html
fast/css-grid-layout/minmax-max-content-resolution-rows.html
This change implements max-content on top of the infrastructure introduced as part
of implementing min-content (bug 106474). No effort was made to share code, which
is what was done for min-content. The sharing will occur in follow-up refactoring(s)
to benefit from the extra testing but also the extra code to make the direction more
obvious.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::maxContentForChild):
Added this helper, similar to minContentForChild.
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
Patched the function to handle max-content per the specification's algorithm.
* rendering/RenderGrid.h:
Added maxContentForChild.
LayoutTests:
* fast/css-grid-layout/minmax-max-content-resolution-columns-expected.txt: Added.
* fast/css-grid-layout/minmax-max-content-resolution-columns.html: Added.
* fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt: Added.
* fast/css-grid-layout/minmax-max-content-resolution-rows.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (140582 => 140583)
--- trunk/LayoutTests/ChangeLog 2013-01-23 21:34:24 UTC (rev 140582)
+++ trunk/LayoutTests/ChangeLog 2013-01-23 21:36:53 UTC (rev 140583)
@@ -1,3 +1,15 @@
+2013-01-23 Julien Chaffraix <[email protected]>
+
+ [CSS Grid Layout] Add support for max-content
+ https://bugs.webkit.org/show_bug.cgi?id=107604
+
+ Reviewed by Tony Chang.
+
+ * fast/css-grid-layout/minmax-max-content-resolution-columns-expected.txt: Added.
+ * fast/css-grid-layout/minmax-max-content-resolution-columns.html: Added.
+ * fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt: Added.
+ * fast/css-grid-layout/minmax-max-content-resolution-rows.html: Added.
+
2013-01-23 Erik Arvidsson <[email protected]>
[chromium] Layout test rebaselines
Added: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns-expected.txt (0 => 140583)
--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns-expected.txt 2013-01-23 21:36:53 UTC (rev 140583)
@@ -0,0 +1,22 @@
+Test that resolving minmax function with max-content on grid items works properly.
+
+XXX
+PASS
+XXXXX
+PASS
+XXXXXXXXXX
+PASS
+XXXXX
+PASS
+XXXXXXXXXX
+PASS
+XX
+PASS
+XXX
+PASS
+XXXXX
+PASS
+XXXXX
+PASS
+XX
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html (0 => 140583)
--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-columns.html 2013-01-23 21:36:53 UTC (rev 140583)
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="" rel="stylesheet">
+<style>
+.gridMinMaxContent {
+ -webkit-grid-columns: minmax(-webkit-max-content, 50px);
+ -webkit-grid-rows: 60px;
+}
+
+.gridMaxMaxContent {
+ -webkit-grid-columns: minmax(30px, -webkit-max-content);
+ -webkit-grid-rows: 20px;
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+ width: 10px;
+ height: 10px;
+}
+
+.firstRowFirstColumn {
+ font: 10px/1 Ahem;
+ /* Make us fit our grid area. */
+ width: 100%;
+ height: 100%;
+}
+
+.verticalRL {
+ -webkit-writing-mode: vertical-rl;
+}
+</style>
+<script src=""
+<body _onload_="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
+
+<p>Test that resolving minmax function with max-content on grid items works properly.</p>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinMaxContent">
+ <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+ <div class="firstRowFirstColumn" data-expected-width="100" data-expected-height="60">XXXXXXXXXX</div>
+ </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 100px; height: 10px;">
+ <div class="grid gridMinMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX</div>
+ </div>
+</div>
+
+<div style="width: 200px; height: 10px;">
+ <div class="grid gridMinMaxContent">
+ <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+ <div class="firstRowFirstColumn" data-expected-width="100" data-expected-height="60">XXXXXXXXXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXXXX</div>
+ </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+
+<div style="width: 100px; height: 20px">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX</div>
+ </div>
+</div>
+
+<div style="width: 100px; height: 20px">
+ <div class="grid gridMaxMaxContent">
+ <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+ <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XX</div>
+ </div>
+</div>
+
+</body>
+</html>
Added: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt (0 => 140583)
--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows-expected.txt 2013-01-23 21:36:53 UTC (rev 140583)
@@ -0,0 +1,22 @@
+Test that resolving minmax function with max-content on grid items works properly.
+
+XX XX XX
+PASS
+XX XX XX XX XX
+PASS
+XX XX XX XX XX XX XX XX
+PASS
+XX XX XX
+PASS
+XX XX XX XX XX XX XX XX
+PASS
+XX
+PASS
+XX XX XX
+PASS
+XX XX XX XX XX
+PASS
+XX XX XX
+PASS
+XX XX XX XX XX
+PASS
Added: trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html (0 => 140583)
--- trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/minmax-max-content-resolution-rows.html 2013-01-23 21:36:53 UTC (rev 140583)
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="" rel="stylesheet">
+<style>
+.gridMinMaxContent {
+ -webkit-grid-columns: 20px;
+ -webkit-grid-rows: minmax(-webkit-max-content, 50px);
+}
+
+.gridMaxMaxContent {
+ -webkit-grid-columns: 20px;
+ -webkit-grid-rows: minmax(30px, -webkit-max-content);
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+ width: 10px;
+ height: 10px;
+}
+
+.firstRowFirstColumn {
+ font: 10px/1 Ahem;
+ /* Make us fit our grid area. */
+ width: 100%;
+ height: 100%;
+}
+
+.verticalRL {
+ -webkit-writing-mode: vertical-rl;
+}
+</style>
+<script src=""
+<body _onload_="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
+
+<p>Test that resolving minmax function with max-content on grid items works properly.</p>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMinMaxContent">
+ <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
+ </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 10px; height: 100px;">
+ <div class="grid gridMinMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+ <div class="grid gridMinMaxContent">
+ <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
+ </div>
+</div>
+
+<div class="constrainedContainer">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
+ </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+
+<div style="width: 100px; height: 20px">
+ <div class="grid gridMaxMaxContent">
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
+ </div>
+</div>
+
+<div style="width: 100px; height: 20px">
+ <div class="grid gridMaxMaxContent">
+ <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+ <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
+ </div>
+</div>
+
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (140582 => 140583)
--- trunk/Source/WebCore/ChangeLog 2013-01-23 21:34:24 UTC (rev 140582)
+++ trunk/Source/WebCore/ChangeLog 2013-01-23 21:36:53 UTC (rev 140583)
@@ -1,3 +1,29 @@
+2013-01-23 Julien Chaffraix <[email protected]>
+
+ [CSS Grid Layout] Add support for max-content
+ https://bugs.webkit.org/show_bug.cgi?id=107604
+
+ Reviewed by Tony Chang.
+
+ Tests: fast/css-grid-layout/minmax-max-content-resolution-columns.html
+ fast/css-grid-layout/minmax-max-content-resolution-rows.html
+
+ This change implements max-content on top of the infrastructure introduced as part
+ of implementing min-content (bug 106474). No effort was made to share code, which
+ is what was done for min-content. The sharing will occur in follow-up refactoring(s)
+ to benefit from the extra testing but also the extra code to make the direction more
+ obvious.
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::maxContentForChild):
+ Added this helper, similar to minContentForChild.
+
+ (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
+ Patched the function to handle max-content per the specification's algorithm.
+
+ * rendering/RenderGrid.h:
+ Added maxContentForChild.
+
2013-01-23 Mark Lam <[email protected]>
Assert that Supplementable objects is only used in their creator thread.
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (140582 => 140583)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-01-23 21:34:24 UTC (rev 140582)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2013-01-23 21:36:53 UTC (rev 140583)
@@ -240,6 +240,27 @@
return child->logicalHeight();
}
+LayoutUnit RenderGrid::maxContentForChild(RenderBox* child, TrackSizingDirection direction, Vector<GridTrack>& columnTracks)
+{
+ bool hasOrthogonalWritingMode = child->isHorizontalWritingMode() != isHorizontalWritingMode();
+ // FIXME: Properly support orthogonal writing mode.
+ if (hasOrthogonalWritingMode)
+ return LayoutUnit();
+
+ if (direction == ForColumns) {
+ // FIXME: It's unclear if we should return the intrinsic width or the preferred width.
+ // See http://lists.w3.org/Archives/Public/www-style/2013Jan/0245.html
+ return child->maxPreferredLogicalWidth();
+ }
+
+ if (child->needsLayout()) {
+ size_t columnTrack = resolveGridPosition(ForColumns, child);
+ child->setOverrideContainingBlockContentLogicalWidth(columnTracks[columnTrack].m_usedBreadth);
+ child->layout();
+ }
+ return child->logicalHeight();
+}
+
void RenderGrid::resolveContentBasedTrackSizingFunctions(TrackSizingDirection direction, Vector<GridTrack>& columnTracks, Vector<GridTrack>& rowTracks, LayoutUnit& availableLogicalSpace)
{
// FIXME: Split the grid tracks once we support spanning or fractions (step 1 and 2 of the algorithm).
@@ -249,9 +270,8 @@
for (size_t i = 0; i < tracks.size(); ++i) {
GridTrack& track = tracks[i];
- // FIXME: Add support MaxContent.
const Length& minTrackBreadth = trackStyles[i].minTrackBreadth();
- if (minTrackBreadth.isMinContent()) {
+ if (minTrackBreadth.isMinContent() || minTrackBreadth.isMaxContent()) {
// FIXME: The specification factors this logic into resolveContentBasedTrackSizingFunctionsForItems
// to reuse code between the branches and also calls distributeSpaceToTracks.
for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
@@ -265,9 +285,21 @@
availableLogicalSpace -= additionalBreadthSpace;
}
}
+ if (minTrackBreadth.isMaxContent()) {
+ for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+ size_t cellIndex = resolveGridPosition((direction == ForColumns) ? child->style()->gridItemColumn() : child->style()->gridItemRow());
+ if (cellIndex != i)
+ continue;
+ LayoutUnit additionalBreadthSpace = maxContentForChild(child, direction, columnTracks) - track.m_usedBreadth;
+ ASSERT(additionalBreadthSpace >= 0);
+ track.m_usedBreadth += additionalBreadthSpace;
+ availableLogicalSpace -= additionalBreadthSpace;
+ }
+ }
+
const Length& maxTrackBreadth = trackStyles[i].maxTrackBreadth();
- if (maxTrackBreadth.isMinContent()) {
+ if (maxTrackBreadth.isMinContent() || maxTrackBreadth.isMaxContent()) {
for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
size_t cellIndex = resolveGridPosition(direction, child);
if (cellIndex != i)
@@ -281,6 +313,21 @@
track.m_maxBreadth += share;
}
}
+
+ if (maxTrackBreadth.isMaxContent()) {
+ for (RenderBox* child = firstChildBox(); child; child = child->nextSiblingBox()) {
+ size_t cellIndex = resolveGridPosition((direction == ForColumns) ? child->style()->gridItemColumn() : child->style()->gridItemRow());
+ if (cellIndex != i)
+ continue;
+
+ LayoutUnit additionalBreadthSpace = maxContentForChild(child, direction, columnTracks) - track.maxBreadthIfNotInfinite();
+ LayoutUnit share = std::min(additionalBreadthSpace, tracks[i].m_maxBreadth - track.maxBreadthIfNotInfinite());
+ if (track.m_maxBreadth == infinity)
+ track.m_maxBreadth = track.m_usedBreadth + share;
+ else
+ track.m_maxBreadth += share;
+ }
+ }
}
// FIXME: The spec says to update maxBreadth if it is Infinity.
Modified: trunk/Source/WebCore/rendering/RenderGrid.h (140582 => 140583)
--- trunk/Source/WebCore/rendering/RenderGrid.h 2013-01-23 21:34:24 UTC (rev 140582)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2013-01-23 21:36:53 UTC (rev 140583)
@@ -58,6 +58,7 @@
void layoutGridItems();
LayoutUnit minContentForChild(RenderBox*, TrackSizingDirection, Vector<GridTrack>& columnTracks);
+ LayoutUnit maxContentForChild(RenderBox*, TrackSizingDirection, Vector<GridTrack>& columnTracks);
LayoutPoint findChildLogicalPosition(RenderBox*, const Vector<GridTrack>& columnTracks, const Vector<GridTrack>& rowTracks);
size_t resolveGridPosition(TrackSizingDirection, const RenderObject*) const;
size_t resolveGridPosition(const GridPosition&) const;
