Bug 1581106 part 3 - [css-grid-2] Implement 'repeat(auto-fill, <line-names>)' in subgridded axis. r=emilio
authorMats Palmgren <mats@mozilla.com>
Mon, 30 Sep 2019 17:32:52 +0000
changeset 495709 91d2317a3e6416a60737ef61fc834a20a62ec082
parent 495708 9fd948f30837f9d2255bbd476558da227c0e5e44
child 495710 185d06f11fd3b87cb1b8e6ba7715feea5a3fc8d9
push id114140
push userdvarga@mozilla.com
push dateWed, 02 Oct 2019 18:04:51 +0000
treeherdermozilla-inbound@32eb0ea893f3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1581106
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1581106 part 3 - [css-grid-2] Implement 'repeat(auto-fill, <line-names>)' in subgridded axis. r=emilio Differential Revision: https://phabricator.services.mozilla.com/D46895
dom/grid/test/chrome/test_grid_repeat_auto_fill.html
layout/generic/nsGridContainerFrame.cpp
servo/components/style/values/generics/grid.rs
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html
testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html
--- a/dom/grid/test/chrome/test_grid_repeat_auto_fill.html
+++ b/dom/grid/test/chrome/test_grid_repeat_auto_fill.html
@@ -67,16 +67,24 @@ body {
   grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px [final];
 }
 .grid18 {
   grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px [final];
 }
 .grid19 {
   grid-template-columns: repeat(auto-fill, [before] 1000px);
 }
+.grid20 {
+  grid-column: 4 / -1;
+  grid-template-columns: subgrid repeat(auto-fill, [x]);
+}
+.grid21 {
+  grid-column: 4 / -1;
+  grid-template-columns: subgrid [a] repeat(auto-fill, [x]) [b];
+}
 
 .box {
   background-color: #444;
   color: #fff;
 }
 .a {
   grid-column: auto;
 }
@@ -506,16 +514,40 @@ function runTests() {
   expectedValues = [
     { "start": 0,
       "names": "before" },
     { "start": 1000,
       "names": "" },
   ];
   testLines("wrapper19", grid, expectedValues);
 
+  wrapper = document.getElementById("wrapper20");
+  grid = wrapper.getGridFragments()[0];
+
+  // test starts and names
+  expectedValues = [
+    { "names": "x" },
+    { "names": "x" },
+    { "names": "x" },
+    { "names": "x" },
+  ];
+  testLines("wrapper20", grid, expectedValues);
+
+  wrapper = document.getElementById("wrapper21");
+  grid = wrapper.getGridFragments()[0];
+
+  // test starts and names
+  expectedValues = [
+    { "names": "a" },
+    { "names": "x" },
+    { "names": "x" },
+    { "names": "b" },
+  ];
+  testLines("wrapper21", grid, expectedValues);
+
   SimpleTest.finish();
 }
 </script>
 </head>
 <body onLoad="runTests();">
 
   <div id="wrapper1" class="wrapper grid1">
     <div id="boxB" class="box b">B</div>
@@ -561,22 +593,24 @@ function runTests() {
   <div id="wrapper8b" class="wrapper grid8">
     <div id="boxF" class="box f">F</div>
   </div>
 
   <br/>
   <div id="wrapper9" class="wrapper grid9">
     <div id="boxB" class="box b">B</div>
     <div id="boxE" class="box e">E</div>
+    <div id="wrapper20" class="wrapper grid20"><x style="grid-column:x">x</x></div>
   </div>
 
   <br/>
   <div id="wrapper10" class="wrapper grid10">
     <div id="boxB" class="box b">B</div>
     <div id="boxE" class="box e">E</div>
+    <div id="wrapper21" class="wrapper grid21"><x style="grid-column:y">y</x></div>
   </div>
 
   <br/>
   <div id="wrapper11" class="wrapper grid11">
   </div>
 
   <br/>
   <div id="wrapper12" class="wrapper grid12">
--- a/layout/generic/nsGridContainerFrame.cpp
+++ b/layout/generic/nsGridContainerFrame.cpp
@@ -205,19 +205,19 @@ struct RepeatTrackSizingInput {
       : mMin(aMin), mSize(aSize), mMax(aMax) {}
 
   // This should be used in intrinsic sizing (i.e. when we can't initialize
   // the sizes directly from ReflowInput values).
   void InitFromStyle(LogicalAxis aAxis, WritingMode aWM,
                      const ComputedStyle* aStyle) {
     const auto& pos = aStyle->StylePosition();
     const bool borderBoxSizing = pos->mBoxSizing == StyleBoxSizing::Border;
-    nscoord bp = NS_UNCONSTRAINEDSIZE; // a sentinel to calculate it only once
-    auto adjustForBoxSizing =
-        [borderBoxSizing, aWM, aAxis, aStyle, &bp](nscoord aSize) {
+    nscoord bp = NS_UNCONSTRAINEDSIZE;  // a sentinel to calculate it only once
+    auto adjustForBoxSizing = [borderBoxSizing, aWM, aAxis, aStyle,
+                               &bp](nscoord aSize) {
       if (!borderBoxSizing) {
         return aSize;
       }
       if (bp == NS_UNCONSTRAINEDSIZE) {
         const auto& padding = aStyle->StylePadding()->mPadding;
         LogicalMargin border(aWM, aStyle->StyleBorder()->GetComputedBorder());
         // We can use zero percentage basis since this is only called from
         // intrinsic sizing code.
@@ -232,28 +232,28 @@ struct RepeatTrackSizingInput {
                border.BStartEnd(aWM);
         }
       }
       return std::max(aSize - bp, 0);
     };
     nscoord& min = mMin.Size(aAxis, aWM);
     nscoord& size = mSize.Size(aAxis, aWM);
     nscoord& max = mMax.Size(aAxis, aWM);
-    const auto& minCoord = aAxis == eLogicalAxisInline ? pos->MinISize(aWM)
-                                                       : pos->MinBSize(aWM);
+    const auto& minCoord =
+        aAxis == eLogicalAxisInline ? pos->MinISize(aWM) : pos->MinBSize(aWM);
     if (minCoord.ConvertsToLength()) {
       min = adjustForBoxSizing(minCoord.ToLength());
     }
-    const auto& maxCoord = aAxis == eLogicalAxisInline ? pos->MaxISize(aWM)
-                                                       : pos->MaxBSize(aWM);
+    const auto& maxCoord =
+        aAxis == eLogicalAxisInline ? pos->MaxISize(aWM) : pos->MaxBSize(aWM);
     if (maxCoord.ConvertsToLength()) {
       max = std::max(min, adjustForBoxSizing(maxCoord.ToLength()));
     }
-    const auto& sizeCoord = aAxis == eLogicalAxisInline ? pos->ISize(aWM)
-                                                        : pos->BSize(aWM);
+    const auto& sizeCoord =
+        aAxis == eLogicalAxisInline ? pos->ISize(aWM) : pos->BSize(aWM);
     if (sizeCoord.ConvertsToLength()) {
       size = Clamp(adjustForBoxSizing(sizeCoord.ToLength()), min, max);
     }
   }
 
   LogicalSize mMin;
   LogicalSize mSize;
   LogicalSize mMax;
@@ -963,17 +963,21 @@ struct nsGridContainerFrame::TrackSizing
       : mTemplate(aTemplate),
         mTrackListValues(aTemplate.TrackListValues()),
         mAutoSizing(aAutoSizing),
         mExplicitGridOffset(0),
         mRepeatAutoStart(aRepeatAutoIndex.valueOr(0)),
         mRepeatAutoEnd(mRepeatAutoStart),
         mRepeatEndDelta(0),
         mHasRepeatAuto(aRepeatAutoIndex.isSome()) {
-    ExpandNonRepeatAutoTracks(aIsSubgrid);
+    MOZ_ASSERT(!mHasRepeatAuto || !aIsSubgrid,
+               "a track-list for a subgrid can't have an <auto-repeat> track");
+    if (!aIsSubgrid) {
+      ExpandNonRepeatAutoTracks();
+    }
     MOZ_ASSERT(!mHasRepeatAuto ||
                (mExpandedTracks.Length() >= 1 &&
                 mRepeatAutoStart < mExpandedTracks.Length()));
   }
 
  public:
   TrackSizingFunctions(const GridTemplate& aGridTemplate,
                        const StyleImplicitGridTracks& aAutoSizing,
@@ -1127,31 +1131,16 @@ struct nsGridContainerFrame::TrackSizing
       ++numRepeatTracks;  // one more to ensure the grid is at least min-size
     }
     // Clamp the number of repeat tracks so that the last line <= kMaxLine.
     // (note that |numTracks| already includes one repeat() track)
     const uint32_t maxRepeatTracks = kMaxLine - numTracks;
     return std::min(numRepeatTracks, maxRepeatTracks);
   }
 
-  nsTArray<nsTArray<StyleCustomIdent>>
-  GetResolvedLineNamesForComputedGridTrackInfo() const {
-    nsTArray<nsTArray<StyleCustomIdent>> result;
-    for (auto& expandedLine : mExpandedLineNames) {
-      nsTArray<StyleCustomIdent> line;
-      for (auto* chunk : expandedLine) {
-        for (auto& name : chunk->AsSpan()) {
-          line.AppendElement(name);
-        }
-      }
-      result.AppendElement(std::move(line));
-    }
-    return result;
-  }
-
   /**
    * Compute the explicit grid end line number (in a zero-based grid).
    * @param aGridTemplateAreasEnd 'grid-template-areas' end line in this axis
    */
   uint32_t ComputeExplicitGridEnd(uint32_t aGridTemplateAreasEnd) {
     uint32_t end = NumExplicitTracks() + 1;
     end = std::max(end, aGridTemplateAreasEnd);
     end = std::min(end, uint32_t(kMaxLine));
@@ -1205,77 +1194,40 @@ struct nsGridContainerFrame::TrackSizing
   }
   uint32_t NumRepeatTracks() const { return mRepeatAutoEnd - mRepeatAutoStart; }
   void SetNumRepeatTracks(uint32_t aNumRepeatTracks) {
     MOZ_ASSERT(mHasRepeatAuto || aNumRepeatTracks == 0);
     mRepeatAutoEnd = mRepeatAutoStart + aNumRepeatTracks;
     mRepeatEndDelta = mHasRepeatAuto ? int32_t(aNumRepeatTracks) - 1 : 0;
   }
 
-  void ExpandNonRepeatAutoTracks(bool aIsSubgrid) {
-    auto lineNameLists = mTemplate.LineNameLists(aIsSubgrid);
-
-    MOZ_ASSERT(mTrackListValues.Length() <= lineNameLists.Length());
-    const NameList* nameListToMerge = nullptr;
-    // NOTE(emilio): We rely on std::move clearing out the array.
-    SmallPointerArray<const NameList> names;
-    for (size_t i = 0; i < lineNameLists.Length(); ++i) {
-      if (nameListToMerge) {
-        names.AppendElement(nameListToMerge);
-        nameListToMerge = nullptr;
-      }
-      names.AppendElement(&lineNameLists[i]);
-      if (i >= mTrackListValues.Length()) {
-        mExpandedLineNames.AppendElement(std::move(names));
-        continue;
-      }
+  // Store mTrackListValues into mExpandedTracks with `repeat(INTEGER, ...)`
+  // tracks expanded.
+  void ExpandNonRepeatAutoTracks() {
+    for (size_t i = 0; i < mTrackListValues.Length(); ++i) {
       auto& value = mTrackListValues[i];
       if (value.IsTrackSize()) {
         mExpandedTracks.AppendElement(MakePair(i, size_t(0)));
-        mExpandedLineNames.AppendElement(std::move(names));
         continue;
       }
       auto& repeat = value.AsTrackRepeat();
       if (!repeat.count.IsNumber()) {
         MOZ_ASSERT(i == mRepeatAutoStart);
         mRepeatAutoStart = mExpandedTracks.Length();
         mRepeatAutoEnd = mRepeatAutoStart;
         mExpandedTracks.AppendElement(MakePair(i, size_t(0)));
-
-        auto repeatNames = repeat.line_names.AsSpan();
-        MOZ_ASSERT(repeatNames.Length() == 2);
-
-        names.AppendElement(&repeatNames[0]);
-        nameListToMerge = &repeatNames[1];
-        mExpandedLineNames.AppendElement(std::move(names));
         continue;
       }
       for (auto j : IntegerRange(repeat.count.AsNumber())) {
         Unused << j;
-        if (nameListToMerge) {
-          names.AppendElement(nameListToMerge);
-          nameListToMerge = nullptr;
-        }
         size_t trackSizesCount = repeat.track_sizes.Length();
-        auto repeatLineNames = repeat.line_names.AsSpan();
-        MOZ_ASSERT(repeatLineNames.Length() == trackSizesCount ||
-                   repeatLineNames.Length() == trackSizesCount + 1);
         for (auto k : IntegerRange(trackSizesCount)) {
-          names.AppendElement(&repeatLineNames[k]);
-          mExpandedLineNames.AppendElement(std::move(names));
           mExpandedTracks.AppendElement(MakePair(i, k));
         }
-        if (repeatLineNames.Length() == trackSizesCount + 1) {
-          nameListToMerge = &repeatLineNames[trackSizesCount];
-        }
-      }
-    }
-
-    if (MOZ_UNLIKELY(mExpandedLineNames.Length() > kMaxLine)) {
-      mExpandedLineNames.TruncateLength(kMaxLine);
+      }
     }
     if (MOZ_UNLIKELY(mExpandedTracks.Length() > kMaxLine - 1)) {
       mExpandedTracks.TruncateLength(kMaxLine - 1);
       if (mHasRepeatAuto && mRepeatAutoStart > kMaxLine - 1) {
         // The `repeat(auto-fill/fit)` track is outside the clamped grid.
         mHasRepeatAuto = false;
       }
     }
@@ -1287,23 +1239,16 @@ struct nsGridContainerFrame::TrackSizing
   const StyleImplicitGridTracks& mAutoSizing;
   // An array from expanded track sizes (without expanding auto-repeat, which is
   // included just once at `mRepeatAutoStart`).
   //
   // Each entry contains two indices, the first into mTrackListValues, and a
   // second one inside mTrackListValues' repeat value, if any, or zero
   // otherwise.
   nsTArray<Pair<size_t, size_t>> mExpandedTracks;
-  // The expanded list of line-names. This is usually a single NameList, but can
-  // be multiple in the case where repeat() expands to something that has a line
-  // name list at the end or such thing.
-  //
-  // FIXME(emilio): This maybe shouldn't belong here, but that way we expand
-  // repeat() only once.
-  nsTArray<SmallPointerArray<const NameList>> mExpandedLineNames;
   // Offset from the start of the implicit grid to the first explicit track.
   uint32_t mExplicitGridOffset;
   // The index of the repeat(auto-fill/fit) track, or zero if there is none.
   // Relative to mExplicitGridOffset (repeat tracks are explicit by definition).
   uint32_t mRepeatAutoStart;
   // The (hypothetical) index of the last such repeat() track.
   uint32_t mRepeatAutoEnd;
   // The difference between mExplicitGridEnd and mSizingFunctions.Length().
@@ -1335,37 +1280,133 @@ class MOZ_STACK_CLASS nsGridContainerFra
    */
   LineNameMap(const nsStylePosition* aStylePosition,
               const ImplicitNamedAreas* aImplicitNamedAreas,
               const TrackSizingFunctions& aTracks,
               const LineNameMap* aParentLineNameMap, const LineRange* aRange,
               bool aIsSameDirection)
       : mStylePosition(aStylePosition),
         mAreas(aImplicitNamedAreas),
-        mTracks(aTracks),
         mRepeatAutoStart(aTracks.mRepeatAutoStart),
         mRepeatAutoEnd(aTracks.mRepeatAutoEnd),
         mRepeatEndDelta(aTracks.mRepeatEndDelta),
-        mTemplateLinesEnd(aTracks.mExpandedLineNames.Length() +
-                          mRepeatEndDelta),
         mParentLineNameMap(aParentLineNameMap),
         mRange(aRange),
         mIsSameDirection(aIsSameDirection),
         mHasRepeatAuto(aTracks.mHasRepeatAuto) {
-    if (MOZ_UNLIKELY(aRange)) { // subgrid case
+    if (MOZ_UNLIKELY(aRange)) {  // subgrid case
       mClampMinLine = 1;
       mClampMaxLine = 1 + aRange->Extent();
+      mRepeatAutoEnd = mRepeatAutoStart;
+      const auto& styleSubgrid = aTracks.mTemplate.AsSubgrid();
+      mHasRepeatAuto =
+          styleSubgrid->fill_idx != std::numeric_limits<size_t>::max();
+      if (mHasRepeatAuto) {
+        const auto& lineNameLists = styleSubgrid->names;
+        int32_t extraAutoFillLineCount = mClampMaxLine - lineNameLists.Length();
+        mRepeatAutoStart = styleSubgrid->fill_idx;
+        mRepeatAutoEnd = mRepeatAutoStart + extraAutoFillLineCount + 1;
+      }
     } else {
       mClampMinLine = kMinLine;
       mClampMaxLine = kMaxLine;
-    }
-    MOZ_ASSERT(mHasRepeatAuto || mRepeatEndDelta == 0);
-    MOZ_ASSERT(!mHasRepeatAuto ||
-               (mTracks.mExpandedLineNames.Length() >= 2 &&
-                mRepeatAutoStart <= mTracks.mExpandedLineNames.Length()));
+      if (mHasRepeatAuto) {
+        mTrackAutoRepeatLineNames =
+            aTracks.mTemplate.GetRepeatAutoValue()->line_names.AsSpan();
+      }
+    }
+    ExpandRepeatLineNames(!!aRange, aTracks);
+    mTemplateLinesEnd = mExpandedLineNames.Length() + mRepeatEndDelta;
+    MOZ_ASSERT(mHasRepeatAuto || mRepeatEndDelta <= 0);
+    MOZ_ASSERT(!mHasRepeatAuto || aRange ||
+               (mExpandedLineNames.Length() >= 2 &&
+                mRepeatAutoStart <= mExpandedLineNames.Length()));
+  }
+
+  // Store line names into mExpandedLineNames with `repeat(INTEGER, ...)`
+  // expanded (for non-subgrid), and all `repeat(...)` expanded (for subgrid).
+  void ExpandRepeatLineNames(bool aIsSubgrid,
+                             const TrackSizingFunctions& aTracks) {
+    auto lineNameLists = aTracks.mTemplate.LineNameLists(aIsSubgrid);
+
+    const auto& trackListValues = aTracks.mTrackListValues;
+    const NameList* nameListToMerge = nullptr;
+    // NOTE(emilio): We rely on std::move clearing out the array.
+    SmallPointerArray<const NameList> names;
+    uint32_t end =
+        std::min<uint32_t>(lineNameLists.Length(), mClampMaxLine + 1);
+    for (uint32_t i = 0; i < end; ++i) {
+      if (aIsSubgrid) {
+        if (MOZ_UNLIKELY(mHasRepeatAuto && i == mRepeatAutoStart)) {
+          // XXX expand 'auto-fill' names for subgrid for now since HasNameAt()
+          // only deals with auto-repeat **tracks** currently.
+          for (auto j = i; j < mRepeatAutoEnd; ++j) {
+            names.AppendElement(&lineNameLists[i]);
+            mExpandedLineNames.AppendElement(std::move(names));
+          }
+          mHasRepeatAuto = false;
+        } else {
+          names.AppendElement(&lineNameLists[i]);
+          mExpandedLineNames.AppendElement(std::move(names));
+        }
+        // XXX expand repeat(<integer>, ...) line names here (bug 1583429)
+        continue;
+      }
+
+      if (nameListToMerge) {
+        names.AppendElement(nameListToMerge);
+        nameListToMerge = nullptr;
+      }
+      names.AppendElement(&lineNameLists[i]);
+      if (i >= trackListValues.Length()) {
+        mExpandedLineNames.AppendElement(std::move(names));
+        continue;
+      }
+      auto& value = trackListValues[i];
+      if (value.IsTrackSize()) {
+        mExpandedLineNames.AppendElement(std::move(names));
+        continue;
+      }
+      auto& repeat = value.AsTrackRepeat();
+      if (!repeat.count.IsNumber()) {
+        MOZ_ASSERT(mRepeatAutoStart == mExpandedLineNames.Length());
+        auto repeatNames = repeat.line_names.AsSpan();
+        MOZ_ASSERT(repeatNames.Length() == 2);
+
+        names.AppendElement(&repeatNames[0]);
+        nameListToMerge = &repeatNames[1];
+        mExpandedLineNames.AppendElement(std::move(names));
+        continue;
+      }
+      for (auto j : IntegerRange(repeat.count.AsNumber())) {
+        Unused << j;
+        if (nameListToMerge) {
+          names.AppendElement(nameListToMerge);
+          nameListToMerge = nullptr;
+        }
+        size_t trackSizesCount = repeat.track_sizes.Length();
+        auto repeatLineNames = repeat.line_names.AsSpan();
+        MOZ_ASSERT(repeatLineNames.Length() == trackSizesCount ||
+                   repeatLineNames.Length() == trackSizesCount + 1);
+        for (auto k : IntegerRange(trackSizesCount)) {
+          names.AppendElement(&repeatLineNames[k]);
+          mExpandedLineNames.AppendElement(std::move(names));
+        }
+        if (repeatLineNames.Length() == trackSizesCount + 1) {
+          nameListToMerge = &repeatLineNames[trackSizesCount];
+        }
+      }
+    }
+
+    if (MOZ_UNLIKELY(mExpandedLineNames.Length() > uint32_t(mClampMaxLine))) {
+      mExpandedLineNames.TruncateLength(mClampMaxLine);
+    }
+    if (MOZ_UNLIKELY(mHasRepeatAuto && aIsSubgrid)) {
+      mHasRepeatAuto = false;  // we've expanded all subgrid auto-fill lines
+    }
   }
 
   /**
    * Find the aNth occurrence of aName, searching forward if aNth is positive,
    * and in reverse if aNth is negative (aNth == 0 is invalid), starting from
    * aFromIndex (not inclusive), and return a 1-based line number.
    * Also take into account there is an unconditional match at the lines in
    * aImplicitLines.
@@ -1462,16 +1503,96 @@ class MOZ_STACK_CLASS nsGridContainerFra
       if (map->mAreas && map->mAreas->has(aName)) {
         return true;
       }
       map = map->mParentLineNameMap;
     } while (map);
     return false;
   }
 
+  // For generating line name data for devtools.
+  nsTArray<nsTArray<StyleCustomIdent>>
+  GetResolvedLineNamesForComputedGridTrackInfo() const {
+    nsTArray<nsTArray<StyleCustomIdent>> result;
+    for (auto& expandedLine : mExpandedLineNames) {
+      nsTArray<StyleCustomIdent> line;
+      for (auto* chunk : expandedLine) {
+        for (auto& name : chunk->AsSpan()) {
+          line.AppendElement(name);
+        }
+      }
+      result.AppendElement(std::move(line));
+    }
+    return result;
+  }
+
+  nsTArray<RefPtr<nsAtom>> GetExplicitLineNamesAtIndex(uint32_t aIndex) const {
+    nsTArray<RefPtr<nsAtom>> lineNames;
+    auto AppendElements =
+        [&lineNames](const SmallPointerArray<const NameList>& aNames) {
+          for (auto* list : aNames) {
+            for (auto& ident : list->AsSpan()) {
+              lineNames.AppendElement(ident.AsAtom());
+            }
+          }
+        };
+
+    // Note that for subgrid we already expanded auto-fill into
+    // mExpandedLineNames so this is intentionally null in that case.
+    // (and the logic that follows which merges names makes no sense
+    // for a subgrid line-name-list anyway)
+    const auto* repeatAuto =
+        HasRepeatAuto() && !mTrackAutoRepeatLineNames.IsEmpty()
+            ? &mTrackAutoRepeatLineNames
+            : nullptr;
+    const auto& lineNameLists = ExpandedLineNames();
+    if (!repeatAuto || aIndex <= RepeatAutoStart()) {
+      if (aIndex < lineNameLists.Length()) {
+        AppendElements(lineNameLists[aIndex]);
+      }
+    }
+
+    if (repeatAuto) {
+      const uint32_t repeatAutoStart = RepeatAutoStart();
+      const uint32_t repeatTrackCount = NumRepeatTracks();
+      const uint32_t repeatAutoEnd = (repeatAutoStart + repeatTrackCount);
+      const int32_t repeatEndDelta = int32_t(repeatTrackCount - 1);
+
+      if (aIndex <= repeatAutoEnd && aIndex > repeatAutoStart) {
+        for (auto& name : (*repeatAuto)[1].AsSpan()) {
+          lineNames.AppendElement(name.AsAtom());
+        }
+      }
+      if (aIndex < repeatAutoEnd && aIndex >= repeatAutoStart) {
+        for (auto& name : (*repeatAuto)[0].AsSpan()) {
+          lineNames.AppendElement(name.AsAtom());
+        }
+      }
+      if (aIndex > repeatAutoEnd && aIndex > repeatAutoStart) {
+        uint32_t i = aIndex - repeatEndDelta;
+        if (i < lineNameLists.Length()) {
+          AppendElements(lineNameLists[i]);
+        }
+      }
+    }
+
+    return lineNames;
+  }
+
+  const nsTArray<SmallPointerArray<const NameList>>& ExpandedLineNames() const {
+    return mExpandedLineNames;
+  }
+  const Span<const StyleOwnedSlice<StyleCustomIdent>>&
+  TrackAutoRepeatLineNames() const {
+    return mTrackAutoRepeatLineNames;
+  }
+  bool HasRepeatAuto() const { return mHasRepeatAuto; }
+  uint32_t NumRepeatTracks() const { return mRepeatAutoEnd - mRepeatAutoStart; }
+  uint32_t RepeatAutoStart() const { return mRepeatAutoStart; }
+
   // The min/max line number (1-based) for clamping.
   int32_t mClampMinLine;
   int32_t mClampMaxLine;
 
  private:
   // Return true if this map represents a subgridded axis.
   bool IsSubgridded() const { return mParentLineNameMap != nullptr; }
 
@@ -1576,30 +1697,29 @@ class MOZ_STACK_CLASS nsGridContainerFra
       }
     }
     return false;
   }
 
   // Return true if aName exists at aIndex in this map.
   bool HasNameAt(uint32_t aIndex, nsAtom* aName) const {
     auto ContainsNonAutoRepeat = [&](uint32_t aIndex) {
-      const auto& expanded = mTracks.mExpandedLineNames[aIndex];
+      const auto& expanded = mExpandedLineNames[aIndex];
       for (auto* list : expanded) {
         if (Contains(list->AsSpan(), aName)) {
           return true;
         }
       }
       return false;
     };
 
     if (!mHasRepeatAuto) {
       return ContainsNonAutoRepeat(aIndex);
     }
-    auto* autoRepeatValue = mTracks.mTemplate.GetRepeatAutoValue();
-    auto repeat_names = autoRepeatValue->line_names.AsSpan();
+    auto repeat_names = mTrackAutoRepeatLineNames;
     if (aIndex < mRepeatAutoEnd && aIndex >= mRepeatAutoStart &&
         Contains(repeat_names[0].AsSpan(), aName)) {
       return true;
     }
     if (aIndex <= mRepeatAutoEnd && aIndex > mRepeatAutoStart &&
         Contains(repeat_names[1].AsSpan(), aName)) {
       return true;
     }
@@ -1667,39 +1787,42 @@ class MOZ_STACK_CLASS nsGridContainerFra
       }
     }
     return nullptr;
   }
 
   // Some style data references, for easy access.
   const nsStylePosition* mStylePosition;
   const ImplicitNamedAreas* mAreas;
-  // In order to access the expanded line names.
-  const TrackSizingFunctions& mTracks;
+  // The expanded list of line-names. Each entry is usually a single NameList,
+  // but can be multiple in the case where repeat() expands to something that
+  // has a line name list at the end.
+  nsTArray<SmallPointerArray<const NameList>> mExpandedLineNames;
+  // The repeat(auto-fill/fit) track value, if any. (always empty for subgrid)
+  Span<const StyleOwnedSlice<StyleCustomIdent>> mTrackAutoRepeatLineNames;
   // The index of the repeat(auto-fill/fit) track, or zero if there is none.
-  const uint32_t mRepeatAutoStart;
+  uint32_t mRepeatAutoStart;
   // The (hypothetical) index of the last such repeat() track.
-  const uint32_t mRepeatAutoEnd;
-  // The difference between mTemplateLinesEnd and
-  // mTracks.mExpandedLineNames.Length().
-  const int32_t mRepeatEndDelta;
+  uint32_t mRepeatAutoEnd;
+  // The difference between mTemplateLinesEnd and mExpandedLineNames.Length().
+  int32_t mRepeatEndDelta;
   // The end of the line name lists with repeat(auto-fill/fit) tracks accounted
-  // for.  It is equal to mTracks.mExpandedLineNames.Length() when a repeat()
+  // for.  It is equal to mExpandedLineNames.Length() when a repeat()
   // track generates one track (making mRepeatEndDelta == 0).
-  const uint32_t mTemplateLinesEnd;
+  uint32_t mTemplateLinesEnd;
 
   // The parent line map, or null if this map isn't for a subgrid.
   const LineNameMap* mParentLineNameMap;
   // The subgrid's range, or null if this map isn't for a subgrid.
   const LineRange* mRange;
   // True if the subgrid/parent axes progresses in the same direction.
   const bool mIsSameDirection;
 
   // True if there is a specified repeat(auto-fill/fit) track.
-  const bool mHasRepeatAuto;
+  bool mHasRepeatAuto;
 };
 
 /**
  * State for the tracks in one dimension.
  */
 struct nsGridContainerFrame::Tracks {
   explicit Tracks(LogicalAxis aAxis)
       : mContentBoxSize(NS_UNCONSTRAINEDSIZE),
@@ -2291,64 +2414,16 @@ struct nsGridContainerFrame::Tracks {
   nscoord ResolveSize(const LineRange& aRange) const {
     MOZ_ASSERT(mCanResolveLineRangeSize);
     MOZ_ASSERT(aRange.Extent() > 0, "grid items cover at least one track");
     nscoord pos, size;
     aRange.ToPositionAndLength(mSizes, &pos, &size);
     return size;
   }
 
-  nsTArray<RefPtr<nsAtom>> GetExplicitLineNamesAtIndex(
-      const TrackSizingFunctions& aFunctions, uint32_t aIndex) {
-    nsTArray<RefPtr<nsAtom>> lineNames;
-
-    auto AppendElements =
-        [&lineNames](const SmallPointerArray<const NameList>& aNames) {
-          for (auto* list : aNames) {
-            for (auto& ident : list->AsSpan()) {
-              lineNames.AppendElement(ident.AsAtom());
-            }
-          }
-        };
-
-    const auto& lineNameLists = aFunctions.mExpandedLineNames;
-    if (!aFunctions.mHasRepeatAuto || aIndex <= aFunctions.mRepeatAutoStart) {
-      if (aIndex < lineNameLists.Length()) {
-        AppendElements(lineNameLists[aIndex]);
-      }
-    }
-
-    if (aFunctions.mHasRepeatAuto) {
-      const uint32_t repeatAutoStart = aFunctions.mRepeatAutoStart;
-      const uint32_t repeatTrackCount = aFunctions.NumRepeatTracks();
-      const uint32_t repeatAutoEnd = (repeatAutoStart + repeatTrackCount);
-      const int32_t repeatEndDelta = int32_t(repeatTrackCount - 1);
-      auto* repeatAuto = aFunctions.mTemplate.GetRepeatAutoValue();
-
-      if (aIndex <= repeatAutoEnd && aIndex > repeatAutoStart) {
-        for (auto& name : repeatAuto->line_names.AsSpan()[1].AsSpan()) {
-          lineNames.AppendElement(name.AsAtom());
-        }
-      }
-      if (aIndex < repeatAutoEnd && aIndex >= repeatAutoStart) {
-        for (auto& name : repeatAuto->line_names.AsSpan()[0].AsSpan()) {
-          lineNames.AppendElement(name.AsAtom());
-        }
-      }
-      if (aIndex > repeatAutoEnd && aIndex > repeatAutoStart) {
-        uint32_t i = aIndex - repeatEndDelta;
-        if (i < lineNameLists.Length()) {
-          AppendElements(lineNameLists[i]);
-        }
-      }
-    }
-
-    return lineNames;
-  }
-
 #ifdef DEBUG
   void Dump() const {
     for (uint32_t i = 0, len = mSizes.Length(); i < len; ++i) {
       printf("  %d: ", i);
       mSizes[i].Dump();
       printf("\n");
     }
   }
@@ -7406,16 +7481,24 @@ void nsGridContainerFrame::Reflow(nsPres
     // multiple times in fragmented grids, and it's challenging to scope
     // the bit to only that sequence of calls. This is relatively harmless
     // since this bit is only set by accessing a ChromeOnly property, and
     // therefore can't unduly slow down normal web browsing.
 
     // Now that we know column and row sizes and positions, set
     // the ComputedGridTrackInfo and related properties
 
+    const auto* subgrid = GetProperty(Subgrid::Prop());
+    const auto* subgridColRange = subgrid && IsSubgrid(eLogicalAxisInline)
+                                      ? &subgrid->SubgridCols()
+                                      : nullptr;
+
+    LineNameMap colLineNameMap(
+        gridReflowInput.mGridStyle, GetImplicitNamedAreas(),
+        gridReflowInput.mColFunctions, nullptr, subgridColRange, true);
     uint32_t colTrackCount = gridReflowInput.mCols.mSizes.Length();
     nsTArray<nscoord> colTrackPositions(colTrackCount);
     nsTArray<nscoord> colTrackSizes(colTrackCount);
     nsTArray<uint32_t> colTrackStates(colTrackCount);
     nsTArray<bool> colRemovedRepeatTracks(
         gridReflowInput.mColFunctions.mRemovedRepeatTracks);
     uint32_t col = 0;
     for (const TrackSize& sz : gridReflowInput.mCols.mSizes) {
@@ -7433,20 +7516,25 @@ void nsGridContainerFrame::Reflow(nsPres
     ComputedGridTrackInfo* colInfo = new ComputedGridTrackInfo(
         gridReflowInput.mColFunctions.mExplicitGridOffset,
         IsSubgrid(eLogicalAxisInline)
             ? colTrackSizes.Length()
             : gridReflowInput.mColFunctions.NumExplicitTracks(),
         0, col, std::move(colTrackPositions), std::move(colTrackSizes),
         std::move(colTrackStates), std::move(colRemovedRepeatTracks),
         gridReflowInput.mColFunctions.mRepeatAutoStart,
-        gridReflowInput.mColFunctions
-            .GetResolvedLineNamesForComputedGridTrackInfo());
+        colLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo());
     SetProperty(GridColTrackInfo(), colInfo);
 
+    const auto* subgridRowRange = subgrid && IsSubgrid(eLogicalAxisBlock)
+                                      ? &subgrid->SubgridRows()
+                                      : nullptr;
+    LineNameMap rowLineNameMap(
+        gridReflowInput.mGridStyle, GetImplicitNamedAreas(),
+        gridReflowInput.mRowFunctions, nullptr, subgridRowRange, true);
     uint32_t rowTrackCount = gridReflowInput.mRows.mSizes.Length();
     nsTArray<nscoord> rowTrackPositions(rowTrackCount);
     nsTArray<nscoord> rowTrackSizes(rowTrackCount);
     nsTArray<uint32_t> rowTrackStates(rowTrackCount);
     nsTArray<bool> rowRemovedRepeatTracks(
         gridReflowInput.mRowFunctions.mRemovedRepeatTracks);
     uint32_t row = 0;
     for (const TrackSize& sz : gridReflowInput.mRows.mSizes) {
@@ -7468,18 +7556,17 @@ void nsGridContainerFrame::Reflow(nsPres
         gridReflowInput.mRowFunctions.mExplicitGridOffset,
         IsSubgrid(eLogicalAxisBlock)
             ? rowTrackSizes.Length()
             : gridReflowInput.mRowFunctions.NumExplicitTracks(),
         gridReflowInput.mStartRow, row, std::move(rowTrackPositions),
         std::move(rowTrackSizes), std::move(rowTrackStates),
         std::move(rowRemovedRepeatTracks),
         gridReflowInput.mRowFunctions.mRepeatAutoStart,
-        gridReflowInput.mRowFunctions
-            .GetResolvedLineNamesForComputedGridTrackInfo());
+        rowLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo());
     SetProperty(GridRowTrackInfo(), rowInfo);
 
     if (prevInFlow) {
       // This frame is fragmenting rows from a previous frame, so patch up
       // the prior GridRowTrackInfo with a new end row.
 
       // FIXME: This can be streamlined and/or removed when bug 1151204 lands.
 
@@ -7515,36 +7602,37 @@ void nsGridContainerFrame::Reflow(nsPres
     auto& colFunctions = gridReflowInput.mColFunctions;
 
     // Generate column lines first.
     uint32_t capacity = gridReflowInput.mCols.mSizes.Length();
     nsTArray<nsTArray<RefPtr<nsAtom>>> columnLineNames(capacity);
     for (col = 0; col <= gridReflowInput.mCols.mSizes.Length(); col++) {
       // Offset col by the explicit grid offset, to get the original names.
       nsTArray<RefPtr<nsAtom>> explicitNames =
-          gridReflowInput.mCols.GetExplicitLineNamesAtIndex(
-              colFunctions, col - colFunctions.mExplicitGridOffset);
+          colLineNameMap.GetExplicitLineNamesAtIndex(
+              col - colFunctions.mExplicitGridOffset);
 
       columnLineNames.AppendElement(explicitNames);
     }
     // Get the explicit names that follow a repeat auto declaration.
     nsTArray<RefPtr<nsAtom>> colNamesFollowingRepeat;
     nsTArray<RefPtr<nsAtom>> colBeforeRepeatAuto;
     nsTArray<RefPtr<nsAtom>> colAfterRepeatAuto;
-    if (colFunctions.mHasRepeatAuto) {
+    // Note: the following is only used for a non-subgridded axis.
+    if (colLineNameMap.HasRepeatAuto()) {
+      MOZ_ASSERT(!colFunctions.mTemplate.IsSubgrid());
       // The line name list after the repeatAutoIndex holds the line names
       // for the first explicit line after the repeat auto declaration.
-      uint32_t repeatAutoEnd = colFunctions.mRepeatAutoStart + 1;
-      for (auto* list : colFunctions.mExpandedLineNames[repeatAutoEnd]) {
+      uint32_t repeatAutoEnd = colLineNameMap.RepeatAutoStart() + 1;
+      for (auto* list : colLineNameMap.ExpandedLineNames()[repeatAutoEnd]) {
         for (auto& name : list->AsSpan()) {
           colNamesFollowingRepeat.AppendElement(name.AsAtom());
         }
       }
-      auto names =
-          colFunctions.mTemplate.GetRepeatAutoValue()->line_names.AsSpan();
+      auto names = colLineNameMap.TrackAutoRepeatLineNames();
       for (auto& name : names[0].AsSpan()) {
         colBeforeRepeatAuto.AppendElement(name.AsAtom());
       }
       for (auto& name : names[1].AsSpan()) {
         colAfterRepeatAuto.AppendElement(name.AsAtom());
       }
     }
 
@@ -7555,35 +7643,36 @@ void nsGridContainerFrame::Reflow(nsPres
 
     // Generate row lines next.
     auto& rowFunctions = gridReflowInput.mRowFunctions;
     capacity = gridReflowInput.mRows.mSizes.Length();
     nsTArray<nsTArray<RefPtr<nsAtom>>> rowLineNames(capacity);
     for (row = 0; row <= gridReflowInput.mRows.mSizes.Length(); row++) {
       // Offset row by the explicit grid offset, to get the original names.
       nsTArray<RefPtr<nsAtom>> explicitNames =
-          gridReflowInput.mRows.GetExplicitLineNamesAtIndex(
-              rowFunctions, row - rowFunctions.mExplicitGridOffset);
+          rowLineNameMap.GetExplicitLineNamesAtIndex(
+              row - rowFunctions.mExplicitGridOffset);
       rowLineNames.AppendElement(explicitNames);
     }
     // Get the explicit names that follow a repeat auto declaration.
     nsTArray<RefPtr<nsAtom>> rowNamesFollowingRepeat;
     nsTArray<RefPtr<nsAtom>> rowBeforeRepeatAuto;
     nsTArray<RefPtr<nsAtom>> rowAfterRepeatAuto;
-    if (rowFunctions.mHasRepeatAuto) {
+    // Note: the following is only used for a non-subgridded axis.
+    if (rowLineNameMap.HasRepeatAuto()) {
+      MOZ_ASSERT(!rowFunctions.mTemplate.IsSubgrid());
       // The line name list after the repeatAutoIndex holds the line names
       // for the first explicit line after the repeat auto declaration.
-      uint32_t repeatAutoEnd = rowFunctions.mRepeatAutoStart + 1;
-      for (auto* list : rowFunctions.mExpandedLineNames[repeatAutoEnd]) {
+      uint32_t repeatAutoEnd = rowLineNameMap.RepeatAutoStart() + 1;
+      for (auto* list : rowLineNameMap.ExpandedLineNames()[repeatAutoEnd]) {
         for (auto& name : list->AsSpan()) {
           rowNamesFollowingRepeat.AppendElement(name.AsAtom());
         }
       }
-      auto names =
-          rowFunctions.mTemplate.GetRepeatAutoValue()->line_names.AsSpan();
+      auto names = rowLineNameMap.TrackAutoRepeatLineNames();
       for (auto& name : names[0].AsSpan()) {
         rowBeforeRepeatAuto.AppendElement(name.AsAtom());
       }
       for (auto& name : names[1].AsSpan()) {
         rowAfterRepeatAuto.AppendElement(name.AsAtom());
       }
     }
 
--- a/servo/components/style/values/generics/grid.rs
+++ b/servo/components/style/values/generics/grid.rs
@@ -641,30 +641,29 @@ impl Parse for LineNameList {
                         names_list.push(names);
                     }
                     Ok((names_list, count))
                 })
             });
 
             if let Ok((mut names_list, count)) = repeat_parse_result {
                 match count {
-                    // FIXME(emilio): we probably shouldn't expand repeat() at
-                    // parse time for subgrid.
-                    //
-                    // Also this doesn't have the merging semantics that
-                    // non-subgrid has... But maybe that's ok?
+                    // FIXME(emilio): we shouldn't expand repeat() at
+                    // parse time for subgrid. (bug 1583429)
                     RepeatCount::Number(num) => line_names.extend(
                         names_list
                             .iter()
                             .cloned()
                             .cycle()
                             .take(num.value() as usize * names_list.len()),
                     ),
                     RepeatCount::AutoFill if fill_idx.is_none() => {
                         // `repeat(autof-fill, ..)` should have just one line name.
+                        // FIXME(bug 1341507) the above comment is wrong per:
+                        // https://drafts.csswg.org/css-grid-2/#typedef-name-repeat
                         if names_list.len() != 1 {
                             return Err(
                                 input.new_custom_error(StyleParseErrorKind::UnspecifiedError)
                             );
                         }
                         let names = names_list.pop().unwrap();
 
                         line_names.push(names);
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html
@@ -0,0 +1,362 @@
+<!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, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-5">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html
@@ -0,0 +1,394 @@
+<!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, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1e">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-5">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html
@@ -0,0 +1,397 @@
+<!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, line-names) in parent subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+.grid > .subgrid { grid-template-rows: auto; }
+.grid > .subgrid > .subgrid { grid-column: 1 / span 4; }
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0f"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0g"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0h"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0i"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0j"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-5"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html
@@ -0,0 +1,403 @@
+<!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, line-names) in orthogonal parent subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  background: grey;
+}
+.grid > .subgrid > .subgrid {
+  writing-mode: vertical-lr;
+  grid-template-rows: subgrid;
+  grid-template-columns: initial;
+  grid-column: 1 / span 4;
+  grid-auto-columns: 8px;
+  grid-auto-flow: column;
+}
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+.subgrid > .subgrid > * { writing-mode: horizontal-tb; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0e"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0f"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0g"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0h"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0i"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0j"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-5"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html
@@ -0,0 +1,362 @@
+<!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, line-names) in RTL/LTR subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-5">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html
@@ -0,0 +1,397 @@
+<!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, line-names) in RTL/LTR subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+.grid > .subgrid { grid-template-rows: auto; direction:rtl; }
+.grid > .subgrid > .subgrid { grid-column: 1 / span 4; direction:ltr; }
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0f"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0g"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0h"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0i"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0j"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-5"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html
@@ -0,0 +1,165 @@
+<!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 / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  grid-column: 2 / span 4;
+  background: black;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:3 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 3"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html
@@ -0,0 +1,167 @@
+<!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 / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 2 / span 4;
+  background: black;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  grid-column:x -2 / x -1;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(auto-fill,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html
@@ -0,0 +1,169 @@
+<!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 / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 2 / span 4;
+  background: black;
+  writing-mode: vertical-lr;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  grid-row:x -2 / x -1;
+  background: grey;
+  writing-mode: horizontal-tb;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html
@@ -0,0 +1,167 @@
+<!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 / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-column: 2 / span 4;
+  background: black;
+  writing-mode: vertical-rl;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  background: grey;
+  writing-mode: horizontal-tb;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:3 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 3"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html
@@ -0,0 +1,169 @@
+<!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 / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 2 / span 4;
+  background: black;
+  writing-mode: vertical-rl;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  grid-row:x -2 / x -1;
+  background: grey;
+  writing-mode: horizontal-tb;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+</body>
+</html>