<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[203680] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/203680">203680</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2016-07-25 01:57:06 -0700 (Mon, 25 Jul 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Implement repeat(auto-fit)
https://bugs.webkit.org/show_bug.cgi?id=159771
Reviewed by Darin Adler.
Source/WebCore:
The auto-fit keyword works exactly as the already implemented auto-fill except that all
empty tracks collapse (became 0px). Absolutely positioned items do not participate on the
layout of the grid so they are not considered (a grid with only absolutely positioned items
is considered an empty grid).
Whenever a track collapses the gutters on either side do also collapse. When a collapsed
track's gutters collapse, they coincide exactly. If one side of a collapsed track does not
have a gutter then collapsing its gutters results in no gutter on either "side" of the
collapsed track.
In practice this means that is not possible to know the gap between 2 consecutive auto
repeat tracks without examining some others whenever there are collapsed tracks.
Uncommented the auto-fit cases from Mozilla tests. They have to be adapted as the reftest
machinery requires all the content to be rendered in the original 800x600 viewport.
Tests: fast/css-grid-layout/grid-auto-fit-columns.html
fast/css-grid-layout/grid-auto-fit-rows.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackList): Use the newly added trackSizesForComputedStyle().
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeTrackBasedLogicalHeight):
(WebCore::RenderGrid::computeTrackSizesForDirection):
(WebCore::RenderGrid::isEmptyAutoRepeatTrack):
(WebCore::RenderGrid::gridGapForDirection): Returns the gap directly from the style.
(WebCore::RenderGrid::guttersSize): Computes the gap between a startLine and an
endLine. This method may need to inspect some other surrounding tracks to compute the gap.
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::computeIntrinsicLogicalHeight):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
(WebCore::RenderGrid::computeAutoRepeatTracksCount):
(WebCore::RenderGrid::computeEmptyTracksForAutoRepeat): Returns a Vector with the auto
repeat tracks that are going to be collapsed because they're empty.
(WebCore::RenderGrid::placeItemsOnGrid):
(WebCore::RenderGrid::trackSizesForComputedStyle): Used by ComputedStyle logic to print the
size of tracks. Added in order to hide the actual contents of m_columnPositions and
m_rowPositions to the outter world.
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
(WebCore::RenderGrid::gridAreaBreadthForChild):
(WebCore::RenderGrid::populateGridPositionsForDirection): Added some extra code to compute
gaps as they cannot be directly added between tracks in case of having collapsed tracks.
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::RenderGrid::offsetBetweenTracks): Deleted.
* rendering/RenderGrid.h: Made some API private. Added new required methods/attributes.
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackList):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeTrackBasedLogicalHeight):
(WebCore::RenderGrid::computeTrackSizesForDirection):
(WebCore::RenderGrid::hasAutoRepeatEmptyTracks):
(WebCore::RenderGrid::isEmptyAutoRepeatTrack):
(WebCore::RenderGrid::gridGapForDirection):
(WebCore::RenderGrid::guttersSize):
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::computeIntrinsicLogicalHeight):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
(WebCore::RenderGrid::computeAutoRepeatTracksCount):
(WebCore::RenderGrid::computeEmptyTracksForAutoRepeat):
(WebCore::RenderGrid::placeItemsOnGrid):
(WebCore::RenderGrid::trackSizesForComputedStyle):
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
(WebCore::RenderGrid::assumedRowsSizeForOrthogonalChild):
(WebCore::RenderGrid::gridAreaBreadthForChild):
(WebCore::RenderGrid::populateGridPositionsForDirection):
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::RenderGrid::offsetBetweenTracks): Deleted.
* rendering/RenderGrid.h:
LayoutTests:
Uncommented the auto-fit cases. Split the Mozilla's 005 test in two because it was not
possible to fit all the content in a viewport without scrollbars.
* fast/css-grid-layout/grid-auto-fit-columns-expected.txt: Added.
* fast/css-grid-layout/grid-auto-fit-columns.html: Added.
* fast/css-grid-layout/grid-auto-fit-rows-expected.txt: Added.
* fast/css-grid-layout/grid-auto-fit-rows.html: Added.
* fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt:
* fast/css-grid-layout/grid-element-auto-repeat-get-set.html:
* fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt:
* fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html:
* fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
* fast/css-grid-layout/grid-positioned-items-padding.html:
* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt:
* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html: Copied from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsetexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsethtml">trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridonlyabspositemcomputedstylecrashexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridonlyabspositemcomputedstylecrashhtml">trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddingexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml">trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmentexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmenthtml">trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit001expectedhtml">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit001html">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit002expectedhtml">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit002html">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit003expectedhtml">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit003html">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit004expectedhtml">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit004html">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html</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="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautofitcolumnsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautofitcolumnshtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautofitrowsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautofitrowshtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part1expectedhtml">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part1html">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part2expectedhtml">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part2html">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005expectedhtml">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005html">trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/ChangeLog 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -1,3 +1,38 @@
</span><ins>+2016-07-25 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Implement repeat(auto-fit)
+ https://bugs.webkit.org/show_bug.cgi?id=159771
+
+ Reviewed by Darin Adler.
+
+ Uncommented the auto-fit cases. Split the Mozilla's 005 test in two because it was not
+ possible to fit all the content in a viewport without scrollbars.
+
+ * fast/css-grid-layout/grid-auto-fit-columns-expected.txt: Added.
+ * fast/css-grid-layout/grid-auto-fit-columns.html: Added.
+ * fast/css-grid-layout/grid-auto-fit-rows-expected.txt: Added.
+ * fast/css-grid-layout/grid-auto-fit-rows.html: Added.
+ * fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt:
+ * fast/css-grid-layout/grid-element-auto-repeat-get-set.html:
+ * fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt:
+ * fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html:
+ * fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
+ * fast/css-grid-layout/grid-positioned-items-padding.html:
+ * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt:
+ * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html:
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html: Copied from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.
+
</ins><span class="cx"> 2016-07-24 Nan Wang <n_wang@apple.com>
</span><span class="cx">
</span><span class="cx"> AX: Video Controls: Volume cannot be adjusted using VO.
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofitcolumnsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns-expected.txt (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns-expected.txt 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+This test checks that repeat(auto-fit, ) syntax works as expected.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofitcolumnshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,142 @@
</span><ins>+<!DOCTYPE html>
+
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ border: 2px solid magenta;
+ width: 200px;
+ position: relative;
+ justify-content: start;
+ grid-auto-columns: 157px;
+ grid-auto-rows: 25px;
+}
+
+.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fit, 30px [autobar]); }
+.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, -webkit-max-content); }
+.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+
+.item { background-color: cyan; }
+
+.gap { grid-column-gap: 20px; }
+
+</style>
+
+<script src="../../resources/check-layout.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+ <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+ <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+ <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+ <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+ <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+ <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+ <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+ <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+ <div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+ <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="267" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+ <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+ <div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+ <div class="item" style="grid-column: last 2 / foo" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+ <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+ <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="80" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+ <div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+ <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+ <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+ <div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+ <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+ <div class="item" style="grid-column: autobar / -1" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+ <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+ <div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+ <div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+ <div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+ <div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+ <div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofitrowsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows-expected.txt (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows-expected.txt 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+This test checks that repeat(auto-fit, ) syntax works as expected.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofitrowshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,146 @@
</span><ins>+<!DOCTYPE html>
+
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+ border: 2px solid magenta;
+ height: 200px;
+ width: 25px;
+ align-content: start;
+ grid-auto-rows: 157px;
+ grid-auto-columns: 25px;
+
+ float: left;
+ position: relative;
+ margin-right: 2px;
+}
+
+.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fit, 30px [autobar]); }
+.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, -webkit-max-content); }
+.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+
+.item { background-color: cyan; }
+
+.gap { grid-row-gap: 20px; }
+
+</style>
+
+<script src="../../resources/check-layout.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+ <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+ <div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+ <div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+ <div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+ <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+ <div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+ <div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+ <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+ <div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+ <div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="267" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+ <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+ <div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+ <div class="item" style="grid-row: last 2 / foo" data-offset-y="0" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+ <div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+ <div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="80" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+ <div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+ <div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+ <div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+ <div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+ <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+ <div class="item" style="grid-row: autobar / -1" data-offset-y="140" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+ <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+ <div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="120" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+ <div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+ <div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+ <div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+ <div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -20,18 +20,26 @@
</span><span class="cx"> PASS element.style.gridTemplateColumns is "[start] 10% repeat(auto-fill, [foo bar] 200px) [end]"
</span><span class="cx"> PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "75px [prev] 200px [foo bar next] 150px [last end]"
</span><span class="cx"> PASS element.style.gridTemplateRows is "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end]"
</span><del>-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be none. Was [foo bar] 150px [foo bar] 150px [foo bar] 150px [foo bar] 150px [foo bar] 150px.
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px"
</ins><span class="cx"> PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] 150px)"
</span><del>-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be none. Was 240px [foo bar] 240px [foo bar].
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [foo bar] 0px [foo bar]"
</ins><span class="cx"> PASS element.style.gridTemplateRows is "repeat(auto-fit, 24em [foo bar])"
</span><del>-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be none. Was [foo bar] 400px [foo bar] 400px.
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo bar] 0px"
</ins><span class="cx"> PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] minmax(270px, 1fr))"
</span><del>-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be none. Was [foo] 200px [bar foo] 200px [bar foo] 200px [bar].
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]"
</ins><span class="cx"> PASS element.style.gridTemplateRows is "repeat(auto-fit, [foo] minmax(20em, -webkit-max-content) [bar])"
</span><del>-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be 20px 20px. Was 300px 300px 20px 20px.
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 0px 20px 20px"
</ins><span class="cx"> PASS element.style.gridTemplateColumns is "repeat(auto-fit, minmax(300px, -webkit-min-content)) 20px 20px"
</span><del>-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be 60px [foo] 10px [foo] 10px. Was 60px 300px [bar foo] 10px [foo] 10px.
</del><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "60px 0px [bar foo] 10px [foo] 10px"
</ins><span class="cx"> PASS element.style.gridTemplateRows is "10% repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em"
</span><ins>+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]"
+PASS element.style.gridTemplateColumns is "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]"
+PASS element.style.gridTemplateRows is "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c] 20px [e]"
+PASS element.style.gridTemplateColumns is "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [e]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]"
+PASS element.style.gridTemplateRows is "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])"
</ins><span class="cx">
</span><span class="cx"> Test invalid repeat syntax.
</span><span class="cx"> PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="lines">@@ -57,7 +65,6 @@
</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-columns') is "none"
</span><span class="cx"> PASS successfullyParsed is true
</span><del>-Some tests failed.
</del><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -15,9 +15,11 @@
</span><span class="cx"> testGridTemplatesSetJSValues("repeat(auto-fill, [foo bar] minmax(300px, 1fr))", "repeat(auto-fill, [foo] minmax(175px, -webkit-max-content) [bar])", "[foo bar] 400px [foo bar] 400px", "[foo] 175px [bar foo] 175px [bar foo] 175px [bar]");
</span><span class="cx"> testGridTemplatesSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repeat(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(-webkit-max-content, 5em) [bar]) repeat(2, [foo] 1em)", "100px 100px 100px 250px 250px", "450px 50px [bar] 50px [bar foo] 10px [foo] 10px", "repeat(auto-fill, minmax(50px, 100px)) 250px 250px", "450px repeat(auto-fill, minmax(-webkit-max-content, 5em) [bar]) [foo] 1em [foo] 1em");
</span><span class="cx"> testGridTemplatesSetJSValues("[start] 10% repeat(auto-fill, [foo bar] 200px) [end]", "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end]", "[start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]", "75px [prev] 200px [foo bar next] 150px [last end]");
</span><del>- testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(auto-fit, 24em [foo bar])", "none", "none");
- testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr))", "repeat(auto-fit, [foo] minmax(20em, -webkit-max-content) [bar])", "none", "none");
- testGridTemplatesSetJSValues("repeat(auto-fit, minmax(300px, -webkit-min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) repeat(2, [foo] 1em)", "20px 20px", "60px [foo] 10px [foo] 10px", "repeat(auto-fit, minmax(300px, -webkit-min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em");
</del><ins>+ testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(auto-fit, 24em [foo bar])", "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px", "0px [foo bar] 0px [foo bar]");
+ testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr))", "repeat(auto-fit, [foo] minmax(20em, -webkit-max-content) [bar])", "[foo bar] 0px [foo bar] 0px", "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]");
+ testGridTemplatesSetJSValues("repeat(auto-fit, minmax(300px, -webkit-min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) repeat(2, [foo] 1em)", "0px 0px 20px 20px", "60px 0px [bar foo] 10px [foo] 10px", "repeat(auto-fit, minmax(300px, -webkit-min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em");
+ testGridTemplatesSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]", "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]", "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]");
+ testGridTemplatesSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) repeat(1, [b] 30px [c]) 20px [e]", "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c] 20px [e]", "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]", "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [e]");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test invalid repeat syntax.");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridonlyabspositemcomputedstylecrashexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -9,6 +9,14 @@
</span><span class="cx"> PASS window.getComputedStyle(grid2, '').getPropertyValue('grid-template-rows') is "none"
</span><span class="cx"> PASS window.getComputedStyle(grid3, '').getPropertyValue('grid-template-columns') is "none"
</span><span class="cx"> PASS window.getComputedStyle(grid3, '').getPropertyValue('grid-template-rows') is "none"
</span><ins>+PASS window.getComputedStyle(grid4, '').getPropertyValue('grid-template-columns') is "[a] 0px [b a] 0px [b a] 0px [b a] 0px [b a] 0px [b]"
+PASS window.getComputedStyle(grid4, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(grid5, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(grid5, '').getPropertyValue('grid-template-rows') is "[a] 0px [b]"
+PASS window.getComputedStyle(grid6, '').getPropertyValue('grid-template-columns') is "[a] 0px [b a] 0px [b a] 0px [b] 10px 30px"
+PASS window.getComputedStyle(grid6, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(grid7, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(grid7, '').getPropertyValue('grid-template-rows') is "[a] 0px [b] 10px 30px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridonlyabspositemcomputedstylecrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -4,11 +4,17 @@
</span><span class="cx"> .grid {
</span><span class="cx"> display: grid;
</span><span class="cx"> position: relative;
</span><ins>+ width: 100px; /* Just to ensure a small number of repetitions. */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .emptyCols { grid-template-rows: 20px; }
</span><span class="cx"> .emptyRows { grid-template-columns: 10px; }
</span><ins>+.emptyColsDueToAutoFit { grid-template-columns: repeat(auto-fit, [a] 20px [b]); }
+.emptyRowsDueToAutoFit { grid-template-rows: repeat(auto-fit, [a] 20px [b]); }
+.noRepetitionsCols { grid-template-columns: repeat(auto-fit, [a] 20px [b]) 10px 30px; }
+.noRepetitionsRows { grid-template-rows: repeat(auto-fit, [a] 20px [b]) 10px 30px; }
</ins><span class="cx">
</span><ins>+
</ins><span class="cx"> .absposChild {
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span><span class="lines">@@ -22,6 +28,10 @@
</span><span class="cx"> testGridTemplatesValues(document.getElementById("grid1"), "none", "20px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("grid2"), "10px", "none");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("grid3"), "none", "none");
</span><ins>+ testGridTemplatesValues(document.getElementById("grid4"), "[a] 0px [b a] 0px [b a] 0px [b a] 0px [b a] 0px [b]", "none");
+ testGridTemplatesValues(document.getElementById("grid5"), "none", "[a] 0px [b]");
+ testGridTemplatesValues(document.getElementById("grid6"), "[a] 0px [b a] 0px [b a] 0px [b] 10px 30px", "none");
+ testGridTemplatesValues(document.getElementById("grid7"), "none", "[a] 0px [b] 10px 30px");
</ins><span class="cx"> }
</span><span class="cx"> </script>
</span><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="lines">@@ -35,4 +45,10 @@
</span><span class="cx">
</span><span class="cx"> <div id="grid3" class="grid"><div class="absposChild"></div></div>
</span><span class="cx">
</span><ins>+<div id="grid4" class="grid emptyColsDueToAutoFit"><div class="absposChild"></div></div>
+<div id="grid5" class="grid emptyRowsDueToAutoFit"><div class="absposChild"></div></div>
+
+<div id="grid6" class="grid noRepetitionsCols"><div class="absposChild"></div></div>
+<div id="grid7" class="grid noRepetitionsRows"><div class="absposChild"></div></div>
+
</ins><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddingexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -8,3 +8,7 @@
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><span class="cx"> PASS
</span><ins>+PASS
+PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridpositioneditemspaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -14,6 +14,11 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.autoFit {
+ grid-template-columns: repeat(auto-fit, 100px);
+ grid-template-rows: repeat(auto-fit, 100px);
+}
+
</ins><span class="cx"> .absolute {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="lines">@@ -23,6 +28,8 @@
</span><span class="cx"> background: lime;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.gap { grid-gap: 10px; }
+
</ins><span class="cx"> </style>
</span><span class="cx"> <script src="../../resources/check-layout.js"></script>
</span><span class="cx"> <body onload="checkLayout('.grid')">
</span><span class="lines">@@ -197,4 +204,40 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx">
</span><ins>+<div class="grid autoFit gap">
+ <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+ </div>
+</div>
+
+<div class="grid autoFit gap">
+ <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+ data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;"
+ data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+ </div>
+</div>
+
+<div class="grid autoFit directionRTL gap">
+ <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+ data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+ </div>
+</div>
+
+<div class="grid autoFit directionRTL gap">
+ <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+ data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+ </div>
+ <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;"
+ data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+ </div>
+</div>
+
</ins><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmentexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -31,6 +31,118 @@
</span><span class="cx"> PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
</span><span class="cx"> PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
</span><span class="cx"> PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
</span><ins>+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridtemplatecolumnsrowscomputedstylegapscontentalignmenthtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -12,6 +12,16 @@
</span><span class="cx"> .gaps {
</span><span class="cx"> grid-gap: 10px 20px;
</span><span class="cx"> }
</span><ins>+
+.autoFit {
+ grid-template-columns: repeat(auto-fit, 75px);
+ grid-template-rows: 25px;
+}
+
+.width300 { width: 300px; }
+
+.item:first-child { background: lime; }
+.item:last-child { background: blue; }
</ins><span class="cx"> </style>
</span><span class="cx">
</span><span class="cx"> <div class="grid contentStart" id="gridContentStart"></div>
</span><span class="lines">@@ -30,11 +40,22 @@
</span><span class="cx"> <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>
</span><span class="cx"> <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>
</span><span class="cx">
</span><ins>+<div class="grid gaps width300 autoFit" id="gridAutoFitEmpty"></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitFirstColumnChild"><div class="item"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitSecondColumnChild"><div class="item" style="grid-column: 2"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitThirdColumnChild"><div class="item" style="grid-column: 3"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildren"><div class="item"></div><div class="item"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildrenTwo">
+ <div class="item" style="grid-column: 2"></div><div class="item"></div>
+</div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoAlternatingChildren">
+ <div class="item"></div><div class="item" style="grid-column: 3"></div>
+</div>
+
</ins><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><span class="cx"> <script>
</span><span class="cx"> description("Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps.");
</span><del>-
</del><span class="cx"> testGridTemplatesValues(document.getElementById("gridContentStart"), "300px 200px 100px", "150px 100px 50px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridContentCenter"), "300px 200px 100px", "150px 100px 50px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");
</span><span class="lines">@@ -50,4 +71,25 @@
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridGapsContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridGapsContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
</span><span class="cx"> testGridTemplatesValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");
</span><ins>+
+ function testGapsAlignmentWithAutoFit(id, expectedColumns, expectedRows) {
+ var element = document.getElementById(id);
+ var alignmentClasses = [ '', 'contentStart', 'contentCenter', 'contentEnd', 'contentSpaceAround', 'contentSpaceBetween', 'contentSpaceEvenly', 'contentStretch'];
+
+ for (alignmentClass in alignmentClasses) {
+ var originalClassName = element.className;
+ element.className += " " + alignmentClass;
+ testGridTemplatesValues(element, expectedColumns, expectedRows);
+ element.className = originalClassName;
+ }
+ }
+
+ testGapsAlignmentWithAutoFit('gridAutoFitEmpty', "0px 0px 0px", "25px");
+ testGapsAlignmentWithAutoFit("gridAutoFitFirstColumnChild", "75px 0px 0px", "25px");
+ testGapsAlignmentWithAutoFit("gridAutoFitSecondColumnChild", "0px 75px 0px", "25px");
+ testGapsAlignmentWithAutoFit("gridAutoFitThirdColumnChild", "0px 0px 75px", "25px");
+ testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildren", "75px 75px 0px", "25px");
+ testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildrenTwo", "0px 75px 75px", "25px");
+ testGapsAlignmentWithAutoFit("gridAutoFitTwoAlternatingChildren", "75px 0px 75px", "25px");
+
</ins><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit001expectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -65,7 +65,7 @@
</span><span class="cx">
</span><span class="cx"> fill,fit {
</span><span class="cx"> float: left;
</span><del>- width: 400px;
</del><ins>+ width: 390px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .r1.c0 { grid-template-columns: none;}
</span><span class="lines">@@ -72,7 +72,9 @@
</span><span class="cx"> .r1.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d];}
</span><span class="cx"> .r1.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d]; }
</span><span class="cx"> .r1.c4 { grid-template-columns: [a] repeat(4, [b] 20px [c]) [d]; }
</span><del>-.r1.c18 { grid-template-columns: [a] repeat(18, [b] 20px [c]) [d]; }
</del><ins>+/* The repeat count was 18 in the original test. We had to reduce it to accomodate fit and fit tests
+ in a viewport with no scroll. */
+.r1.c18 { grid-template-columns: [a] repeat(17, [b] 20px [c]) [d]; }
</ins><span class="cx">
</span><span class="cx"> .r2.c16 { grid-template-columns: [a] repeat(16, [b] 20px [c]) [d] 30px [e]; }
</span><span class="cx"> .r2.c0 { grid-template-columns: 30px [e];}
</span><span class="lines">@@ -79,7 +81,9 @@
</span><span class="cx"> .r2.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
</span><span class="cx"> .r2.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
</span><span class="cx">
</span><del>-.r3.c15 { grid-template-columns: [a] repeat(15, [b] 20px [c]) [d] 30px [e] 30px [f]; }
</del><ins>+/* The repeat count was 15 in the original test. We had to reduce it to accomodate fit and fit tests
+ in a viewport with no scroll. */
+.r3.c15 { grid-template-columns: [a] repeat(14, [b] 20px [c]) [d] 30px [e] 30px [f]; }
</ins><span class="cx"> .r3.c0 { grid-template-columns: [a d] 30px [e] 30px [f]; }
</span><span class="cx"> .r3.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
</span><span class="cx">
</span><span class="lines">@@ -136,58 +140,57 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw50 float c2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw80 float c2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float c2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><del>-
</del><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit001html"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -67,7 +67,7 @@
</span><span class="cx">
</span><span class="cx"> fill,fit {
</span><span class="cx"> float: left;
</span><del>- width: 400px;
</del><ins>+ width: 390px;
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="lines">@@ -122,58 +122,57 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<!-- FIXME: uncomment these tests when enabling auto-fit. -->
-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit002expectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -133,57 +133,57 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><span class="cx">
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit002html"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -125,58 +125,57 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<!-- FIXME: uncomment these tests when enabling auto-fit. -->
-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><span class="cx">
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit003expectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -78,6 +78,11 @@
</span><span class="cx"> background: blue;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+fill,fit {
+ float: left;
+ width: 375px;
+}
+
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="lines">@@ -131,60 +136,61 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<br clear="all">
-<br clear="all">
</del><ins>+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+ <br clear="all"> -->
</ins><span class="cx">
</span><del>-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><span class="cx">
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit003html"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -68,6 +68,10 @@
</span><span class="cx"> background: blue;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+fill,fit {
+ float: left;
+ width: 375px;
+}
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="lines">@@ -121,61 +125,61 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<br clear="all">
-<br clear="all">
</del><ins>+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+ <br clear="all"> -->
</ins><span class="cx">
</span><del>-<!-- FIXME: uncomment these tests when enabling auto-fit. -->
-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</del><ins>+<div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><span class="cx">
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit004expectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -80,6 +80,11 @@
</span><span class="cx"> background: blue;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+fill,fit {
+ float: left;
+ width: 375px;
+}
+
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="lines">@@ -133,60 +138,61 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<br clear="all">
-<br clear="all">
</del><ins>+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+ <br clear="all"> -->
</ins><span class="cx">
</span><del>-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</del><ins>+<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r12 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r12 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r13 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</del><ins>+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r20 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r20 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r22 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</del><ins>+<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r30 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><span class="cx">
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit004html"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -70,6 +70,11 @@
</span><span class="cx"> background: blue;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+fill,fit {
+ float: left;
+ width: 375px;
+}
+
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="lines">@@ -123,61 +128,61 @@
</span><span class="cx">
</span><span class="cx"> </fill>
</span><span class="cx">
</span><del>-<br clear="all">
-<br clear="all">
</del><ins>+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+ <br clear="all"> -->
</ins><span class="cx">
</span><del>-<!-- FIXME: uncomment these tests when enabling auto-fit. -->
-<!-- <fit>
</del><ins>+<fit>
</ins><span class="cx">
</span><del>- <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</del><ins>+<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</del><ins>+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
- <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</del><ins>+<wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
</ins><span class="cx">
</span><del>- <br clear="all">
- <br clear="all">
</del><ins>+<br clear="all">
+<br clear="all">
</ins><span class="cx">
</span><del>- </fit> -->
</del><ins>+</fit>
</ins><span class="cx">
</span><span class="cx">
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005expectedhtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -1,384 +0,0 @@
</span><del>-<!DOCTYPE HTML>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
- <meta charset="utf-8">
- <title>Reference: repeat(auto-fill/auto-fit)</title>
- <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
- <style type="text/css">
-html,body {
- color:black; background-color:white; font-size:16px;
-}
-
-.grid {
- display: grid;
- float: left;
- position: relative;
- border: 2px solid;
- grid-auto-columns: 10px;
- grid-auto-rows: 10px;
- grid-auto-flow: column;
- grid-gap: 2px;
- margin-right: 2px;
- padding-top: 3px;
- padding-bottom: 2px;
-}
-
-.r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
-.r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
-.r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;}
-.r01 a {grid-row-end:auto; }
-.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
-.r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
-.r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }
-.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
-.r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
-.r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
-/* This is a bug in the original Mozilla tests, auto is not allowed in <auto-track-list> */
-/* .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f]; } */
-.ra { grid-template-rows: none; }
-.r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid-gap:0; padding-bottom:4px;}
-
-fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
-fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
-fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
-fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0;}
-fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
-fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; }
-fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;}
-fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] auto [f]; }
-
-.w100 { height: 100px; }
-.w3 { height: 3px; }
-.w20 { height: 20px; }
-.w50 { height: 50px; }
-.w80 { height: 80px; }
-.mw100 { min-height: 100px; }
-.mw3 { height: 3px; }
-.mw20 { height: 20px; }
-.mw50 { min-height: 50px; }
-.mw80 { min-height: 80px; }
-.xw100 { max-height: 100px; }
-.xw3 { height: 3px; }
-.xw20 { height: 20px; }
-.xw50 { max-height: 50px; }
-.xw80 { max-height: 80px; }
-
-.w { width:10px}
-
-x {
- height: 10px;
- background: grey;
-}
-a {
- position: absolute;
- left:0; top:0; bottom:0; width: 3px;
- background: black;
- grid-row: c / c -1;
-}
-b {
- position: absolute;
- right:0; top:0; bottom:0; width: 3px;
- background: brown;
- grid-row: auto / c -1;
-}
-
-x:first-child {
- background: lime;
-}
-x:last-child {
- background: blue;
-}
-
-fill,fit {
- float: left;
- height: 400px;
-}
-</style>
-</head>
-<body>
-
-<fill>
-
-<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r1 w w20"><a></a><b></b></div>
-<div class="grid r1 w w3"><a></a><b></b></div>
-<div class="grid r1 w xw20"><a></a><b></b></div>
-<div class="grid r1 w xw3"><a></a><b></b></div>
-<div class="grid r1 w mw20"><a></a><b></b></div>
-<div class="grid r1 w mw3"><a></a><b></b></div>
-<div class="grid r1 w w20 xw3"><a></a><b></b></div>
-<div class="grid r1 w w3 mw20"><a></a><b></b></div>
-<div class="grid r1 w w3 mw3"><a></a><b></b></div>
-<div class="grid r1 w xw20"><a></a><b></b></div>
-<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
-<div class="grid r1 w mw20"><a></a><b></b></div>
-
-<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
-<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
-<div class="grid w r1" style="height:0"><a></a><b></b></div>
-<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
-<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
-<div class="grid w r0"><a></a><b></b></div>
-<div class="grid w ra"><a></a><b></b></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r20 w w20"><a></a><b></b></div>
-<div class="grid r20 w w3"><a></a><b></b></div>
-<div class="grid r20 w xw20"><a></a><b></b></div>
-<div class="grid r20 w xw3"><a></a><b></b></div>
-<div class="grid r20 w mw20"><a></a><b></b></div>
-<div class="grid r20 w mw3"><a></a><b></b></div>
-<div class="grid r20 w w20 xw3"><a></a><b></b></div>
-<div class="grid r20 w w3 mw20"><a></a><b></b></div>
-<div class="grid r20 w w3 mw3"><a></a><b></b></div>
-<div class="grid r20 w xw20"><a></a><b></b></div>
-<div class="grid r20 w xw3 mw20"><a></a><b></b></div>
-<div class="grid r20 w mw20"><a></a><b></b></div>
-
-<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
-<div class="grid w r20" style="min-height:0"><a></a><b></b></div>
-<div class="grid w r20" style="height:0"><a></a><b></b></div>
-<div class="grid w r20" style="min-height:0; height:0"><a></a><b></b></div>
-<div class="grid w r20" style="max-height:0"><a></a><b></b></div>
-<div class="grid w r02"><a></a><b></b></div>
-
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r30 w w20"><a></a><b></b></div>
-<div class="grid r30 w w3"><a></a><b></b></div>
-<div class="grid r30 w xw20"><a></a><b></b></div>
-<div class="grid r30 w xw3"><a></a><b></b></div>
-<div class="grid r30 w mw20"><a></a><b></b></div>
-<div class="grid r30 w mw3"><a></a><b></b></div>
-<div class="grid r30 w w20 xw3"><a></a><b></b></div>
-<div class="grid r30 w w3 mw20"><a></a><b></b></div>
-<div class="grid r30 w w3 mw3"><a></a><b></b></div>
-<div class="grid r30 w xw20"><a></a><b></b></div>
-<div class="grid r30 w xw3 mw20"><a></a><b></b></div>
-<div class="grid r30 w mw20"><a></a><b></b></div>
-
-<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
-<div class="grid w r30" style="min-height:0"><a></a><b></b></div>
-<div class="grid w r30" style="height:0"><a></a><b></b></div>
-<div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div>
-<div class="grid w r30" style="max-height:0"><a></a><b></b></div>
-<div class="grid w r003"><a></a><b></b></div>
-
-
-</fill>
-
-<!-- <fit>
-
- <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r01 w w20"><a></a><b></b></div>
- <div class="grid r01 w w3"><a></a><b></b></div>
- <div class="grid r01 w xw20"><a></a><b></b></div>
- <div class="grid r01 w xw3"><a></a><b></b></div>
- <div class="grid r01 w mw20"><a></a><b></b></div>
- <div class="grid r01 w mw3"><a></a><b></b></div>
- <div class="grid r01 w w20 xw3"><a></a><b></b></div>
- <div class="grid r01 w w3 mw20"><a></a><b></b></div>
- <div class="grid r01 w w3 mw3"><a></a><b></b></div>
- <div class="grid r01 w xw20"><a></a><b></b></div>
- <div class="grid r01 w xw3 mw20"><a></a><b></b></div>
- <div class="grid r01 w mw20"><a></a><b></b></div>
-
- <div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
- <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r01" style="height:0"><a></a><b></b></div>
- <div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div>
- <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r0a"><a></a><b></b></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r02 w w20"><a></a><b></b></div>
- <div class="grid r02 w w3"><a></a><b></b></div>
- <div class="grid r02 w xw20"><a></a><b></b></div>
- <div class="grid r02 w xw3"><a></a><b></b></div>
- <div class="grid r02 w mw20"><a></a><b></b></div>
- <div class="grid r02 w mw3"><a></a><b></b></div>
- <div class="grid r02 w w20 xw3"><a></a><b></b></div>
- <div class="grid r02 w w3 mw20"><a></a><b></b></div>
- <div class="grid r02 w w3 mw3"><a></a><b></b></div>
- <div class="grid r02 w xw20"><a></a><b></b></div>
- <div class="grid r02 w xw3 mw20"><a></a><b></b></div>
- <div class="grid r02 w mw20"><a></a><b></b></div>
-
- <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
- <div class="grid w r02" style="min-height:0"><a></a><b></b></div>
- <div class="grid w r02" style="height:0"><a></a><b></b></div>
- <div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div>
- <div class="grid w r02" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r02"><a></a><b></b></div>
-
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r03 w w20"><a></a><b></b></div>
- <div class="grid r03 w w3"><a></a><b></b></div>
- <div class="grid r03 w xw20"><a></a><b></b></div>
- <div class="grid r03 w xw3"><a></a><b></b></div>
- <div class="grid r03 w mw20"><a></a><b></b></div>
- <div class="grid r03 w mw3"><a></a><b></b></div>
- <div class="grid r03 w w20 xw3"><a></a><b></b></div>
- <div class="grid r03 w w3 mw20"><a></a><b></b></div>
- <div class="grid r03 w w3 mw3"><a></a><b></b></div>
- <div class="grid r03 w xw20"><a></a><b></b></div>
- <div class="grid r03 w xw3 mw20"><a></a><b></b></div>
- <div class="grid r03 w mw20"><a></a><b></b></div>
-
- <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
- <div class="grid w r003" style="min-height:0"><a></a><b></b></div>
- <div class="grid w r03" style="height:0"><a></a><b></b></div>
- <div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div>
- <div class="grid w r03" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r003"><a></a><b></b></div>
-
-
-
- </fit> -->
-
-
-</body>
-</html>
</del></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part1expectedhtmlfromrev203679trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005expectedhtml"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html (from rev 203679, trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html) (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,244 @@
</span><ins>+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: repeat(auto-fill/auto-fit)</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 2px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+ padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+.r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+.r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;}
+.r01 a {grid-row-end:auto; }
+.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+.r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid-gap:0; padding-bottom:4px;}
+
+fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0;}
+fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; }
+fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;}
+fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+ height: 10px;
+ background: grey;
+}
+a {
+ position: absolute;
+ left:0; top:0; bottom:0; width: 3px;
+ background: black;
+ grid-row: c / c -1;
+}
+b {
+ position: absolute;
+ right:0; top:0; bottom:0; width: 3px;
+ background: brown;
+ grid-row: auto / c -1;
+}
+
+x:first-child {
+ background: lime;
+}
+x:last-child {
+ background: blue;
+}
+
+fill,fit {
+ float: left;
+ height: 400px;
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r1 w w20"><a></a><b></b></div>
+<div class="grid r1 w w3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+<div class="grid r1 w mw3"><a></a><b></b></div>
+<div class="grid r1 w w20 xw3"><a></a><b></b></div>
+<div class="grid r1 w w3 mw20"><a></a><b></b></div>
+<div class="grid r1 w w3 mw3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+
+<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r1" style="height:0"><a></a><b></b></div>
+<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0"><a></a><b></b></div>
+<div class="grid w ra"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r20 w w20"><a></a><b></b></div>
+<div class="grid r20 w w3"><a></a><b></b></div>
+<div class="grid r20 w xw20"><a></a><b></b></div>
+<div class="grid r20 w xw3"><a></a><b></b></div>
+<div class="grid r20 w mw20"><a></a><b></b></div>
+<div class="grid r20 w mw3"><a></a><b></b></div>
+<div class="grid r20 w w20 xw3"><a></a><b></b></div>
+<div class="grid r20 w w3 mw20"><a></a><b></b></div>
+<div class="grid r20 w w3 mw3"><a></a><b></b></div>
+<div class="grid r20 w xw20"><a></a><b></b></div>
+<div class="grid r20 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r20 w mw20"><a></a><b></b></div>
+
+<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r20" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r20" style="height:0"><a></a><b></b></div>
+<div class="grid w r20" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r20" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r30 w w20"><a></a><b></b></div>
+<div class="grid r30 w w3"><a></a><b></b></div>
+<div class="grid r30 w xw20"><a></a><b></b></div>
+<div class="grid r30 w xw3"><a></a><b></b></div>
+<div class="grid r30 w mw20"><a></a><b></b></div>
+<div class="grid r30 w mw3"><a></a><b></b></div>
+<div class="grid r30 w w20 xw3"><a></a><b></b></div>
+<div class="grid r30 w w3 mw20"><a></a><b></b></div>
+<div class="grid r30 w w3 mw3"><a></a><b></b></div>
+<div class="grid r30 w xw20"><a></a><b></b></div>
+<div class="grid r30 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r30 w mw20"><a></a><b></b></div>
+
+<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r30" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r30" style="height:0"><a></a><b></b></div>
+<div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r30" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r003"><a></a><b></b></div>
+
+
+</fill>
+
+<!-- The original 005 test from Mozilla had also tests for auto-fit. They were moved to part-2 as it
+ is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part1htmlfromrev203679trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005html"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html (from rev 203679, trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html) (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,235 @@
</span><ins>+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+ <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 2px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+ padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; }
+.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+ height: 10px;
+ background: grey;
+}
+a {
+ position: absolute;
+ left:0; top:0; bottom:0; width: 3px;
+ background: black;
+ grid-row: c / c -1;
+}
+b {
+ position: absolute;
+ right:0; top:0; bottom:0; width: 3px;
+ background: brown;
+ grid-row: auto / c -1;
+}
+
+x:first-child {
+ background: lime;
+}
+x:last-child {
+ background: blue;
+}
+
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r1 w w20"><a></a><b></b></div>
+<div class="grid r1 w w3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+<div class="grid r1 w mw3"><a></a><b></b></div>
+<div class="grid r1 w w20 xw3"><a></a><b></b></div>
+<div class="grid r1 w w3 mw20"><a></a><b></b></div>
+<div class="grid r1 w w3 mw3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+
+<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r1" style="height:0"><a></a><b></b></div>
+<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0"><a></a><b></b></div>
+<div class="grid w ra"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w w20"><a></a><b></b></div>
+<div class="grid r2 w w3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+<div class="grid r2 w mw3"><a></a><b></b></div>
+<div class="grid r2 w w20 xw3"><a></a><b></b></div>
+<div class="grid r2 w w3 mw20"><a></a><b></b></div>
+<div class="grid r2 w w3 mw3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+
+<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r2" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r2" style="height:0"><a></a><b></b></div>
+<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r2" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w w20"><a></a><b></b></div>
+<div class="grid r3 w w3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+<div class="grid r3 w mw3"><a></a><b></b></div>
+<div class="grid r3 w w20 xw3"><a></a><b></b></div>
+<div class="grid r3 w w3 mw20"><a></a><b></b></div>
+<div class="grid r3 w w3 mw3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+
+<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r3" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r3" style="height:0"><a></a><b></b></div>
+<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r3" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r03"><a></a><b></b></div>
+
+</fill>
+
+<!-- The original 005 test from Mozilla had also tests for auto-fit. They were moved to part-2 as it
+ is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part2expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,244 @@
</span><ins>+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: repeat(auto-fill/auto-fit)</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 2px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+ padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+.r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+.r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;}
+.r01 a {grid-row-end:auto; }
+.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0;}
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+.r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 10px [f]; grid-gap:0; padding-bottom:4px;}
+
+fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; }
+fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;}
+fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+ height: 10px;
+ background: grey;
+}
+a {
+ position: absolute;
+ left:0; top:0; bottom:0; width: 3px;
+ background: black;
+ grid-row: c / c -1;
+}
+b {
+ position: absolute;
+ right:0; top:0; bottom:0; width: 3px;
+ background: brown;
+ grid-row: auto / c -1;
+}
+
+x:first-child {
+ background: lime;
+}
+x:last-child {
+ background: blue;
+}
+
+fill,fit {
+ float: left;
+ height: 400px;
+}
+</style>
+</head>
+<body>
+
+<!-- The original 005 test from Mozilla had also tests for auto-fill. They were moved to part-1 as it
+ is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
+
+<fit>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r01 w w20"><a></a><b></b></div>
+<div class="grid r01 w w3"><a></a><b></b></div>
+<div class="grid r01 w xw20"><a></a><b></b></div>
+<div class="grid r01 w xw3"><a></a><b></b></div>
+<div class="grid r01 w mw20"><a></a><b></b></div>
+<div class="grid r01 w mw3"><a></a><b></b></div>
+<div class="grid r01 w w20 xw3"><a></a><b></b></div>
+<div class="grid r01 w w3 mw20"><a></a><b></b></div>
+<div class="grid r01 w w3 mw3"><a></a><b></b></div>
+<div class="grid r01 w xw20"><a></a><b></b></div>
+<div class="grid r01 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r01 w mw20"><a></a><b></b></div>
+
+<div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r01" style="height:0"><a></a><b></b></div>
+<div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0a"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r02 w w20"><a></a><b></b></div>
+<div class="grid r02 w w3"><a></a><b></b></div>
+<div class="grid r02 w xw20"><a></a><b></b></div>
+<div class="grid r02 w xw3"><a></a><b></b></div>
+<div class="grid r02 w mw20"><a></a><b></b></div>
+<div class="grid r02 w mw3"><a></a><b></b></div>
+<div class="grid r02 w w20 xw3"><a></a><b></b></div>
+<div class="grid r02 w w3 mw20"><a></a><b></b></div>
+<div class="grid r02 w w3 mw3"><a></a><b></b></div>
+<div class="grid r02 w xw20"><a></a><b></b></div>
+<div class="grid r02 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r02 w mw20"><a></a><b></b></div>
+
+<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r02" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r02" style="height:0"><a></a><b></b></div>
+<div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r02" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r03 w w20"><a></a><b></b></div>
+<div class="grid r03 w w3"><a></a><b></b></div>
+<div class="grid r03 w xw20"><a></a><b></b></div>
+<div class="grid r03 w xw3"><a></a><b></b></div>
+<div class="grid r03 w mw20"><a></a><b></b></div>
+<div class="grid r03 w mw3"><a></a><b></b></div>
+<div class="grid r03 w w20 xw3"><a></a><b></b></div>
+<div class="grid r03 w w3 mw20"><a></a><b></b></div>
+<div class="grid r03 w w3 mw3"><a></a><b></b></div>
+<div class="grid r03 w xw20"><a></a><b></b></div>
+<div class="grid r03 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r03 w mw20"><a></a><b></b></div>
+
+<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r003" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r03" style="height:0"><a></a><b></b></div>
+<div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r03" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r003"><a></a><b></b></div>
+
+</fit>
+
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005part2htmlfromrev203679trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005html"></a>
<div class="copfile"><h4>Copied: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html (from rev 203679, trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html) (0 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -0,0 +1,236 @@
</span><ins>+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+ <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+ <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 2px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+ padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; }
+.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+ height: 10px;
+ background: grey;
+}
+a {
+ position: absolute;
+ left:0; top:0; bottom:0; width: 3px;
+ background: black;
+ grid-row: c / c -1;
+}
+b {
+ position: absolute;
+ right:0; top:0; bottom:0; width: 3px;
+ background: brown;
+ grid-row: auto / c -1;
+}
+
+x:first-child {
+ background: lime;
+}
+x:last-child {
+ background: blue;
+}
+
+</style>
+</head>
+<body>
+
+<!-- The original 005 test from Mozilla had also tests for auto-fill. They were moved to part-1 as it
+ is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
+<fit>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r1 w w20"><a></a><b></b></div>
+<div class="grid r1 w w3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+<div class="grid r1 w mw3"><a></a><b></b></div>
+<div class="grid r1 w w20 xw3"><a></a><b></b></div>
+<div class="grid r1 w w3 mw20"><a></a><b></b></div>
+<div class="grid r1 w w3 mw3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+
+<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r1" style="height:0"><a></a><b></b></div>
+<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0"><a></a><b></b></div>
+<div class="grid w ra"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w w20"><a></a><b></b></div>
+<div class="grid r2 w w3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+<div class="grid r2 w mw3"><a></a><b></b></div>
+<div class="grid r2 w w20 xw3"><a></a><b></b></div>
+<div class="grid r2 w w3 mw20"><a></a><b></b></div>
+<div class="grid r2 w w3 mw3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+
+<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r2" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r2" style="height:0"><a></a><b></b></div>
+<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r2" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w w20"><a></a><b></b></div>
+<div class="grid r3 w w3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+<div class="grid r3 w mw3"><a></a><b></b></div>
+<div class="grid r3 w w20 xw3"><a></a><b></b></div>
+<div class="grid r3 w w3 mw20"><a></a><b></b></div>
+<div class="grid r3 w w3 mw3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+
+<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r3" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r3" style="height:0"><a></a><b></b></div>
+<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r3" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r03"><a></a><b></b></div>
+
+
+</fit>
+
+
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005html"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -1,378 +0,0 @@
</span><del>-<!DOCTYPE HTML>
-<!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html><head>
- <meta charset="utf-8">
- <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
- <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
- <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
- <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html">
- <style type="text/css">
-html,body {
- color:black; background-color:white; font-size:16px;
-}
-
-.grid {
- display: grid;
- float: left;
- position: relative;
- border: 2px solid;
- grid-auto-columns: 10px;
- grid-auto-rows: 10px;
- grid-auto-flow: column;
- grid-gap: 2px;
- margin-right: 2px;
- padding-top: 3px;
- padding-bottom: 2px;
-}
-
-.r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; }
-.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
-.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
-.r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; }
-.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
-.r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f]; }
-.ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] auto [f]; }
-
-fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
-fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
-fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
-fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; }
-fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
-fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; }
-fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] auto [f]; }
-
-.w100 { height: 100px; }
-.w3 { height: 3px; }
-.w20 { height: 20px; }
-.w50 { height: 50px; }
-.w80 { height: 80px; }
-.mw100 { min-height: 100px; }
-.mw3 { height: 3px; }
-.mw20 { height: 20px; }
-.mw50 { min-height: 50px; }
-.mw80 { min-height: 80px; }
-.xw100 { max-height: 100px; }
-.xw3 { height: 3px; }
-.xw20 { height: 20px; }
-.xw50 { max-height: 50px; }
-.xw80 { max-height: 80px; }
-
-.w { width:10px}
-
-x {
- height: 10px;
- background: grey;
-}
-a {
- position: absolute;
- left:0; top:0; bottom:0; width: 3px;
- background: black;
- grid-row: c / c -1;
-}
-b {
- position: absolute;
- right:0; top:0; bottom:0; width: 3px;
- background: brown;
- grid-row: auto / c -1;
-}
-
-x:first-child {
- background: lime;
-}
-x:last-child {
- background: blue;
-}
-
-fill,fit {
- float: left;
- height: 400px;
-}
-</style>
-</head>
-<body>
-
-<fill>
-
-<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r1 w w20"><a></a><b></b></div>
-<div class="grid r1 w w3"><a></a><b></b></div>
-<div class="grid r1 w xw20"><a></a><b></b></div>
-<div class="grid r1 w xw3"><a></a><b></b></div>
-<div class="grid r1 w mw20"><a></a><b></b></div>
-<div class="grid r1 w mw3"><a></a><b></b></div>
-<div class="grid r1 w w20 xw3"><a></a><b></b></div>
-<div class="grid r1 w w3 mw20"><a></a><b></b></div>
-<div class="grid r1 w w3 mw3"><a></a><b></b></div>
-<div class="grid r1 w xw20"><a></a><b></b></div>
-<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
-<div class="grid r1 w mw20"><a></a><b></b></div>
-
-<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
-<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
-<div class="grid w r1" style="height:0"><a></a><b></b></div>
-<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
-<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
-<div class="grid w r0"><a></a><b></b></div>
-<div class="grid w ra"><a></a><b></b></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r2 w w20"><a></a><b></b></div>
-<div class="grid r2 w w3"><a></a><b></b></div>
-<div class="grid r2 w xw20"><a></a><b></b></div>
-<div class="grid r2 w xw3"><a></a><b></b></div>
-<div class="grid r2 w mw20"><a></a><b></b></div>
-<div class="grid r2 w mw3"><a></a><b></b></div>
-<div class="grid r2 w w20 xw3"><a></a><b></b></div>
-<div class="grid r2 w w3 mw20"><a></a><b></b></div>
-<div class="grid r2 w w3 mw3"><a></a><b></b></div>
-<div class="grid r2 w xw20"><a></a><b></b></div>
-<div class="grid r2 w xw3 mw20"><a></a><b></b></div>
-<div class="grid r2 w mw20"><a></a><b></b></div>
-
-<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
-<div class="grid w r2" style="min-height:0"><a></a><b></b></div>
-<div class="grid w r2" style="height:0"><a></a><b></b></div>
-<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
-<div class="grid w r2" style="max-height:0"><a></a><b></b></div>
-<div class="grid w r02"><a></a><b></b></div>
-
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
-<br clear="all">
-<br clear="all">
-
-<div class="grid r3 w w20"><a></a><b></b></div>
-<div class="grid r3 w w3"><a></a><b></b></div>
-<div class="grid r3 w xw20"><a></a><b></b></div>
-<div class="grid r3 w xw3"><a></a><b></b></div>
-<div class="grid r3 w mw20"><a></a><b></b></div>
-<div class="grid r3 w mw3"><a></a><b></b></div>
-<div class="grid r3 w w20 xw3"><a></a><b></b></div>
-<div class="grid r3 w w3 mw20"><a></a><b></b></div>
-<div class="grid r3 w w3 mw3"><a></a><b></b></div>
-<div class="grid r3 w xw20"><a></a><b></b></div>
-<div class="grid r3 w xw3 mw20"><a></a><b></b></div>
-<div class="grid r3 w mw20"><a></a><b></b></div>
-
-<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
-<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
-<div class="grid w r3" style="min-height:0"><a></a><b></b></div>
-<div class="grid w r3" style="height:0"><a></a><b></b></div>
-<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
-<div class="grid w r3" style="max-height:0"><a></a><b></b></div>
-<div class="grid w r03"><a></a><b></b></div>
-
-
-</fill>
-
-<!-- FIXME: uncomment these tests when enabling auto-fit. -->
-<!-- <fit>
-
- <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r1 w w20"><a></a><b></b></div>
- <div class="grid r1 w w3"><a></a><b></b></div>
- <div class="grid r1 w xw20"><a></a><b></b></div>
- <div class="grid r1 w xw3"><a></a><b></b></div>
- <div class="grid r1 w mw20"><a></a><b></b></div>
- <div class="grid r1 w mw3"><a></a><b></b></div>
- <div class="grid r1 w w20 xw3"><a></a><b></b></div>
- <div class="grid r1 w w3 mw20"><a></a><b></b></div>
- <div class="grid r1 w w3 mw3"><a></a><b></b></div>
- <div class="grid r1 w xw20"><a></a><b></b></div>
- <div class="grid r1 w xw3 mw20"><a></a><b></b></div>
- <div class="grid r1 w mw20"><a></a><b></b></div>
-
- <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
- <div class="grid w r1" style="min-height:0"><a></a><b></b></div>
- <div class="grid w r1" style="height:0"><a></a><b></b></div>
- <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
- <div class="grid w r1" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r0"><a></a><b></b></div>
- <div class="grid w ra"><a></a><b></b></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r2 w w20"><a></a><b></b></div>
- <div class="grid r2 w w3"><a></a><b></b></div>
- <div class="grid r2 w xw20"><a></a><b></b></div>
- <div class="grid r2 w xw3"><a></a><b></b></div>
- <div class="grid r2 w mw20"><a></a><b></b></div>
- <div class="grid r2 w mw3"><a></a><b></b></div>
- <div class="grid r2 w w20 xw3"><a></a><b></b></div>
- <div class="grid r2 w w3 mw20"><a></a><b></b></div>
- <div class="grid r2 w w3 mw3"><a></a><b></b></div>
- <div class="grid r2 w xw20"><a></a><b></b></div>
- <div class="grid r2 w xw3 mw20"><a></a><b></b></div>
- <div class="grid r2 w mw20"><a></a><b></b></div>
-
- <div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
- <div class="grid w r2" style="min-height:0"><a></a><b></b></div>
- <div class="grid w r2" style="height:0"><a></a><b></b></div>
- <div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
- <div class="grid w r2" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r02"><a></a><b></b></div>
-
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
-
- <br clear="all">
- <br clear="all">
-
- <div class="grid r3 w w20"><a></a><b></b></div>
- <div class="grid r3 w w3"><a></a><b></b></div>
- <div class="grid r3 w xw20"><a></a><b></b></div>
- <div class="grid r3 w xw3"><a></a><b></b></div>
- <div class="grid r3 w mw20"><a></a><b></b></div>
- <div class="grid r3 w mw3"><a></a><b></b></div>
- <div class="grid r3 w w20 xw3"><a></a><b></b></div>
- <div class="grid r3 w w3 mw20"><a></a><b></b></div>
- <div class="grid r3 w w3 mw3"><a></a><b></b></div>
- <div class="grid r3 w xw20"><a></a><b></b></div>
- <div class="grid r3 w xw3 mw20"><a></a><b></b></div>
- <div class="grid r3 w mw20"><a></a><b></b></div>
-
- <div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
- <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
-
- <div class="grid w r3" style="min-height:0"><a></a><b></b></div>
- <div class="grid w r3" style="height:0"><a></a><b></b></div>
- <div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
- <div class="grid w r3" style="max-height:0"><a></a><b></b></div>
- <div class="grid w r03"><a></a><b></b></div>
-
-
- </fit> -->
-
-
-</body>
-</html>
</del></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/Source/WebCore/ChangeLog 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -1,3 +1,88 @@
</span><ins>+2016-07-25 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Implement repeat(auto-fit)
+ https://bugs.webkit.org/show_bug.cgi?id=159771
+
+ Reviewed by Darin Adler.
+
+ The auto-fit keyword works exactly as the already implemented auto-fill except that all
+ empty tracks collapse (became 0px). Absolutely positioned items do not participate on the
+ layout of the grid so they are not considered (a grid with only absolutely positioned items
+ is considered an empty grid).
+
+ Whenever a track collapses the gutters on either side do also collapse. When a collapsed
+ track's gutters collapse, they coincide exactly. If one side of a collapsed track does not
+ have a gutter then collapsing its gutters results in no gutter on either "side" of the
+ collapsed track.
+
+ In practice this means that is not possible to know the gap between 2 consecutive auto
+ repeat tracks without examining some others whenever there are collapsed tracks.
+
+ Uncommented the auto-fit cases from Mozilla tests. They have to be adapted as the reftest
+ machinery requires all the content to be rendered in the original 800x600 viewport.
+
+ Tests: fast/css-grid-layout/grid-auto-fit-columns.html
+ fast/css-grid-layout/grid-auto-fit-rows.html
+ fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html
+ fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::valueForGridTrackList): Use the newly added trackSizesForComputedStyle().
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::computeTrackBasedLogicalHeight):
+ (WebCore::RenderGrid::computeTrackSizesForDirection):
+ (WebCore::RenderGrid::isEmptyAutoRepeatTrack):
+ (WebCore::RenderGrid::gridGapForDirection): Returns the gap directly from the style.
+ (WebCore::RenderGrid::guttersSize): Computes the gap between a startLine and an
+ endLine. This method may need to inspect some other surrounding tracks to compute the gap.
+ (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+ (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+ (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+ (WebCore::RenderGrid::gridTrackSize):
+ (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
+ (WebCore::RenderGrid::computeAutoRepeatTracksCount):
+ (WebCore::RenderGrid::computeEmptyTracksForAutoRepeat): Returns a Vector with the auto
+ repeat tracks that are going to be collapsed because they're empty.
+ (WebCore::RenderGrid::placeItemsOnGrid):
+ (WebCore::RenderGrid::trackSizesForComputedStyle): Used by ComputedStyle logic to print the
+ size of tracks. Added in order to hide the actual contents of m_columnPositions and
+ m_rowPositions to the outter world.
+ (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+ (WebCore::RenderGrid::gridAreaBreadthForChild):
+ (WebCore::RenderGrid::populateGridPositionsForDirection): Added some extra code to compute
+ gaps as they cannot be directly added between tracks in case of having collapsed tracks.
+ (WebCore::RenderGrid::columnAxisOffsetForChild):
+ (WebCore::RenderGrid::rowAxisOffsetForChild):
+ (WebCore::RenderGrid::offsetBetweenTracks): Deleted.
+ * rendering/RenderGrid.h: Made some API private. Added new required methods/attributes.
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::valueForGridTrackList):
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::computeTrackBasedLogicalHeight):
+ (WebCore::RenderGrid::computeTrackSizesForDirection):
+ (WebCore::RenderGrid::hasAutoRepeatEmptyTracks):
+ (WebCore::RenderGrid::isEmptyAutoRepeatTrack):
+ (WebCore::RenderGrid::gridGapForDirection):
+ (WebCore::RenderGrid::guttersSize):
+ (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+ (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+ (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+ (WebCore::RenderGrid::gridTrackSize):
+ (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
+ (WebCore::RenderGrid::computeAutoRepeatTracksCount):
+ (WebCore::RenderGrid::computeEmptyTracksForAutoRepeat):
+ (WebCore::RenderGrid::placeItemsOnGrid):
+ (WebCore::RenderGrid::trackSizesForComputedStyle):
+ (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+ (WebCore::RenderGrid::assumedRowsSizeForOrthogonalChild):
+ (WebCore::RenderGrid::gridAreaBreadthForChild):
+ (WebCore::RenderGrid::populateGridPositionsForDirection):
+ (WebCore::RenderGrid::columnAxisOffsetForChild):
+ (WebCore::RenderGrid::rowAxisOffsetForChild):
+ (WebCore::RenderGrid::offsetBetweenTracks): Deleted.
+ * rendering/RenderGrid.h:
+
</ins><span class="cx"> 2016-07-24 Frederic Wang <fwang@igalia.com>
</span><span class="cx">
</span><span class="cx"> Move parsing of display, displaystyle and mathvariant attributes into MathML element classes
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -1136,23 +1136,15 @@
</span><span class="cx"> auto list = CSSValueList::createSpaceSeparated();
</span><span class="cx"> unsigned insertionIndex;
</span><span class="cx"> if (isRenderGrid) {
</span><del>- auto& grid = downcast<RenderGrid>(*renderer);
- const auto& trackPositions = direction == ForColumns ? grid.columnPositions() : grid.rowPositions();
- // There are at least #tracks + 1 grid lines (trackPositions). Apart from that, the grid container can generate implicit grid tracks,
- // so we'll have more trackPositions than trackSizes as the latter only contain the explicit grid.
- ASSERT(trackPositions.size() - 1 >= trackSizes.size());
</del><ins>+ auto computedTrackSizes = downcast<RenderGrid>(*renderer).trackSizesForComputedStyle(direction);
+ unsigned numTracks = computedTrackSizes.size();
</ins><span class="cx">
</span><del>- unsigned i = 0;
- LayoutUnit gutterSize = grid.guttersSize(direction, 2);
- LayoutUnit offsetBetweenTracks = grid.offsetBetweenTracks(direction);
- for (; i < trackPositions.size() - 2; ++i) {
</del><ins>+ for (unsigned i = 0; i < numTracks; ++i) {
</ins><span class="cx"> addValuesForNamedGridLinesAtIndex(collector, i, list.get());
</span><del>- list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i] - gutterSize - offsetBetweenTracks, style));
</del><ins>+ list->append(zoomAdjustedPixelValue(computedTrackSizes[i], style));
</ins><span class="cx"> }
</span><del>- // Last track line does not have any gutter or distribution offset.
- addValuesForNamedGridLinesAtIndex(collector, i, list.get());
- list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
- insertionIndex = trackPositions.size() - 1;
</del><ins>+ addValuesForNamedGridLinesAtIndex(collector, numTracks + 1, list.get());
+ insertionIndex = numTracks;
</ins><span class="cx"> } else {
</span><span class="cx"> for (unsigned i = 0; i < trackSizes.size(); ++i) {
</span><span class="cx"> addValuesForNamedGridLinesAtIndex(collector, i, list.get());
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -389,7 +389,7 @@
</span><span class="cx"> for (const auto& row : sizingData.rowTracks)
</span><span class="cx"> logicalHeight += row.baseSize();
</span><span class="cx">
</span><del>- logicalHeight += guttersSize(ForRows, sizingData.rowTracks.size());
</del><ins>+ logicalHeight += guttersSize(ForRows, 0, sizingData.rowTracks.size());
</ins><span class="cx">
</span><span class="cx"> return logicalHeight;
</span><span class="cx"> }
</span><span class="lines">@@ -397,7 +397,7 @@
</span><span class="cx"> void RenderGrid::computeTrackSizesForDirection(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit freeSpace)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(sizingData.isValidTransition(direction));
</span><del>- LayoutUnit totalGuttersSize = guttersSize(direction, direction == ForRows ? gridRowCount() : gridColumnCount());
</del><ins>+ LayoutUnit totalGuttersSize = guttersSize(direction, 0, direction == ForRows ? gridRowCount() : gridColumnCount());
</ins><span class="cx"> sizingData.setFreeSpaceForDirection(direction, freeSpace - totalGuttersSize);
</span><span class="cx"> sizingData.sizingOperation = TrackSizing;
</span><span class="cx">
</span><span class="lines">@@ -509,20 +509,78 @@
</span><span class="cx"> clearNeedsLayout();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, unsigned span) const
</del><ins>+bool RenderGrid::hasAutoRepeatEmptyTracks(GridTrackSizingDirection direction) const
</ins><span class="cx"> {
</span><del>- if (span <= 1)
- return { };
</del><ins>+ return direction == ForColumns ? !!m_autoRepeatEmptyColumns : !!m_autoRepeatEmptyRows;
+}
</ins><span class="cx">
</span><del>- const Length& trackGap = direction == ForColumns ? style().gridColumnGap() : style().gridRowGap();
- return valueForLength(trackGap, 0) * (span - 1);
</del><ins>+bool RenderGrid::isEmptyAutoRepeatTrack(GridTrackSizingDirection direction, unsigned line) const
+{
+ ASSERT(hasAutoRepeatEmptyTracks(direction));
+ return direction == ForColumns ? m_autoRepeatEmptyColumns->contains(line) : m_autoRepeatEmptyRows->contains(line);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutUnit RenderGrid::offsetBetweenTracks(GridTrackSizingDirection direction) const
</del><ins>+LayoutUnit RenderGrid::gridGapForDirection(GridTrackSizingDirection direction) const
</ins><span class="cx"> {
</span><del>- return direction == ForColumns ? m_offsetBetweenColumns : m_offsetBetweenRows;
</del><ins>+ return valueForLength(direction == ForColumns ? style().gridColumnGap() : style().gridRowGap(), LayoutUnit());
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, unsigned startLine, unsigned span) const
+{
+ if (span <= 1)
+ return { };
+
+ bool isRowAxis = direction == ForColumns;
+ LayoutUnit gap = gridGapForDirection(direction);
+
+ // Fast path, no collapsing tracks.
+ if (!hasAutoRepeatEmptyTracks(direction))
+ return gap * (span - 1);
+
+ // If there are collapsing tracks we need to be sure that gutters are properly collapsed. Apart
+ // from that, if we have a collapsed track in the edges of the span we're considering, we need
+ // to move forward (or backwards) in order to know whether the collapsed tracks reach the end of
+ // the grid (so the gap becomes 0) or there is a non empty track before that.
+
+ LayoutUnit gapAccumulator;
+ unsigned endLine = startLine + span;
+
+ for (unsigned line = startLine; line < endLine - 1; ++line) {
+ if (!isEmptyAutoRepeatTrack(direction, line))
+ gapAccumulator += gap;
+ }
+
+ // If the startLine is the start line of a collapsed track we need to go backwards till we reach
+ // a non collapsed track. If we find a non collapsed track we need to add that gap.
+ if (startLine && isEmptyAutoRepeatTrack(direction, startLine)) {
+ unsigned nonEmptyTracksBeforeStartLine = startLine;
+ auto begin = isRowAxis ? m_autoRepeatEmptyColumns->begin() : m_autoRepeatEmptyRows->begin();
+ for (auto it = begin; *it != startLine; ++it) {
+ ASSERT(nonEmptyTracksBeforeStartLine);
+ --nonEmptyTracksBeforeStartLine;
+ }
+ if (nonEmptyTracksBeforeStartLine)
+ gapAccumulator += gap;
+ }
+
+ // If the endLine is the end line of a collapsed track we need to go forward till we reach a non
+ // collapsed track. If we find a non collapsed track we need to add that gap.
+ if (isEmptyAutoRepeatTrack(direction, endLine - 1)) {
+ unsigned nonEmptyTracksAfterEndLine = (isRowAxis ? gridColumnCount() : gridRowCount()) - endLine;
+ auto currentEmptyTrack = isRowAxis ? m_autoRepeatEmptyColumns->find(endLine - 1) : m_autoRepeatEmptyRows->find(endLine - 1);
+ auto endEmptyTrack = isRowAxis ? m_autoRepeatEmptyColumns->end() : m_autoRepeatEmptyRows->end();
+ // HashSet iterators do not implement operator- so we have to manually iterate to know the number of remaining empty tracks.
+ for (auto it = ++currentEmptyTrack; it != endEmptyTrack; ++it) {
+ ASSERT(nonEmptyTracksAfterEndLine >= 1);
+ --nonEmptyTracksAfterEndLine;
+ }
+ if (nonEmptyTracksAfterEndLine)
+ gapAccumulator += gap;
+ }
+
+ return gapAccumulator;
+}
+
</ins><span class="cx"> void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
</span><span class="cx"> {
</span><span class="cx"> bool wasPopulated = !m_gridIsDirty;
</span><span class="lines">@@ -534,7 +592,7 @@
</span><span class="cx"> sizingData.sizingOperation = IntrinsicSizeComputation;
</span><span class="cx"> computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
</span><span class="cx">
</span><del>- LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
</del><ins>+ LayoutUnit totalGuttersSize = guttersSize(ForColumns, 0, sizingData.columnTracks.size());
</ins><span class="cx"> minLogicalWidth += totalGuttersSize;
</span><span class="cx"> maxLogicalWidth += totalGuttersSize;
</span><span class="cx">
</span><span class="lines">@@ -560,7 +618,7 @@
</span><span class="cx"> minHeight += scrollbarHeight;
</span><span class="cx"> maxHeight += scrollbarHeight;
</span><span class="cx">
</span><del>- LayoutUnit totalGuttersSize = guttersSize(ForRows, gridRowCount());
</del><ins>+ LayoutUnit totalGuttersSize = guttersSize(ForRows, 0, gridRowCount());
</ins><span class="cx"> minHeight += totalGuttersSize;
</span><span class="cx"> maxHeight += totalGuttersSize;
</span><span class="cx">
</span><span class="lines">@@ -608,7 +666,7 @@
</span><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><span class="cx"> if (initialFreeSpace)
</span><del>- maxSize += guttersSize(direction, direction == ForColumns ? gridColumnCount() : gridRowCount());
</del><ins>+ maxSize += guttersSize(direction, 0, direction == ForColumns ? gridColumnCount() : gridRowCount());
</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="lines">@@ -845,6 +903,10 @@
</span><span class="cx">
</span><span class="cx"> GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex, SizingOperation sizingOperation) const
</span><span class="cx"> {
</span><ins>+ // Collapse empty auto repeat tracks if auto-fit.
+ if (hasAutoRepeatEmptyTracks(direction) && isEmptyAutoRepeatTrack(direction, translatedIndex))
+ return { Length(Fixed), Length(Fixed) };
+
</ins><span class="cx"> auto& trackSize = rawGridTrackSize(direction, translatedIndex);
</span><span class="cx">
</span><span class="cx"> GridLength minTrackBreadth = trackSize.minTrackBreadth();
</span><span class="lines">@@ -1236,7 +1298,7 @@
</span><span class="cx"> if (sizingData.filteredTracks.isEmpty())
</span><span class="cx"> continue;
</span><span class="cx">
</span><del>- spanningTracksSize += guttersSize(direction, itemSpan.integerSpan());
</del><ins>+ spanningTracksSize += guttersSize(direction, itemSpan.startLine(), itemSpan.integerSpan());
</ins><span class="cx">
</span><span class="cx"> LayoutUnit extraSpace = currentItemSizeForTrackSizeComputationPhase(phase, gridItemWithSpan.gridItem(), direction, sizingData) - spanningTracksSize;
</span><span class="cx"> extraSpace = std::max<LayoutUnit>(extraSpace, 0);
</span><span class="lines">@@ -1405,7 +1467,7 @@
</span><span class="cx">
</span><span class="cx"> // Add gutters as if there where only 1 auto repeat track. Gaps between auto repeat tracks will be added later when
</span><span class="cx"> // computing the repetitions.
</span><del>- LayoutUnit gapSize = guttersSize(direction, 2);
</del><ins>+ LayoutUnit gapSize = gridGapForDirection(direction);
</ins><span class="cx"> tracksSize += gapSize * trackSizes.size();
</span><span class="cx">
</span><span class="cx"> LayoutUnit freeSpace = availableSize.value() - tracksSize;
</span><span class="lines">@@ -1423,6 +1485,37 @@
</span><span class="cx"> return repetitions;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+
+std::unique_ptr<RenderGrid::OrderedTrackIndexSet> RenderGrid::computeEmptyTracksForAutoRepeat(GridTrackSizingDirection direction) const
+{
+ bool isRowAxis = direction == ForColumns;
+ if ((isRowAxis && style().gridAutoRepeatColumnsType() != AutoFit)
+ || (!isRowAxis && style().gridAutoRepeatRowsType() != AutoFit))
+ return nullptr;
+
+ std::unique_ptr<OrderedTrackIndexSet> emptyTrackIndexes;
+ size_t insertionPoint = isRowAxis ? style().gridAutoRepeatColumnsInsertionPoint() : style().gridAutoRepeatRowsInsertionPoint();
+ size_t repetitions = autoRepeatCountForDirection(direction);
+ size_t firstAutoRepeatTrack = insertionPoint + std::abs(isRowAxis ? m_smallestColumnStart : m_smallestRowStart);
+ size_t lastAutoRepeatTrack = firstAutoRepeatTrack + repetitions;
+
+ if (m_gridItemArea.isEmpty()) {
+ emptyTrackIndexes = std::make_unique<OrderedTrackIndexSet>();
+ for (unsigned trackIndex = firstAutoRepeatTrack; trackIndex < lastAutoRepeatTrack; ++trackIndex)
+ emptyTrackIndexes->add(trackIndex);
+ } else {
+ for (unsigned trackIndex = firstAutoRepeatTrack; trackIndex < lastAutoRepeatTrack; ++trackIndex) {
+ GridIterator iterator(m_grid, direction, trackIndex);
+ if (!iterator.nextGridItem()) {
+ if (!emptyTrackIndexes)
+ emptyTrackIndexes = std::make_unique<OrderedTrackIndexSet>();
+ emptyTrackIndexes->add(trackIndex);
+ }
+ }
+ }
+ return emptyTrackIndexes;
+}
+
</ins><span class="cx"> void RenderGrid::placeItemsOnGrid()
</span><span class="cx"> {
</span><span class="cx"> ASSERT(m_gridIsDirty);
</span><span class="lines">@@ -1468,6 +1561,10 @@
</span><span class="cx"> placeSpecifiedMajorAxisItemsOnGrid(specifiedMajorAxisAutoGridItems);
</span><span class="cx"> placeAutoMajorAxisItemsOnGrid(autoMajorAxisAutoGridItems);
</span><span class="cx">
</span><ins>+ // Compute collapsible tracks for auto-fit.
+ m_autoRepeatEmptyColumns = computeEmptyTracksForAutoRepeat(ForColumns);
+ m_autoRepeatEmptyRows = computeEmptyTracksForAutoRepeat(ForRows);
+
</ins><span class="cx"> #if ENABLE(ASSERT)
</span><span class="cx"> for (RenderBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {
</span><span class="cx"> if (child->isOutOfFlowPositioned())
</span><span class="lines">@@ -1647,6 +1744,45 @@
</span><span class="cx"> m_gridIsDirty = true;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+Vector<LayoutUnit> RenderGrid::trackSizesForComputedStyle(GridTrackSizingDirection direction) const
+{
+ bool isRowAxis = direction == ForColumns;
+ auto& positions = isRowAxis ? m_columnPositions : m_rowPositions;
+ size_t numPositions = positions.size();
+ LayoutUnit offsetBetweenTracks = isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
+
+ Vector<LayoutUnit> tracks;
+ if (numPositions < 2)
+ return tracks;
+
+ bool hasCollapsedTracks = hasAutoRepeatEmptyTracks(direction);
+ LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction) : LayoutUnit();
+ tracks.reserveCapacity(numPositions - 1);
+ for (size_t i = 0; i < numPositions - 2; ++i)
+ tracks.append(positions[i + 1] - positions[i] - offsetBetweenTracks - gap);
+ tracks.append(positions[numPositions - 1] - positions[numPositions - 2]);
+
+ if (!hasCollapsedTracks)
+ return tracks;
+
+ size_t remainingEmptyTracks = isRowAxis ? m_autoRepeatEmptyColumns->size() : m_autoRepeatEmptyRows->size();
+ size_t lastLine = tracks.size();
+ gap = gridGapForDirection(direction);
+ for (size_t i = 1; i < lastLine; ++i) {
+ if (isEmptyAutoRepeatTrack(direction, i - 1))
+ --remainingEmptyTracks;
+ else {
+ // Remove the gap between consecutive non empty tracks. Remove it also just once for an
+ // arbitrary number of empty tracks between two non empty ones.
+ bool allRemainingTracksAreEmpty = remainingEmptyTracks == (lastLine - i);
+ if (!allRemainingTracksAreEmpty || !isEmptyAutoRepeatTrack(direction, i))
+ tracks[i - 1] -= gap;
+ }
+ }
+
+ return tracks;
+}
+
</ins><span class="cx"> static const StyleContentAlignmentData& contentAlignmentNormalBehaviorGrid()
</span><span class="cx"> {
</span><span class="cx"> static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};
</span><span class="lines">@@ -1823,7 +1959,7 @@
</span><span class="cx">
</span><span class="cx"> // These vectors store line positions including gaps, but we shouldn't consider them for the edges of the grid.
</span><span class="cx"> if (endLine > 0 && endLine < lastLine) {
</span><del>- end -= guttersSize(direction, 2);
</del><ins>+ end -= guttersSize(direction, endLine - 1, 2);
</ins><span class="cx"> end -= isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -1840,7 +1976,7 @@
</span><span class="cx"> offset = translateRTLCoordinate(m_columnPositions[endLine]) - borderLogicalLeft();
</span><span class="cx">
</span><span class="cx"> if (endLine > 0 && endLine < lastLine) {
</span><del>- offset += guttersSize(direction, 2);
</del><ins>+ offset += guttersSize(direction, endLine - 1, 2);
</ins><span class="cx"> offset += isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="lines">@@ -1874,7 +2010,7 @@
</span><span class="cx"> gridAreaSize += valueForLength(maxTrackSize.length(), containingBlockAvailableSize);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- gridAreaSize += guttersSize(ForRows, span.integerSpan());
</del><ins>+ gridAreaSize += guttersSize(ForRows, span.startLine(), span.integerSpan());
</ins><span class="cx">
</span><span class="cx"> return gridAreaIsIndefinite ? std::max(child.maxPreferredLogicalWidth(), gridAreaSize) : gridAreaSize;
</span><span class="cx"> }
</span><span class="lines">@@ -1893,7 +2029,7 @@
</span><span class="cx"> for (auto trackPosition : span)
</span><span class="cx"> gridAreaBreadth += tracks[trackPosition].baseSize();
</span><span class="cx">
</span><del>- gridAreaBreadth += guttersSize(direction, span.integerSpan());
</del><ins>+ gridAreaBreadth += guttersSize(direction, span.startLine(), span.integerSpan());
</ins><span class="cx">
</span><span class="cx"> return gridAreaBreadth;
</span><span class="cx"> }
</span><span class="lines">@@ -1929,16 +2065,40 @@
</span><span class="cx"> unsigned lastLine = numberOfLines - 1;
</span><span class="cx">
</span><span class="cx"> ContentAlignmentData offset = computeContentPositionAndDistributionOffset(direction, sizingData.freeSpaceForDirection(direction).value(), numberOfTracks);
</span><del>- LayoutUnit trackGap = guttersSize(direction, 2);
</del><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 class="cx"> positions[0] = borderAndPadding + offset.positionOffset;
</span><span class="cx"> if (numberOfLines > 1) {
</span><ins>+ // If we have collapsed tracks we just ignore gaps here and add them later as we might not
+ // compute the gap between two consecutive tracks without examining the surrounding ones.
+ bool hasCollapsedTracks = hasAutoRepeatEmptyTracks(direction);
+ LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction) : LayoutUnit();
</ins><span class="cx"> unsigned nextToLastLine = numberOfLines - 2;
</span><span class="cx"> for (unsigned i = 0; i < nextToLastLine; ++i)
</span><del>- positions[i + 1] = positions[i] + offset.distributionOffset + tracks[i].baseSize() + trackGap;
</del><ins>+ positions[i + 1] = positions[i] + offset.distributionOffset + tracks[i].baseSize() + gap;
</ins><span class="cx"> positions[lastLine] = positions[nextToLastLine] + tracks[nextToLastLine].baseSize();
</span><ins>+
+ // Adjust collapsed gaps. Collapsed tracks cause the surrounding gutters to collapse (they
+ // coincide exactly) except on the edges of the grid where they become 0.
+ if (hasCollapsedTracks) {
+ gap = gridGapForDirection(direction);
+ unsigned remainingEmptyTracks = isRowAxis ? m_autoRepeatEmptyColumns->size() : m_autoRepeatEmptyRows->size();
+ LayoutUnit gapAccumulator;
+ for (unsigned i = 1; i < lastLine; ++i) {
+ if (isEmptyAutoRepeatTrack(direction, i - 1))
+ --remainingEmptyTracks;
+ else {
+ // Add gap between consecutive non empty tracks. Add it also just once for an
+ // arbitrary number of empty tracks between two non empty ones.
+ bool allRemainingTracksAreEmpty = remainingEmptyTracks == (lastLine - i);
+ if (!allRemainingTracksAreEmpty || !isEmptyAutoRepeatTrack(direction, i))
+ gapAccumulator += gap;
+ }
+ positions[i] += gapAccumulator;
+ }
+ positions[lastLine] += gapAccumulator;
+ }
</ins><span class="cx"> }
</span><span class="cx"> auto& offsetBetweenTracks = isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
</span><span class="cx"> offsetBetweenTracks = offset.distributionOffset;
</span><span class="lines">@@ -2202,7 +2362,7 @@
</span><span class="cx"> // so we need to subtract them to get the actual end position for a given row
</span><span class="cx"> // (this does not have to be done for the last track as there are no more m_rowPositions after it).
</span><span class="cx"> if (childEndLine < m_rowPositions.size() - 1)
</span><del>- endOfRow -= guttersSize(ForRows, 2) + m_offsetBetweenRows;
</del><ins>+ endOfRow -= gridGapForDirection(ForRows) + m_offsetBetweenRows;
</ins><span class="cx"> LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
</span><span class="cx"> auto overflow = child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).overflow();
</span><span class="cx"> LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfRow - startOfRow, childBreadth);
</span><span class="lines">@@ -2235,7 +2395,7 @@
</span><span class="cx"> // so we need to subtract them to get the actual end position for a given column
</span><span class="cx"> // (this does not have to be done for the last track as there are no more m_columnPositions after it).
</span><span class="cx"> if (childEndLine < m_columnPositions.size() - 1)
</span><del>- endOfColumn -= guttersSize(ForColumns, 2) + m_offsetBetweenColumns;
</del><ins>+ endOfColumn -= gridGapForDirection(ForColumns) + m_offsetBetweenColumns;
</ins><span class="cx"> LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
</span><span class="cx"> auto overflow = child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).overflow();
</span><span class="cx"> LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfColumn - startOfColumn, childBreadth);
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (203679 => 203680)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2016-07-25 07:18:47 UTC (rev 203679)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2016-07-25 08:57:06 UTC (rev 203680)
</span><span class="lines">@@ -57,12 +57,11 @@
</span><span class="cx"> bool avoidsFloats() const override { return true; }
</span><span class="cx"> bool canDropAnonymousBlockChild() const override { return false; }
</span><span class="cx">
</span><ins>+ Vector<LayoutUnit> trackSizesForComputedStyle(GridTrackSizingDirection) const;
+
</ins><span class="cx"> const Vector<LayoutUnit>& columnPositions() const { return m_columnPositions; }
</span><span class="cx"> const Vector<LayoutUnit>& rowPositions() const { return m_rowPositions; }
</span><span class="cx">
</span><del>- LayoutUnit guttersSize(GridTrackSizingDirection, unsigned span) const;
- LayoutUnit offsetBetweenTracks(GridTrackSizingDirection) const;
-
</del><span class="cx"> size_t autoRepeatCountForDirection(GridTrackSizingDirection) const;
</span><span class="cx">
</span><span class="cx"> private:
</span><span class="lines">@@ -85,6 +84,12 @@
</span><span class="cx">
</span><span class="cx"> unsigned computeAutoRepeatTracksCount(GridTrackSizingDirection) const;
</span><span class="cx">
</span><ins>+ typedef ListHashSet<size_t> OrderedTrackIndexSet;
+ std::unique_ptr<OrderedTrackIndexSet> computeEmptyTracksForAutoRepeat(GridTrackSizingDirection) const;
+
+ bool hasAutoRepeatEmptyTracks(GridTrackSizingDirection) const;
+ bool isEmptyAutoRepeatTrack(GridTrackSizingDirection, unsigned track) const;
+
</ins><span class="cx"> void placeItemsOnGrid();
</span><span class="cx"> void populateExplicitGridAndOrderIterator();
</span><span class="cx"> std::unique_ptr<GridArea> createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(const RenderBox&, GridTrackSizingDirection, const GridSpan&) const;
</span><span class="lines">@@ -177,6 +182,9 @@
</span><span class="cx"> bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&);
</span><span class="cx"> #endif
</span><span class="cx">
</span><ins>+ LayoutUnit gridGapForDirection(GridTrackSizingDirection) const;
+ LayoutUnit guttersSize(GridTrackSizingDirection, unsigned startLine, unsigned span) const;
+
</ins><span class="cx"> bool spanningItemCrossesFlexibleSizedTracks(const GridSpan&, GridTrackSizingDirection, SizingOperation) const;
</span><span class="cx">
</span><span class="cx"> unsigned gridColumnCount() const;
</span><span class="lines">@@ -207,6 +215,9 @@
</span><span class="cx"> bool m_hasAnyOrthogonalChild;
</span><span class="cx">
</span><span class="cx"> bool m_gridIsDirty { true };
</span><ins>+
+ std::unique_ptr<OrderedTrackIndexSet> m_autoRepeatEmptyColumns { nullptr };
+ std::unique_ptr<OrderedTrackIndexSet> m_autoRepeatEmptyRows { nullptr };
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> size_t inline RenderGrid::autoRepeatCountForDirection(GridTrackSizingDirection direction) const
</span></span></pre>
</div>
</div>
</body>
</html>