[css-grid] Implement repeat(auto-fit)
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jul 2016 08:57:06 +0000 (08:57 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jul 2016 08:57:06 +0000 (08:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=159771

Reviewed by Darin Adler.

Source/WebCore:

The auto-fit keyword works exactly as the already implemented auto-fill except that all
empty tracks collapse (became 0px). Absolutely positioned items do not participate on the
layout of the grid so they are not considered (a grid with only absolutely positioned items
is considered an empty grid).

Whenever a track collapses the gutters on either side do also collapse. When a collapsed
track's gutters collapse, they coincide exactly. If one side of a collapsed track does not
have a gutter then collapsing its gutters results in no gutter on either "side" of the
collapsed track.

In practice this means that is not possible to know the gap between 2 consecutive auto
repeat tracks without examining some others whenever there are collapsed tracks.

Uncommented the auto-fit cases from Mozilla tests. They have to be adapted as the reftest
machinery requires all the content to be rendered in the original 800x600 viewport.

Tests: fast/css-grid-layout/grid-auto-fit-columns.html
fast/css-grid-layout/grid-auto-fit-rows.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html
fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackList): Use the newly added trackSizesForComputedStyle().
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeTrackBasedLogicalHeight):
(WebCore::RenderGrid::computeTrackSizesForDirection):
(WebCore::RenderGrid::isEmptyAutoRepeatTrack):
(WebCore::RenderGrid::gridGapForDirection): Returns the gap directly from the style.
(WebCore::RenderGrid::guttersSize): Computes the gap between a startLine and an
endLine. This method may need to inspect some other surrounding tracks to compute the gap.
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::computeIntrinsicLogicalHeight):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
(WebCore::RenderGrid::computeAutoRepeatTracksCount):
(WebCore::RenderGrid::computeEmptyTracksForAutoRepeat): Returns a Vector with the auto
repeat tracks that are going to be collapsed because they're empty.
(WebCore::RenderGrid::placeItemsOnGrid):
(WebCore::RenderGrid::trackSizesForComputedStyle): Used by ComputedStyle logic to print the
size of tracks. Added in order to hide the actual contents of m_columnPositions and
m_rowPositions to the outter world.
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
(WebCore::RenderGrid::gridAreaBreadthForChild):
(WebCore::RenderGrid::populateGridPositionsForDirection): Added some extra code to compute
gaps as they cannot be directly added between tracks in case of having collapsed tracks.
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::RenderGrid::offsetBetweenTracks): Deleted.
* rendering/RenderGrid.h: Made some API private. Added new required methods/attributes.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForGridTrackList):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::computeTrackBasedLogicalHeight):
(WebCore::RenderGrid::computeTrackSizesForDirection):
(WebCore::RenderGrid::hasAutoRepeatEmptyTracks):
(WebCore::RenderGrid::isEmptyAutoRepeatTrack):
(WebCore::RenderGrid::gridGapForDirection):
(WebCore::RenderGrid::guttersSize):
(WebCore::RenderGrid::computeIntrinsicLogicalWidths):
(WebCore::RenderGrid::computeIntrinsicLogicalHeight):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::gridTrackSize):
(WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
(WebCore::RenderGrid::computeAutoRepeatTracksCount):
(WebCore::RenderGrid::computeEmptyTracksForAutoRepeat):
(WebCore::RenderGrid::placeItemsOnGrid):
(WebCore::RenderGrid::trackSizesForComputedStyle):
(WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
(WebCore::RenderGrid::assumedRowsSizeForOrthogonalChild):
(WebCore::RenderGrid::gridAreaBreadthForChild):
(WebCore::RenderGrid::populateGridPositionsForDirection):
(WebCore::RenderGrid::columnAxisOffsetForChild):
(WebCore::RenderGrid::rowAxisOffsetForChild):
(WebCore::RenderGrid::offsetBetweenTracks): Deleted.
* rendering/RenderGrid.h:

LayoutTests:

Uncommented the auto-fit cases. Split the Mozilla's 005 test in two because it was not
possible to fit all the content in a viewport without scrollbars.

* fast/css-grid-layout/grid-auto-fit-columns-expected.txt: Added.
* fast/css-grid-layout/grid-auto-fit-columns.html: Added.
* fast/css-grid-layout/grid-auto-fit-rows-expected.txt: Added.
* fast/css-grid-layout/grid-auto-fit-rows.html: Added.
* fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt:
* fast/css-grid-layout/grid-element-auto-repeat-get-set.html:
* fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt:
* fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html:
* fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
* fast/css-grid-layout/grid-positioned-items-padding.html:
* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt:
* fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html:
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html: Copied from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html: Added.
* fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@203680 268f45cc-cd09-0410-ab3c-d52691b4dbfc

29 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-auto-fit-columns-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-fit-rows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt
LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html
LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt
LayoutTests/fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html
LayoutTests/fast/css-grid-layout/grid-positioned-items-padding-expected.txt
LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html
LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt
LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html [moved from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html with 55% similarity]
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html [moved from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html with 55% similarity]
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/rendering/RenderGrid.cpp
Source/WebCore/rendering/RenderGrid.h

index ce93e6b..f68def4 100644 (file)
@@ -1,3 +1,38 @@
+2016-07-25  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Implement repeat(auto-fit)
+        https://bugs.webkit.org/show_bug.cgi?id=159771
+
+        Reviewed by Darin Adler.
+
+        Uncommented the auto-fit cases. Split the Mozilla's 005 test in two because it was not
+        possible to fit all the content in a viewport without scrollbars.
+
+        * fast/css-grid-layout/grid-auto-fit-columns-expected.txt: Added.
+        * fast/css-grid-layout/grid-auto-fit-columns.html: Added.
+        * fast/css-grid-layout/grid-auto-fit-rows-expected.txt: Added.
+        * fast/css-grid-layout/grid-auto-fit-rows.html: Added.
+        * fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt:
+        * fast/css-grid-layout/grid-element-auto-repeat-get-set.html:
+        * fast/css-grid-layout/grid-only-abspos-item-computed-style-crash-expected.txt:
+        * fast/css-grid-layout/grid-only-abspos-item-computed-style-crash.html:
+        * fast/css-grid-layout/grid-positioned-items-padding-expected.txt:
+        * fast/css-grid-layout/grid-positioned-items-padding.html:
+        * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt:
+        * fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003-expected.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-003.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004-expected.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-004.html:
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1-expected.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html.
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html: Copied from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html: Added.
+        * fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html: Renamed from LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005.html.
+
 2016-07-24  Nan Wang  <n_wang@apple.com>
 
         AX: Video Controls: Volume cannot be adjusted using VO.
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns-expected.txt b/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns-expected.txt
new file mode 100644 (file)
index 0000000..08aa753
--- /dev/null
@@ -0,0 +1,29 @@
+This test checks that repeat(auto-fit, ) syntax works as expected.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html b/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html
new file mode 100644 (file)
index 0000000..560015b
--- /dev/null
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    border: 2px solid magenta;
+    width: 200px;
+    position: relative;
+    justify-content: start;
+    grid-auto-columns: 157px;
+    grid-auto-rows: 25px;
+}
+
+.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fit, 30px [autobar]); }
+.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, -webkit-max-content); }
+.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+
+.item { background-color: cyan; }
+
+.gap { grid-column-gap: 20px; }
+
+</style>
+
+<script src="../../resources/check-layout.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="267" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: last 2 / foo" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="80" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-column: 1 / span 4"  data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-column: autobar / -1"  data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: 1 / -1"  data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: foo 3 / 4 bar"  data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: -6 / span 2 start"  data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: -4 / -2"  data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: bar / foo 2"  data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: foo / bar 2"  data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows-expected.txt
new file mode 100644 (file)
index 0000000..08aa753
--- /dev/null
@@ -0,0 +1,29 @@
+This test checks that repeat(auto-fit, ) syntax works as expected.
+
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html b/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html
new file mode 100644 (file)
index 0000000..1d2b003
--- /dev/null
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    border: 2px solid magenta;
+    height: 200px;
+    width: 25px;
+    align-content: start;
+    grid-auto-rows: 157px;
+    grid-auto-columns: 25px;
+
+    float: left;
+    position: relative;
+    margin-right: 2px;
+}
+
+.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fit, 30px [autobar]); }
+.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, -webkit-max-content); }
+.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+
+.item { background-color: cyan; }
+
+.gap { grid-row-gap: 20px; }
+
+</style>
+
+<script src="../../resources/check-layout.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="267" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: last 2 / foo" data-offset-y="0" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="80" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-row: 1 / span 4"  data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-row: autobar / -1"  data-offset-y="140" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: 1 / -1"  data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: foo 3 / 4 bar"  data-offset-y="120" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: -6 / span 2 start"  data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: -4 / -2"  data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: bar / foo 2"  data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: foo / bar 2"  data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+</body>
index 0abca91..d18ddfd 100644 (file)
@@ -20,18 +20,26 @@ PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
 PASS element.style.gridTemplateColumns is "[start] 10% repeat(auto-fill, [foo bar] 200px) [end]"
 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "75px [prev] 200px [foo bar 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 [foo bar] 150px [foo bar] 150px [foo bar] 150px [foo bar] 150px [foo bar] 150px.
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px"
 PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] 150px)"
-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be none. Was 240px [foo bar] 240px [foo bar].
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [foo bar] 0px [foo bar]"
 PASS element.style.gridTemplateRows is "repeat(auto-fit, 24em [foo bar])"
-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-columns') should be none. Was [foo bar] 400px [foo bar] 400px.
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo bar] 0px"
 PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] minmax(270px, 1fr))"
-FAIL getComputedStyle(element, '').getPropertyValue('grid-template-rows') should be none. Was [foo] 200px [bar foo] 200px [bar foo] 200px [bar].
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]"
 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 getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 0px 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 [bar foo] 10px [foo] 10px.
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "60px 0px [bar foo] 10px [foo] 10px"
 PASS element.style.gridTemplateRows is "10% repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]"
+PASS element.style.gridTemplateColumns is "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]"
+PASS element.style.gridTemplateRows is "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c] 20px [e]"
+PASS element.style.gridTemplateColumns is "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [e]"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]"
+PASS element.style.gridTemplateRows is "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])"
 
 Test invalid repeat syntax.
 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
@@ -57,7 +65,6 @@ PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
 PASS successfullyParsed is true
-Some tests failed.
 
 TEST COMPLETE
 
index 3956216..57c4a0c 100644 (file)
@@ -15,9 +15,11 @@ body { font-size: 10px; }
     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(-webkit-max-content, 5em) [bar]) repeat(2, [foo] 1em)", "100px 100px 100px 250px 250px", "450px 50px [bar] 50px [bar foo] 10px [foo] 10px", "repeat(auto-fill, minmax(50px, 100px)) 250px 250px", "450px repeat(auto-fill, minmax(-webkit-max-content, 5em) [bar]) [foo] 1em [foo] 1em");
     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");
+    testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(auto-fit, 24em [foo bar])", "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px", "0px [foo bar] 0px [foo bar]");
+    testGridTemplatesSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr))", "repeat(auto-fit, [foo] minmax(20em, -webkit-max-content) [bar])", "[foo bar] 0px [foo bar] 0px", "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]");
+    testGridTemplatesSetJSValues("repeat(auto-fit, minmax(300px, -webkit-min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) repeat(2, [foo] 1em)", "0px 0px 20px 20px", "60px 0px [bar foo] 10px [foo] 10px", "repeat(auto-fit, minmax(300px, -webkit-min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30em, -webkit-max-content) [bar]) [foo] 1em [foo] 1em");
+    testGridTemplatesSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]", "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]", "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]");
+    testGridTemplatesSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) repeat(1, [b] 30px [c]) 20px [e]", "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c] 20px [e]", "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]", "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [e]");
 
     debug("");
     debug("Test invalid repeat syntax.");
index 7237134..142e4ef 100644 (file)
@@ -9,6 +9,14 @@ PASS window.getComputedStyle(grid2, '').getPropertyValue('grid-template-columns'
 PASS window.getComputedStyle(grid2, '').getPropertyValue('grid-template-rows') is "none"
 PASS window.getComputedStyle(grid3, '').getPropertyValue('grid-template-columns') is "none"
 PASS window.getComputedStyle(grid3, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(grid4, '').getPropertyValue('grid-template-columns') is "[a] 0px [b a] 0px [b a] 0px [b a] 0px [b a] 0px [b]"
+PASS window.getComputedStyle(grid4, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(grid5, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(grid5, '').getPropertyValue('grid-template-rows') is "[a] 0px [b]"
+PASS window.getComputedStyle(grid6, '').getPropertyValue('grid-template-columns') is "[a] 0px [b a] 0px [b a] 0px [b] 10px 30px"
+PASS window.getComputedStyle(grid6, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(grid7, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(grid7, '').getPropertyValue('grid-template-rows') is "[a] 0px [b] 10px 30px"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 8ba7338..47bde03 100644 (file)
@@ -4,10 +4,16 @@
 .grid {
   display: grid;
   position: relative;
+  width: 100px; /* Just to ensure a small number of repetitions. */
 }
 
 .emptyCols { grid-template-rows: 20px; }
 .emptyRows { grid-template-columns: 10px; }
+.emptyColsDueToAutoFit { grid-template-columns: repeat(auto-fit, [a] 20px [b]); }
+.emptyRowsDueToAutoFit { grid-template-rows: repeat(auto-fit, [a] 20px [b]); }
+.noRepetitionsCols { grid-template-columns: repeat(auto-fit, [a] 20px [b]) 10px 30px; }
+.noRepetitionsRows { grid-template-rows: repeat(auto-fit, [a] 20px [b]) 10px 30px; }
+
 
 .absposChild {
   position: absolute;
@@ -22,6 +28,10 @@ function runTest() {
      testGridTemplatesValues(document.getElementById("grid1"), "none", "20px");
      testGridTemplatesValues(document.getElementById("grid2"), "10px", "none");
      testGridTemplatesValues(document.getElementById("grid3"), "none", "none");
+     testGridTemplatesValues(document.getElementById("grid4"), "[a] 0px [b a] 0px [b a] 0px [b a] 0px [b a] 0px [b]", "none");
+     testGridTemplatesValues(document.getElementById("grid5"), "none", "[a] 0px [b]");
+     testGridTemplatesValues(document.getElementById("grid6"), "[a] 0px [b a] 0px [b a] 0px [b] 10px 30px", "none");
+     testGridTemplatesValues(document.getElementById("grid7"), "none", "[a] 0px [b] 10px 30px");
 }
 </script>
 <script src="../../resources/js-test.js"></script>
@@ -35,4 +45,10 @@ function runTest() {
 
 <div id="grid3" class="grid"><div class="absposChild"></div></div>
 
+<div id="grid4" class="grid emptyColsDueToAutoFit"><div class="absposChild"></div></div>
+<div id="grid5" class="grid emptyRowsDueToAutoFit"><div class="absposChild"></div></div>
+
+<div id="grid6" class="grid noRepetitionsCols"><div class="absposChild"></div></div>
+<div id="grid7" class="grid noRepetitionsRows"><div class="absposChild"></div></div>
+
 </body>
index 9b3ba8d..f059f51 100644 (file)
     position: relative;
 }
 
+.autoFit {
+    grid-template-columns: repeat(auto-fit, 100px);
+    grid-template-rows: repeat(auto-fit, 100px);
+}
+
 .absolute {
     position: absolute;
     top: 0;
@@ -23,6 +28,8 @@
     background: lime;
 }
 
+.gap { grid-gap: 10px; }
+
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.grid')">
     </div>
 </div>
 
+<div class="grid autoFit gap">
+    <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+         data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+    </div>
+    <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;"
+         data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+    </div>
+</div>
+
+<div class="grid autoFit gap">
+    <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+         data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+    </div>
+    <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;"
+         data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+    </div>
+</div>
+
+<div class="grid autoFit directionRTL gap">
+    <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+         data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+    </div>
+    <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;"
+         data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+    </div>
+</div>
+
+<div class="grid autoFit directionRTL gap">
+    <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+         data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+    </div>
+    <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;"
+         data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+    </div>
+</div>
+
 </body>
index 16ecae3..7177261 100644 (file)
@@ -31,6 +31,118 @@ PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('g
 PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
 PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-columns') is "300px 200px 100px"
 PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-rows') is "150px 100px 50px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px"
+PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px"
+PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 19af08c..c2f8873 100644 (file)
 .gaps {
     grid-gap: 10px 20px;
 }
+
+.autoFit {
+    grid-template-columns: repeat(auto-fit, 75px);
+    grid-template-rows: 25px;
+}
+
+.width300 { width: 300px; }
+
+.item:first-child { background: lime; }
+.item:last-child { background: blue; }
 </style>
 
 <div class="grid contentStart" id="gridContentStart"></div>
 <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>
 <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>
 
+<div class="grid gaps width300 autoFit" id="gridAutoFitEmpty"></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitFirstColumnChild"><div class="item"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitSecondColumnChild"><div class="item" style="grid-column: 2"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitThirdColumnChild"><div class="item" style="grid-column: 3"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildren"><div class="item"></div><div class="item"></div></div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildrenTwo">
+    <div class="item" style="grid-column: 2"></div><div class="item"></div>
+</div>
+<div class="grid gaps width300 autoFit" id="gridAutoFitTwoAlternatingChildren">
+    <div class="item"></div><div class="item" style="grid-column: 3"></div>
+</div>
+
 <script src="../../resources/js-test.js"></script>
 <script src="resources/grid-definitions-parsing-utils.js"></script>
 <script>
     description("Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps.");
-
     testGridTemplatesValues(document.getElementById("gridContentStart"), "300px 200px 100px", "150px 100px 50px");
     testGridTemplatesValues(document.getElementById("gridContentCenter"), "300px 200px 100px", "150px 100px 50px");
     testGridTemplatesValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");
     testGridTemplatesValues(document.getElementById("gridGapsContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
     testGridTemplatesValues(document.getElementById("gridGapsContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
     testGridTemplatesValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");
+
+    function testGapsAlignmentWithAutoFit(id, expectedColumns, expectedRows) {
+        var element = document.getElementById(id);
+        var alignmentClasses = [ '', 'contentStart', 'contentCenter', 'contentEnd', 'contentSpaceAround', 'contentSpaceBetween', 'contentSpaceEvenly', 'contentStretch'];
+
+        for (alignmentClass in alignmentClasses) {
+            var originalClassName = element.className;
+            element.className += " " + alignmentClass;
+            testGridTemplatesValues(element, expectedColumns, expectedRows);
+            element.className = originalClassName;
+        }
+    }
+
+    testGapsAlignmentWithAutoFit('gridAutoFitEmpty', "0px 0px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitFirstColumnChild", "75px 0px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitSecondColumnChild", "0px 75px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitThirdColumnChild", "0px 0px 75px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildren", "75px 75px 0px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildrenTwo", "0px 75px 75px", "25px");
+    testGapsAlignmentWithAutoFit("gridAutoFitTwoAlternatingChildren", "75px 0px 75px", "25px");
+
 </script>
index eb2cdd2..ea2feba 100644 (file)
@@ -65,21 +65,25 @@ x:last-child {
 
 fill,fit {
   float: left;
-  width: 400px;
+  width: 390px;
 }
 
 .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]; }
+/* The repeat count was 18 in the original test. We had to reduce it to accomodate fit and fit tests
+   in a viewport with no scroll. */
+.r1.c18 { grid-template-columns: [a] repeat(17, [b] 20px [c]) [d]; }
 
 .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]; }
+/* The repeat count was 15 in the original test. We had to reduce it to accomodate fit and fit tests
+   in a viewport with no scroll. */
+.r3.c15 { grid-template-columns: [a] repeat(14, [b] 20px [c]) [d] 30px [e] 30px [f]; }
 .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]; }
 
@@ -136,58 +140,57 @@ fill,fit {
 
 </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> -->
+<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>
index 467a744..b9dd85c 100644 (file)
@@ -67,7 +67,7 @@ x:last-child {
 
 fill,fit {
   float: left;
-  width: 400px;
+  width: 390px;
 }
 </style>
 </head>
@@ -122,58 +122,57 @@ fill,fit {
 
 </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> -->
+<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>
index 11effe6..f2cad12 100644 (file)
@@ -133,57 +133,57 @@ fill,fit {
 
 </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> -->
+<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>
index f98b933..114b7a1 100644 (file)
@@ -125,58 +125,57 @@ fill,fit {
 
 </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> -->
+<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>
index a719ca2..8f670a9 100644 (file)
@@ -78,6 +78,11 @@ x:last-child {
   background: blue;
 }
 
+fill,fit {
+  float: left;
+  width: 375px;
+}
+
 </style>
 </head>
 <body>
@@ -131,60 +136,61 @@ x:last-child {
 
 </fill>
 
+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+     <br clear="all"> -->
+
+<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>
-
-     <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> -->
+</fit>
 
 
 </body>
index a52be27..ddebc04 100644 (file)
@@ -68,6 +68,10 @@ x:last-child {
   background: blue;
 }
 
+fill,fit {
+    float: left;
+    width: 375px;
+}
 </style>
 </head>
 <body>
@@ -121,61 +125,61 @@ x:last-child {
 
 </fill>
 
+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+     <br clear="all"> -->
+
+<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">
 
-<!-- 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> -->
+</fit>
 
 
 </body>
index ec068a8..7fe1769 100644 (file)
@@ -80,6 +80,11 @@ x:last-child {
   background: blue;
 }
 
+fill,fit {
+  float: left;
+  width: 375px;
+}
+
 </style>
 </head>
 <body>
@@ -133,60 +138,61 @@ x:last-child {
 
 </fill>
 
+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+     <br clear="all"> -->
+
+<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>
-
-     <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> -->
+</fit>
 
 
 </body>
index 7c098c4..744d199 100644 (file)
@@ -70,6 +70,11 @@ x:last-child {
   background: blue;
 }
 
+fill,fit {
+  float: left;
+  width: 375px;
+}
+
 </style>
 </head>
 <body>
@@ -123,61 +128,61 @@ x:last-child {
 
 </fill>
 
+<!-- This was in the original Mozilla tests. We need to remove it to keep the whole content in the viewport without scrolls. -->
+<!-- <br clear="all">
+     <br clear="all"> -->
+
+<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">
 
-<!-- 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> -->
+</fit>
 
 
 </body>
@@ -36,9 +36,7 @@ html,body {
 .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; }
+.ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
 .r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] auto [f]; grid-gap:0; padding-bottom:4px;}
 
 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
@@ -48,7 +46,7 @@ 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]; }
+fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
 
 .w100 { height: 100px; }
 .w3 { height: 3px; }
@@ -239,146 +237,8 @@ fill,fit {
 
 </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> -->
-
+<!-- The original 005 test from Mozilla had also tests for auto-fit. They were moved to part-2 as it
+     is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
 
 </body>
 </html>
@@ -34,7 +34,7 @@ html,body {
 .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]; }
+.ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; }
 
 fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
 fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
@@ -42,7 +42,7 @@ 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]; }
+fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10px [f]; }
 
 .w100 { height: 100px; }
 .w3 { height: 3px; }
@@ -86,10 +86,6 @@ x:last-child {
   background: blue;
 }
 
-fill,fit {
-  float: left;
-  height: 400px;
-}
 </style>
 </head>
 <body>
@@ -230,149 +226,10 @@ fill,fit {
 <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> -->
-
+<!-- The original 005 test from Mozilla had also tests for auto-fit. They were moved to part-2 as it
+     is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
 
 </body>
 </html>
diff --git a/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html b/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html
new file mode 100644 (file)
index 0000000..e0b65eb
--- /dev/null
@@ -0,0 +1,244 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 2px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+  padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+.r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+.r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;}
+.r01 a {grid-row-end:auto; }
+.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+.r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e];  }
+.r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0;}
+.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows:  [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+.r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 10px [f]; grid-gap:0; padding-bottom:4px;}
+
+fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows:  [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; }
+fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;}
+fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+  height: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+fill,fit {
+  float: left;
+  height: 400px;
+}
+</style>
+</head>
+<body>
+
+<!-- The original 005 test from Mozilla had also tests for auto-fill. They were moved to part-1 as it
+     is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
+
+<fit>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r01 w w20"><a></a><b></b></div>
+<div class="grid r01 w w3"><a></a><b></b></div>
+<div class="grid r01 w xw20"><a></a><b></b></div>
+<div class="grid r01 w xw3"><a></a><b></b></div>
+<div class="grid r01 w mw20"><a></a><b></b></div>
+<div class="grid r01 w mw3"><a></a><b></b></div>
+<div class="grid r01 w w20 xw3"><a></a><b></b></div>
+<div class="grid r01 w w3 mw20"><a></a><b></b></div>
+<div class="grid r01 w w3 mw3"><a></a><b></b></div>
+<div class="grid r01 w xw20"><a></a><b></b></div>
+<div class="grid r01 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r01 w mw20"><a></a><b></b></div>
+
+<div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r01" style="height:0"><a></a><b></b></div>
+<div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r01" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0a"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r02 w w20"><a></a><b></b></div>
+<div class="grid r02 w w3"><a></a><b></b></div>
+<div class="grid r02 w xw20"><a></a><b></b></div>
+<div class="grid r02 w xw3"><a></a><b></b></div>
+<div class="grid r02 w mw20"><a></a><b></b></div>
+<div class="grid r02 w mw3"><a></a><b></b></div>
+<div class="grid r02 w w20 xw3"><a></a><b></b></div>
+<div class="grid r02 w w3 mw20"><a></a><b></b></div>
+<div class="grid r02 w w3 mw3"><a></a><b></b></div>
+<div class="grid r02 w xw20"><a></a><b></b></div>
+<div class="grid r02 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r02 w mw20"><a></a><b></b></div>
+
+<div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r02" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r02" style="height:0"><a></a><b></b></div>
+<div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r02" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r03 w w20"><a></a><b></b></div>
+<div class="grid r03 w w3"><a></a><b></b></div>
+<div class="grid r03 w xw20"><a></a><b></b></div>
+<div class="grid r03 w xw3"><a></a><b></b></div>
+<div class="grid r03 w mw20"><a></a><b></b></div>
+<div class="grid r03 w mw3"><a></a><b></b></div>
+<div class="grid r03 w w20 xw3"><a></a><b></b></div>
+<div class="grid r03 w w3 mw20"><a></a><b></b></div>
+<div class="grid r03 w w3 mw3"><a></a><b></b></div>
+<div class="grid r03 w xw20"><a></a><b></b></div>
+<div class="grid r03 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r03 w mw20"><a></a><b></b></div>
+
+<div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid  r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid  ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r003" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r03" style="height:0"><a></a><b></b></div>
+<div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r03" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r003"><a></a><b></b></div>
+
+</fit>
+
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html b/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html
new file mode 100644 (file)
index 0000000..a97788f
--- /dev/null
@@ -0,0 +1,236 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill/auto-fit)</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
+  <link rel="match" href="grid-repeat-auto-fill-fit-005-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px;
+}
+
+.grid {
+  display: grid;
+  float: left;
+  position: relative;
+  border: 2px solid;
+  grid-auto-columns: 10px;
+  grid-auto-rows: 10px;
+  grid-auto-flow: column;
+  grid-gap: 2px;
+  margin-right: 2px;
+  padding-top: 3px;
+  padding-bottom: 2px;
+}
+
+.r0 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d]; }
+.r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
+.r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
+.r02 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e]; }
+.r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+.r03 { grid-template-rows: [a] repeat(auto-fill, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+.ra { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+fit .r0 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d]; }
+fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
+fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
+fit .r02 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e]; }
+fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; }
+fit .r03 { grid-template-rows: [a] repeat(auto-fit, [b] 0 [c]) [d] 30px [e] 30px [f]; }
+fit .ra { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 10px [f]; }
+
+.w100 { height: 100px; }
+.w3 { height: 3px; }
+.w20 { height: 20px; }
+.w50 { height: 50px; }
+.w80 { height: 80px; }
+.mw100 { min-height: 100px; }
+.mw3 { height: 3px; }
+.mw20 { height: 20px; }
+.mw50 { min-height: 50px; }
+.mw80 { min-height: 80px; }
+.xw100 { max-height: 100px; }
+.xw3 { height: 3px; }
+.xw20 { height: 20px; }
+.xw50 { max-height: 50px; }
+.xw80 { max-height: 80px; }
+
+.w { width:10px}
+
+x {
+  height: 10px;
+  background: grey;
+}
+a {
+  position: absolute;
+  left:0; top:0; bottom:0; width: 3px;
+  background: black;
+  grid-row: c / c -1;
+}
+b {
+  position: absolute;
+  right:0; top:0; bottom:0; width: 3px;
+  background: brown;
+  grid-row: auto / c -1;
+}
+
+x:first-child {
+  background: lime;
+}
+x:last-child {
+  background: blue;
+}
+
+</style>
+</head>
+<body>
+
+<!-- The original 005 test from Mozilla had also tests for auto-fill. They were moved to part-1 as it
+     is not possible to fit all the contents in the viewport without scroll (required by reftests). -->
+<fit>
+
+<div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r1 w w20"><a></a><b></b></div>
+<div class="grid r1 w w3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+<div class="grid r1 w mw3"><a></a><b></b></div>
+<div class="grid r1 w w20 xw3"><a></a><b></b></div>
+<div class="grid r1 w w3 mw20"><a></a><b></b></div>
+<div class="grid r1 w w3 mw3"><a></a><b></b></div>
+<div class="grid r1 w xw20"><a></a><b></b></div>
+<div class="grid r1 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r1 w mw20"><a></a><b></b></div>
+
+<div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r1" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r1" style="height:0"><a></a><b></b></div>
+<div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r1" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r0"><a></a><b></b></div>
+<div class="grid w ra"><a></a><b></b></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r2 w w20"><a></a><b></b></div>
+<div class="grid r2 w w3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+<div class="grid r2 w mw3"><a></a><b></b></div>
+<div class="grid r2 w w20 xw3"><a></a><b></b></div>
+<div class="grid r2 w w3 mw20"><a></a><b></b></div>
+<div class="grid r2 w w3 mw3"><a></a><b></b></div>
+<div class="grid r2 w xw20"><a></a><b></b></div>
+<div class="grid r2 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r2 w mw20"><a></a><b></b></div>
+
+<div class="grid r2" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r2" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r2" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r2" style="height:0"><a></a><b></b></div>
+<div class="grid w r2" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r2" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r02"><a></a><b></b></div>
+
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid r3 w w20"><a></a><b></b></div>
+<div class="grid r3 w w3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+<div class="grid r3 w mw3"><a></a><b></b></div>
+<div class="grid r3 w w20 xw3"><a></a><b></b></div>
+<div class="grid r3 w w3 mw20"><a></a><b></b></div>
+<div class="grid r3 w w3 mw3"><a></a><b></b></div>
+<div class="grid r3 w xw20"><a></a><b></b></div>
+<div class="grid r3 w xw3 mw20"><a></a><b></b></div>
+<div class="grid r3 w mw20"><a></a><b></b></div>
+
+<div class="grid r3" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r3" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
+<div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
+
+<div class="grid w r3" style="min-height:0"><a></a><b></b></div>
+<div class="grid w r3" style="height:0"><a></a><b></b></div>
+<div class="grid w r3" style="min-height:0; height:0"><a></a><b></b></div>
+<div class="grid w r3" style="max-height:0"><a></a><b></b></div>
+<div class="grid w r03"><a></a><b></b></div>
+
+
+</fit>
+
+
+</body>
+</html>
index d00738e..ba033ca 100644 (file)
@@ -1,3 +1,88 @@
+2016-07-25  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Implement repeat(auto-fit)
+        https://bugs.webkit.org/show_bug.cgi?id=159771
+
+        Reviewed by Darin Adler.
+
+        The auto-fit keyword works exactly as the already implemented auto-fill except that all
+        empty tracks collapse (became 0px). Absolutely positioned items do not participate on the
+        layout of the grid so they are not considered (a grid with only absolutely positioned items
+        is considered an empty grid).
+
+        Whenever a track collapses the gutters on either side do also collapse. When a collapsed
+        track's gutters collapse, they coincide exactly. If one side of a collapsed track does not
+        have a gutter then collapsing its gutters results in no gutter on either "side" of the
+        collapsed track.
+
+        In practice this means that is not possible to know the gap between 2 consecutive auto
+        repeat tracks without examining some others whenever there are collapsed tracks.
+
+        Uncommented the auto-fit cases from Mozilla tests. They have to be adapted as the reftest
+        machinery requires all the content to be rendered in the original 800x600 viewport.
+
+        Tests: fast/css-grid-layout/grid-auto-fit-columns.html
+        fast/css-grid-layout/grid-auto-fit-rows.html
+        fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-1.html
+        fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::valueForGridTrackList): Use the newly added trackSizesForComputedStyle().
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeTrackBasedLogicalHeight):
+        (WebCore::RenderGrid::computeTrackSizesForDirection):
+        (WebCore::RenderGrid::isEmptyAutoRepeatTrack):
+        (WebCore::RenderGrid::gridGapForDirection): Returns the gap directly from the style.
+        (WebCore::RenderGrid::guttersSize): Computes the gap between a startLine and an
+        endLine. This method may need to inspect some other surrounding tracks to compute the gap.
+        (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+        (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+        (WebCore::RenderGrid::gridTrackSize):
+        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
+        (WebCore::RenderGrid::computeAutoRepeatTracksCount):
+        (WebCore::RenderGrid::computeEmptyTracksForAutoRepeat): Returns a Vector with the auto
+        repeat tracks that are going to be collapsed because they're empty.
+        (WebCore::RenderGrid::placeItemsOnGrid):
+        (WebCore::RenderGrid::trackSizesForComputedStyle): Used by ComputedStyle logic to print the
+        size of tracks. Added in order to hide the actual contents of m_columnPositions and
+        m_rowPositions to the outter world.
+        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+        (WebCore::RenderGrid::gridAreaBreadthForChild):
+        (WebCore::RenderGrid::populateGridPositionsForDirection): Added some extra code to compute
+        gaps as they cannot be directly added between tracks in case of having collapsed tracks.
+        (WebCore::RenderGrid::columnAxisOffsetForChild):
+        (WebCore::RenderGrid::rowAxisOffsetForChild):
+        (WebCore::RenderGrid::offsetBetweenTracks): Deleted.
+        * rendering/RenderGrid.h: Made some API private. Added new required methods/attributes.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::valueForGridTrackList):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::computeTrackBasedLogicalHeight):
+        (WebCore::RenderGrid::computeTrackSizesForDirection):
+        (WebCore::RenderGrid::hasAutoRepeatEmptyTracks):
+        (WebCore::RenderGrid::isEmptyAutoRepeatTrack):
+        (WebCore::RenderGrid::gridGapForDirection):
+        (WebCore::RenderGrid::guttersSize):
+        (WebCore::RenderGrid::computeIntrinsicLogicalWidths):
+        (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+        (WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
+        (WebCore::RenderGrid::gridTrackSize):
+        (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForItems):
+        (WebCore::RenderGrid::computeAutoRepeatTracksCount):
+        (WebCore::RenderGrid::computeEmptyTracksForAutoRepeat):
+        (WebCore::RenderGrid::placeItemsOnGrid):
+        (WebCore::RenderGrid::trackSizesForComputedStyle):
+        (WebCore::RenderGrid::offsetAndBreadthForPositionedChild):
+        (WebCore::RenderGrid::assumedRowsSizeForOrthogonalChild):
+        (WebCore::RenderGrid::gridAreaBreadthForChild):
+        (WebCore::RenderGrid::populateGridPositionsForDirection):
+        (WebCore::RenderGrid::columnAxisOffsetForChild):
+        (WebCore::RenderGrid::rowAxisOffsetForChild):
+        (WebCore::RenderGrid::offsetBetweenTracks): Deleted.
+        * rendering/RenderGrid.h:
+
 2016-07-24  Frederic Wang  <fwang@igalia.com>
 
         Move parsing of display, displaystyle and mathvariant attributes into MathML element classes
index b6c5d60..b14927f 100644 (file)
@@ -1136,23 +1136,15 @@ static Ref<CSSValue> valueForGridTrackList(GridTrackSizingDirection direction, R
     auto list = CSSValueList::createSpaceSeparated();
     unsigned insertionIndex;
     if (isRenderGrid) {
-        auto& grid = downcast<RenderGrid>(*renderer);
-        const auto& trackPositions = direction == ForColumns ? grid.columnPositions() : grid.rowPositions();
-        // There are at least #tracks + 1 grid lines (trackPositions). Apart from that, the grid container can generate implicit grid tracks,
-        // so we'll have more trackPositions than trackSizes as the latter only contain the explicit grid.
-        ASSERT(trackPositions.size() - 1 >= trackSizes.size());
-
-        unsigned i = 0;
-        LayoutUnit gutterSize = grid.guttersSize(direction, 2);
-        LayoutUnit offsetBetweenTracks = grid.offsetBetweenTracks(direction);
-        for (; i < trackPositions.size() - 2; ++i) {
+        auto computedTrackSizes = downcast<RenderGrid>(*renderer).trackSizesForComputedStyle(direction);
+        unsigned numTracks = computedTrackSizes.size();
+
+        for (unsigned i = 0; i < numTracks; ++i) {
             addValuesForNamedGridLinesAtIndex(collector, i, list.get());
-            list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i] - gutterSize - offsetBetweenTracks, style));
+            list->append(zoomAdjustedPixelValue(computedTrackSizes[i], style));
         }
-        // Last track line does not have any gutter or distribution offset.
-        addValuesForNamedGridLinesAtIndex(collector, i, list.get());
-        list.get().append(zoomAdjustedPixelValue(trackPositions[i + 1] - trackPositions[i], style));
-        insertionIndex = trackPositions.size() - 1;
+        addValuesForNamedGridLinesAtIndex(collector, numTracks + 1, list.get());
+        insertionIndex = numTracks;
     } else {
         for (unsigned i = 0; i < trackSizes.size(); ++i) {
             addValuesForNamedGridLinesAtIndex(collector, i, list.get());
index 1f97415..aa558e0 100644 (file)
@@ -389,7 +389,7 @@ LayoutUnit RenderGrid::computeTrackBasedLogicalHeight(const GridSizingData& sizi
     for (const auto& row : sizingData.rowTracks)
         logicalHeight += row.baseSize();
 
-    logicalHeight += guttersSize(ForRows, sizingData.rowTracks.size());
+    logicalHeight += guttersSize(ForRows, 0, sizingData.rowTracks.size());
 
     return logicalHeight;
 }
@@ -397,7 +397,7 @@ LayoutUnit RenderGrid::computeTrackBasedLogicalHeight(const GridSizingData& sizi
 void RenderGrid::computeTrackSizesForDirection(GridTrackSizingDirection direction, GridSizingData& sizingData, LayoutUnit freeSpace)
 {
     ASSERT(sizingData.isValidTransition(direction));
-    LayoutUnit totalGuttersSize = guttersSize(direction, direction == ForRows ? gridRowCount() : gridColumnCount());
+    LayoutUnit totalGuttersSize = guttersSize(direction, 0, direction == ForRows ? gridRowCount() : gridColumnCount());
     sizingData.setFreeSpaceForDirection(direction, freeSpace - totalGuttersSize);
     sizingData.sizingOperation = TrackSizing;
 
@@ -509,18 +509,76 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
     clearNeedsLayout();
 }
 
-LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, unsigned span) const
+bool RenderGrid::hasAutoRepeatEmptyTracks(GridTrackSizingDirection direction) const
 {
-    if (span <= 1)
-        return { };
+    return direction == ForColumns ? !!m_autoRepeatEmptyColumns : !!m_autoRepeatEmptyRows;
+}
 
-    const Length& trackGap = direction == ForColumns ? style().gridColumnGap() : style().gridRowGap();
-    return valueForLength(trackGap, 0) * (span - 1);
+bool RenderGrid::isEmptyAutoRepeatTrack(GridTrackSizingDirection direction, unsigned line) const
+{
+    ASSERT(hasAutoRepeatEmptyTracks(direction));
+    return direction == ForColumns ? m_autoRepeatEmptyColumns->contains(line) : m_autoRepeatEmptyRows->contains(line);
 }
 
-LayoutUnit RenderGrid::offsetBetweenTracks(GridTrackSizingDirection direction) const
+LayoutUnit RenderGrid::gridGapForDirection(GridTrackSizingDirection direction) const
 {
-    return direction == ForColumns ? m_offsetBetweenColumns : m_offsetBetweenRows;
+    return valueForLength(direction == ForColumns ? style().gridColumnGap() : style().gridRowGap(), LayoutUnit());
+}
+
+LayoutUnit RenderGrid::guttersSize(GridTrackSizingDirection direction, unsigned startLine, unsigned span) const
+{
+    if (span <= 1)
+        return { };
+
+    bool isRowAxis = direction == ForColumns;
+    LayoutUnit gap = gridGapForDirection(direction);
+
+    // Fast path, no collapsing tracks.
+    if (!hasAutoRepeatEmptyTracks(direction))
+        return gap * (span - 1);
+
+    // If there are collapsing tracks we need to be sure that gutters are properly collapsed. Apart
+    // from that, if we have a collapsed track in the edges of the span we're considering, we need
+    // to move forward (or backwards) in order to know whether the collapsed tracks reach the end of
+    // the grid (so the gap becomes 0) or there is a non empty track before that.
+
+    LayoutUnit gapAccumulator;
+    unsigned endLine = startLine + span;
+
+    for (unsigned line = startLine; line < endLine - 1; ++line) {
+        if (!isEmptyAutoRepeatTrack(direction, line))
+            gapAccumulator += gap;
+    }
+
+    // If the startLine is the start line of a collapsed track we need to go backwards till we reach
+    // a non collapsed track. If we find a non collapsed track we need to add that gap.
+    if (startLine && isEmptyAutoRepeatTrack(direction, startLine)) {
+        unsigned nonEmptyTracksBeforeStartLine = startLine;
+        auto begin = isRowAxis ? m_autoRepeatEmptyColumns->begin() : m_autoRepeatEmptyRows->begin();
+        for (auto it = begin; *it != startLine; ++it) {
+            ASSERT(nonEmptyTracksBeforeStartLine);
+            --nonEmptyTracksBeforeStartLine;
+        }
+        if (nonEmptyTracksBeforeStartLine)
+            gapAccumulator += gap;
+    }
+
+    // If the endLine is the end line of a collapsed track we need to go forward till we reach a non
+    // collapsed track. If we find a non collapsed track we need to add that gap.
+    if (isEmptyAutoRepeatTrack(direction, endLine - 1)) {
+        unsigned nonEmptyTracksAfterEndLine = (isRowAxis ? gridColumnCount() : gridRowCount()) - endLine;
+        auto currentEmptyTrack = isRowAxis ? m_autoRepeatEmptyColumns->find(endLine - 1) : m_autoRepeatEmptyRows->find(endLine - 1);
+        auto endEmptyTrack = isRowAxis ? m_autoRepeatEmptyColumns->end() : m_autoRepeatEmptyRows->end();
+        // HashSet iterators do not implement operator- so we have to manually iterate to know the number of remaining empty tracks.
+        for (auto it = ++currentEmptyTrack; it != endEmptyTrack; ++it) {
+            ASSERT(nonEmptyTracksAfterEndLine >= 1);
+            --nonEmptyTracksAfterEndLine;
+        }
+        if (nonEmptyTracksAfterEndLine)
+            gapAccumulator += gap;
+    }
+
+    return gapAccumulator;
 }
 
 void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
@@ -534,7 +592,7 @@ void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo
     sizingData.sizingOperation = IntrinsicSizeComputation;
     computeUsedBreadthOfGridTracks(ForColumns, sizingData, minLogicalWidth, maxLogicalWidth);
 
-    LayoutUnit totalGuttersSize = guttersSize(ForColumns, sizingData.columnTracks.size());
+    LayoutUnit totalGuttersSize = guttersSize(ForColumns, 0, sizingData.columnTracks.size());
     minLogicalWidth += totalGuttersSize;
     maxLogicalWidth += totalGuttersSize;
 
@@ -560,7 +618,7 @@ void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
     minHeight += scrollbarHeight;
     maxHeight += scrollbarHeight;
 
-    LayoutUnit totalGuttersSize = guttersSize(ForRows, gridRowCount());
+    LayoutUnit totalGuttersSize = guttersSize(ForRows, 0, gridRowCount());
     minHeight += totalGuttersSize;
     maxHeight += totalGuttersSize;
 
@@ -608,7 +666,7 @@ void RenderGrid::computeUsedBreadthOfGridTracks(GridTrackSizingDirection directi
     // Grid gutters were removed from freeSpace by the caller (if freeSpace is definite),
     // but we must use them to compute relative (i.e. percentages) sizes.
     if (initialFreeSpace)
-        maxSize += guttersSize(direction, direction == ForColumns ? gridColumnCount() : gridRowCount());
+        maxSize += guttersSize(direction, 0, direction == ForColumns ? gridColumnCount() : gridRowCount());
 
     // 1. Initialize per Grid track variables.
     for (unsigned i = 0; i < tracks.size(); ++i) {
@@ -845,6 +903,10 @@ const GridTrackSize& RenderGrid::rawGridTrackSize(GridTrackSizingDirection direc
 
 GridTrackSize RenderGrid::gridTrackSize(GridTrackSizingDirection direction, unsigned translatedIndex, SizingOperation sizingOperation) const
 {
+    // Collapse empty auto repeat tracks if auto-fit.
+    if (hasAutoRepeatEmptyTracks(direction) && isEmptyAutoRepeatTrack(direction, translatedIndex))
+        return { Length(Fixed), Length(Fixed) };
+
     auto& trackSize = rawGridTrackSize(direction, translatedIndex);
 
     GridLength minTrackBreadth = trackSize.minTrackBreadth();
@@ -1236,7 +1298,7 @@ void RenderGrid::resolveContentBasedTrackSizingFunctionsForItems(GridTrackSizing
         if (sizingData.filteredTracks.isEmpty())
             continue;
 
-        spanningTracksSize += guttersSize(direction, itemSpan.integerSpan());
+        spanningTracksSize += guttersSize(direction, itemSpan.startLine(), itemSpan.integerSpan());
 
         LayoutUnit extraSpace = currentItemSizeForTrackSizeComputationPhase(phase, gridItemWithSpan.gridItem(), direction, sizingData) - spanningTracksSize;
         extraSpace = std::max<LayoutUnit>(extraSpace, 0);
@@ -1405,7 +1467,7 @@ unsigned RenderGrid::computeAutoRepeatTracksCount(GridTrackSizingDirection direc
 
     // 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);
+    LayoutUnit gapSize = gridGapForDirection(direction);
     tracksSize += gapSize * trackSizes.size();
 
     LayoutUnit freeSpace = availableSize.value() - tracksSize;
@@ -1423,6 +1485,37 @@ unsigned RenderGrid::computeAutoRepeatTracksCount(GridTrackSizingDirection direc
     return repetitions;
 }
 
+
+std::unique_ptr<RenderGrid::OrderedTrackIndexSet> RenderGrid::computeEmptyTracksForAutoRepeat(GridTrackSizingDirection direction) const
+{
+    bool isRowAxis = direction == ForColumns;
+    if ((isRowAxis && style().gridAutoRepeatColumnsType() != AutoFit)
+        || (!isRowAxis && style().gridAutoRepeatRowsType() != AutoFit))
+        return nullptr;
+
+    std::unique_ptr<OrderedTrackIndexSet> emptyTrackIndexes;
+    size_t insertionPoint = isRowAxis ? style().gridAutoRepeatColumnsInsertionPoint() : style().gridAutoRepeatRowsInsertionPoint();
+    size_t repetitions = autoRepeatCountForDirection(direction);
+    size_t firstAutoRepeatTrack = insertionPoint + std::abs(isRowAxis ? m_smallestColumnStart : m_smallestRowStart);
+    size_t lastAutoRepeatTrack = firstAutoRepeatTrack + repetitions;
+
+    if (m_gridItemArea.isEmpty()) {
+        emptyTrackIndexes = std::make_unique<OrderedTrackIndexSet>();
+        for (unsigned trackIndex = firstAutoRepeatTrack; trackIndex < lastAutoRepeatTrack; ++trackIndex)
+            emptyTrackIndexes->add(trackIndex);
+    } else {
+        for (unsigned trackIndex = firstAutoRepeatTrack; trackIndex < lastAutoRepeatTrack; ++trackIndex) {
+            GridIterator iterator(m_grid, direction, trackIndex);
+            if (!iterator.nextGridItem()) {
+                if (!emptyTrackIndexes)
+                    emptyTrackIndexes = std::make_unique<OrderedTrackIndexSet>();
+                emptyTrackIndexes->add(trackIndex);
+            }
+        }
+    }
+    return emptyTrackIndexes;
+}
+
 void RenderGrid::placeItemsOnGrid()
 {
     ASSERT(m_gridIsDirty);
@@ -1468,6 +1561,10 @@ void RenderGrid::placeItemsOnGrid()
     placeSpecifiedMajorAxisItemsOnGrid(specifiedMajorAxisAutoGridItems);
     placeAutoMajorAxisItemsOnGrid(autoMajorAxisAutoGridItems);
 
+    // Compute collapsible tracks for auto-fit.
+    m_autoRepeatEmptyColumns = computeEmptyTracksForAutoRepeat(ForColumns);
+    m_autoRepeatEmptyRows = computeEmptyTracksForAutoRepeat(ForRows);
+
 #if ENABLE(ASSERT)
     for (RenderBox* child = m_orderIterator.first(); child; child = m_orderIterator.next()) {
         if (child->isOutOfFlowPositioned())
@@ -1647,6 +1744,45 @@ void RenderGrid::clearGrid()
     m_gridIsDirty = true;
 }
 
+Vector<LayoutUnit> RenderGrid::trackSizesForComputedStyle(GridTrackSizingDirection direction) const
+{
+    bool isRowAxis = direction == ForColumns;
+    auto& positions = isRowAxis ? m_columnPositions : m_rowPositions;
+    size_t numPositions = positions.size();
+    LayoutUnit offsetBetweenTracks = isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
+
+    Vector<LayoutUnit> tracks;
+    if (numPositions < 2)
+        return tracks;
+
+    bool hasCollapsedTracks = hasAutoRepeatEmptyTracks(direction);
+    LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction) : LayoutUnit();
+    tracks.reserveCapacity(numPositions - 1);
+    for (size_t i = 0; i < numPositions - 2; ++i)
+        tracks.append(positions[i + 1] - positions[i] - offsetBetweenTracks - gap);
+    tracks.append(positions[numPositions - 1] - positions[numPositions - 2]);
+
+    if (!hasCollapsedTracks)
+        return tracks;
+
+    size_t remainingEmptyTracks = isRowAxis ? m_autoRepeatEmptyColumns->size() : m_autoRepeatEmptyRows->size();
+    size_t lastLine = tracks.size();
+    gap = gridGapForDirection(direction);
+    for (size_t i = 1; i < lastLine; ++i) {
+        if (isEmptyAutoRepeatTrack(direction, i - 1))
+            --remainingEmptyTracks;
+        else {
+            // Remove the gap between consecutive non empty tracks. Remove it also just once for an
+            // arbitrary number of empty tracks between two non empty ones.
+            bool allRemainingTracksAreEmpty = remainingEmptyTracks == (lastLine - i);
+            if (!allRemainingTracksAreEmpty || !isEmptyAutoRepeatTrack(direction, i))
+                tracks[i - 1] -= gap;
+        }
+    }
+
+    return tracks;
+}
+
 static const StyleContentAlignmentData& contentAlignmentNormalBehaviorGrid()
 {
     static const StyleContentAlignmentData normalBehavior = {ContentPositionNormal, ContentDistributionStretch};
@@ -1823,7 +1959,7 @@ void RenderGrid::offsetAndBreadthForPositionedChild(const RenderBox& child, Grid
 
         // These vectors store line positions including gaps, but we shouldn't consider them for the edges of the grid.
         if (endLine > 0 && endLine < lastLine) {
-            end -= guttersSize(direction, 2);
+            end -= guttersSize(direction, endLine - 1, 2);
             end -= isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
         }
     }
@@ -1840,7 +1976,7 @@ void RenderGrid::offsetAndBreadthForPositionedChild(const RenderBox& child, Grid
             offset = translateRTLCoordinate(m_columnPositions[endLine]) - borderLogicalLeft();
 
             if (endLine > 0 && endLine < lastLine) {
-                offset += guttersSize(direction, 2);
+                offset += guttersSize(direction, endLine - 1, 2);
                 offset += isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
             }
         }
@@ -1874,7 +2010,7 @@ LayoutUnit RenderGrid::assumedRowsSizeForOrthogonalChild(const RenderBox& child,
             gridAreaSize += valueForLength(maxTrackSize.length(), containingBlockAvailableSize);
     }
 
-    gridAreaSize += guttersSize(ForRows, span.integerSpan());
+    gridAreaSize += guttersSize(ForRows, span.startLine(), span.integerSpan());
 
     return gridAreaIsIndefinite ? std::max(child.maxPreferredLogicalWidth(), gridAreaSize) : gridAreaSize;
 }
@@ -1893,7 +2029,7 @@ LayoutUnit RenderGrid::gridAreaBreadthForChild(const RenderBox& child, GridTrack
     for (auto trackPosition : span)
         gridAreaBreadth += tracks[trackPosition].baseSize();
 
-    gridAreaBreadth += guttersSize(direction, span.integerSpan());
+    gridAreaBreadth += guttersSize(direction, span.startLine(), span.integerSpan());
 
     return gridAreaBreadth;
 }
@@ -1929,16 +2065,40 @@ void RenderGrid::populateGridPositionsForDirection(GridSizingData& sizingData, G
     unsigned lastLine = numberOfLines - 1;
 
     ContentAlignmentData offset = computeContentPositionAndDistributionOffset(direction, sizingData.freeSpaceForDirection(direction).value(), numberOfTracks);
-    LayoutUnit trackGap = guttersSize(direction, 2);
     auto& positions = isRowAxis ? m_columnPositions : m_rowPositions;
     positions.resize(numberOfLines);
     auto borderAndPadding = isRowAxis ? borderAndPaddingLogicalLeft() : borderAndPaddingBefore();
     positions[0] = borderAndPadding + offset.positionOffset;
     if (numberOfLines > 1) {
+        // If we have collapsed tracks we just ignore gaps here and add them later as we might not
+        // compute the gap between two consecutive tracks without examining the surrounding ones.
+        bool hasCollapsedTracks = hasAutoRepeatEmptyTracks(direction);
+        LayoutUnit gap = !hasCollapsedTracks ? gridGapForDirection(direction) : LayoutUnit();
         unsigned nextToLastLine = numberOfLines - 2;
         for (unsigned i = 0; i < nextToLastLine; ++i)
-            positions[i + 1] = positions[i] + offset.distributionOffset + tracks[i].baseSize() + trackGap;
+            positions[i + 1] = positions[i] + offset.distributionOffset + tracks[i].baseSize() + gap;
         positions[lastLine] = positions[nextToLastLine] + tracks[nextToLastLine].baseSize();
+
+        // Adjust collapsed gaps. Collapsed tracks cause the surrounding gutters to collapse (they
+        // coincide exactly) except on the edges of the grid where they become 0.
+        if (hasCollapsedTracks) {
+            gap = gridGapForDirection(direction);
+            unsigned remainingEmptyTracks = isRowAxis ? m_autoRepeatEmptyColumns->size() : m_autoRepeatEmptyRows->size();
+            LayoutUnit gapAccumulator;
+            for (unsigned i = 1; i < lastLine; ++i) {
+                if (isEmptyAutoRepeatTrack(direction, i - 1))
+                    --remainingEmptyTracks;
+                else {
+                    // Add gap between consecutive non empty tracks. Add it also just once for an
+                    // arbitrary number of empty tracks between two non empty ones.
+                    bool allRemainingTracksAreEmpty = remainingEmptyTracks == (lastLine - i);
+                    if (!allRemainingTracksAreEmpty || !isEmptyAutoRepeatTrack(direction, i))
+                        gapAccumulator += gap;
+                }
+                positions[i] += gapAccumulator;
+            }
+            positions[lastLine] += gapAccumulator;
+        }
     }
     auto& offsetBetweenTracks = isRowAxis ? m_offsetBetweenColumns : m_offsetBetweenRows;
     offsetBetweenTracks = offset.distributionOffset;
@@ -2202,7 +2362,7 @@ LayoutUnit RenderGrid::columnAxisOffsetForChild(const RenderBox& child) const
         // so we need to subtract them to get the actual end position for a given row
         // (this does not have to be done for the last track as there are no more m_rowPositions after it).
         if (childEndLine < m_rowPositions.size() - 1)
-            endOfRow -= guttersSize(ForRows, 2) + m_offsetBetweenRows;
+            endOfRow -= gridGapForDirection(ForRows) + m_offsetBetweenRows;
         LayoutUnit childBreadth = child.logicalHeight() + child.marginLogicalHeight();
         auto overflow = child.style().resolvedAlignSelf(style(), selfAlignmentNormalBehavior).overflow();
         LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfRow - startOfRow, childBreadth);
@@ -2235,7 +2395,7 @@ LayoutUnit RenderGrid::rowAxisOffsetForChild(const RenderBox& child) const
         // so we need to subtract them to get the actual end position for a given column
         // (this does not have to be done for the last track as there are no more m_columnPositions after it).
         if (childEndLine < m_columnPositions.size() - 1)
-            endOfColumn -= guttersSize(ForColumns, 2) + m_offsetBetweenColumns;
+            endOfColumn -= gridGapForDirection(ForColumns) + m_offsetBetweenColumns;
         LayoutUnit childBreadth = child.logicalWidth() + child.marginLogicalWidth();
         auto overflow = child.style().resolvedJustifySelf(style(), selfAlignmentNormalBehavior).overflow();
         LayoutUnit offsetFromStartPosition = computeOverflowAlignmentOffset(overflow, endOfColumn - startOfColumn, childBreadth);
index 822e596..52effa8 100644 (file)
@@ -57,12 +57,11 @@ public:
     bool avoidsFloats() const override { return true; }
     bool canDropAnonymousBlockChild() const override { return false; }
 
+    Vector<LayoutUnit> trackSizesForComputedStyle(GridTrackSizingDirection) const;
+
     const Vector<LayoutUnit>& columnPositions() const { return m_columnPositions; }
     const Vector<LayoutUnit>& rowPositions() const { return m_rowPositions; }
 
-    LayoutUnit guttersSize(GridTrackSizingDirection, unsigned span) const;
-    LayoutUnit offsetBetweenTracks(GridTrackSizingDirection) const;
-
     size_t autoRepeatCountForDirection(GridTrackSizingDirection) const;
 
 private:
@@ -85,6 +84,12 @@ private:
 
     unsigned computeAutoRepeatTracksCount(GridTrackSizingDirection) const;
 
+    typedef ListHashSet<size_t> OrderedTrackIndexSet;
+    std::unique_ptr<OrderedTrackIndexSet> computeEmptyTracksForAutoRepeat(GridTrackSizingDirection) const;
+
+    bool hasAutoRepeatEmptyTracks(GridTrackSizingDirection) const;
+    bool isEmptyAutoRepeatTrack(GridTrackSizingDirection, unsigned track) const;
+
     void placeItemsOnGrid();
     void populateExplicitGridAndOrderIterator();
     std::unique_ptr<GridArea> createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(const RenderBox&, GridTrackSizingDirection, const GridSpan&) const;
@@ -177,6 +182,9 @@ private:
     bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&);
 #endif
 
+    LayoutUnit gridGapForDirection(GridTrackSizingDirection) const;
+    LayoutUnit guttersSize(GridTrackSizingDirection, unsigned startLine, unsigned span) const;
+
     bool spanningItemCrossesFlexibleSizedTracks(const GridSpan&, GridTrackSizingDirection, SizingOperation) const;
 
     unsigned gridColumnCount() const;
@@ -207,6 +215,9 @@ private:
     bool m_hasAnyOrthogonalChild;
 
     bool m_gridIsDirty { true };
+
+    std::unique_ptr<OrderedTrackIndexSet> m_autoRepeatEmptyColumns { nullptr };
+    std::unique_ptr<OrderedTrackIndexSet> m_autoRepeatEmptyRows { nullptr };
 };
 
 size_t inline RenderGrid::autoRepeatCountForDirection(GridTrackSizingDirection direction) const