Bug 1234311 part 2 - [css-grid-2] Implement 'grid-template-rows/columns' resolved value correctly for subgrid. r=dholbert

This implements the resolution and adds WPTs for:
https://github.com/w3c/csswg-drafts/issues/4362

Differential Revision: https://phabricator.services.mozilla.com/D49027

--HG--
extra : moz-landing-system : lando

layout/generic/nsGridContainerFrame.cpp

@@ -7521,7 +7521,8 @@ void nsGridContainerFrame::Reflow(nsPresContext* aPresContext,
         0, col, std::move(colTrackPositions), std::move(colTrackSizes),
         std::move(colTrackStates), std::move(colRemovedRepeatTracks),
         gridReflowInput.mColFunctions.mRepeatAutoStart,
-        colLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo());
+        colLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo(),
+        IsSubgrid(eLogicalAxisInline));
     SetProperty(GridColTrackInfo(), colInfo);
 
     const auto* subgridRowRange = subgrid && IsSubgrid(eLogicalAxisBlock)
@@ -7561,7 +7562,8 @@ void nsGridContainerFrame::Reflow(nsPresContext* aPresContext,
         std::move(rowTrackSizes), std::move(rowTrackStates),
         std::move(rowRemovedRepeatTracks),
         gridReflowInput.mRowFunctions.mRepeatAutoStart,
-        rowLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo());
+        rowLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo(),
+        IsSubgrid(eLogicalAxisBlock));
     SetProperty(GridRowTrackInfo(), rowInfo);
 
     if (prevInFlow) {
@@ -7590,7 +7592,8 @@ void nsGridContainerFrame::Reflow(nsPresContext* aPresContext,
           std::move(priorRowInfo->mSizes), std::move(priorRowInfo->mStates),
           std::move(priorRowInfo->mRemovedRepeatTracks),
           priorRowInfo->mRepeatFirstTrack,
-          std::move(priorRowInfo->mResolvedLineNames));
+          std::move(priorRowInfo->mResolvedLineNames),
+          priorRowInfo->mIsSubgrid);
       prevInFlow->SetProperty(GridRowTrackInfo(), revisedPriorRowInfo);
     }
 

layout/generic/nsGridContainerFrame.h

@@ -45,7 +45,8 @@ struct ComputedGridTrackInfo {
       nsTArray<nscoord>&& aPositions, nsTArray<nscoord>&& aSizes,
       nsTArray<uint32_t>&& aStates, nsTArray<bool>&& aRemovedRepeatTracks,
       uint32_t aRepeatFirstTrack,
-      nsTArray<nsTArray<StyleCustomIdent>>&& aResolvedLineNames)
+      nsTArray<nsTArray<StyleCustomIdent>>&& aResolvedLineNames,
+      bool aIsSubgrid)
       : mNumLeadingImplicitTracks(aNumLeadingImplicitTracks),
         mNumExplicitTracks(aNumExplicitTracks),
         mStartFragmentTrack(aStartFragmentTrack),
@@ -54,8 +55,9 @@ struct ComputedGridTrackInfo {
         mSizes(aSizes),
         mStates(aStates),
         mRemovedRepeatTracks(aRemovedRepeatTracks),
+        mResolvedLineNames(std::move(aResolvedLineNames)),
         mRepeatFirstTrack(aRepeatFirstTrack),
-        mResolvedLineNames(std::move(aResolvedLineNames)) {}
+        mIsSubgrid(aIsSubgrid) {}
   uint32_t mNumLeadingImplicitTracks;
   uint32_t mNumExplicitTracks;
   uint32_t mStartFragmentTrack;
@@ -64,8 +66,9 @@ struct ComputedGridTrackInfo {
   nsTArray<nscoord> mSizes;
   nsTArray<uint32_t> mStates;
   nsTArray<bool> mRemovedRepeatTracks;
-  uint32_t mRepeatFirstTrack;
   nsTArray<nsTArray<StyleCustomIdent>> mResolvedLineNames;
+  uint32_t mRepeatFirstTrack;
+  bool mIsSubgrid;
 };
 
 struct ComputedGridLineInfo {

layout/style/nsComputedDOMStyle.cpp

@@ -1548,30 +1548,19 @@ already_AddRefed<nsROCSSPrimitiveValue> nsComputedDOMStyle::GetGridTrackSize(
 already_AddRefed<CSSValue> nsComputedDOMStyle::GetGridTemplateColumnsRows(
     const StyleGridTemplateComponent& aTrackList,
     const ComputedGridTrackInfo& aTrackInfo) {
-  if (aTrackList.IsSubgrid()) {
-    // XXX TODO: add support for repeat(auto-fill) for 'subgrid' (bug 1234311)
+  if (aTrackInfo.mIsSubgrid) {
     RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(false);
-
-    auto& subgrid = *aTrackList.AsSubgrid();
-
     RefPtr<nsROCSSPrimitiveValue> subgridKeyword = new nsROCSSPrimitiveValue;
     subgridKeyword->SetIdent(eCSSKeyword_subgrid);
     valueList->AppendCSSValue(subgridKeyword.forget());
-
-    auto names = subgrid.names.AsSpan();
-    for (auto i : IntegerRange(names.Length())) {
-      if (MOZ_UNLIKELY(i == subgrid.fill_idx)) {
-        RefPtr<nsROCSSPrimitiveValue> start = new nsROCSSPrimitiveValue;
-        start->SetString(NS_LITERAL_STRING("repeat(auto-fill,"));
-        valueList->AppendCSSValue(start.forget());
-      }
-      AppendGridLineNames(valueList, names[i].AsSpan(),
-                          /*aSuppressEmptyList*/ false);
-      if (MOZ_UNLIKELY(i == subgrid.fill_idx)) {
-        RefPtr<nsROCSSPrimitiveValue> end = new nsROCSSPrimitiveValue;
-        end->SetString(NS_LITERAL_STRING(")"));
-        valueList->AppendCSSValue(end.forget());
-      }
+    for (const auto& lineNames : aTrackInfo.mResolvedLineNames) {
+      AppendGridLineNames(valueList, lineNames, /*aSuppressEmptyList*/ false);
+    }
+    uint32_t line = aTrackInfo.mResolvedLineNames.Length();
+    uint32_t lastLine = aTrackInfo.mNumExplicitTracks + 1;
+    const Span<const StyleCustomIdent> empty;
+    for (; line < lastLine; ++line) {
+      AppendGridLineNames(valueList, empty, /*aSuppressEmptyList*/ false);
     }
     return valueList.forget();
   }

testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html

@@ -38,5 +38,20 @@ x { background: grey; }
   </div>
 </div>
 
+<script>
+  const expectedResults = [
+    "subgrid [] [] [] []",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
 </body>
 </html>

testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html

@@ -50,5 +50,20 @@ x { background: grey; }
   </div>
 </div>
 
+<script>
+  const expectedResults = [
+    "subgrid [x] [b] [] [] [b]",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
 </body>
 </html>

testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html

@@ -151,5 +151,32 @@ x {
 </div>
 </div>
 
+<script>
+  const expectedResults = [
+    "subgrid [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] []",
+  ];
+  [...document.querySelectorAll('div > div')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
 </body>
 </html>

testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html

@@ -390,5 +390,44 @@ html,body {
   <div style="grid-column:y -5"></div>
 </div></div>
 
+<script>
+  const expectedResults = [
+    "subgrid [z] [z] [z] [z] [z]",
+    "subgrid [x] [z] [z] [z] [z]",
+    "subgrid [x] [x] [z] [z] [z]",
+    "subgrid [x] [x] [x] [z] [z]",
+    "subgrid [x] [x] [x] [x] [z]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [y] [z] [z] [z] [z]",
+    "subgrid [x] [y] [z] [z] [z]",
+    "subgrid [x] [x] [y] [z] [z]",
+    "subgrid [x] [x] [x] [y] [z]",
+    "subgrid [x] [x] [x] [x] [y]",
+    "subgrid [y] [y] [z] [z] [z]",
+    "subgrid [x] [y] [y] [z] [z]",
+    "subgrid [x] [x] [y] [y] [z]",
+    "subgrid [x] [x] [x] [y] [y]",
+    "subgrid [y] [y] [y] [z] [z]",
+    "subgrid [x] [y] [y] [y] [z]",
+    "subgrid [x] [x] [y] [y] [y]",
+    "subgrid [y] [y] [y] [y] [z]",
+    "subgrid [x] [y] [y] [y] [y]",
+    "subgrid [y] [y] [y] [y] [y]",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
 </body>
 </html>

testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html

@@ -165,5 +165,40 @@ item {
   </div>
 </div>
 
+<script>
+  const expectedResults = [
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] []",
+    "subgrid [x] [x] [] [] [x]",
+    "subgrid [x] [x] [] [x] []",
+    "subgrid [x] [x] [x] [x] []",
+    "subgrid [] [] [] [] []",
+    "subgrid [] [] [] [x] []",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] []",
+    "subgrid [] [] [] [] []",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [x] [x] [] [] [x]",
+    "subgrid [x] [x] [x] [] []",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] []",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-rows'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
 </body>
 </html>