No subject
Tue May 3 15:05:30 PDT 2016
one argument. That forced us to refactor some code because minmax() was the only allowed
function for <track-size>s so far.
The implementation key is a new attribute in GridTrack called growthLimitCap which is
precisely the single attribute of fit-content(). Some parts of the track sizing algorithm
were adapted to this change like for example the sorting of tracks by growth potential (we
need to consider the caps).
Tests: fast/css-grid-layout/fit-content-columns.html
fast/css-grid-layout/fit-content-rows.html
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::specifiedValueForGridTrackSize): Added support for fit-content sizes.
* css/StyleBuilderConverter.h:
(WebCore::StyleBuilderConverter::createGridTrackSize): Added support for fit-content sizes.
* css/parser/CSSParser.cpp:
(WebCore::isGridTrackFixedSized): Added support for fit-content sizes.
(WebCore::CSSParser::parseGridTrackSize): Added support for parsing fit-content() functions.
* css/parser/CSSPropertyParser.cpp: Added support for parsing fit-content() functions so
it'll be available once we switch to the new parser.
* rendering/RenderGrid.cpp:
(WebCore::GridTrack::baseSize): Just return a LayoutUnit, the return value optimization will
keep it fast in any case.
(WebCore::GridTrack::growthLimit): Ditto.
(WebCore::GridTrack::setGrowthLimit): Added an ASSERT to check that the growth limit is
never higher than the cap.
(WebCore::GridTrack::infiniteGrowthPotential):
(WebCore::GridTrack::plannedSize): Just return a LayoutUnit, the return value optimization will
keep it fast in any case.
(WebCore::GridTrack::tempSize): Just return a LayoutUnit, the return value optimization will
keep it fast in any case.
(WebCore::GridTrack::setTempSize): Added as we no longer return a reference in tempSize().
(WebCore::GridTrack::growTempSize): New utility function which increases the tempSize.
(WebCore::GridTrack::setInfinitelyGrowable):
(WebCore::GridTrack::setGrowthLimitCap): Added.
(WebCore::GridTrack::growthLimitCap): Ditto.
(WebCore::GridTrack::growthLimitIsInfinite): Made private.
(WebCore::RenderGrid::GridSizingData::freeSpace): Renamed from freeSpaceForDirection.
(WebCore::RenderGrid::GridSizingData::availableSpace): We now cache the available space as
it is used to compute relative (percentage) sizes.
(WebCore::RenderGrid::GridSizingData::setAvailableSpace): Ditto.
(WebCore::RenderGrid::GridSizingData::setFreeSpace): Renamed from setFreeSpaceForDirection.
(WebCore::RenderGrid::computeTrackSizesForDirection): Receives the available space instead
of the free space.
(WebCore::RenderGrid::computeIntrinsicLogicalWidths): Properly initialize free and available
spaces.
(WebCore::RenderGrid::computeIntrinsicLogicalHeight): Ditto.
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks): Use available space to initialize the
track sizes. Also use sizingOperation to decide whether or not sizes are indefinite. Last
but not least, added support for fit-content tracks.
(WebCore::RenderGrid::computeUsedBreadthOfMinLength): Pass a GridTrackSize instead of a GridLength.
(WebCore::RenderGrid::computeUsedBreadthOfMaxLength): Ditto.
(WebCore::RenderGrid::gridTrackSize): Added support for fit-content.
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions): Ditto.
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems): Ditto.
(WebCore::trackSizeForTrackSizeComputationPhase):
(WebCore::sortByGridTrackGrowthPotential): Reworked the function so it properly sorts tracks
with growth limit caps to support fit-content().
(WebCore::clampGrowthShareIfNeeded): Clamps the given growthShare passed as argument to the
track growth limit cap.
(WebCore::RenderGrid::distributeSpaceToTracks): Use the new setTempSize() method. Also sort
the selected tracks to grow over growth limits in order to respect the track caps eventually
set by fit-content (otherwise those tracks could indefinitely grow over the specified value).
(WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth): Use the new defined functions.
(WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded): Use freeSpace().
(WebCore::RenderGrid::populateGridPositionsForDirection): Ditto.
(WebCore::GridTrack::infinitelyGrowable): Deleted.
(WebCore::RenderGrid::GridSizingData::freeSpaceForDirection): Deleted.
(WebCore::RenderGrid::GridSizingData::setFreeSpaceForDirection): Deleted.
(WebCore::RenderGrid::trackSizeForTrackSizeComputationPhase): Deleted.
* rendering/RenderGrid.h: Changed the signature of some methods. Moved
TrackSizeComputationPhase out of the RenderGrid class.
* rendering/style/GridTrackSize.h:
(WebCore::GridTrackSize::GridTrackSize): Added some extra documentation. Added a new
attribute to the constructor to support fit-content GridTrackSizes.
(WebCore::GridTrackSize::fitContentTrackBreadth): New method which returns the growth limit
cap set by fit-content().
(WebCore::GridTrackSize::minTrackBreadth):
(WebCore::GridTrackSize::isFitContent): Added.
(WebCore::GridTrackSize::length): Deleted.
(WebCore::GridTrackSize::isPercentage): Deleted.
LayoutTests:
New tests to verify that fit-content track sizes work as expected for columns and for
rows. Also added some more test cases to verify that we properly parse fit-content().
* fast/css-grid-layout/fit-content-columns-expected.html: Added.
* fast/css-grid-layout/fit-content-columns.html: Added.
* fast/css-grid-layout/fit-content-rows-expected.html: Added.
* fast/css-grid-layout/fit-content-rows.html: Added.
* fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
* fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
* fast/css-grid-layout/grid-columns-rows-get-set.html:
* fast/css-grid-layout/resources/grid-columns-rows-get-set.js:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetjs">trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStyleBuilderConverterh">trunk/Source/WebCore/css/StyleBuilderConverter.h</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSParsercpp">trunk/Source/WebCore/css/parser/CSSParser.cpp</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParsercpp">trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleGridTrackSizeh">trunk/Source/WebCore/rendering/style/GridTrackSize.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutfitcontentcolumnsexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutfitcontentcolumnshtml">trunk/LayoutTests/fast/css-grid-layout/fit-content-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutfitcontentrowsexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/fit-content-rows-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutfitcontentrowshtml">trunk/LayoutTests/fast/css-grid-layout/fit-content-rows.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/LayoutTests/ChangeLog 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -1,3 +1,23 @@
</span><ins>+2016-09-07 Sergio Villar Senin <svillar at igalia.com>
+
+ [css-grid] Implement fit-content track size
+ https://bugs.webkit.org/show_bug.cgi?id=161379
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ New tests to verify that fit-content track sizes work as expected for columns and for
+ rows. Also added some more test cases to verify that we properly parse fit-content().
+
+ * fast/css-grid-layout/fit-content-columns-expected.html: Added.
+ * fast/css-grid-layout/fit-content-columns.html: Added.
+ * fast/css-grid-layout/fit-content-rows-expected.html: Added.
+ * fast/css-grid-layout/fit-content-rows.html: Added.
+ * fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
+ * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-columns-rows-get-set.html:
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
+
</ins><span class="cx"> 2016-09-15 Alejandro G. Castro <alex at igalia.com>
</span><span class="cx">
</span><span class="cx"> [WebRTC][OpenWebRTC] crash in maybeHandleChangeMutedState
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutfitcontentcolumnsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html (0 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -0,0 +1,346 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ justify-content: start;
+ width: 100px;
+ position: relative;
+ padding-top: 10px;
+ margin-bottom: 5px;
+ grid-column-gap: 5px;
+}
+
+.fc0 { grid-template-columns: minmax(auto, 0px);}
+.fc40 { grid-template-columns: minmax(auto, 40px); }
+.fc80 { grid-template-columns: minmax(auto, 80px); }
+.fc110 { grid-template-columns: auto; }
+
+.fc0x2 { grid-template-columns: repeat(2, minmax(auto, 0px));}
+.fc40x2 { grid-template-columns: repeat(2, minmax(auto, 40px)); }
+.fc80x2 { grid-template-columns: repeat(2, minmax(auto, 80px)); }
+.fc110x2 { grid-template-columns: auto auto; }
+
+.fc0p { grid-template-columns: minmax(auto, 0%); }
+.fc30p { grid-template-columns: minmax(auto, 30%); }
+.fc90p { grid-template-columns: minmax(auto, 90%); }
+.fc110p { grid-template-columns: auto; }
+
+.fc0px2 { grid-template-columns: repeat(2, minmax(auto, 0%)); }
+.fc30px2 { grid-template-columns: repeat(2, minmax(auto, 30%)); }
+.fc90px2 { grid-template-columns: repeat(2, minmax(auto, 90%)); }
+.fc110px2 { grid-template-columns: auto auto; }
+
+.item {
+ font: 10px/1 Ahem;
+ background: cyan;
+}
+
+.spanningItem {
+ font: 10px/1 Ahem;
+ grid-column: 1 / -1;
+ grid-row: 2;
+ background: salmon;
+}
+
+.test {
+ position: absolute;
+ left: 0; right: 0; top: 0;
+ height: 5px;
+ background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.floatLeft {
+ float: left;
+ width: 190px;
+}
+
+h3 { font-size: 1em; }
+</style>
+
+<p>This test checks that 'fit-content()' works as expected, i.e., it's similar to 'auto' ('minmax(auto, -webkit-max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater that the 'auto' minimum).</p>
+
+<div class="floatLeft">
+ <h3>Only fit-content() and with fixed size tracks.</h3>
+ <div class="grid fc0">
+ <div class="item">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc0x2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc40">
+ <div class="item">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto;">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) auto;">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc80">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc80x2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto minmax(auto, 80px)">
+ <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 20px) 50%;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(10px, 40px) minmax(auto, 40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto minmax(10%, 200px);">
+ <div class="item autoRowSecondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+</div>
+
+<div class="floatLeft">
+ <h3>fit-content() with other content-sized tracks.</h3>
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) -webkit-max-content;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) -webkit-max-content;">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 40px) -webkit-max-content;">
+ <div class="item autoRowSecondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content minmax(auto, 40px);">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content minmax(auto, 40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content minmax(auto, 40px);">
+ <div class="item autoRowSecondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 30px) -webkit-min-content -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content minmax(auto, 30px) -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content -webkit-max-content minmax(auto, 30px)">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(auto, 30px) -webkit-min-content -webkit-max-content">
+ <div class="item" style="grid-column: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content minmax(auto, 30px) -webkit-max-content">
+ <div class="item" style="grid-column: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content -webkit-max-content minmax(auto, 30px)">
+ <div class="item" style="grid-column: 2">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+</div>
+
+<div class="floatLeft">
+ <h3>fit-content() with percentage arguments.</h3>
+ <div class="grid fc0p">
+ <div class="item">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc0px2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc30p">
+ <div class="item">XX XX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc30px2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc30px2">
+ <div class="item autoRowSecondColumn">X X X</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc90p">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc90px2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto minmax(auto, 90%)">
+ <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="floatLeft">
+ <h3>-webkit-max-content < fit-content() argument.</h3>
+
+ <div class="grid fc110">
+ <div class="item">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc110x2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc110x2">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto;">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto;">
+ <div class="item autoRowSecondColumn">XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-max-content auto;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto -webkit-min-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-max-content auto -webkit-max-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content auto -webkit-min-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto auto auto;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/fit-content-columns-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsfastcssgridlayoutfitcontentcolumnshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/fit-content-columns.html (0 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/fit-content-columns.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/fit-content-columns.html 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -0,0 +1,347 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ justify-content: start;
+ width: 100px;
+ position: relative;
+ padding-top: 10px;
+ margin-bottom: 5px;
+ grid-column-gap: 5px;
+}
+
+.fc0 { grid-template-columns: fit-content(0px);}
+.fc40 { grid-template-columns: fit-content(40px); }
+.fc80 { grid-template-columns: fit-content(80px); }
+.fc110 { grid-template-columns: fit-content(110px); }
+
+.fc0x2 { grid-template-columns: repeat(2, fit-content(0px));}
+.fc40x2 { grid-template-columns: repeat(2, fit-content(40px)); }
+.fc80x2 { grid-template-columns: repeat(2, fit-content(80px)); }
+.fc110x2 { grid-template-columns: repeat(2, fit-content(110px)); }
+
+.fc0p { grid-template-columns: fit-content(0%); }
+.fc30p { grid-template-columns: fit-content(30%); }
+.fc90p { grid-template-columns: fit-content(90%); }
+.fc110p { grid-template-columns: fit-content(110%); }
+
+.fc0px2 { grid-template-columns: repeat(2, fit-content(0%)); }
+.fc30px2 { grid-template-columns: repeat(2, fit-content(30%)); }
+.fc90px2 { grid-template-columns: repeat(2, fit-content(90%)); }
+.fc110px2 { grid-template-columns: repeat(2, fit-content(110%)); }
+
+.item {
+ font: 10px/1 Ahem;
+ background: cyan;
+}
+
+.spanningItem {
+ font: 10px/1 Ahem;
+ grid-column: 1 / -1;
+ grid-row: 2;
+ background: salmon;
+}
+
+.test {
+ position: absolute;
+ left: 0; right: 0; top: 0;
+ height: 5px;
+ background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.floatLeft {
+ float: left;
+ width: 190px;
+}
+
+h3 { font-size: 1em; }
+
+</style>
+
+<p>This test checks that 'fit-content()' works as expected, i.e., it's similar to 'auto' ('minmax(auto, -webkit-max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater that the 'auto' minimum).</p>
+
+<div class="floatLeft">
+ <h3>Only fit-content() and with fixed size tracks.</h3>
+ <div class="grid fc0">
+ <div class="item">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc0x2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc40">
+ <div class="item">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc40x2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc40x2">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc80">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc80x2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc80x2">
+ <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(20px) 50%;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-content(40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(40px) minmax(10%, 200px);">
+ <div class="item autoRowSecondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+</div>
+
+<div class="floatLeft">
+ <h3>fit-content() with other content-sized tracks.</h3>
+ <div class="grid" style="grid-template-columns: fit-content(40px) -webkit-max-content;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(40px) -webkit-max-content;">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(40px) -webkit-max-content;">
+ <div class="item autoRowSecondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content fit-content(40px);">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content fit-content(40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content fit-content(40px);">
+ <div class="item autoRowSecondColumn">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(30px) -webkit-min-content -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content fit-content(30px) -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content -webkit-max-content fit-content(30px)">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(30px) -webkit-min-content -webkit-max-content">
+ <div class="item" style="grid-column: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content fit-content(30px) -webkit-max-content">
+ <div class="item" style="grid-column: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content -webkit-max-content fit-content(30px)">
+ <div class="item" style="grid-column: 2">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+</div>
+
+<div class="floatLeft">
+ <h3>fit-content() with percentage arguments.</h3>
+ <div class="grid fc0p">
+ <div class="item">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc0px2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc30p">
+ <div class="item">XX XX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc30px2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc30px2">
+ <div class="item autoRowSecondColumn">X X X</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc90p">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc90px2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc90px2">
+ <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+</div>
+
+<div class="floatLeft">
+ <h3>-webkit-max-content < fit-content() argument.</h3>
+
+ <div class="grid fc110">
+ <div class="item">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ </div>
+
+ <div class="grid fc110x2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid fc110x2">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
+ <div class="item autoRowSecondColumn">XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-max-content fit-content(110px);">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: fit-content(110px) -webkit-min-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-max-content fit-content(110px) -webkit-max-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: -webkit-min-content fit-content(110px) -webkit-min-content;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+ <div class="grid" style="grid-template-columns: auto fit-content(110px) auto;">
+ <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test autoRowFirstColumn"></div>
+ <div class="test autoRowSecondColumn"></div>
+ <div class="test autoRowThirdColumn"></div>
+ </div>
+
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/fit-content-columns.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsfastcssgridlayoutfitcontentrowsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/fit-content-rows-expected.html (0 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/fit-content-rows-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/fit-content-rows-expected.html 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -0,0 +1,343 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ justify-content: start;
+ align-content: start;
+ height: 100px;
+ width: 40px;
+ position: relative;
+ padding-left: 10px;
+ margin-right: 5px;
+ grid-row-gap: 5px;
+ float: left;
+}
+
+.fc0 { grid-template-rows: minmax(auto, 0px);}
+.fc40 { grid-template-rows: minmax(auto, 40px); }
+.fc80 { grid-template-rows: minmax(auto, 80px); }
+.fc110 { grid-template-rows: auto; }
+
+.fc0x2 { grid-template-rows: repeat(2, minmax(auto, 0px));}
+.fc40x2 { grid-template-rows: repeat(2, minmax(auto, 40px)); }
+.fc80x2 { grid-template-rows: repeat(2, minmax(auto, 80px)); }
+.fc110x2 { grid-template-rows: auto auto; }
+
+.fc0p { grid-template-rows: minmax(auto, 0%); }
+.fc30p { grid-template-rows: minmax(auto, 30px); }
+.fc90p { grid-template-rows: minmax(auto, 90px); }
+.fc110p { grid-template-rows: auto; }
+
+.fc0px2 { grid-template-rows: repeat(2, minmax(auto, 0%)); }
+.fc30px2 { grid-template-rows: repeat(2, minmax(auto, 30px)); }
+.fc90px2 { grid-template-rows: repeat(2, minmax(auto, 90px)); }
+.fc110px2 { grid-template-rows: auto auto; }
+
+.item {
+ font: 10px/1 Ahem;
+ background: cyan;
+}
+
+.spanningItem {
+ font: 10px/1 Ahem;
+ grid-row: 1 / -1;
+ grid-column: 2;
+ background: salmon;
+}
+
+.test {
+ position: absolute;
+ left: 0; top: 0; bottom: 0;
+ width: 5px;
+ background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.firstRow { grid-row: 1 / 2; }
+.secondRow { grid-row: 2 / 3; }
+.thirdRow { grid-row: 3 / 4; }
+
+div.grid > div { -webkit-writing-mode: vertical-lr; }
+
+</style>
+
+<p>This test checks that 'fit-content()' works as expected, i.e., it's similar to 'auto' ('minmax(auto, -webkit-max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater that the 'auto' minimum).</p>
+
+<div class="grid fc0">
+ <div class="item">XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc0x2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc40">
+ <div class="item">XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto auto;">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 40px) auto;">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc80">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc80x2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto minmax(auto, 80px)">
+ <div class="item secondRow">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) 50%;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(10px, 40px) minmax(auto, 40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto minmax(10%, 200px);">
+ <div class="item secondRow">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid" style="grid-template-rows: minmax(auto, 40px) -webkit-max-content;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 40px) -webkit-max-content;">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 40px) -webkit-max-content;">
+ <div class="item secondRow">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 40px);">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 40px);">
+ <div class="item secondRow">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 30px) -webkit-min-content -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 30px) -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content -webkit-max-content minmax(auto, 30px)">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 30px) -webkit-min-content -webkit-max-content">
+ <div class="item" style="grid-row: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content minmax(auto, 30px) -webkit-max-content">
+ <div class="item" style="grid-row: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content -webkit-max-content minmax(auto, 30px)">
+ <div class="item" style="grid-row: 2">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid fc0p">
+ <div class="item">XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc0px2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc30p">
+ <div class="item">XX XX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc30px2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc30px2">
+ <div class="item secondRow">X X X</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc90p">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc90px2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto minmax(auto, 90px)">
+ <div class="item secondRow">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid fc110">
+ <div class="item">XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc110x2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc110x2">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto auto;">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto auto;">
+ <div class="item secondRow">XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-max-content auto;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto -webkit-min-content;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-max-content auto -webkit-max-content;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content auto -webkit-min-content;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto auto auto;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/fit-content-rows-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsfastcssgridlayoutfitcontentrowshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/fit-content-rows.html (0 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/fit-content-rows.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/fit-content-rows.html 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -0,0 +1,347 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ justify-content: start;
+ align-content: start;
+ height: 100px;
+ width: 40px;
+ position: relative;
+ padding-left: 10px;
+ margin-right: 5px;
+ grid-row-gap: 5px;
+ float: left;
+}
+
+.fc0 { grid-template-rows: fit-content(0px);}
+.fc40 { grid-template-rows: fit-content(40px); }
+.fc80 { grid-template-rows: fit-content(80px); }
+.fc110 { grid-template-rows: fit-content(110px); }
+
+.fc0x2 { grid-template-rows: repeat(2, fit-content(0px));}
+.fc40x2 { grid-template-rows: repeat(2, fit-content(40px)); }
+.fc80x2 { grid-template-rows: repeat(2, fit-content(80px)); }
+.fc110x2 { grid-template-rows: repeat(2, fit-content(110px)); }
+
+.fc0p { grid-template-rows: fit-content(0%); }
+.fc30p { grid-template-rows: fit-content(30%); }
+.fc90p { grid-template-rows: fit-content(90%); }
+.fc110p { grid-template-rows: fit-content(110%); }
+
+.fc0px2 { grid-template-rows: repeat(2, fit-content(0%)); }
+.fc30px2 { grid-template-rows: repeat(2, fit-content(30%)); }
+.fc90px2 { grid-template-rows: repeat(2, fit-content(90%)); }
+.fc110px2 { grid-template-rows: repeat(2, fit-content(110%)); }
+
+div.grid > div { -webkit-writing-mode: vertical-lr; }
+
+.item {
+ font: 10px/1 Ahem;
+ background: cyan;
+}
+
+.spanningItem {
+ font: 10px/1 Ahem;
+ grid-row: 1 / -1;
+ grid-column: 2;
+ background: salmon;
+}
+
+.test {
+ position: absolute;
+ left: 0; bottom: 0; top: 0;
+ width: 5px;
+ background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.firstRow { grid-row: 1 / 2; }
+.secondRow { grid-row: 2 / 3; }
+.thirdRow { grid-row: 3 / 4; }
+
+h3 { font-size: 1em; }
+.container { float: left; height: 110px;}
+
+</style>
+
+<p>This test checks that 'fit-content()' works as expected, i.e., it's similar to 'auto' ('minmax(auto, -webkit-max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater that the 'auto' minimum).</p>
+
+<div class="grid fc0">
+ <div class="item">XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc0x2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc40">
+ <div class="item">XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc40x2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc40x2">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc80">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc80x2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc80x2">
+ <div class="item secondRow">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(20px) 50%;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(10px, 40px) fit-content(40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(40px) minmax(10%, 200px);">
+ <div class="item secondRow">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+</div>
+
+<br clear ="all">
+<br clear ="all">
+
+<div class="grid" style="grid-template-rows: fit-content(40px) -webkit-max-content;">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(40px) -webkit-max-content;">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(40px) -webkit-max-content;">
+ <div class="item secondRow">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content fit-content(40px);">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content fit-content(40px);">
+ <div class="item">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content fit-content(40px);">
+ <div class="item secondRow">XXXXX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(30px) -webkit-min-content -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content fit-content(30px) -webkit-max-content">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content -webkit-max-content fit-content(30px)">
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(30px) -webkit-min-content -webkit-max-content">
+ <div class="item" style="grid-row: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content fit-content(30px) -webkit-max-content">
+ <div class="item" style="grid-row: 1">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content -webkit-max-content fit-content(30px)">
+ <div class="item" style="grid-row: 2">XXX XX</div>
+ <div class="spanningItem">XXX XX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid fc0p">
+ <div class="item">XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc0px2">
+ <div class="item">XXX</div>
+ <div class="spanningItem">XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc30p">
+ <div class="item">XX XX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc30px2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc30px2">
+ <div class="item secondRow">X X X</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc90p">
+ <div class="item">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc90px2">
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc90px2">
+ <div class="item secondRow">XXX XXX XXX</div>
+ <div class="spanningItem">XXX XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid fc110">
+ <div class="item">XXX XXX</div>
+ <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc110x2">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc110x2">
+ <div class="item">XXX XXX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);">
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);">
+ <div class="item secondRow">XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-max-content fit-content(110px);">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(110px) -webkit-min-content;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-max-content fit-content(110px) -webkit-max-content;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: -webkit-min-content fit-content(110px) -webkit-min-content;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto fit-content(110px) auto;">
+ <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+ <div class="spanningItem">XXX XXX</div>
+ <div class="test firstRow"></div>
+ <div class="test secondRow"></div>
+ <div class="test thirdRow"></div>
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/fit-content-rows.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -12,6 +12,8 @@
</span><span class="cx"> PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-columns') is "-webkit-max-content"
</span><span class="cx"> PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('grid-auto-rows') is "minmax(auto, 48px)"
</span><span class="cx"> PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('grid-auto-columns') is "minmax(80px, auto)"
</span><ins>+PASS window.getComputedStyle(gridAutoFitContent, '').getPropertyValue('grid-auto-rows') is "fit-content(50%)"
+PASS window.getComputedStyle(gridAutoFitContent, '').getPropertyValue('grid-auto-columns') is "fit-content(30px)"
</ins><span class="cx">
</span><span class="cx"> Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created
</span><span class="cx"> PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px"
</span><span class="lines">@@ -48,6 +50,8 @@
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "minmax(-webkit-max-content, -webkit-min-content)"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "minmax(-webkit-min-content, 10px) 48px 5%"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto 30px minmax(10%, 60%)"
</span><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "fit-content(10px) fit-content(30%)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "fit-content(5%) fit-content(40px)"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
</span><span class="lines">@@ -62,6 +66,8 @@
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
</span><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto"
+PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '50px'
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautocolumnsrowsgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -38,6 +38,12 @@
</span><span class="cx"> grid-auto-columns: 25px 50px 100px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.gridAutoFitContent {
+ height: 50px;
+ grid-auto-columns: fit-content(30px);
+ grid-auto-rows: fit-content(50%);
+}
+
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><span class="lines">@@ -66,6 +72,7 @@
</span><span class="cx"> <div style="grid-column: -4; grid-row: -4"></div>
</span><span class="cx"> <div style="grid-column: -5; grid-row: -5"></div>
</span><span class="cx"> </div>
</span><ins>+<div class="grid gridAutoFitContent" id="gridAutoFitContent"></div>
</ins><span class="cx">
</span><span class="cx"> <script>
</span><span class="cx"> description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');
</span><span class="lines">@@ -75,6 +82,7 @@
</span><span class="cx"> testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
</span><span class="cx"> testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "-webkit-min-content", "-webkit-max-content");
</span><span class="cx"> testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "minmax(auto, 48px)", "minmax(80px, auto)");
</span><ins>+testGridAutoDefinitionsValues(document.getElementById("gridAutoFitContent"), "fit-content(50%)", "fit-content(30px)");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created");
</span><span class="lines">@@ -114,6 +122,7 @@
</span><span class="cx"> testAutoValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "minmax(-webkit-min-content, 48px)", "minmax(80px, -webkit-min-content)");
</span><span class="cx"> testAutoValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)");
</span><span class="cx"> testAutoValues("minmax(-webkit-min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)");
</span><ins>+testAutoValues("fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(calc(20px + 2em))", "fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(40px)");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS");
</span><span class="lines">@@ -123,6 +132,7 @@
</span><span class="cx"> testAutoValues("none", "none", "auto", "auto");
</span><span class="cx"> testAutoValues("10px [a] 20px", "[z] auto [y] -webkit-min-content", "auto", "auto");
</span><span class="cx"> testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto", "auto");
</span><ins>+testAutoValues("fit-content(min-content) fit-content(auto)", "fit-content(fit-content(3%)) fit-content(minmax(2px, 30px))", "auto", "auto");
</ins><span class="cx">
</span><span class="cx"> function testInherit()
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -44,6 +44,8 @@
</span><span class="cx"> PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "20px"
</span><span class="cx"> PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "11px"
</span><ins>+PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-columns') is "7px"
+PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-rows') is "11px"
</ins><span class="cx">
</span><span class="cx"> Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')
</span><span class="cx"> PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="lines">@@ -80,6 +82,10 @@
</span><span class="cx"> PASS element.style.gridTemplateColumns is "-webkit-max-content"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
</span><span class="cx"> PASS element.style.gridTemplateRows is "-webkit-max-content"
</span><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
+PASS element.style.gridTemplateColumns is "fit-content(100px)"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
+PASS element.style.gridTemplateRows is "fit-content(25%)"
</ins><span class="cx">
</span><span class="cx"> Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px"
</span><span class="lines">@@ -166,6 +172,22 @@
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</span><ins>+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
</ins><span class="cx">
</span><span class="cx"> Test setting grid-template-columns and grid-template-rows back to 'none' through JS
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridcolumnsrowsgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -91,6 +91,10 @@
</span><span class="cx"> grid-template-columns: minmax(auto, 20px);
</span><span class="cx"> grid-template-rows: minmax(max-content, auto);
</span><span class="cx"> }
</span><ins>+.gridWithFitContentFunction {
+ grid-template-columns: fit-content(30%);
+ grid-template-rows: fit-content(20px):
+}
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/js-test-pre.js"></script>
</span><span class="cx"> </head>
</span><span class="lines">@@ -130,6 +134,9 @@
</span><span class="cx"> <div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMaxElement">
</span><span class="cx"> <div class="gridItem"></div>
</span><span class="cx"> </div>
</span><ins>+<div class="grid definite gridWithFitContentFunction contentStart" id="gridWithFitContentFunctionElement">
+ <div class="gridItem"></div>
+</div>
</ins><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><span class="cx"> <script src="resources/grid-columns-rows-get-set.js"></script>
</span><span class="cx"> <script src="../../resources/js-test-post.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridcolumnsrowsgetsetjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -21,6 +21,7 @@
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMaxElement"), "20px", "11px");
</span><ins>+testGridTemplatesValues(document.getElementById("gridWithFitContentFunctionElement"), "7px", "11px");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')");
</span><span class="lines">@@ -44,6 +45,7 @@
</span><span class="cx"> testGridTemplatesSetJSValues("10vw", "25vh", "80px", "150px");
</span><span class="cx"> testGridTemplatesSetJSValues("-webkit-min-content", "-webkit-min-content", "0px", "0px");
</span><span class="cx"> testGridTemplatesSetJSValues("-webkit-max-content", "-webkit-max-content", "0px", "0px");
</span><ins>+testGridTemplatesSetJSValues("fit-content(100px)", "fit-content(25%)", "0px", "0px");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS");
</span><span class="lines">@@ -80,6 +82,14 @@
</span><span class="cx"> // Flexible lengths are invalid on the min slot of minmax().
</span><span class="cx"> testGridTemplatesSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)");
</span><span class="cx"> testGridTemplatesSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)");
</span><ins>+testGridTemplatesSetBadJSValues("fit-content()", "fit-content( )");
+testGridTemplatesSetBadJSValues("fit-content(-10em)", "fit-content(-2px)");
+testGridTemplatesSetBadJSValues("fit-content(10px 2%)", "fit-content(5% 10em)");
+testGridTemplatesSetBadJSValues("fit-content(-webkit-max-content)", "fit-content(-webkit-min-content)");
+testGridTemplatesSetBadJSValues("fit-content(auto)", "fit-content(3fr)");
+testGridTemplatesSetBadJSValues("fit-content(repeat(2, 100px))", "fit-content(repeat(auto-fit), 1%)");
+testGridTemplatesSetBadJSValues("fit-content(fit-content(10px))", "fit-content(fit-content(30%))");
+testGridTemplatesSetBadJSValues("fit-content([a] 100px)", "fit-content(30px [b c])");
</ins><span class="cx">
</span><span class="cx"> testGridTemplatesSetBadJSValues("-2fr", "3ffr");
</span><span class="cx"> testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/ChangeLog 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -1,3 +1,98 @@
</span><ins>+2016-09-07 Sergio Villar Senin <svillar at igalia.com>
+
+ [css-grid] Implement fit-content track size
+ https://bugs.webkit.org/show_bug.cgi?id=161379
+
+ Reviewed by Manuel Rego Casasnovas.
+
+ This implements the new <fit-content> track size which is defined as follows: "Represents
+ the formula min(max-content, max(auto, argument)), which is calculated similar to auto
+ (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is
+ greater than the auto minimum."
+
+ From the parsing POV fit-content was implemented as a new type of function which only takes
+ one argument. That forced us to refactor some code because minmax() was the only allowed
+ function for <track-size>s so far.
+
+ The implementation key is a new attribute in GridTrack called growthLimitCap which is
+ precisely the single attribute of fit-content(). Some parts of the track sizing algorithm
+ were adapted to this change like for example the sorting of tracks by growth potential (we
+ need to consider the caps).
+
+ Tests: fast/css-grid-layout/fit-content-columns.html
+ fast/css-grid-layout/fit-content-rows.html
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::specifiedValueForGridTrackSize): Added support for fit-content sizes.
+ * css/StyleBuilderConverter.h:
+ (WebCore::StyleBuilderConverter::createGridTrackSize): Added support for fit-content sizes.
+ * css/parser/CSSParser.cpp:
+ (WebCore::isGridTrackFixedSized): Added support for fit-content sizes.
+ (WebCore::CSSParser::parseGridTrackSize): Added support for parsing fit-content() functions.
+ * css/parser/CSSPropertyParser.cpp: Added support for parsing fit-content() functions so
+ it'll be available once we switch to the new parser.
+ * rendering/RenderGrid.cpp:
+ (WebCore::GridTrack::baseSize): Just return a LayoutUnit, the return value optimization will
+ keep it fast in any case.
+ (WebCore::GridTrack::growthLimit): Ditto.
+ (WebCore::GridTrack::setGrowthLimit): Added an ASSERT to check that the growth limit is
+ never higher than the cap.
+ (WebCore::GridTrack::infiniteGrowthPotential):
+ (WebCore::GridTrack::plannedSize): Just return a LayoutUnit, the return value optimization will
+ keep it fast in any case.
+ (WebCore::GridTrack::tempSize): Just return a LayoutUnit, the return value optimization will
+ keep it fast in any case.
+ (WebCore::GridTrack::setTempSize): Added as we no longer return a reference in tempSize().
+ (WebCore::GridTrack::growTempSize): New utility function which increases the tempSize.
+ (WebCore::GridTrack::setInfinitelyGrowable):
+ (WebCore::GridTrack::setGrowthLimitCap): Added.
+ (WebCore::GridTrack::growthLimitCap): Ditto.
+ (WebCore::GridTrack::growthLimitIsInfinite): Made private.
+ (WebCore::RenderGrid::GridSizingData::freeSpace): Renamed from freeSpaceForDirection.
+ (WebCore::RenderGrid::GridSizingData::availableSpace): We now cache the available space as
+ it is used to compute relative (percentage) sizes.
+ (WebCore::RenderGrid::GridSizingData::setAvailableSpace): Ditto.
+ (WebCore::RenderGrid::GridSizingData::setFreeSpace): Renamed from setFreeSpaceForDirection.
+ (WebCore::RenderGrid::computeTrackSizesForDirection): Receives the available space instead
+ of the free space.
+ (WebCore::RenderGrid::computeIntrinsicLogicalWidths): Properly initialize free and available
+ spaces.
+ (WebCore::RenderGrid::computeIntrinsicLogicalHeight): Ditto.
+ (WebCore::RenderGrid::computeUsedBreadthOfGridTracks): Use available space to initialize the
+ track sizes. Also use sizingOperation to decide whether or not sizes are indefinite. Last
+ but not least, added support for fit-content tracks.
+ (WebCore::RenderGrid::computeUsedBreadthOfMinLength): Pass a GridTrackSize instead of a GridLength.
+ (WebCore::RenderGrid::computeUsedBreadthOfMaxLength): Ditto.
+ (WebCore::RenderGrid::gridTrackSize): Added support for fit-content.
+ (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions): Ditto.
+ (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems): Ditto.
+ (WebCore::trackSizeForTrackSizeComputationPhase):
+ (WebCore::sortByGridTrackGrowthPotential): Reworked the function so it properly sorts tracks
+ with growth limit caps to support fit-content().
+ (WebCore::clampGrowthShareIfNeeded): Clamps the given growthShare passed as argument to the
+ track growth limit cap.
+ (WebCore::RenderGrid::distributeSpaceToTracks): Use the new setTempSize() method. Also sort
+ the selected tracks to grow over growth limits in order to respect the track caps eventually
+ set by fit-content (otherwise those tracks could indefinitely grow over the specified value).
+ (WebCore::RenderGrid::tracksAreWiderThanMinTrackBreadth): Use the new defined functions.
+ (WebCore::RenderGrid::applyStretchAlignmentToTracksIfNeeded): Use freeSpace().
+ (WebCore::RenderGrid::populateGridPositionsForDirection): Ditto.
+ (WebCore::GridTrack::infinitelyGrowable): Deleted.
+ (WebCore::RenderGrid::GridSizingData::freeSpaceForDirection): Deleted.
+ (WebCore::RenderGrid::GridSizingData::setFreeSpaceForDirection): Deleted.
+ (WebCore::RenderGrid::trackSizeForTrackSizeComputationPhase): Deleted.
+ * rendering/RenderGrid.h: Changed the signature of some methods. Moved
+ TrackSizeComputationPhase out of the RenderGrid class.
+ * rendering/style/GridTrackSize.h:
+ (WebCore::GridTrackSize::GridTrackSize): Added some extra documentation. Added a new
+ attribute to the constructor to support fit-content GridTrackSizes.
+ (WebCore::GridTrackSize::fitContentTrackBreadth): New method which returns the growth limit
+ cap set by fit-content().
+ (WebCore::GridTrackSize::minTrackBreadth):
+ (WebCore::GridTrackSize::isFitContent): Added.
+ (WebCore::GridTrackSize::length): Deleted.
+ (WebCore::GridTrackSize::isPercentage): Deleted.
+
</ins><span class="cx"> 2016-09-15 Alejandro G. Castro <alex at igalia.com>
</span><span class="cx">
</span><span class="cx"> Fix build warnings in the mediastream code
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -1013,7 +1013,12 @@
</span><span class="cx"> {
</span><span class="cx"> switch (trackSize.type()) {
</span><span class="cx"> case LengthTrackSizing:
</span><del>- return specifiedValueForGridTrackBreadth(trackSize.length(), style);
</del><ins>+ return specifiedValueForGridTrackBreadth(trackSize.minTrackBreadth(), style);
+ case FitContentTrackSizing: {
+ auto fitContentTrackSize = CSSValueList::createCommaSeparated();
+ fitContentTrackSize->append(zoomAdjustedPixelValueForLength(trackSize.fitContentTrackBreadth().length(), style));
+ return CSSFunctionValue::create("fit-content(", WTFMove(fitContentTrackSize));
+ }
</ins><span class="cx"> default:
</span><span class="cx"> ASSERT(trackSize.type() == MinMaxTrackSizing);
</span><span class="cx"> auto minMaxTrackBreadths = CSSValueList::createCommaSeparated();
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleBuilderConverterh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleBuilderConverter.h (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleBuilderConverter.h 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/css/StyleBuilderConverter.h 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -843,9 +843,13 @@
</span><span class="cx"> if (is<CSSPrimitiveValue>(value))
</span><span class="cx"> return GridTrackSize(createGridTrackBreadth(downcast<CSSPrimitiveValue>(value), styleResolver));
</span><span class="cx">
</span><ins>+ ASSERT(is<CSSFunctionValue>(value));
</ins><span class="cx"> CSSValueList& arguments = *downcast<CSSFunctionValue>(value).arguments();
</span><ins>+
+ if (arguments.length() == 1)
+ return GridTrackSize(createGridTrackBreadth(downcast<CSSPrimitiveValue>(*arguments.itemWithoutBoundsCheck(0)), styleResolver), FitContentTrackSizing);
+
</ins><span class="cx"> ASSERT_WITH_SECURITY_IMPLICATION(arguments.length() == 2);
</span><del>-
</del><span class="cx"> GridLength minTrackBreadth(createGridTrackBreadth(downcast<CSSPrimitiveValue>(*arguments.itemWithoutBoundsCheck(0)), styleResolver));
</span><span class="cx"> GridLength maxTrackBreadth(createGridTrackBreadth(downcast<CSSPrimitiveValue>(*arguments.itemWithoutBoundsCheck(1)), styleResolver));
</span><span class="cx"> return GridTrackSize(minTrackBreadth, maxTrackBreadth);
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSParser.cpp (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSParser.cpp 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/css/parser/CSSParser.cpp 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -5645,11 +5645,14 @@
</span><span class="cx"> return isGridTrackFixedSized(downcast<CSSPrimitiveValue>(value));
</span><span class="cx">
</span><span class="cx"> ASSERT(value.isFunctionValue());
</span><del>- ASSERT(downcast<CSSFunctionValue>(value).arguments());
- ASSERT(downcast<CSSFunctionValue>(value).arguments()->length() == 2);
</del><ins>+ auto& arguments = *downcast<CSSFunctionValue>(value).arguments();
+ // fit-content
+ if (arguments.length() == 1)
+ return false;
</ins><span class="cx">
</span><del>- auto& min = downcast<CSSPrimitiveValue>(*downcast<CSSFunctionValue>(value).arguments()->item(0));
- auto& max = downcast<CSSPrimitiveValue>(*downcast<CSSFunctionValue>(value).arguments()->item(1));
</del><ins>+ ASSERT(arguments.length() == 2);
+ auto& min = downcast<CSSPrimitiveValue>(*arguments.itemWithoutBoundsCheck(0));
+ auto& max = downcast<CSSPrimitiveValue>(*arguments.itemWithoutBoundsCheck(1));
</ins><span class="cx"> return isGridTrackFixedSized(min) || isGridTrackFixedSized(max);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -5795,6 +5798,21 @@
</span><span class="cx"> if (currentValue.id == CSSValueAuto)
</span><span class="cx"> return CSSValuePool::singleton().createIdentifierValue(CSSValueAuto);
</span><span class="cx">
</span><ins>+ if (currentValue.unit == CSSParserValue::Function && equalLettersIgnoringASCIICase(currentValue.function->name, "fit-content(")) {
+ CSSParserValueList* arguments = currentValue.function->args.get();
+ if (!arguments || arguments->size() != 1)
+ return nullptr;
+ ValueWithCalculation valueWithCalculation(*arguments->valueAt(0));
+ if (!validateUnit(valueWithCalculation, FNonNeg | FLength | FPercent))
+ return nullptr;
+ RefPtr<CSSPrimitiveValue> trackBreadth = createPrimitiveNumericValue(valueWithCalculation);
+ if (!trackBreadth)
+ return nullptr;
+ auto parsedArguments = CSSValueList::createCommaSeparated();
+ parsedArguments->append(trackBreadth.releaseNonNull());
+ return CSSFunctionValue::create("fit-content(", WTFMove(parsedArguments));
+ }
+
</ins><span class="cx"> if (currentValue.unit == CSSParserValue::Function && equalLettersIgnoringASCIICase(currentValue.function->name, "minmax(")) {
</span><span class="cx"> // The spec defines the following grammar: minmax( <track-breadth> , <track-breadth> )
</span><span class="cx"> CSSParserValueList* arguments = currentValue.function->args.get();
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -2794,6 +2794,19 @@
</span><span class="cx"> return consumeSelfPositionOverflowPosition(range);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+static CSSValue* consumeFitContent(CSSParserTokenRange& range, CSSParserMode cssParserMode)
+{
+ CSSParserTokenRange rangeCopy = range;
+ CSSParserTokenRange args = consumeFunction(rangeCopy);
+ CSSPrimitiveValue* length = consumeLengthOrPercent(args, cssParserMode, ValueRangeNonNegative, UnitlessQuirk::Allow);
+ if (!length || !args.atEnd())
+ return nullptr;
+ range = rangeCopy;
+ CSSFunctionValue* result = CSSFunctionValue::create(CSSValueFitContent);
+ result->append(*length);
+ return result;
+}
+
</ins><span class="cx"> static CSSCustomIdentValue* consumeCustomIdentForGridLine(CSSParserTokenRange& range)
</span><span class="cx"> {
</span><span class="cx"> if (range.peek().id() == CSSValueAuto || range.peek().id() == CSSValueSpan)
</span><span class="lines">@@ -2864,8 +2877,13 @@
</span><span class="cx"> if (value.isPrimitiveValue())
</span><span class="cx"> return isGridTrackFixedSized(toCSSPrimitiveValue(value));
</span><span class="cx">
</span><del>- const CSSPrimitiveValue& minPrimitiveValue = toCSSPrimitiveValue(toCSSFunctionValue(value).item(0));
- const CSSPrimitiveValue& maxPrimitiveValue = toCSSPrimitiveValue(toCSSFunctionValue(value).item(1));
</del><ins>+ ASSERT(value.isFunctionValue());
+ auto& function = toCSSFunctionValue(value);
+ if (function.functionType() == CSSValueFitContent)
+ return false;
+
+ const CSSPrimitiveValue& minPrimitiveValue = toCSSPrimitiveValue(function.item(0));
+ const CSSPrimitiveValue& maxPrimitiveValue = toCSSPrimitiveValue(function.item(1));
</ins><span class="cx"> return isGridTrackFixedSized(minPrimitiveValue) || isGridTrackFixedSized(maxPrimitiveValue);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2997,6 +3015,10 @@
</span><span class="cx"> result->append(*maxTrackBreadth);
</span><span class="cx"> return result;
</span><span class="cx"> }
</span><ins>+
+ if (token.functionId() == CSSValueFitContent)
+ return consumeFitContent(range, cssParserMode);
+
</ins><span class="cx"> return consumeGridBreadth(range, cssParserMode);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -41,6 +41,11 @@
</span><span class="cx"> static const int infinity = -1;
</span><span class="cx"> static constexpr ItemPosition selfAlignmentNormalBehavior = ItemPositionStretch;
</span><span class="cx">
</span><ins>+enum TrackSizeRestriction {
+ AllowInfinity,
+ ForbidInfinity,
+};
+
</ins><span class="cx"> class GridTrack {
</span><span class="cx"> public:
</span><span class="cx"> GridTrack() {}
</span><span class="lines">@@ -54,6 +59,7 @@
</span><span class="cx"> const LayoutUnit& growthLimit() const
</span><span class="cx"> {
</span><span class="cx"> ASSERT(isGrowthLimitBiggerThanBaseSize());
</span><ins>+ ASSERT(!m_growthLimitCap || m_growthLimitCap.value() >= m_growthLimit || m_baseSize >= m_growthLimitCap.value());
</ins><span class="cx"> return m_growthLimit;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -65,20 +71,12 @@
</span><span class="cx">
</span><span class="cx"> void setGrowthLimit(LayoutUnit growthLimit)
</span><span class="cx"> {
</span><del>- m_growthLimit = growthLimit;
</del><ins>+ m_growthLimit = growthLimit == infinity ? growthLimit : std::min(growthLimit, m_growthLimitCap.valueOr(growthLimit));
</ins><span class="cx"> ensureGrowthLimitIsBiggerThanBaseSize();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- bool growthLimitIsInfinite() const
- {
- return m_growthLimit == infinity;
- }
</del><ins>+ bool infiniteGrowthPotential() const { return growthLimitIsInfinite() || m_infinitelyGrowable; }
</ins><span class="cx">
</span><del>- bool infiniteGrowthPotential() const
- {
- return growthLimitIsInfinite() || m_infinitelyGrowable;
- }
-
</del><span class="cx"> const LayoutUnit& growthLimitIfNotInfinite() const
</span><span class="cx"> {
</span><span class="cx"> ASSERT(isGrowthLimitBiggerThanBaseSize());
</span><span class="lines">@@ -92,16 +90,35 @@
</span><span class="cx"> m_plannedSize = plannedSize;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- LayoutUnit& tempSize() { return m_tempSize; }
</del><ins>+ const LayoutUnit& tempSize() const { return m_tempSize; }
</ins><span class="cx">
</span><ins>+ void setTempSize(const LayoutUnit& tempSize)
+ {
+ ASSERT(tempSize >= 0);
+ ASSERT(growthLimitIsInfinite() || growthLimit() >= tempSize);
+ m_tempSize = tempSize;
+ }
+
+ void growTempSize(const LayoutUnit& tempSize)
+ {
+ ASSERT(tempSize >= 0);
+ m_tempSize += tempSize;
+ ASSERT(growthLimitIsInfinite() || growthLimit() >= m_tempSize);
+ }
+
</ins><span class="cx"> bool infinitelyGrowable() const { return m_infinitelyGrowable; }
</span><ins>+ void setInfinitelyGrowable(bool infinitelyGrowable) { m_infinitelyGrowable = infinitelyGrowable; }
</ins><span class="cx">
</span><del>- void setInfinitelyGrowable(bool infinitelyGrowable)
</del><ins>+ void setGrowthLimitCap(Optional<LayoutUnit> growthLimitCap)
</ins><span class="cx"> {
</span><del>- m_infinitelyGrowable = infinitelyGrowable;
</del><ins>+ ASSERT(!growthLimitCap || growthLimitCap.value() >= 0);
+ m_growthLimitCap = growthLimitCap;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ Optional<LayoutUnit> growthLimitCap() const { return m_growthLimitCap; }
+
</ins><span class="cx"> private:
</span><ins>+ bool growthLimitIsInfinite() const { return m_growthLimit == infinity; }
</ins><span class="cx"> bool isGrowthLimitBiggerThanBaseSize() const { return growthLimitIsInfinite() || m_growthLimit >= m_baseSize; }
</span><span class="cx">
</span><span class="cx"> void ensureGrowthLimitIsBiggerThanBaseSize()
</span><span class="lines">@@ -114,6 +131,7 @@
</span><span class="cx"> LayoutUnit m_growthLimit { 0 };
</span><span class="cx"> LayoutUnit m_plannedSize { 0 };
</span><span class="cx"> LayoutUnit m_tempSize { 0 };
</span><ins>+ Optional<LayoutUnit> m_growthLimitCap;
</ins><span class="cx"> bool m_infinitelyGrowable { false };
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -235,9 +253,12 @@
</span><span class="cx"> Vector<GridTrack*> growBeyondGrowthLimitsTracks;
</span><span class="cx"> Vector<GridItemWithSpan> itemsSortedByIncreasingSpan;
</span><span class="cx">
</span><del>- Optional<LayoutUnit> freeSpaceForDirection(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
- void setFreeSpaceForDirection(GridTrackSizingDirection, Optional<LayoutUnit> freeSpace);
</del><ins>+ Optional<LayoutUnit> freeSpace(GridTrackSizingDirection direction) { return direction == ForColumns ? freeSpaceForColumns : freeSpaceForRows; }
+ void setFreeSpace(GridTrackSizingDirection, Optional<LayoutUnit> freeSpace);
</ins><span class="cx">
</span><ins>+ Optional<LayoutUnit> availableSpace() const { return m_availableSpace; }
+ void setAvailableSpace(Optional<LayoutUnit> availableSpace) { m_availableSpace = availableSpace; }
+
</ins><span class="cx"> SizingOperation sizingOperation { TrackSizing };
</span><span class="cx">
</span><span class="cx"> enum SizingState { ColumnSizingFirstIteration, RowSizingFirstIteration, ColumnSizingSecondIteration, RowSizingSecondIteration};
</span><span class="lines">@@ -278,9 +299,12 @@
</span><span class="cx"> private:
</span><span class="cx"> Optional<LayoutUnit> freeSpaceForColumns;
</span><span class="cx"> Optional<LayoutUnit> freeSpaceForRows;
</span><ins>+ // No need to store one per direction as it will be only used for computations during each axis
+ // track sizing. It's cached here because we need it to compute relative sizes.
+ Optional<LayoutUnit> m_availableSpace;
</ins><span class="cx"> };
</span><span class="cx">
</span><del>-void RenderGrid::GridSizingData::setFreeSpaceForDirection(GridTrackSizingDirection direction, Optional<LayoutUnit> freeSpace)
</del><ins>+void RenderGrid::GridSizingData::setFreeSpace(GridTrackSizingDirection direction, Optional<LayoutUnit> freeSpace)
</ins><span class="cx"> {
</span><span class="cx"> if (direction == ForColumns)
</span><span class="cx"> freeSpaceForColumns = freeSpace;
</span><span class="lines">@@ -390,11 +414,12 @@
</span><span class="cx"> return logicalHeight;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-void RenderGrid::computeTrackSizesForDirection(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit freeSpace)
</del><ins>+void RenderGrid::computeTrackSizesForDirection(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit availableSpace)
</ins><span class="cx"> {
</span><span class="cx"> ASSERT(sizingData.isValidTransition(direction));
</span><span class="cx"> LayoutUnit totalGuttersSize = guttersSize(direction, 0, direction == ForRows ? gridRowCount() : gridColumnCount());
</span><del>- sizingData.setFreeSpaceForDirection(direction, freeSpace - totalGuttersSize);
</del><ins>+ sizingData.setAvailableSpace(availableSpace);
+ sizingData.setFreeSpace(direction, availableSpace - totalGuttersSize);
</ins><span class="cx"> sizingData.sizingOperation = TrackSizing;
</span><span class="cx">
</span><span class="cx"> LayoutUnit baseSizes, growthLimits;
</span><span class="lines">@@ -590,7 +615,8 @@
</span><span class="cx"> const_cast<RenderGrid*>(this)->placeItemsOnGrid(IntrinsicSizeComputation);
</span><span class="cx">
</span><span class="cx"> GridSizingData sizingData(gridColumnCount(), gridRowCount());
</span><del>- sizingData.setFreeSpaceForDirection(ForColumns, Nullopt);
</del><ins>+ sizingData.setAvailableSpace(Nullopt);
+ sizingData.setFreeSpace(ForColumns, Nullopt);
</ins><span class="cx"> sizingData.sizingOperation = IntrinsicSizeComputation;
</span><span class="cx"> computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
</span><span class="cx">
</span><span class="lines">@@ -609,7 +635,8 @@
</span><span class="cx"> void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
</span><del>- sizingData.setFreeSpaceForDirection(ForRows, Nullopt);
</del><ins>+ sizingData.setAvailableSpace(Nullopt);
+ sizingData.setFreeSpace(ForRows, Nullopt);
</ins><span class="cx"> sizingData.sizingOperation = IntrinsicSizeComputation;
</span><span class="cx"> LayoutUnit minHeight, maxHeight;
</span><span class="cx"> computeUsedBreadthOfGridTracks(ForRows, sizingData, minHeight, maxHeight);
</span><span class="lines">@@ -659,28 +686,30 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit& baseSizesWithoutMaximization, LayoutUnit& growthLimitsWithoutMaximization) const
</span><span class="cx"> {
</span><del>- const Optional<LayoutUnit> initialFreeSpace = sizingData.freeSpaceForDirection(direction);
</del><ins>+ const Optional<LayoutUnit> initialFreeSpace = sizingData.freeSpace(direction);
</ins><span class="cx"> Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
</span><span class="cx"> Vector<unsigned> flexibleSizedTracksIndex;
</span><span class="cx"> sizingData.contentSizedTracksIndex.shrink(0);
</span><span class="cx">
</span><del>- LayoutUnit maxSize = initialFreeSpace.valueOr(0);
</del><span class="cx"> // Grid gutters were removed from freeSpace by the caller (if freeSpace is definite),
</span><span class="cx"> // but we must use them to compute relative (i.e. percentages) sizes.
</span><del>- if (initialFreeSpace)
- maxSize += guttersSize(direction, 0, direction == ForColumns ? gridColumnCount() : gridRowCount());
</del><ins>+ LayoutUnit maxSize = std::max(LayoutUnit(), sizingData.availableSpace().valueOr(LayoutUnit()));
+ const bool hasDefiniteFreeSpace = sizingData.sizingOperation == TrackSizing;
</ins><span class="cx">
</span><span class="cx"> // 1. Initialize per Grid track variables.
</span><span class="cx"> for (unsigned i = 0; i < tracks.size(); ++i) {
</span><span class="cx"> GridTrack& track = tracks[i];
</span><span class="cx"> const GridTrackSize& trackSize = gridTrackSize(direction, i, sizingData.sizingOperation);
</span><del>- const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
- const GridLength& maxTrackBreadth = trackSize.maxTrackBreadth();
</del><span class="cx">
</span><del>- track.setBaseSize(computeUsedBreadthOfMinLength(minTrackBreadth, maxSize));
- track.setGrowthLimit(computeUsedBreadthOfMaxLength(maxTrackBreadth, track.baseSize(), maxSize));
</del><ins>+ track.setBaseSize(computeUsedBreadthOfMinLength(trackSize, maxSize));
+ track.setGrowthLimit(computeUsedBreadthOfMaxLength(trackSize, track.baseSize(), maxSize));
</ins><span class="cx"> track.setInfinitelyGrowable(false);
</span><span class="cx">
</span><ins>+ if (trackSize.isFitContent()) {
+ GridLength gridLength = trackSize.fitContentTrackBreadth();
+ if (!gridLength.isPercentage() || hasDefiniteFreeSpace)
+ track.setGrowthLimitCap(valueForLength(gridLength.length(), maxSize));
+ }
</ins><span class="cx"> if (trackSize.isContentSized())
</span><span class="cx"> sizingData.contentSizedTracksIndex.append(i);
</span><span class="cx"> if (trackSize.maxTrackBreadth().isFlex())
</span><span class="lines">@@ -694,16 +723,17 @@
</span><span class="cx"> baseSizesWithoutMaximization = growthLimitsWithoutMaximization = 0;
</span><span class="cx">
</span><span class="cx"> for (auto& track : tracks) {
</span><del>- ASSERT(!track.growthLimitIsInfinite());
</del><ins>+ ASSERT(!track.infiniteGrowthPotential());
</ins><span class="cx"> baseSizesWithoutMaximization += track.baseSize();
</span><span class="cx"> growthLimitsWithoutMaximization += track.growthLimit();
</span><ins>+ // The growth limit caps must be cleared now in order to properly sort tracks by growth
+ // potential on an eventual "Maximize Tracks".
+ track.setGrowthLimitCap(Nullopt);
</ins><span class="cx"> }
</span><span class="cx"> LayoutUnit freeSpace = initialFreeSpace ? initialFreeSpace.value() - baseSizesWithoutMaximization : LayoutUnit(0);
</span><span class="cx">
</span><del>- const bool hasDefiniteFreeSpace = !!initialFreeSpace;
-
</del><span class="cx"> if (hasDefiniteFreeSpace && freeSpace <= 0) {
</span><del>- sizingData.setFreeSpaceForDirection(direction, freeSpace);
</del><ins>+ sizingData.setFreeSpace(direction, freeSpace);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -726,7 +756,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (flexibleSizedTracksIndex.isEmpty()) {
</span><del>- sizingData.setFreeSpaceForDirection(direction, freeSpace);
</del><ins>+ sizingData.setFreeSpace(direction, freeSpace);
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -765,11 +795,12 @@
</span><span class="cx"> growthLimitsWithoutMaximization += increment;
</span><span class="cx"> }
</span><span class="cx"> }
</span><del>- sizingData.setFreeSpaceForDirection(direction, freeSpace);
</del><ins>+ sizingData.setFreeSpace(direction, freeSpace);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(const GridLength& gridLength, LayoutUnit maxSize) const
</del><ins>+LayoutUnit RenderGrid::computeUsedBreadthOfMinLength(const GridTrackSize& trackSize, LayoutUnit maxSize) const
</ins><span class="cx"> {
</span><ins>+ const GridLength& gridLength = trackSize.minTrackBreadth();
</ins><span class="cx"> if (gridLength.isFlex())
</span><span class="cx"> return 0;
</span><span class="cx">
</span><span class="lines">@@ -781,8 +812,9 @@
</span><span class="cx"> return 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(const GridLength& gridLength, LayoutUnit usedBreadth, LayoutUnit maxSize) const
</del><ins>+LayoutUnit RenderGrid::computeUsedBreadthOfMaxLength(const GridTrackSize& trackSize, LayoutUnit usedBreadth, LayoutUnit maxSize) const
</ins><span class="cx"> {
</span><ins>+ const GridLength& gridLength = trackSize.maxTrackBreadth();
</ins><span class="cx"> if (gridLength.isFlex())
</span><span class="cx"> return usedBreadth;
</span><span class="cx">
</span><span class="lines">@@ -912,9 +944,11 @@
</span><span class="cx"> {
</span><span class="cx"> // Collapse empty auto repeat tracks if auto-fit.
</span><span class="cx"> if (hasAutoRepeatEmptyTracks(direction) && isEmptyAutoRepeatTrack(direction, translatedIndex))
</span><del>- return { Length(Fixed), Length(Fixed) };
</del><ins>+ return { Length(Fixed), LengthTrackSizing };
</ins><span class="cx">
</span><span class="cx"> auto& trackSize = rawGridTrackSize(direction, translatedIndex);
</span><ins>+ if (trackSize.isFitContent())
+ return trackSize;
</ins><span class="cx">
</span><span class="cx"> GridLength minTrackBreadth = trackSize.minTrackBreadth();
</span><span class="cx"> GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
</span><span class="lines">@@ -1127,7 +1161,7 @@
</span><span class="cx">
</span><span class="cx"> for (auto trackIndex : sizingData.contentSizedTracksIndex) {
</span><span class="cx"> GridTrack& track = (direction == ForColumns) ? sizingData.columnTracks[trackIndex] : sizingData.rowTracks[trackIndex];
</span><del>- if (track.growthLimitIsInfinite())
</del><ins>+ if (track.growthLimit() == infinity)
</ins><span class="cx"> track.setGrowthLimit(track.baseSize());
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -1144,13 +1178,17 @@
</span><span class="cx"> else if (trackSize.hasAutoMinTrackBreadth())
</span><span class="cx"> track.setBaseSize(std::max(track.baseSize(), minSizeForChild(gridItem, direction, sizingData)));
</span><span class="cx">
</span><del>- if (trackSize.hasMinContentMaxTrackBreadth())
</del><ins>+ if (trackSize.hasMinContentMaxTrackBreadth()) {
</ins><span class="cx"> track.setGrowthLimit(std::max(track.growthLimit(), minContentForChild(gridItem, direction, sizingData)));
</span><del>- else if (trackSize.hasMaxContentOrAutoMaxTrackBreadth())
- track.setGrowthLimit(std::max(track.growthLimit(), maxContentForChild(gridItem, direction, sizingData)));
</del><ins>+ } else if (trackSize.hasMaxContentOrAutoMaxTrackBreadth()) {
+ LayoutUnit growthLimit = maxContentForChild(gridItem, direction, sizingData);
+ if (trackSize.isFitContent())
+ growthLimit = std::min(growthLimit, valueForLength(trackSize.fitContentTrackBreadth().length(), sizingData.availableSpace().valueOr(0)));
+ track.setGrowthLimit(std::max(track.growthLimit(), growthLimit));
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-const LayoutUnit& RenderGrid::trackSizeForTrackSizeComputationPhase(TrackSizeComputationPhase phase, GridTrack& track, TrackSizeRestriction restriction)
</del><ins>+static LayoutUnit trackSizeForTrackSizeComputationPhase(TrackSizeComputationPhase phase, GridTrack& track, TrackSizeRestriction restriction)
</ins><span class="cx"> {
</span><span class="cx"> switch (phase) {
</span><span class="cx"> case ResolveIntrinsicMinimums:
</span><span class="lines">@@ -1272,7 +1310,7 @@
</span><span class="cx"> return 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-template <RenderGrid::TrackSizeComputationPhase phase>
</del><ins>+template <TrackSizeComputationPhase phase>
</ins><span class="cx"> void RenderGrid::resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizingDirection direction, GridSizingData& sizingData, const GridItemsSpanGroupRange& gridItemsWithSpan) const
</span><span class="cx"> {
</span><span class="cx"> Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
</span><span class="lines">@@ -1324,22 +1362,39 @@
</span><span class="cx"> {
</span><span class="cx"> // This check ensures that we respect the irreflexivity property of the strict weak ordering required by std::sort
</span><span class="cx"> // (forall x: NOT x < x).
</span><del>- if (track1->infiniteGrowthPotential() && track2->infiniteGrowthPotential())
</del><ins>+ bool track1HasInfiniteGrowthPotentialWithoutCap = track1->infiniteGrowthPotential() && !track1->growthLimitCap();
+ bool track2HasInfiniteGrowthPotentialWithoutCap = track2->infiniteGrowthPotential() && !track2->growthLimitCap();
+
+ if (track1HasInfiniteGrowthPotentialWithoutCap && track2HasInfiniteGrowthPotentialWithoutCap)
</ins><span class="cx"> return false;
</span><span class="cx">
</span><del>- if (track1->infiniteGrowthPotential() || track2->infiniteGrowthPotential())
- return track2->infiniteGrowthPotential();
</del><ins>+ if (track1HasInfiniteGrowthPotentialWithoutCap || track2HasInfiniteGrowthPotentialWithoutCap)
+ return track2HasInfiniteGrowthPotentialWithoutCap;
</ins><span class="cx">
</span><del>- return (track1->growthLimit() - track1->baseSize()) < (track2->growthLimit() - track2->baseSize());
</del><ins>+ LayoutUnit track1Limit = track1->growthLimitCap().valueOr(track1->growthLimit());
+ LayoutUnit track2Limit = track2->growthLimitCap().valueOr(track2->growthLimit());
+ return (track1Limit - track1->baseSize()) < (track2Limit - track2->baseSize());
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-template <RenderGrid::TrackSizeComputationPhase phase>
-void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, const Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& freeSpace) const
</del><ins>+static void clampGrowthShareIfNeeded(TrackSizeComputationPhase phase, const GridTrack& track, LayoutUnit& growthShare)
</ins><span class="cx"> {
</span><ins>+ if (phase != ResolveMaxContentMaximums || !track.growthLimitCap())
+ return;
+
+ LayoutUnit distanceToCap = track.growthLimitCap().value() - track.tempSize();
+ if (distanceToCap <= 0)
+ return;
+
+ growthShare = std::min(growthShare, distanceToCap);
+}
+
+template <TrackSizeComputationPhase phase>
+void RenderGrid::distributeSpaceToTracks(Vector<GridTrack*>& tracks, Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& freeSpace) const
+{
</ins><span class="cx"> ASSERT(freeSpace >= 0);
</span><span class="cx">
</span><span class="cx"> for (auto* track : tracks)
</span><del>- track->tempSize() = trackSizeForTrackSizeComputationPhase(phase, *track, ForbidInfinity);
</del><ins>+ track->setTempSize(trackSizeForTrackSizeComputationPhase(phase, *track, ForbidInfinity));
</ins><span class="cx">
</span><span class="cx"> if (freeSpace > 0) {
</span><span class="cx"> std::sort(tracks.begin(), tracks.end(), sortByGridTrackGrowthPotential);
</span><span class="lines">@@ -1354,8 +1409,9 @@
</span><span class="cx"> if (trackGrowthPotential > 0 || infiniteGrowthPotential) {
</span><span class="cx"> LayoutUnit availableLogicalSpaceShare = freeSpace / (tracksSize - i);
</span><span class="cx"> LayoutUnit growthShare = infiniteGrowthPotential ? availableLogicalSpaceShare : std::min(availableLogicalSpaceShare, trackGrowthPotential);
</span><ins>+ clampGrowthShareIfNeeded(phase, track, growthShare);
</ins><span class="cx"> ASSERT_WITH_MESSAGE(growthShare >= 0, "We should never shrink any grid track or else we can't guarantee we abide by our min-sizing function. We can still have 0 as growthShare if the amount of tracks greatly exceeds the freeSpace.");
</span><del>- track.tempSize() += growthShare;
</del><ins>+ track.growTempSize(growthShare);
</ins><span class="cx"> freeSpace -= growthShare;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -1362,11 +1418,17 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (freeSpace > 0 && growBeyondGrowthLimitsTracks) {
</span><ins>+ // We need to sort them because there might be tracks with growth limit caps (like the ones
+ // with fit-content()) which cannot indefinitely grow over the limits.
+ if (phase == ResolveMaxContentMaximums)
+ std::sort(growBeyondGrowthLimitsTracks->begin(), growBeyondGrowthLimitsTracks->end(), sortByGridTrackGrowthPotential);
+
</ins><span class="cx"> unsigned tracksGrowingBeyondGrowthLimitsSize = growBeyondGrowthLimitsTracks->size();
</span><span class="cx"> for (unsigned i = 0; i < tracksGrowingBeyondGrowthLimitsSize; ++i) {
</span><span class="cx"> GridTrack* track = growBeyondGrowthLimitsTracks->at(i);
</span><span class="cx"> LayoutUnit growthShare = freeSpace / (tracksGrowingBeyondGrowthLimitsSize - i);
</span><del>- track->tempSize() += growthShare;
</del><ins>+ clampGrowthShareIfNeeded(phase, *track, growthShare);
+ track->growTempSize(growthShare);
</ins><span class="cx"> freeSpace -= growthShare;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -1379,11 +1441,10 @@
</span><span class="cx"> bool RenderGrid::tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection direction, GridSizingData& sizingData)
</span><span class="cx"> {
</span><span class="cx"> const Vector<GridTrack>& tracks = (direction == ForColumns) ? sizingData.columnTracks : sizingData.rowTracks;
</span><del>- const LayoutUnit maxSize = sizingData.freeSpaceForDirection(direction).valueOr(0);
</del><ins>+ const LayoutUnit maxSize = sizingData.freeSpace(direction).valueOr(0);
</ins><span class="cx"> for (unsigned i = 0; i < tracks.size(); ++i) {
</span><span class="cx"> const GridTrackSize& trackSize = gridTrackSize(direction, i, sizingData.sizingOperation);
</span><del>- const GridLength& minTrackBreadth = trackSize.minTrackBreadth();
- if (computeUsedBreadthOfMinLength(minTrackBreadth, maxSize) > tracks[i].baseSize())
</del><ins>+ if (computeUsedBreadthOfMinLength(trackSize, maxSize) > tracks[i].baseSize())
</ins><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx"> return true;
</span><span class="lines">@@ -1798,7 +1859,7 @@
</span><span class="cx">
</span><span class="cx"> void RenderGrid::applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection direction, GridSizingData& sizingData)
</span><span class="cx"> {
</span><del>- Optional<LayoutUnit> freeSpace = sizingData.freeSpaceForDirection(direction);
</del><ins>+ Optional<LayoutUnit> freeSpace = sizingData.freeSpace(direction);
</ins><span class="cx"> if (!freeSpace
</span><span class="cx"> || freeSpace.value() <= 0
</span><span class="cx"> || (direction == ForColumns && style().resolvedJustifyContentDistribution(contentAlignmentNormalBehaviorGrid()) != ContentDistributionStretch)
</span><span class="lines">@@ -1823,7 +1884,7 @@
</span><span class="cx"> auto& track = tracks[trackIndex];
</span><span class="cx"> track.setBaseSize(track.baseSize() + sizeToIncrease);
</span><span class="cx"> }
</span><del>- sizingData.setFreeSpaceForDirection(direction, Optional<LayoutUnit>(0));
</del><ins>+ sizingData.setFreeSpace(direction, Optional<LayoutUnit>(0));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void RenderGrid::layoutGridItems(GridSizingData& sizingData)
</span><span class="lines">@@ -2071,7 +2132,7 @@
</span><span class="cx"> unsigned numberOfLines = numberOfTracks + 1;
</span><span class="cx"> unsigned lastLine = numberOfLines - 1;
</span><span class="cx">
</span><del>- ContentAlignmentData offset = computeContentPositionAndDistributionOffset(direction, sizingData.freeSpaceForDirection(direction).value(), numberOfTracks);
</del><ins>+ ContentAlignmentData offset = computeContentPositionAndDistributionOffset(direction, sizingData.freeSpace(direction).value(), numberOfTracks);
</ins><span class="cx"> auto& positions = isRowAxis ? m_columnPositions : m_rowPositions;
</span><span class="cx"> positions.resize(numberOfLines);
</span><span class="cx"> auto borderAndPadding = isRowAxis ? borderAndPaddingLogicalLeft() : borderAndPaddingBefore();
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -44,6 +44,15 @@
</span><span class="cx">
</span><span class="cx"> enum GridAxisPosition {GridAxisStart, GridAxisEnd, GridAxisCenter};
</span><span class="cx">
</span><ins>+enum TrackSizeComputationPhase {
+ ResolveIntrinsicMinimums,
+ ResolveContentBasedMinimums,
+ ResolveMaxContentMinimums,
+ ResolveIntrinsicMaximums,
+ ResolveMaxContentMaximums,
+ MaximizeTracks,
+};
+
</ins><span class="cx"> class RenderGrid final : public RenderBlock {
</span><span class="cx"> public:
</span><span class="cx"> RenderGrid(Element&, RenderStyle&&);
</span><span class="lines">@@ -75,8 +84,8 @@
</span><span class="cx"> class GridSizingData;
</span><span class="cx"> enum SizingOperation { TrackSizing, IntrinsicSizeComputation };
</span><span class="cx"> void computeUsedBreadthOfGridTracks(GridTrackSizingDirection, GridSizingData&, LayoutUnit& baseSizesWithoutMaximization, LayoutUnit& growthLimitsWithoutMaximization) const;
</span><del>- LayoutUnit computeUsedBreadthOfMinLength(const GridLength&, LayoutUnit maxSize) const;
- LayoutUnit computeUsedBreadthOfMaxLength(const GridLength&, LayoutUnit usedBreadth, LayoutUnit maxSize) const;
</del><ins>+ LayoutUnit computeUsedBreadthOfMinLength(const GridTrackSize&, LayoutUnit maxSize) const;
+ LayoutUnit computeUsedBreadthOfMaxLength(const GridTrackSize&, LayoutUnit usedBreadth, LayoutUnit maxSize) const;
</ins><span class="cx"> void resolveContentBasedTrackSizingFunctions(GridTrackSizingDirection, GridSizingData&) const;
</span><span class="cx">
</span><span class="cx"> void ensureGridSize(unsigned maximumRowSize, unsigned maximumColumnSize);
</span><span class="lines">@@ -114,19 +123,6 @@
</span><span class="cx"> void populateGridPositionsForDirection(GridSizingData&, GridTrackSizingDirection);
</span><span class="cx"> void clearGrid();
</span><span class="cx">
</span><del>- enum TrackSizeRestriction {
- AllowInfinity,
- ForbidInfinity,
- };
- enum TrackSizeComputationPhase {
- ResolveIntrinsicMinimums,
- ResolveContentBasedMinimums,
- ResolveMaxContentMinimums,
- ResolveIntrinsicMaximums,
- ResolveMaxContentMaximums,
- MaximizeTracks,
- };
- static const LayoutUnit& trackSizeForTrackSizeComputationPhase(TrackSizeComputationPhase, GridTrack&, TrackSizeRestriction);
</del><span class="cx"> static bool shouldProcessTrackForTrackSizeComputationPhase(TrackSizeComputationPhase, const GridTrackSize&);
</span><span class="cx"> static bool trackShouldGrowBeyondGrowthLimitsForTrackSizeComputationPhase(TrackSizeComputationPhase, const GridTrackSize&);
</span><span class="cx"> static void markAsInfinitelyGrowableForTrackSizeComputationPhase(TrackSizeComputationPhase, GridTrack&);
</span><span class="lines">@@ -136,7 +132,7 @@
</span><span class="cx"> typedef struct GridItemsSpanGroupRange GridItemsSpanGroupRange;
</span><span class="cx"> void resolveContentBasedTrackSizingFunctionsForNonSpanningItems(GridTrackSizingDirection, const GridSpan&, RenderBox& gridItem, GridTrack&, GridSizingData&) const;
</span><span class="cx"> template <TrackSizeComputationPhase> void resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizingDirection, GridSizingData&, const GridItemsSpanGroupRange&) const;
</span><del>- template <TrackSizeComputationPhase> void distributeSpaceToTracks(Vector<GridTrack*>&, const Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& availableLogicalSpace) const;
</del><ins>+ template <TrackSizeComputationPhase> void distributeSpaceToTracks(Vector<GridTrack*>&, Vector<GridTrack*>* growBeyondGrowthLimitsTracks, LayoutUnit& availableLogicalSpace) const;
</ins><span class="cx">
</span><span class="cx"> typedef HashSet<unsigned, DefaultHash<unsigned>::Hash, WTF::UnsignedWithZeroKeyHashTraits<unsigned>> TrackIndexSet;
</span><span class="cx"> double computeFlexFactorUnitSize(const Vector<GridTrack>&, GridTrackSizingDirection, SizingOperation, double flexFactorSum, LayoutUnit leftOverSpace, const Vector<unsigned, 8>& flexibleTracksIndexes, std::unique_ptr<TrackIndexSet> tracksToTreatAsInflexible = nullptr) const;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleGridTrackSizeh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/GridTrackSize.h (205965 => 205966)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/GridTrackSize.h 2016-09-15 09:24:56 UTC (rev 205965)
+++ trunk/Source/WebCore/rendering/style/GridTrackSize.h 2016-09-15 09:45:36 UTC (rev 205966)
</span><span class="lines">@@ -40,16 +40,31 @@
</span><span class="cx">
</span><span class="cx"> enum GridTrackSizeType {
</span><span class="cx"> LengthTrackSizing,
</span><del>- MinMaxTrackSizing
</del><ins>+ MinMaxTrackSizing,
+ FitContentTrackSizing
</ins><span class="cx"> };
</span><span class="cx">
</span><ins>+// This class represents a <track-size> from the spec. Althought there are 3 different types of
+// <track-size> there is always an equivalent minmax() representation that could represent any of
+// them. The only special case is fit-content(argument) which is similar to minmax(auto,
+// max-content) except that the track size is clamped at argument if it is greater than the auto
+// minimum. At the GridTrackSize level we don't need to worry about clamping so we treat that case
+// exactly as auto.
+//
+// We're using a separate attribute to store fit-content argument even though we could directly use
+// m_maxTrackBreadth. The reason why we don't do it is because the maxTrackBreadh() call is a hot
+// spot, so adding a conditional statement there (to distinguish between fit-content and any other
+// case) was causing a severe performance drop.
</ins><span class="cx"> class GridTrackSize {
</span><span class="cx"> public:
</span><del>- GridTrackSize(const GridLength& length)
- : m_type(LengthTrackSizing)
- , m_minTrackBreadth(length)
- , m_maxTrackBreadth(length)
</del><ins>+ GridTrackSize(const GridLength& length, GridTrackSizeType trackSizeType = LengthTrackSizing)
+ : m_type(trackSizeType)
+ , m_minTrackBreadth(trackSizeType == FitContentTrackSizing ? Length(Auto) : length)
+ , m_maxTrackBreadth(trackSizeType == FitContentTrackSizing ? Length(Auto) : length)
+ , m_fitContentTrackBreadth(trackSizeType == FitContentTrackSizing ? length : GridLength(Length(Fixed)))
</ins><span class="cx"> {
</span><ins>+ ASSERT(trackSizeType == LengthTrackSizing || trackSizeType == FitContentTrackSizing);
+ ASSERT(trackSizeType != FitContentTrackSizing || length.isLength());
</ins><span class="cx"> cacheMinMaxTrackBreadthTypes();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -57,28 +72,25 @@
</span><span class="cx"> : m_type(MinMaxTrackSizing)
</span><span class="cx"> , m_minTrackBreadth(minTrackBreadth)
</span><span class="cx"> , m_maxTrackBreadth(maxTrackBreadth)
</span><ins>+ , m_fitContentTrackBreadth(GridLength(Length(Fixed)))
</ins><span class="cx"> {
</span><span class="cx"> cacheMinMaxTrackBreadthTypes();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- const GridLength& length() const
</del><ins>+ const GridLength& fitContentTrackBreadth() const
</ins><span class="cx"> {
</span><del>- ASSERT(m_type == LengthTrackSizing);
- ASSERT(m_minTrackBreadth == m_maxTrackBreadth);
- const GridLength& minTrackBreadth = m_minTrackBreadth;
- return minTrackBreadth;
</del><ins>+ ASSERT(m_type == FitContentTrackSizing);
+ return m_fitContentTrackBreadth;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> const GridLength& minTrackBreadth() const { return m_minTrackBreadth; }
</span><del>-
</del><span class="cx"> const GridLength& maxTrackBreadth() const { return m_maxTrackBreadth; }
</span><span class="cx">
</span><span class="cx"> GridTrackSizeType type() const { return m_type; }
</span><span class="cx">
</span><span class="cx"> bool isContentSized() const { return m_minTrackBreadth.isContentSized() || m_maxTrackBreadth.isContentSized(); }
</span><ins>+ bool isFitContent() const { return m_type == FitContentTrackSizing; }
</ins><span class="cx">
</span><del>- bool isPercentage() const { return m_type == LengthTrackSizing && length().isLength() && length().length().isPercentOrCalculated(); }
-
</del><span class="cx"> bool operator==(const GridTrackSize& other) const
</span><span class="cx"> {
</span><span class="cx"> return m_type == other.m_type && m_minTrackBreadth == other.m_minTrackBreadth && m_maxTrackBreadth == other.m_maxTrackBreadth;
</span><span class="lines">@@ -111,12 +123,14 @@
</span><span class="cx"> GridTrackSizeType m_type;
</span><span class="cx"> GridLength m_minTrackBreadth;
</span><span class="cx"> GridLength m_maxTrackBreadth;
</span><del>- bool m_minTrackBreadthIsAuto;
- bool m_minTrackBreadthIsMaxContent;
- bool m_minTrackBreadthIsMinContent;
- bool m_maxTrackBreadthIsAuto;
- bool m_maxTrackBreadthIsMaxContent;
- bool m_maxTrackBreadthIsMinContent;
</del><ins>+ GridLength m_fitContentTrackBreadth;
+
+ bool m_minTrackBreadthIsAuto : 1;
+ bool m_maxTrackBreadthIsAuto : 1;
+ bool m_minTrackBreadthIsMaxContent : 1;
+ bool m_minTrackBreadthIsMinContent : 1;
+ bool m_maxTrackBreadthIsMaxContent : 1;
+ bool m_maxTrackBreadthIsMinContent : 1;
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> } // namespace WebCore
</span></span></pre>
</div>
</div>
</body>
</html>
More information about the webkit-changes
mailing list