<!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>[200618] 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/200618">200618</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2016-05-10 00:46:08 -0700 (Tue, 10 May 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Implement auto-repeat computation
https://bugs.webkit.org/show_bug.cgi?id=157473
Reviewed by Darin Adler.
Source/WebCore:
We added support for parsing and style for the new auto-repeat syntax. This patch actually
implements the feature by computing the number of auto-repeat tracks that will be part of
the explicit grid depending on the available size on the corresponding axis.
Note that we still do not drop the empty tracks, i.e., auto-fit will work exactly as
auto-fill until the empty track removal is implemented.
Some test results are not totally correct yet because we need to add the line names to the
computed style. As that requires a rather large piece of code it will be done in a follow up
patch. Track sizes are correct though.
Tests: fast/css-grid-layout/grid-auto-fill-columns.html
fast/css-grid-layout/grid-auto-fill-rows.html
fast/css-grid-layout/grid-change-auto-repeat-tracks.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html
* css/CSSParser.cpp:
(WebCore::CSSParser::parseGridTrackRepeatFunction): Add the CSSAutoRepeatValue directly
instead of adding the track size.
* css/StyleBuilderCustom.h: Store the insertion point in style.
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::guttersSize): Replaced size_t by unsigned.
(WebCore::RenderGrid::rawGridTrackSize): New function which retrieves the track size from
either explicit (including auto-repeat tracks) or implicit tracks.
(WebCore::RenderGrid::gridTrackSize): Use rawGridTrackSize().
(WebCore::RenderGrid::computeAutoRepeatTracksCount): This is the core of the patch. This
method computes the number of auto-repeat tracks that fits on the available size for a given
axis (or 1 if that's indefinite).
* rendering/RenderGrid.h:
LayoutTests:
Apart from some home made tests I'm importing 5 patches from Mozilla's test suite as they
perfectly test the behavior of auto-repeat with positioned items. I've commented auto-fit
tests as that feature isn't implemented yet.
* fast/css-grid-layout/grid-auto-fill-columns-expected.txt: Added.
* fast/css-grid-layout/grid-auto-fill-columns.html: Added.
* fast/css-grid-layout/grid-auto-fill-rows-expected.txt: Added.
* fast/css-grid-layout/grid-auto-fill-rows.html: Added.
* fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt: Added.
* fast/css-grid-layout/grid-change-auto-repeat-tracks.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/mozilla/grid-repeat-auto-fill-fit-001-expected.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html: Added.</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="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSParsercpp">trunk/Source/WebCore/css/CSSParser.cpp</a></li>
<li><a href="#trunkSourceWebCorecssStyleBuilderCustomh">trunk/Source/WebCore/css/StyleBuilderCustom.h</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="#trunkLayoutTestsfastcssgridlayoutgridautofillcolumnsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautofillcolumnshtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautofillrowsexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridautofillrowshtml">trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridchangeautorepeattracksexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridchangeautorepeattrackshtml">trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html</a></li>
<li>trunk/LayoutTests/fast/css-grid-layout/mozilla/</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="#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 (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/LayoutTests/ChangeLog 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -1,3 +1,33 @@
</span><ins>+2016-05-09 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Implement auto-repeat computation
+ https://bugs.webkit.org/show_bug.cgi?id=157473
+
+ Reviewed by Darin Adler.
+
+ Apart from some home made tests I'm importing 5 patches from Mozilla's test suite as they
+ perfectly test the behavior of auto-repeat with positioned items. I've commented auto-fit
+ tests as that feature isn't implemented yet.
+
+ * fast/css-grid-layout/grid-auto-fill-columns-expected.txt: Added.
+ * fast/css-grid-layout/grid-auto-fill-columns.html: Added.
+ * fast/css-grid-layout/grid-auto-fill-rows-expected.txt: Added.
+ * fast/css-grid-layout/grid-auto-fill-rows.html: Added.
+ * fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt: Added.
+ * fast/css-grid-layout/grid-change-auto-repeat-tracks.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/mozilla/grid-repeat-auto-fill-fit-001-expected.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html: Added.
+ * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html: Added.
+
</ins><span class="cx"> 2016-05-09 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: CRASH under JSC::DebuggerCallFrame::thisValue when hitting breakpoint
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofillcolumnsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns-expected.txt (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns-expected.txt 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+This test checks that repeat(auto-fill, ) 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 class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofillcolumnshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,141 @@
</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-fill, 30px [autobar]); }
+.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fill, [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-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fill, [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')">
+
+<p>This test checks that repeat(auto-fill, ) 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="100" 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="377" 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="60" 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="130" 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="175" 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="160" 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 class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofillrowsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows-expected.txt (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows-expected.txt 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+This test checks that repeat(auto-fill, ) 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 class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridautofillrowshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,145 @@
</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-fill, 30px [autobar]); }
+.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fill, [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-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fill, [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')">
+
+<p>This test checks that repeat(auto-fill, ) 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="100" 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="377" 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="60" 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="130" 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="175" 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="160" 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 class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridchangeautorepeattracksexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,25 @@
</span><ins>+This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.
+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 class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridchangeautorepeattrackshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,136 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ grid-auto-rows: 25px;
+ grid-auto-columns: 25px;
+ margin-bottom: 10px;
+}
+
+.fixedWidth {
+ width: 50px;
+ grid-auto-flow: row;
+ grid-template-columns: repeat(auto-fill, 25px);
+}
+
+.fixedHeight {
+ width: 100px;
+ height: 50px;
+ grid-auto-flow: column;
+ grid-template-rows: repeat(auto-fill, 25px);
+}
+
+#i1, #i21 {
+ grid-row: auto;
+ grid-column: 1;
+ background-color: orange;
+}
+
+#i2, #i22 {
+ grid-row: 1;
+ grid-column: auto;
+ background-color: green;
+}
+
+#i3, #i23 {
+ grid-row: auto;
+ grid-column: auto;
+ background-color: blue;
+}
+</style>
+<!-- Explicitly not using layout-th because it does not allow multiple checkLayout(). -->
+<script src="../../resources/check-layout.js"></script>
+<script>
+function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
+{
+ var gridElement = document.getElementById(id);
+ gridElement.style.gridTemplateRows = gridTemplateRows;
+ gridElement.style.gridTemplateColumns = gridTemplateColumns;
+}
+
+function setGridSize(id, width, height)
+{
+ var gridElement = document.getElementById(id);
+ gridElement.style.width = width;
+ gridElement.style.height = height;
+}
+
+function testGridTemplates(firstGridItemData, secondGridItemData, thirdGridItemData)
+{
+ var i1 = document.getElementById(firstGridItemData.id);
+ i1.setAttribute("data-expected-width", firstGridItemData.width);
+ i1.setAttribute("data-expected-height", firstGridItemData.height);
+ i1.setAttribute("data-offset-x", firstGridItemData.x);
+ i1.setAttribute("data-offset-y", firstGridItemData.y);
+
+ var i2 = document.getElementById(secondGridItemData.id);
+ i2.setAttribute("data-expected-width", secondGridItemData.width);
+ i2.setAttribute("data-expected-height", secondGridItemData.height);
+ i2.setAttribute("data-offset-x", secondGridItemData.x);
+ i2.setAttribute("data-offset-y", secondGridItemData.y);
+
+ var i3 = document.getElementById(thirdGridItemData.id);
+ i3.setAttribute("data-expected-width", thirdGridItemData.width);
+ i3.setAttribute("data-expected-height", thirdGridItemData.height);
+ i3.setAttribute("data-offset-x", thirdGridItemData.x);
+ i3.setAttribute("data-offset-y", thirdGridItemData.y);
+
+ checkLayout(".grid");
+}
+
+function testChangingGridDefinitions()
+{
+ // Test changing the number of auto-repeat tracks.
+ setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
+ testGridTemplates({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
+ setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
+ testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '25', 'y': '25' });
+
+ setGridTemplate('grid1', 'none', 'none');
+ testGridTemplates({ 'id': 'i1', 'width': '25', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '25', 'height': '25', 'x': '0', 'y': '50' });
+ setGridTemplate('grid2', 'none', 'none');
+ testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '25', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '25', 'x': '50', 'y': '0' });
+
+ setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
+ testGridTemplates({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '20', 'height': '25', 'x': '5', 'y': '25' });
+ setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
+ testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '20', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '20', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '20', 'x': '25', 'y': '20' });
+
+ setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
+ testGridTemplates({ 'id': 'i1', 'width': '5', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '5', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '22', 'height': '25', 'x': '5', 'y': '25' });
+ setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
+ testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '18', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '18', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '18', 'x': '25', 'y': '18' });
+
+ setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
+ testGridTemplates({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '0', 'y': '50' });
+ setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
+ testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '45', 'x': '50', 'y': '0' });
+
+ // Test changing the size of the grid.
+ setGridSize('grid1', '100px', 'auto');
+ testGridTemplates({ 'id': 'i1', 'width': '45', 'height': '25', 'x': '0', 'y': '25' }, { 'id': 'i2', 'width': '45', 'height': '25', 'x': '0', 'y': '0' }, { 'id': 'i3', 'width': '45', 'height': '25', 'x': '45', 'y': '25' });
+ setGridSize('grid2', '100px', '100px');
+ testGridTemplates({ 'id': 'i21', 'width': '25', 'height': '45', 'x': '0', 'y': '0' }, { 'id': 'i22', 'width': '25', 'height': '45', 'x': '25', 'y': '0' }, { 'id': 'i23', 'width': '25', 'height': '45', 'x': '25', 'y': '45' });
+}
+
+window.addEventListener("load", testChangingGridDefinitions, false);
+</script>
+
+<div>This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.</div>
+<div id="log"></div>
+
+<div style="position: relative">
+ <div id="grid1" class="grid fixedWidth">
+ <div id="i1"></div>
+ <div id="i2"></div>
+ <div id="i3"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div id="grid2" class="grid fixedHeight">
+ <div id="i21"></div>
+ <div id="i22"></div>
+ <div id="i23"></div>
+ </div>
+</div>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/grid-change-auto-repeat-tracks.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsetexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -4,30 +4,34 @@
</span><span class="cx">
</span><span class="cx">
</span><span class="cx"> Test auto-repeat syntax.
</span><del>-PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 10px"
-PASS element.style.gridTemplateColumns is "[foo bar] 10px"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [foo bar]"
-PASS element.style.gridTemplateRows is "2em [foo bar]"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 800px"
-PASS element.style.gridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 20px [bar]"
-PASS element.style.gridTemplateRows is "[foo] minmax(2em, -webkit-max-content) [bar]"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "100px 20px 20px"
-PASS element.style.gridTemplateColumns is "minmax(10px, 100px) 20px 20px"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "70px 20px [bar foo] 10px [foo] 10px"
-PASS element.style.gridTemplateRows is "70px minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 10px"
-PASS element.style.gridTemplateColumns is "[foo bar] 10px"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [foo bar]"
-PASS element.style.gridTemplateRows is "2em [foo bar]"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 800px"
-PASS element.style.gridTemplateColumns is "[foo bar] minmax(10px, 1fr)"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 20px [bar]"
-PASS element.style.gridTemplateRows is "[foo] minmax(2em, -webkit-max-content) [bar]"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px 20px 20px"
-PASS element.style.gridTemplateColumns is "minmax(10px, -webkit-min-content) 20px 20px"
-PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "60px 20px [bar foo] 10px [foo] 10px"
-PASS element.style.gridTemplateRows is "10% minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em"
</del><ins>+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be [foo bar] 200px [foo bar] 200px [foo bar] 200px [foo bar] 200px. Was 200px 200px 200px 200px.
+PASS element.style.gridTemplateColumns is "repeat(auto-fill, [foo bar] 200px)"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be 200px [foo bar] 200px [foo bar] 200px [foo bar]. Was 200px 200px 200px.
+PASS element.style.gridTemplateRows is "repeat(auto-fill, 20em [foo bar])"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be [foo bar] 400px [foo bar] 400px. Was 400px 400px.
+PASS element.style.gridTemplateColumns is "repeat(auto-fill, [foo bar] minmax(300px, 1fr))"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be [foo] 175px [bar foo] 175px [bar foo] 175px [bar]. Was 175px 175px 175px.
+PASS element.style.gridTemplateRows is "repeat(auto-fill, [foo] minmax(175px, -webkit-max-content) [bar])"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "100px 100px 100px 250px 250px"
+PASS element.style.gridTemplateColumns is "repeat(auto-fill, minmax(50px, 100px)) 250px 250px"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be 450px 50px [bar] 50px [bar foo] 10px [foo] 10px. Was 450px 50px [foo] 50px [foo] 10px 10px.
+PASS element.style.gridTemplateRows is "450px repeat(auto-fill, minmax(5em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be [start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]. Was [start] 80px 200px [end] 200px 200px.
+PASS element.style.gridTemplateColumns is "[start] 10% repeat(auto-fill, [foo bar] 200px) [end]"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be 75px [prev] 200px [foo bar next] 150px [last end]. Was 75px [prev] 200px [next] 150px [last end].
+PASS element.style.gridTemplateRows is "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end]"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be none. Was 150px 150px 150px 150px 150px.
+PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] 150px)"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be none. Was 240px 240px.
+PASS element.style.gridTemplateRows is "repeat(auto-fit, 24em [foo bar])"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be none. Was 400px 400px.
+PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] minmax(270px, 1fr))"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be none. Was 200px 200px 200px.
+PASS element.style.gridTemplateRows is "repeat(auto-fit, [foo] minmax(20em, -webkit-max-content) [bar])"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be 20px 20px. Was 300px 300px 20px 20px.
+PASS element.style.gridTemplateColumns is "repeat(auto-fit, minmax(300px, -webkit-min-content)) 20px 20px"
+FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be 60px [foo] 10px [foo] 10px. Was 60px 300px [foo] 10px [foo] 10px.
+PASS element.style.gridTemplateRows is "10% repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em"
</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></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridelementautorepeatgetsethtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -1,20 +1,23 @@
</span><span class="cx"> <!DOCTYPE html>
</span><del>-<link href="resources/grid.css" rel="stylesheet">
</del><span class="cx"> <script src="../../resources/js-test.js"></script>
</span><span class="cx"> <script src="resources/grid-definitions-parsing-utils.js"></script>
</span><ins>+<style>
+body { font-size: 10px; }
+</style>
</ins><span class="cx">
</span><del>-<body>
</del><ins>+<body style="width: 800px; height: 600px;">
</ins><span class="cx"> </body>
</span><span class="cx"> <script>
</span><span class="cx"> description('Test that setting/getting grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected');
</span><span class="cx">
</span><span class="cx"> debug("Test auto-repeat syntax.");
</span><del>- testGridTemplatesSetJSValues("repeat(auto-fill, [foo bar] 10px)", "repeat(auto-fill, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");
- testGridTemplatesSetJSValues("repeat(auto-fill, [foo bar] minmax(10px, 1fr))", "repeat(auto-fill, [foo] minmax(2em, -webkit-max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, -webkit-max-content) [bar]");
- testGridTemplatesSetJSValues("repeat(auto-fill, minmax(10px, 100px)) repeat(2, 20px)", "repeat(1, 70px) repeat(auto-fill, minmax(2em, -webkit-max-content) [bar]) repeat(2, [foo] 1em)", "100px 20px 20px", "70px 20px [bar foo] 10px [foo] 10px", "minmax(10px, 100px) 20px 20px", "70px minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em");
- testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] 10px)", "repeat(auto-fit, 2em [foo bar])", "[foo bar] 10px", "20px [foo bar]", "[foo bar] 10px", "2em [foo bar]");
- testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] minmax(10px, 1fr))", "repeat(auto-fit, [foo] minmax(2em, -webkit-max-content) [bar])", "[foo bar] 800px", "[foo] 20px [bar]", "[foo bar] minmax(10px, 1fr)", "[foo] minmax(2em, -webkit-max-content) [bar]");
- testGridTemplatesSetJSValues("repeat(auto-fit, minmax(10px, -webkit-min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(2em, -webkit-max-content) [bar]) repeat(2, [foo] 1em)", "10px 20px 20px", "60px 20px [bar foo] 10px [foo] 10px", "minmax(10px, -webkit-min-content) 20px 20px", "10% minmax(2em, -webkit-max-content) [bar] [foo] 1em [foo] 1em");
</del><ins>+ testGridTemplatesSetJSValues("repeat(auto-fill, [foo bar] 200px)", "repeat(auto-fill, 20em [foo bar])", "[foo bar] 200px [foo bar] 200px [foo bar] 200px [foo bar] 200px", "200px [foo bar] 200px [foo bar] 200px [foo bar]");
+ 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]");
+ testGridTemplatesSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repeat(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(5em, -webkit-max-content) [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(5em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em");
+ 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]");
+ 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");
</ins><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Test invalid repeat syntax.");
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit001expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,193 @@
</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; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ position: relative;
+ border: 1px solid;
+ grid-auto-rows: 10px;
+ grid-gap: 2px;
+ margin-bottom: 2px;
+ padding-right: 3px;
+}
+.r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; }
+.r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
+.r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { width: 100px; }
+.w50 { width: 50px; }
+.w80 { width: 80px; }
+.mw100 { min-width: 100px; }
+.mw50 { min-width: 50px; }
+.mw80 { min-width: 80px; }
+.xw100 { max-width: 100px; }
+.xw50 { max-width: 50px; }
+.xw80 { max-width: 80px; }
+.float { float: left; }
+
+x {
+ height: 10px;
+ background: grey;
+}
+a {
+ position: absolute;
+ left:0; right:0; top:0; height: 3px;
+ background: black;
+ grid-column: c / c -1;
+}
+b {
+ position: absolute;
+ left:0; right:0; bottom:0; height: 3px;
+ background: brown;
+ grid-column: auto / c -1;
+}
+
+x:first-child {
+ background: lime;
+}
+x:last-child {
+ background: blue;
+}
+
+fill,fit {
+ float: left;
+ width: 400px;
+}
+
+.r1.c0 { grid-template-columns: none;}
+.r1.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d];}
+.r1.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d]; }
+.r1.c4 { grid-template-columns: [a] repeat(4, [b] 20px [c]) [d]; }
+.r1.c18 { grid-template-columns: [a] repeat(18, [b] 20px [c]) [d]; }
+
+.r2.c16 { grid-template-columns: [a] repeat(16, [b] 20px [c]) [d] 30px [e]; }
+.r2.c0 { grid-template-columns: 30px [e];}
+.r2.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r2.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
+
+.r3.c15 { grid-template-columns: [a] repeat(15, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r3.c0 { grid-template-columns: [a d] 30px [e] 30px [f]; }
+.r3.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+</style>
+</head>
+<body>
+
+<fill>
+
+<div class="grid r1 c18"><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 c4"><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 c4"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw100 w50 float c4"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 c16"><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>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 c15"><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>
+
+</fill>
+
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit001html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,179 @@
</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-001-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ position: relative;
+ border: 1px solid;
+ grid-auto-rows: 10px;
+ grid-gap: 2px;
+ margin-bottom: 2px;
+ padding-right: 3px;
+}
+.r1 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r3 { grid-template-columns: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r1 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r3 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { width: 100px; }
+.w50 { width: 50px; }
+.w80 { width: 80px; }
+.mw100 { min-width: 100px; }
+.mw50 { min-width: 50px; }
+.mw80 { min-width: 80px; }
+.xw100 { max-width: 100px; }
+.xw50 { max-width: 50px; }
+.xw80 { max-width: 80px; }
+.float { float: left; }
+
+x {
+ height: 10px;
+ background: grey;
+}
+a {
+ position: absolute;
+ left:0; right:0; top:0; height: 3px;
+ background: black;
+ grid-column: c / c -1;
+}
+b {
+ position: absolute;
+ left:0; right:0; bottom:0; height: 3px;
+ background: brown;
+ grid-column: auto / c -1;
+}
+
+x:first-child {
+ background: lime;
+}
+x:last-child {
+ background: blue;
+}
+
+fill,fit {
+ float: left;
+ width: 400px;
+}
+</style>
+</head>
+<body>
+
+<fill>
+
+<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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+</fill>
+
+<!-- FIXME: uncomment these tests when enabling auto-fit. -->
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit002expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,190 @@
</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; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 1px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: row;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+}
+.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; }
+.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; }
+.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; }
+
+.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
+.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
+
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+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 .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+ width: 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"><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 r14 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 r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+</fill>
+
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit002html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,183 @@
</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-002-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 1px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: row;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+}
+.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]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+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 .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+ width: 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"><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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+</fill>
+
+<!-- FIXME: uncomment these tests when enabling auto-fit. -->
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit003expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,191 @@
</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; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 1px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+}
+/* Original Mozilla tests set a fixed width for their grids, that's due to a bug they have computing
+ repetitions with indefinite sizes. */
+.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; /*width:34px;*/ }
+.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; /*width:34px;*/ }
+.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; /*width:34px;*/ }
+.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; /*width:34px;*/ }
+
+.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; /*width:22px;*/ }
+.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; /*width:22px;*/ }
+.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; /*width:22px;*/ }
+
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; /*width:10px;*/ }
+.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; /*width:10px;*/ }
+.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; /*width:10px;*/ }
+
+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 .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+ width: 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"><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 r14 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 r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit003html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,182 @@
</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-003-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 1px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+}
+.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]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+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 .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+x {
+ width: 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"><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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<!-- FIXME: uncomment these tests when enabling auto-fit. -->
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit004expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,193 @@
</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; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 1px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+}
+/* Original Mozilla tests set a fixed width for their grids, that's due to a bug they have computing
+ repetitions with indefinite sizes. */
+.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; /*width:34px;*/ }
+.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; /*width:34px;*/ }
+.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; /*width:34px;*/ }
+.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; /*width:34px;*/ }
+
+.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; /*width:22px;*/ }
+.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; /*width:22px;*/ }
+.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; /*width:22px;*/ }
+
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; /*width:10px;*/ }
+.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; /*width:10px;*/ }
+.r33 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; /*width:10px;*/ }
+
+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 .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+.float { float: left; }
+
+wrap { float:left; height: 100px; }
+
+x {
+ width: 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>
+
+<wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 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 r14 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r14 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r23 float w100"><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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit004html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,184 @@
</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-004-ref.html">
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+ display: grid;
+ float: left;
+ position: relative;
+ border: 1px solid;
+ grid-auto-columns: 10px;
+ grid-auto-rows: 10px;
+ grid-auto-flow: column;
+ grid-gap: 2px;
+ margin-right: 2px;
+ padding-top: 3px;
+}
+.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]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+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 .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+
+.w100 { height: 100%; }
+.w50 { height: 50%; }
+.w80 { height: 80%; }
+.mw100 { min-height: 100%; }
+.mw50 { min-height: 50%; }
+.mw80 { min-height: 80%; }
+.xw100 { max-height: 100%; }
+.xw50 { max-height: 50%; }
+.xw80 { max-height: 80%; }
+.float { float: left; }
+
+wrap { float:left; height: 100px; }
+
+x {
+ width: 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>
+
+<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>
+
+<br clear="all">
+<br clear="all">
+
+<wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap>
+<wrap><div class="grid r2 float w100"><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>
+
+<br clear="all">
+<br clear="all">
+
+<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>
+
+</fill>
+
+<br clear="all">
+<br clear="all">
+
+<!-- FIXME: uncomment these tests when enabling auto-fit. -->
+<!-- <fit>
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ <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>
+
+ <br clear="all">
+ <br clear="all">
+
+ </fit> -->
+
+
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,384 @@
</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]; }
+/* 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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkLayoutTestsfastcssgridlayoutmozillagridrepeatautofillfit005html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html (0 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -0,0 +1,378 @@
</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] 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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/Source/WebCore/ChangeLog 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -1,3 +1,44 @@
</span><ins>+2016-05-09 Sergio Villar Senin <svillar@igalia.com>
+
+ [css-grid] Implement auto-repeat computation
+ https://bugs.webkit.org/show_bug.cgi?id=157473
+
+ Reviewed by Darin Adler.
+
+ We added support for parsing and style for the new auto-repeat syntax. This patch actually
+ implements the feature by computing the number of auto-repeat tracks that will be part of
+ the explicit grid depending on the available size on the corresponding axis.
+
+ Note that we still do not drop the empty tracks, i.e., auto-fit will work exactly as
+ auto-fill until the empty track removal is implemented.
+
+ Some test results are not totally correct yet because we need to add the line names to the
+ computed style. As that requires a rather large piece of code it will be done in a follow up
+ patch. Track sizes are correct though.
+
+ Tests: fast/css-grid-layout/grid-auto-fill-columns.html
+ fast/css-grid-layout/grid-auto-fill-rows.html
+ fast/css-grid-layout/grid-change-auto-repeat-tracks.html
+ fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html
+ fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html
+ fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html
+ fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html
+ fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html
+
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseGridTrackRepeatFunction): Add the CSSAutoRepeatValue directly
+ instead of adding the track size.
+ * css/StyleBuilderCustom.h: Store the insertion point in style.
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::guttersSize): Replaced size_t by unsigned.
+ (WebCore::RenderGrid::rawGridTrackSize): New function which retrieves the track size from
+ either explicit (including auto-repeat tracks) or implicit tracks.
+ (WebCore::RenderGrid::gridTrackSize): Use rawGridTrackSize().
+ (WebCore::RenderGrid::computeAutoRepeatTracksCount): This is the core of the patch. This
+ method computes the number of auto-repeat tracks that fits on the available size for a given
+ axis (or 1 if that's indefinite).
+ * rendering/RenderGrid.h:
+
</ins><span class="cx"> 2016-05-09 Alex Christensen <achristensen@webkit.org>
</span><span class="cx">
</span><span class="cx"> Fix GTK build after r200607
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -6009,9 +6009,13 @@
</span><span class="cx"> // grid size.
</span><span class="cx"> repetitions = std::min(repetitions, kGridMaxTracks / numberOfTracks);
</span><span class="cx">
</span><del>- for (size_t i = 0; i < repetitions; ++i) {
- for (size_t j = 0; j < repeatedValues->length(); ++j)
- list.append(*repeatedValues->itemWithoutBoundsCheck(j));
</del><ins>+ if (isAutoRepeat)
+ list.append(*repeatedValues);
+ else {
+ for (unsigned i = 0; i < repetitions; ++i) {
+ for (unsigned j = 0; j < repeatedValues->length(); ++j)
+ list.append(*repeatedValues->itemWithoutBoundsCheck(j));
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> m_valueList->next();
</span></span></pre></div>
<a id="trunkSourceWebCorecssStyleBuilderCustomh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/StyleBuilderCustom.h (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/StyleBuilderCustom.h 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/Source/WebCore/css/StyleBuilderCustom.h 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -1657,7 +1657,8 @@
</span><span class="cx"> style->setGridAutoRepeat##TrackType##sInsertionPoint(tracksData.m_autoRepeatInsertionPoint); \
</span><span class="cx"> style->setAutoRepeatNamedGrid##TrackType##Lines(tracksData.m_autoRepeatNamedGridLines); \
</span><span class="cx"> style->setAutoRepeatOrderedNamedGrid##TrackType##Lines(tracksData.m_autoRepeatOrderedNamedGridLines); \
</span><del>- style->setGridAutoRepeat##TrackType##sType(tracksData.m_autoRepeatType);
</del><ins>+ style->setGridAutoRepeat##TrackType##sType(tracksData.m_autoRepeatType); \
+ style->setGridAutoRepeat##TrackType##sInsertionPoint(tracksData.m_autoRepeatInsertionPoint);
</ins><span class="cx">
</span><span class="cx"> inline void StyleBuilderCustom::applyValueGridTemplateColumns(StyleResolver& styleResolver, CSSValue& value)
</span><span class="cx"> {
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -417,7 +417,7 @@
</span><span class="cx"> clearNeedsLayout();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, size_t span) const
</del><ins>+LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, unsigned span) const
</ins><span class="cx"> {
</span><span class="cx"> ASSERT(span >= 1);
</span><span class="cx">
</span><span class="lines">@@ -700,15 +700,41 @@
</span><span class="cx"> return (direction == ForRows) ? hasDefiniteLogicalHeight() : hasDefiniteLogicalWidth();
</span><span class="cx"> }
</span><span class="cx">
</span><del>-GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned i) const
</del><ins>+const GridTrackSize& RenderGrid::rawGridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
</ins><span class="cx"> {
</span><del>- bool isForColumns = (direction == ForColumns);
- auto& trackStyles = isForColumns ? style().gridColumns() : style().gridRows();
</del><ins>+ bool isRowAxis = direction == ForColumns;
+ auto& trackStyles = isRowAxis ? style().gridColumns() : style().gridRows();
+ auto& autoRepeatTrackStyles = isRowAxis ? style().gridAutoRepeatColumns() : style().gridAutoRepeatRows();
+ auto& autoTrackSize = isRowAxis ? style().gridAutoColumns() : style().gridAutoRows();
+ unsigned insertionPoint = isRowAxis ? style().gridAutoRepeatColumnsInsertionPoint() : style().gridAutoRepeatRowsInsertionPoint();
+ unsigned repetitions = autoRepeatCountForDirection(direction);
</ins><span class="cx">
</span><del>- auto& autoTrackSize = isForColumns ? style().gridAutoColumns() : style().gridAutoRows();
- int translatedIndex = i + (isForColumns ? m_smallestColumnStart : m_smallestRowStart);
- auto& trackSize = (translatedIndex < 0 || translatedIndex >= static_cast<int>(trackStyles.size())) ? autoTrackSize : trackStyles[translatedIndex];
</del><ins>+ // We should not use GridPositionsResolver::explicitGridXXXCount() for this because the
+ // explicit grid might be larger than the number of tracks in grid-template-rows|columns (if
+ // grid-template-areas is specified for example).
+ unsigned explicitTracksCount = trackStyles.size() + repetitions;
</ins><span class="cx">
</span><ins>+ int untranslatedIndexAsInt = translatedIndex + (isRowAxis ? m_smallestColumnStart : m_smallestRowStart);
+ if (untranslatedIndexAsInt < 0)
+ return autoTrackSize;
+
+ unsigned untranslatedIndex = static_cast<unsigned>(untranslatedIndexAsInt);
+ if (untranslatedIndex >= explicitTracksCount)
+ return autoTrackSize;
+
+ if (!repetitions || untranslatedIndex < insertionPoint)
+ return trackStyles[untranslatedIndex];
+
+ if (untranslatedIndex < (insertionPoint + repetitions))
+ return autoRepeatTrackStyles[0];
+
+ return trackStyles[untranslatedIndex - repetitions];
+}
+
+GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex) const
+{
+ auto& trackSize = rawGridTrackSize(direction, translatedIndex);
+
</ins><span class="cx"> GridLength minTrackBreadth = trackSize.minTrackBreadth();
</span><span class="cx"> GridLength maxTrackBreadth = trackSize.maxTrackBreadth();
</span><span class="cx">
</span><span class="lines">@@ -1185,10 +1211,80 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>-unsigned RenderGrid::computeAutoRepeatTracksCount(GridTrackSizingDirection) const
</del><ins>+unsigned RenderGrid::computeAutoRepeatTracksCount(GridTrackSizingDirection direction) const
</ins><span class="cx"> {
</span><del>- // FIXME: implement the algorithm to compute the number of auto repeat tracks.
- return 0;
</del><ins>+ bool isRowAxis = direction == ForColumns;
+ const auto& autoRepeatTracks = isRowAxis ? style().gridAutoRepeatColumns() : style().gridAutoRepeatRows();
+
+ if (!autoRepeatTracks.size())
+ return 0;
+
+ ASSERT(autoRepeatTracks.size() == 1);
+ auto autoTrackSize = autoRepeatTracks.at(0);
+ ASSERT(autoTrackSize.minTrackBreadth().isLength());
+ ASSERT(!autoTrackSize.minTrackBreadth().isContentSized());
+
+ Optional<LayoutUnit> availableSize = isRowAxis ? availableLogicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
+ if (!isRowAxis || containingBlock()) {
+ if (!availableSize) {
+ const Length& maxLength = isRowAxis ? style().logicalMaxWidth() : style().logicalMaxHeight();
+ if (!maxLength.isUndefined()) {
+ availableSize = isRowAxis
+ ? computeLogicalWidthInRegionUsing(MaxSize, maxLength, containingBlockLogicalWidthForContent(), *containingBlock(), nullptr)
+ : computeContentLogicalHeight(MaxSize, maxLength, Nullopt);
+ }
+ } else {
+ availableSize = isRowAxis
+ ? constrainLogicalWidthInRegionByMinMax(availableSize.value(), availableLogicalWidth(), *containingBlock())
+ : constrainLogicalHeightByMinMax(availableSize.value(), Nullopt);
+ }
+ }
+
+ bool needsToFulfillMinimumSize = false;
+ if (!availableSize) {
+ const Length& minSize = isRowAxis ? style().logicalMinWidth() : style().logicalMinHeight();
+ if (!minSize.isSpecified())
+ return 1;
+
+ LayoutUnit containingBlockAvailableSize = isRowAxis ? containingBlockLogicalWidthForContent() : containingBlockLogicalHeightForContent(ExcludeMarginBorderPadding);
+ availableSize = valueForLength(minSize, containingBlockAvailableSize);
+ needsToFulfillMinimumSize = true;
+ }
+
+ bool hasDefiniteMaxTrackSizingFunction = autoTrackSize.maxTrackBreadth().isLength() && !autoTrackSize.maxTrackBreadth().isContentSized();
+ const Length trackLength = hasDefiniteMaxTrackSizingFunction ? autoTrackSize.maxTrackBreadth().length() : autoTrackSize.minTrackBreadth().length();
+ // For the purpose of finding the number of auto-repeated tracks, the UA must floor the track size to a UA-specified
+ // value to avoid division by zero. It is suggested that this floor be 1px.
+ LayoutUnit autoRepeatTrackSize = std::max<LayoutUnit>(LayoutUnit(1), valueForLength(trackLength, availableSize.value()));
+
+ // There will be always at least 1 auto-repeat track, so take it already into account when computing the total track size.
+ LayoutUnit tracksSize = autoRepeatTrackSize;
+ auto& trackSizes = isRowAxis ? style().gridColumns() : style().gridRows();
+
+ for (const auto& track : trackSizes) {
+ bool hasDefiniteMaxTrackBreadth = track.maxTrackBreadth().isLength() && !track.maxTrackBreadth().isContentSized();
+ ASSERT(hasDefiniteMaxTrackBreadth || (track.minTrackBreadth().isLength() && !track.minTrackBreadth().isContentSized()));
+ tracksSize += valueForLength(hasDefiniteMaxTrackBreadth ? track.maxTrackBreadth().length() : track.minTrackBreadth().length(), availableSize.value());
+ }
+
+ // Add gutters as if there where only 1 auto repeat track. Gaps between auto repeat tracks will be added later when
+ // computing the repetitions.
+ LayoutUnit gapSize = guttersSize(direction, 2);
+ tracksSize += gapSize * trackSizes.size();
+
+ LayoutUnit freeSpace = availableSize.value() - tracksSize;
+ if (freeSpace <= 0)
+ return 1;
+
+ unsigned repetitions = 1 + (freeSpace / (autoRepeatTrackSize + gapSize)).toInt();
+
+ // Provided the grid container does not have a definite size or max-size in the relevant axis,
+ // if the min size is definite then the number of repetitions is the largest possible positive
+ // integer that fulfills that minimum requirement.
+ if (needsToFulfillMinimumSize)
+ ++repetitions;
+
+ return repetitions;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void RenderGrid::placeItemsOnGrid()
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (200617 => 200618)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2016-05-10 06:36:42 UTC (rev 200617)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2016-05-10 07:46:08 UTC (rev 200618)
</span><span class="lines">@@ -60,7 +60,7 @@
</span><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, size_t span) const;
</del><ins>+ LayoutUnit guttersSize(GridTrackSizingDirection, unsigned span) const;
</ins><span class="cx"> LayoutUnit offsetBetweenTracks(GridTrackSizingDirection) const;
</span><span class="cx">
</span><span class="cx"> size_t autoRepeatCountForDirection(GridTrackSizingDirection) const;
</span><span class="lines">@@ -134,6 +134,7 @@
</span><span class="cx"> double computeFlexFactorUnitSize(const Vector<GridTrack>&, GridTrackSizingDirection, double flexFactorSum, LayoutUnit leftOverSpace, const Vector<unsigned, 8>& flexibleTracksIndexes, std::unique_ptr<TrackIndexSet> tracksToTreatAsInflexible = nullptr) const;
</span><span class="cx"> double findFlexFactorUnitSize(const Vector<GridTrack>&, const GridSpan&, GridTrackSizingDirection, LayoutUnit spaceToFill) const;
</span><span class="cx">
</span><ins>+ const GridTrackSize& rawGridTrackSize(GridTrackSizingDirection, unsigned) const;
</ins><span class="cx"> GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;
</span><span class="cx">
</span><span class="cx"> bool updateOverrideContainingBlockContentLogicalWidthForChild(RenderBox&, GridSizingData&);
</span></span></pre>
</div>
</div>
</body>
</html>