Bug 1234311 part 2 - [css-grid-2] Implement 'grid-template-rows/columns' resolved value correctly for subgrid. r=dholbert
authorMats Palmgren <mats@mozilla.com>
Sat, 12 Oct 2019 17:16:02 +0000
changeset 497365 2ac943ae442445f96f5a68d5298b320f30b1313a
parent 497364 43f18d905d75ef27a2e76591e9efba0d9442ffd1
child 497366 b89c5a52678cd402f1904cfce67397e1ec153640
push id97838
push usermpalmgren@mozilla.com
push dateSat, 12 Oct 2019 17:17:04 +0000
treeherderautoland@2ac943ae4424 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1234311
milestone71.0a1
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
layout/generic/nsGridContainerFrame.cpp
layout/generic/nsGridContainerFrame.h
layout/style/nsComputedDOMStyle.cpp
testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html
testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html
testing/web-platform/tests/css/css-grid/subgrid/line-names-005.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-006.html
--- a/layout/generic/nsGridContainerFrame.cpp
+++ b/layout/generic/nsGridContainerFrame.cpp
@@ -7516,17 +7516,18 @@ 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,
-        colLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo());
+        colLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo(),
+        IsSubgrid(eLogicalAxisInline));
     SetProperty(GridColTrackInfo(), colInfo);
 
     const auto* subgridRowRange = subgrid && IsSubgrid(eLogicalAxisBlock)
                                       ? &subgrid->SubgridRows()
                                       : nullptr;
     LineNameMap rowLineNameMap(
         gridReflowInput.mGridStyle, GetImplicitNamedAreas(),
         gridReflowInput.mRowFunctions, nullptr, subgridRowRange, true);
@@ -7556,17 +7557,18 @@ 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,
-        rowLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo());
+        rowLineNameMap.GetResolvedLineNamesForComputedGridTrackInfo(),
+        IsSubgrid(eLogicalAxisBlock));
     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.
 
@@ -7585,17 +7587,18 @@ void nsGridContainerFrame::Reflow(nsPres
 
       ComputedGridTrackInfo* revisedPriorRowInfo = new ComputedGridTrackInfo(
           priorRowInfo->mNumLeadingImplicitTracks,
           priorRowInfo->mNumExplicitTracks, priorRowInfo->mStartFragmentTrack,
           gridReflowInput.mStartRow, std::move(priorRowInfo->mPositions),
           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);
     }
 
     // Generate the line info properties. We need to provide the number of
     // repeat tracks produced in the reflow. Only explicit names are assigned
     // to lines here; the mozilla::dom::GridLines class will later extract
     // implicit names from grid areas and assign them to the appropriate lines.
 
--- a/layout/generic/nsGridContainerFrame.h
+++ b/layout/generic/nsGridContainerFrame.h
@@ -40,37 +40,40 @@ typedef CSSOrderAwareFrameIteratorT<nsFr
  */
 struct ComputedGridTrackInfo {
   ComputedGridTrackInfo(
       uint32_t aNumLeadingImplicitTracks, uint32_t aNumExplicitTracks,
       uint32_t aStartFragmentTrack, uint32_t aEndFragmentTrack,
       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),
         mEndFragmentTrack(aEndFragmentTrack),
         mPositions(aPositions),
         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;
   uint32_t mEndFragmentTrack;
   nsTArray<nscoord> mPositions;
   nsTArray<nscoord> mSizes;
   nsTArray<uint32_t> mStates;
   nsTArray<bool> mRemovedRepeatTracks;
+  nsTArray<nsTArray<StyleCustomIdent>> mResolvedLineNames;
   uint32_t mRepeatFirstTrack;
-  nsTArray<nsTArray<StyleCustomIdent>> mResolvedLineNames;
+  bool mIsSubgrid;
 };
 
 struct ComputedGridLineInfo {
   explicit ComputedGridLineInfo(
       nsTArray<nsTArray<RefPtr<nsAtom>>>&& aNames,
       const nsTArray<RefPtr<nsAtom>>& aNamesBefore,
       const nsTArray<RefPtr<nsAtom>>& aNamesAfter,
       nsTArray<RefPtr<nsAtom>>&& aNamesFollowingRepeat)
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -1543,40 +1543,29 @@ already_AddRefed<nsROCSSPrimitiveValue> 
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetString(minmaxStr);
   return val.forget();
 }
 
 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();
   }
 
   uint32_t numSizes = aTrackInfo.mSizes.Length();
   if (!numSizes && !aTrackList.HasRepeatAuto()) {
     RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
     val->SetIdent(eCSSKeyword_none);
--- a/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html
@@ -33,10 +33,25 @@ x { background: grey; }
 <body>
 
 <div class="grid">
   <div class="subgrid">
     <x style="grid-column: span a / a -1"></x>
   </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>
--- a/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html
@@ -45,10 +45,25 @@ x { background: grey; }
     <x style="grid-row:8; grid-column: b -2 / b"></x>
     <x style="grid-row:9; grid-column: b -3 / b"></x>
     <x style="grid-row:10; grid-column: b / b"></x>
     <x style="grid-row:11; grid-column: b / b 10"></x>
     <x style="grid-row:12; grid-column: span b / b -2"></x>
   </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>
--- a/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html
@@ -146,10 +146,37 @@ x {
 <div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
   <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
     <x style="grid-column: a">x</x>
   </div>
 </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>
--- a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html
@@ -385,10 +385,49 @@ html,body {
   <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>
 
+<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>
--- a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html
@@ -160,10 +160,45 @@ item {
 </div>
 
 <div class="grid">
   <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]">
     <item></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>