diff options
41 files changed, 1509 insertions, 870 deletions
diff --git a/layout/base/crashtests/1156588.html b/layout/base/crashtests/1156588.html index ed0098f79..b48bc3af2 100644 --- a/layout/base/crashtests/1156588.html +++ b/layout/base/crashtests/1156588.html @@ -2,9 +2,6 @@ <html> <head> <meta charset="UTF-8"> -<!-- -user_pref("layout.css.grid.enabled", true); ---> <script> function boom() diff --git a/layout/base/crashtests/crashtests.list b/layout/base/crashtests/crashtests.list index 1a3bf667b..1c8e2713a 100644 --- a/layout/base/crashtests/crashtests.list +++ b/layout/base/crashtests/crashtests.list @@ -467,7 +467,7 @@ load 1116104.html load 1127198-1.html load 1140198.html load 1143535.html -pref(layout.css.grid.enabled,true) load 1156588.html +load 1156588.html load 1162813.xul load 1163583.html load 1234622-1.html diff --git a/layout/base/nsLayoutUtils.cpp b/layout/base/nsLayoutUtils.cpp index 01d75c1cf..732068ac2 100644 --- a/layout/base/nsLayoutUtils.cpp +++ b/layout/base/nsLayoutUtils.cpp @@ -141,7 +141,6 @@ using namespace mozilla::layers; using namespace mozilla::layout; using namespace mozilla::gfx; -#define GRID_ENABLED_PREF_NAME "layout.css.grid.enabled" #define GRID_TEMPLATE_SUBGRID_ENABLED_PREF_NAME "layout.css.grid-template-subgrid-value.enabled" #define WEBKIT_PREFIXES_ENABLED_PREF_NAME "layout.css.prefixes.webkit" #define DISPLAY_FLOW_ROOT_ENABLED_PREF_NAME "layout.css.display-flow-root.enabled" @@ -194,51 +193,6 @@ static ContentMap& GetContentMap() { return *sContentMap; } -// When the pref "layout.css.grid.enabled" changes, this function is invoked -// to let us update kDisplayKTable, to selectively disable or restore the -// entries for "grid" and "inline-grid" in that table. -static void -GridEnabledPrefChangeCallback(const char* aPrefName, void* aClosure) -{ - MOZ_ASSERT(strncmp(aPrefName, GRID_ENABLED_PREF_NAME, - ArrayLength(GRID_ENABLED_PREF_NAME)) == 0, - "We only registered this callback for a single pref, so it " - "should only be called for that pref"); - - static int32_t sIndexOfGridInDisplayTable; - static int32_t sIndexOfInlineGridInDisplayTable; - static bool sAreGridKeywordIndicesInitialized; // initialized to false - - bool isGridEnabled = - Preferences::GetBool(GRID_ENABLED_PREF_NAME, false); - if (!sAreGridKeywordIndicesInitialized) { - // First run: find the position of "grid" and "inline-grid" in - // kDisplayKTable. - sIndexOfGridInDisplayTable = - nsCSSProps::FindIndexOfKeyword(eCSSKeyword_grid, - nsCSSProps::kDisplayKTable); - MOZ_ASSERT(sIndexOfGridInDisplayTable >= 0, - "Couldn't find grid in kDisplayKTable"); - sIndexOfInlineGridInDisplayTable = - nsCSSProps::FindIndexOfKeyword(eCSSKeyword_inline_grid, - nsCSSProps::kDisplayKTable); - MOZ_ASSERT(sIndexOfInlineGridInDisplayTable >= 0, - "Couldn't find inline-grid in kDisplayKTable"); - sAreGridKeywordIndicesInitialized = true; - } - - // OK -- now, stomp on or restore the "grid" entries in kDisplayKTable, - // depending on whether the grid pref is enabled vs. disabled. - if (sIndexOfGridInDisplayTable >= 0) { - nsCSSProps::kDisplayKTable[sIndexOfGridInDisplayTable].mKeyword = - isGridEnabled ? eCSSKeyword_grid : eCSSKeyword_UNKNOWN; - } - if (sIndexOfInlineGridInDisplayTable >= 0) { - nsCSSProps::kDisplayKTable[sIndexOfInlineGridInDisplayTable].mKeyword = - isGridEnabled ? eCSSKeyword_inline_grid : eCSSKeyword_UNKNOWN; - } -} - // When the pref "layout.css.prefixes.webkit" changes, this function is invoked // to let us update kDisplayKTable, to selectively disable or restore the // entries for "-webkit-box" and "-webkit-inline-box" in that table. @@ -7561,8 +7515,6 @@ struct PrefCallbacks PrefChangedFunc func; }; static const PrefCallbacks kPrefCallbacks[] = { - { GRID_ENABLED_PREF_NAME, - GridEnabledPrefChangeCallback }, { WEBKIT_PREFIXES_ENABLED_PREF_NAME, WebkitPrefixEnabledPrefChangeCallback }, { TEXT_ALIGN_UNSAFE_ENABLED_PREF_NAME, diff --git a/layout/generic/crashtests/1015562.html b/layout/generic/crashtests/1015562.html index 8975e64f2..353ae40e3 100644 --- a/layout/generic/crashtests/1015562.html +++ b/layout/generic/crashtests/1015562.html @@ -3,10 +3,6 @@ <head> <script> -/* -user_pref("layout.css.grid.enabled", true); -*/ - function boom() { document.getElementById("r").appendChild(document.createTextNode("B")); diff --git a/layout/generic/crashtests/1156257.html b/layout/generic/crashtests/1156257.html index e58c1ba5d..479992629 100644 --- a/layout/generic/crashtests/1156257.html +++ b/layout/generic/crashtests/1156257.html @@ -2,9 +2,6 @@ <html> <head> <meta charset="UTF-8"> -<!-- -user_pref("layout.css.grid.enabled", true); ---> <script> function boom() { diff --git a/layout/generic/crashtests/crashtests.list b/layout/generic/crashtests/crashtests.list index c8fb84feb..4d9a5de0f 100644 --- a/layout/generic/crashtests/crashtests.list +++ b/layout/generic/crashtests/crashtests.list @@ -566,7 +566,7 @@ load 986899.html load 1001233.html load 1001258-1.html load 1003441.xul -pref(layout.css.grid.enabled,true) load 1015562.html +load 1015562.html asserts(1-2) load 1015563-1.html asserts(1-2) load 1015563-2.html asserts(0-300) load 1015844.html # bug 574889 @@ -589,7 +589,7 @@ load 1146107.html load 1146114.html load 1153695.html load 1156222.html -pref(layout.css.grid.enabled,true) load 1156257.html +load 1156257.html load 1157011.html load 1169420-1.html load 1169420-2.html @@ -601,9 +601,9 @@ load 1222783.xhtml load 1223568-1.html load 1223568-2.html load 1224230-1.html -pref(layout.css.grid.enabled,true) load 1225118.html -pref(layout.css.grid.enabled,true) load 1225376.html -pref(layout.css.grid.enabled,true) load 1225592.html +load 1225118.html +load 1225376.html +load 1225592.html load 1229437-1.html load 1229437-2.html pref(dom.details_element.enabled,true) load details-containing-only-text.html diff --git a/layout/generic/nsColumnSetFrame.cpp b/layout/generic/nsColumnSetFrame.cpp index 90d425ccf..99733c549 100644 --- a/layout/generic/nsColumnSetFrame.cpp +++ b/layout/generic/nsColumnSetFrame.cpp @@ -183,15 +183,15 @@ nsColumnSetFrame::GetAvailableContentBSize(const ReflowInput& aReflowInput) static nscoord GetColumnGap(nsColumnSetFrame* aFrame, - const nsStyleColumn* aColStyle, nscoord aPercentageBasis) { - const auto& columnGap = aColStyle->mColumnGap; - if (columnGap.GetUnit() == eStyleUnit_Normal) { + const nsStylePosition* positionData = aFrame->StylePosition(); + if (positionData->mColumnGap.GetUnit() == eStyleUnit_Normal) { return aFrame->StyleFont()->mFont.size; } - return nsLayoutUtils::ResolveGapToLength(columnGap, aPercentageBasis); + return nsLayoutUtils::ResolveGapToLength(positionData->mColumnGap, + aPercentageBasis); } nsColumnSetFrame::ReflowConfig @@ -224,7 +224,7 @@ nsColumnSetFrame::ChooseColumnStrategy(const ReflowInput& aReflowInput, colBSize = std::min(colBSize, aReflowInput.ComputedMaxBSize()); } - nscoord colGap = GetColumnGap(this, colStyle, aReflowInput.ComputedISize()); + nscoord colGap = GetColumnGap(this, aReflowInput.ComputedISize()); int32_t numColumns = colStyle->mColumnCount; // If column-fill is set to 'balance', then we want to balance the columns. @@ -400,7 +400,7 @@ nsColumnSetFrame::GetMinISize(nsRenderingContext *aRenderingContext) // include n-1 column gaps. colISize = iSize; iSize *= colStyle->mColumnCount; - nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE); + nscoord colGap = GetColumnGap(this, NS_UNCONSTRAINEDSIZE); iSize += colGap * (colStyle->mColumnCount - 1); // The multiplication above can make 'width' negative (integer overflow), // so use std::max to protect against that. @@ -421,7 +421,7 @@ nsColumnSetFrame::GetPrefISize(nsRenderingContext *aRenderingContext) nscoord result = 0; DISPLAY_PREF_WIDTH(this, result); const nsStyleColumn* colStyle = StyleColumn(); - nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE); + nscoord colGap = GetColumnGap(this, NS_UNCONSTRAINEDSIZE); nscoord colISize; if (colStyle->mColumnWidth.GetUnit() == eStyleUnit_Coord) { diff --git a/layout/generic/nsFlexContainerFrame.cpp b/layout/generic/nsFlexContainerFrame.cpp index 8a393c3fe..4429111e4 100644 --- a/layout/generic/nsFlexContainerFrame.cpp +++ b/layout/generic/nsFlexContainerFrame.cpp @@ -34,6 +34,7 @@ typedef nsFlexContainerFrame::FlexboxAxisTracker FlexboxAxisTracker; typedef nsFlexContainerFrame::StrutInfo StrutInfo; typedef nsFlexContainerFrame::CachedMeasuringReflowResult CachedMeasuringReflowResult; +typedef nsLayoutUtils::IntrinsicISizeType IntrinsicISizeType; static mozilla::LazyLogModule gFlexContainerLog("nsFlexContainerFrame"); @@ -811,17 +812,23 @@ protected: class nsFlexContainerFrame::FlexLine : public LinkedListElement<FlexLine> { public: - FlexLine() + explicit FlexLine(nscoord aMainGapSize) : mNumItems(0), mNumFrozenItems(0), mTotalInnerHypotheticalMainSize(0), mTotalOuterHypotheticalMainSize(0), mLineCrossSize(0), mFirstBaselineOffset(nscoord_MIN), - mLastBaselineOffset(nscoord_MIN) + mLastBaselineOffset(nscoord_MIN), + mMainGapSize(aMainGapSize) {} - // Returns the sum of our FlexItems' outer hypothetical main sizes. + nscoord GetSumOfGaps() const { + return mNumItems > 0 ? (mNumItems - 1) * mMainGapSize : 0; + } + + // Returns the sum of our FlexItems' outer hypothetical main sizes + // and the sum of the main axis {row,column}-gaps between items. // ("outer" = margin-box, and "hypothetical" = before flexing) nscoord GetTotalOuterHypotheticalMainSize() const { return mTotalOuterHypotheticalMainSize; @@ -890,8 +897,16 @@ public: if (aItem->IsFrozen()) { mNumFrozenItems++; } - mTotalInnerHypotheticalMainSize += aItemInnerHypotheticalMainSize; + + mTotalInnerHypotheticalMainSize += (aItemOuterHypotheticalMainSize - + aItemInnerHypotheticalMainSize); mTotalOuterHypotheticalMainSize += aItemOuterHypotheticalMainSize; + + // If the item added was not the first item in the line, we add in + // any gap space as needed. + if (mNumItems >= 2) { + mTotalOuterHypotheticalMainSize += mMainGapSize; + } } // Computes the cross-size and baseline position of this FlexLine, based on @@ -935,6 +950,22 @@ public: return mLastBaselineOffset; } + /** + * Returns the number of items held in this line. Used for total gap + * calculations. + */ + uint32_t GetNumItems() const { + return mNumItems; + } + + /** + * Returns the gap size in the main axis for this line. Used for gap + * calculations. + */ + nscoord GetMainGapSize() const { + return mMainGapSize; + } + // Runs the "Resolving Flexible Lengths" algorithm from section 9.7 of the // CSS flexbox spec to distribute aFlexContainerMainSize among our flex items. void ResolveFlexibleLengths(nscoord aFlexContainerMainSize); @@ -973,6 +1004,9 @@ private: nscoord mLineCrossSize; nscoord mFirstBaselineOffset; nscoord mLastBaselineOffset; + + // Maintain size of each {row,column}-gap in the main axis + const nscoord mMainGapSize; }; // Information about a strut left behind by a FlexItem that's been collapsed @@ -2241,6 +2275,9 @@ public: "miscounted the number of auto margins"); } + // Advances past the gap space (if any) between two flex items + void TraverseGap(nscoord aGapSize) { mPosition += aGapSize; } + // Advances past the packing space (if any) between two flex items void TraversePackingSpace(); @@ -2266,7 +2303,11 @@ public: const ReflowInput& aReflowInput, nscoord aContentBoxCrossSize, bool aIsCrossSizeDefinite, - const FlexboxAxisTracker& aAxisTracker); + const FlexboxAxisTracker& aAxisTracker, + const nscoord aCrossGapSize); + + // Advances past the gap (if any) between two flex lines + void TraverseGap() { mPosition += mCrossGapSize; } // Advances past the packing space (if any) between two flex lines void TraversePackingSpace(); @@ -2288,6 +2329,8 @@ private: uint32_t mNumPackingSpacesRemaining; // XXX this should be uint16_t when we add explicit fallback handling uint8_t mAlignContent; + + const nscoord mCrossGapSize; }; // Utility class for managing our position along the cross axis, *within* a @@ -2581,14 +2624,12 @@ FlexLine::ResolveFlexibleLengths(nscoord aFlexContainerMainSize) } MOZ_ASSERT(!IsEmpty(), "empty lines should take the early-return above"); - // Subtract space occupied by our items' margins/borders/padding, so we can - // just be dealing with the space available for our flex items' content - // boxes. - nscoord spaceReservedForMarginBorderPadding = - mTotalOuterHypotheticalMainSize - mTotalInnerHypotheticalMainSize; - + // Subtract space occupied by our items' margins/borders/padding/gaps, so + // we can just be dealing with the space available for our flex items' + // content boxes. nscoord spaceAvailableForFlexItemsContentBoxes = - aFlexContainerMainSize - spaceReservedForMarginBorderPadding; + aFlexContainerMainSize - (mTotalInnerHypotheticalMainSize + + GetSumOfGaps()); nscoord origAvailableFreeSpace; bool isOrigAvailFreeSpaceInitialized = false; @@ -2867,6 +2908,9 @@ MainAxisPositionTracker:: mNumAutoMarginsInMainAxis += item->GetNumAutoMarginsInAxis(mAxis); } + // Subtract space required for row/col gap from the remaining packing space + mPackingSpaceRemaining -= aLine->GetSumOfGaps(); + if (mPackingSpaceRemaining <= 0) { // No available packing space to use for resolving auto margins. mNumAutoMarginsInMainAxis = 0; @@ -3014,12 +3058,14 @@ CrossAxisPositionTracker:: const ReflowInput& aReflowInput, nscoord aContentBoxCrossSize, bool aIsCrossSizeDefinite, - const FlexboxAxisTracker& aAxisTracker) + const FlexboxAxisTracker& aAxisTracker, + const nscoord aCrossGapSize) : PositionTracker(aAxisTracker.GetCrossAxis(), aAxisTracker.IsCrossAxisReversed()), mPackingSpaceRemaining(0), mNumPackingSpacesRemaining(0), - mAlignContent(aReflowInput.mStylePosition->mAlignContent) + mAlignContent(aReflowInput.mStylePosition->mAlignContent), + mCrossGapSize(aCrossGapSize) { MOZ_ASSERT(aFirstLine, "null first line pointer"); @@ -3072,6 +3118,11 @@ CrossAxisPositionTracker:: numLines++; } + // Subtract space required for row/col gap from the remaining packing space + MOZ_ASSERT(numLines >= 1, + "GenerateFlexLines should've produced at least 1 line"); + mPackingSpaceRemaining -= aCrossGapSize * (numLines - 1); + // If packing space is negative, 'space-between' and 'stretch' behave like // 'flex-start', and 'space-around' and 'space-evenly' behave like 'center'. // In those cases, it's simplest to just pretend we have a different @@ -3673,9 +3724,10 @@ FlexboxAxisTracker::InitAxesFromModernProps( // back depending on aShouldInsertAtFront), and returns a pointer to it. static FlexLine* AddNewFlexLineToList(LinkedList<FlexLine>& aLines, - bool aShouldInsertAtFront) + bool aShouldInsertAtFront, + nscoord aMainGapSize) { - FlexLine* newLine = new FlexLine(); + FlexLine* newLine = new FlexLine(aMainGapSize); if (aShouldInsertAtFront) { aLines.insertFront(newLine); } else { @@ -3692,6 +3744,7 @@ nsFlexContainerFrame::GenerateFlexLines( nscoord aAvailableBSizeForContent, const nsTArray<StrutInfo>& aStruts, const FlexboxAxisTracker& aAxisTracker, + nscoord aMainGapSize, nsTArray<nsIFrame*>& aPlaceholders, /* out */ LinkedList<FlexLine>& aLines /* out */) { @@ -3710,7 +3763,8 @@ nsFlexContainerFrame::GenerateFlexLines( // We have at least one FlexLine. Even an empty flex container has a single // (empty) flex line. - FlexLine* curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront); + FlexLine* curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront, + aMainGapSize); nscoord wrapThreshold; if (isSingleLine) { @@ -3759,7 +3813,8 @@ nsFlexContainerFrame::GenerateFlexLines( // Honor "page-break-before", if we're multi-line and this line isn't empty: if (!isSingleLine && !curLine->IsEmpty() && childFrame->StyleDisplay()->mBreakBefore) { - curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront); + curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront, + aMainGapSize); } UniquePtr<FlexItem> item; @@ -3782,11 +3837,16 @@ nsFlexContainerFrame::GenerateFlexLines( // Check if we need to wrap |item| to a new line // (i.e. check if its outer hypothetical main size pushes our line over // the threshold) - if (wrapThreshold != NS_UNCONSTRAINEDSIZE && - !curLine->IsEmpty() && // No need to wrap at start of a line. - wrapThreshold < (curLine->GetTotalOuterHypotheticalMainSize() + - itemOuterHypotheticalMainSize)) { - curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront); + // Don't wrap if unconstrained and if this will be line's first item. + if (wrapThreshold != NS_UNCONSTRAINEDSIZE && !curLine->IsEmpty()) { + nscoord newOuterSize = curLine->GetTotalOuterHypotheticalMainSize() + + itemOuterHypotheticalMainSize; + // Account for gap between this line's previous item and this item + newOuterSize += aMainGapSize; + if (newOuterSize == nscoord_MAX || newOuterSize > wrapThreshold) { + curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront, + aMainGapSize); + } } // Add item to current flex line (and update the line's bookkeeping about @@ -3798,7 +3858,8 @@ nsFlexContainerFrame::GenerateFlexLines( // Honor "page-break-after", if we're multi-line and have more children: if (!isSingleLine && childFrame->GetNextSibling() && childFrame->StyleDisplay()->mBreakAfter) { - curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront); + curLine = AddNewFlexLineToList(aLines, shouldInsertAtFront, + aMainGapSize); } itemIdxInContainer++; } @@ -3990,6 +4051,9 @@ FlexLine::PositionItemsInMainAxis(uint8_t aJustifyContent, mainAxisPosnTracker.ExitChildFrame(itemMainBorderBoxSize); mainAxisPosnTracker.ExitMargin(item->GetMargin()); mainAxisPosnTracker.TraversePackingSpace(); + if (item->getNext()) { + mainAxisPosnTracker.TraverseGap(mMainGapSize); + } } } @@ -4178,16 +4242,37 @@ nsFlexContainerFrame::Reflow(nsPresContext* aPresContext, nscoord contentBoxMainSize = GetMainSizeFromReflowInput(aReflowInput, axisTracker); + // Calculate gap size for main and cross axis + nscoord mainGapSize; + nscoord crossGapSize; + if (axisTracker.IsRowOriented()) { + mainGapSize = nsLayoutUtils::ResolveGapToLength(stylePos->mColumnGap, + contentBoxMainSize); + crossGapSize = + nsLayoutUtils::ResolveGapToLength(stylePos->mRowGap, + GetEffectiveComputedBSize(aReflowInput)); + } else { + mainGapSize = nsLayoutUtils::ResolveGapToLength(stylePos->mRowGap, + contentBoxMainSize); + NS_WARNING_ASSERTION(aReflowInput.ComputedISize() != NS_UNCONSTRAINEDSIZE, + "Unconstrained inline size; this should only result " + "from huge sizes (not intrinsic sizing w/ orthogonal " + "flows)"); + crossGapSize = + nsLayoutUtils::ResolveGapToLength(stylePos->mColumnGap, + aReflowInput.ComputedISize()); + } + AutoTArray<StrutInfo, 1> struts; DoFlexLayout(aPresContext, aDesiredSize, aReflowInput, aStatus, contentBoxMainSize, availableBSizeForContent, - struts, axisTracker); + struts, axisTracker, mainGapSize, crossGapSize); if (!struts.IsEmpty()) { // We're restarting flex layout, with new knowledge of collapsed items. DoFlexLayout(aPresContext, aDesiredSize, aReflowInput, aStatus, contentBoxMainSize, availableBSizeForContent, - struts, axisTracker); + struts, axisTracker, mainGapSize, crossGapSize); } } @@ -4312,7 +4397,9 @@ nsFlexContainerFrame::DoFlexLayout(nsPresContext* aPresContext, nscoord aContentBoxMainSize, nscoord aAvailableBSizeForContent, nsTArray<StrutInfo>& aStruts, - const FlexboxAxisTracker& aAxisTracker) + const FlexboxAxisTracker& aAxisTracker, + nscoord aMainGapSize, + nscoord aCrossGapSize) { aStatus = NS_FRAME_COMPLETE; @@ -4324,6 +4411,7 @@ nsFlexContainerFrame::DoFlexLayout(nsPresContext* aPresContext, aContentBoxMainSize, aAvailableBSizeForContent, aStruts, aAxisTracker, + aMainGapSize, placeholderKids, lines); if (lines.getFirst()->IsEmpty() && @@ -4385,6 +4473,11 @@ nsFlexContainerFrame::DoFlexLayout(nsPresContext* aPresContext, // Now that we've finished with this line's items, size the line itself: line->ComputeCrossSizeAndBaseline(aAxisTracker); sumLineCrossSizes += line->GetLineCrossSize(); + + // Add the cross axis gap space if this is not the last line + if (line->getNext()) { + sumLineCrossSizes += aCrossGapSize; + } } bool isCrossSizeDefinite; @@ -4397,7 +4490,8 @@ nsFlexContainerFrame::DoFlexLayout(nsPresContext* aPresContext, CrossAxisPositionTracker crossAxisPosnTracker(lines.getFirst(), aReflowInput, contentBoxCrossSize, - isCrossSizeDefinite, aAxisTracker); + isCrossSizeDefinite, aAxisTracker, + aCrossGapSize); // Now that we know the cross size of each line (including // "align-content:stretch" adjustments, from the CrossAxisPositionTracker @@ -4447,6 +4541,10 @@ nsFlexContainerFrame::DoFlexLayout(nsPresContext* aPresContext, aAxisTracker); crossAxisPosnTracker.TraverseLine(*line); crossAxisPosnTracker.TraversePackingSpace(); + + if (line->getNext()) { + crossAxisPosnTracker.TraverseGap(); + } } // If the container should derive its baseline from the last FlexLine, @@ -4817,33 +4915,70 @@ nsFlexContainerFrame::ReflowPlaceholders(nsPresContext* aPresContext, } } -/* virtual */ nscoord -nsFlexContainerFrame::GetMinISize(nsRenderingContext* aRenderingContext) +nscoord +nsFlexContainerFrame::GetIntrinsicISize(nsRenderingContext* aRenderingContext, + IntrinsicISizeType aType) { - nscoord minISize = 0; - DISPLAY_MIN_WIDTH(this, minISize); - + nscoord containerISize = 0; RenumberList(); const nsStylePosition* stylePos = StylePosition(); const FlexboxAxisTracker axisTracker(this, GetWritingMode()); + nscoord mainGapSize; + if (axisTracker.IsRowOriented()) { + mainGapSize = nsLayoutUtils::ResolveGapToLength(stylePos->mColumnGap, + NS_UNCONSTRAINEDSIZE); + } else { + mainGapSize = nsLayoutUtils::ResolveGapToLength(stylePos->mRowGap, + NS_UNCONSTRAINEDSIZE); + } + + // The loop below sets aside space for a gap before each item besides the + // first. This bool helps us handle that special-case. + bool onFirstChild = true; + for (nsIFrame* childFrame : mFrames) { - nscoord childMinISize = - nsLayoutUtils::IntrinsicForContainer(aRenderingContext, childFrame, - nsLayoutUtils::MIN_ISIZE); - // For a horizontal single-line flex container, the intrinsic min - // isize is the sum of its items' min isizes. - // For a column-oriented flex container, or for a multi-line row- - // oriented flex container, the intrinsic min isize is the max of - // its items' min isizes. + // Skip out-of-flow children because they don't participate in flex layout. + if (childFrame->GetType() == nsGkAtoms::placeholderFrame) { + continue; + } + + nscoord childISize = nsLayoutUtils::IntrinsicForContainer( + aRenderingContext, childFrame, aType); + // * For a row-oriented single-line flex container, the intrinsic + // {min/pref}-isize is the sum of its items' {min/pref}-isizes and + // (n-1) column gaps. + // * For a column-oriented flex container, the intrinsic min isize + // is the max of its items' min isizes. + // * For a row-oriented multi-line flex container, the intrinsic + // pref isize is former (sum), and its min isize is the latter (max). + bool isSingleLine = (NS_STYLE_FLEX_WRAP_NOWRAP == stylePos->mFlexWrap); if (axisTracker.IsRowOriented() && - NS_STYLE_FLEX_WRAP_NOWRAP == stylePos->mFlexWrap) { - minISize += childMinISize; + (isSingleLine || aType == nsLayoutUtils::PREF_ISIZE)) { + containerISize += childISize; + if (!onFirstChild) { + containerISize += mainGapSize; + } + onFirstChild = false; } else { - minISize = std::max(minISize, childMinISize); + // col-oriented, or MIN_ISIZE for multi-line row flex container + containerISize = std::max(containerISize, childISize); } } + + return containerISize; +} + +/* virtual */ nscoord +nsFlexContainerFrame::GetMinISize(nsRenderingContext* aRenderingContext) +{ + nscoord minISize = 0; + DISPLAY_MIN_WIDTH(this, minISize); + + // TODO: See bug 1454822 + minISize = GetIntrinsicISize(aRenderingContext, nsLayoutUtils::MIN_ISIZE); + return minISize; } @@ -4853,24 +4988,8 @@ nsFlexContainerFrame::GetPrefISize(nsRenderingContext* aRenderingContext) nscoord prefISize = 0; DISPLAY_PREF_WIDTH(this, prefISize); - RenumberList(); - - // XXXdholbert Optimization: We could cache our intrinsic widths like - // nsBlockFrame does (and return it early from this function if it's set). - // Whenever anything happens that might change it, set it to - // NS_INTRINSIC_WIDTH_UNKNOWN (like nsBlockFrame::MarkIntrinsicISizesDirty - // does) - const FlexboxAxisTracker axisTracker(this, GetWritingMode()); + // TODO: See bug 1454822 + prefISize = GetIntrinsicISize(aRenderingContext, nsLayoutUtils::PREF_ISIZE); - for (nsIFrame* childFrame : mFrames) { - nscoord childPrefISize = - nsLayoutUtils::IntrinsicForContainer(aRenderingContext, childFrame, - nsLayoutUtils::PREF_ISIZE); - if (axisTracker.IsRowOriented()) { - prefISize += childPrefISize; - } else { - prefISize = std::max(prefISize, childPrefISize); - } - } return prefISize; } diff --git a/layout/generic/nsFlexContainerFrame.h b/layout/generic/nsFlexContainerFrame.h index 9edcb8797..39de79b57 100644 --- a/layout/generic/nsFlexContainerFrame.h +++ b/layout/generic/nsFlexContainerFrame.h @@ -72,6 +72,9 @@ public: const ReflowInput& aReflowInput, nsReflowStatus& aStatus) override; + nscoord GetIntrinsicISize(nsRenderingContext* aRenderingContext, + nsLayoutUtils::IntrinsicISizeType aType); + virtual nscoord GetMinISize(nsRenderingContext* aRenderingContext) override; virtual nscoord @@ -160,7 +163,9 @@ protected: nscoord aContentBoxMainSize, nscoord aAvailableBSizeForContent, nsTArray<StrutInfo>& aStruts, - const FlexboxAxisTracker& aAxisTracker); + const FlexboxAxisTracker& aAxisTracker, + nscoord aMainGapSize, + nscoord aCrossGapSize); /** * Checks whether our child-frame list "mFrames" is sorted, using the given @@ -244,6 +249,7 @@ protected: nscoord aAvailableBSizeForContent, const nsTArray<StrutInfo>& aStruts, const FlexboxAxisTracker& aAxisTracker, + nscoord aMainGapSize, nsTArray<nsIFrame*>& aPlaceholders, mozilla::LinkedList<FlexLine>& aLines); diff --git a/layout/generic/nsGridContainerFrame.cpp b/layout/generic/nsGridContainerFrame.cpp index 0af05be50..0a953d6ff 100644 --- a/layout/generic/nsGridContainerFrame.cpp +++ b/layout/generic/nsGridContainerFrame.cpp @@ -2622,9 +2622,9 @@ nsGridContainerFrame::GridReflowInput::CalculateTrackSizes( const LogicalSize& aContentBox, SizingConstraint aConstraint) { - mCols.Initialize(mColFunctions, mGridStyle->mGridColumnGap, + mCols.Initialize(mColFunctions, mGridStyle->mColumnGap, aGrid.mGridColEnd, aContentBox.ISize(mWM)); - mRows.Initialize(mRowFunctions, mGridStyle->mGridRowGap, + mRows.Initialize(mRowFunctions, mGridStyle->mRowGap, aGrid.mGridRowEnd, aContentBox.BSize(mWM)); mCols.CalculateSizes(*this, mGridItems, mColFunctions, @@ -3378,7 +3378,7 @@ nsGridContainerFrame::Grid::PlaceGridItems(GridReflowInput& aState, // to a 0,0 based grid after placing definite lines. auto areas = gridStyle->mGridTemplateAreas.get(); uint32_t numRepeatCols = aState.mColFunctions.InitRepeatTracks( - gridStyle->mGridColumnGap, + gridStyle->mColumnGap, aComputedMinSize.ISize(aState.mWM), aComputedSize.ISize(aState.mWM), aComputedMaxSize.ISize(aState.mWM)); @@ -3387,7 +3387,7 @@ nsGridContainerFrame::Grid::PlaceGridItems(GridReflowInput& aState, LineNameMap colLineNameMap(gridStyle->mGridTemplateColumns, numRepeatCols); uint32_t numRepeatRows = aState.mRowFunctions.InitRepeatTracks( - gridStyle->mGridRowGap, + gridStyle->mRowGap, aComputedMinSize.BSize(aState.mWM), aComputedSize.BSize(aState.mWM), aComputedMaxSize.BSize(aState.mWM)); @@ -6214,6 +6214,11 @@ nsGridContainerFrame::Reflow(nsPresContext* aPresContext, computedISize, bSize); if (!prevInFlow) { + if (computedBSize == NS_AUTOHEIGHT && stylePos->mRowGap.HasPercent()) { + // Re-resolve the row-gap now that we know our intrinsic block-size. + gridReflowInput.mRows.mGridGap = + nsLayoutUtils::ResolveGapToLength(stylePos->mRowGap, bSize); + } // Apply 'align/justify-content' to the grid. // CalculateTrackSizes did the columns. gridReflowInput.mRows.AlignJustifyContent(stylePos, wm, contentArea.Size(wm)); @@ -6585,7 +6590,7 @@ nsGridContainerFrame::IntrinsicISize(nsRenderingContext* aRenderingContext, if (grid.mGridColEnd == 0) { return 0; } - state.mCols.Initialize(state.mColFunctions, state.mGridStyle->mGridColumnGap, + state.mCols.Initialize(state.mColFunctions, state.mGridStyle->mColumnGap, grid.mGridColEnd, NS_UNCONSTRAINEDSIZE); auto constraint = aType == nsLayoutUtils::MIN_ISIZE ? SizingConstraint::eMinContent : SizingConstraint::eMaxContent; @@ -6593,7 +6598,7 @@ nsGridContainerFrame::IntrinsicISize(nsRenderingContext* aRenderingContext, NS_UNCONSTRAINEDSIZE, &GridArea::mCols, constraint); state.mCols.mGridGap = - nsLayoutUtils::ResolveGapToLength(state.mGridStyle->mGridColumnGap, + nsLayoutUtils::ResolveGapToLength(state.mGridStyle->mColumnGap, NS_UNCONSTRAINEDSIZE); nscoord length = 0; for (const TrackSize& sz : state.mCols.mSizes) { diff --git a/layout/reftests/bugs/reftest.list b/layout/reftests/bugs/reftest.list index 4fb75edab..e6cc895d9 100644 --- a/layout/reftests/bugs/reftest.list +++ b/layout/reftests/bugs/reftest.list @@ -1841,7 +1841,7 @@ fuzzy-if(skiaContent,1,24000) == 1025914-1.html 1025914-1-ref.html == 1050493-1.html 1050493-1-ref.html == 1050788-1.html about:blank == 1053035-1-flex.html 1053035-1-ref.html -test-pref(layout.css.grid.enabled,true) == 1053035-1-grid.html 1053035-1-ref.html +== 1053035-1-grid.html 1053035-1-ref.html == 1059167-1.html 1059167-1-ref.html == 1059498-1.html 1059498-1-ref.html == 1059498-2.html 1059498-1-ref.html diff --git a/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html index 7ad85e1e5..1970d10e3 100644 --- a/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html +++ b/layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html @@ -65,7 +65,7 @@ br { clear: both; } </div> <div class="float"> -<div class="grid" style="width:60px; height:60px; grid-column-gap:12px"> +<div class="grid" style="width:60px; height:60px; gap:12px"> <span><x></x></span> <span><x></x></span> <span><x></x></span> @@ -74,7 +74,7 @@ br { clear: both; } </div> <div class="inline-grid"> -<div class="grid" style="width:60px; height:60px; grid-column-gap:12px; align-self:start; justify-self:start;"> +<div class="grid" style="width:60px; height:60px; gap:12px; align-self:start; justify-self:start;"> <span><x></x></span> <span><x></x></span> <span><x></x></span> @@ -142,7 +142,7 @@ br { clear: both; } </div> <div class="float" style="margin-top:-50px; width:62px"> -<div class="grid" style="padding-left:186px; height:60px; grid-column-gap:calc(186px * 0.2);"> +<div class="grid" style="padding-left:186px; height:60px; gap:12px calc(186px * 0.2);"> <span style="margin-left:-186px; width:30px"><x></x></span> <span style="margin-left:-186px; width:30px"><x></x></span> <span style="margin-left:-186px; width:30px"><x></x></span> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html index 682e0ca38..8de84391e 100644 --- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html @@ -83,15 +83,18 @@ fill,fit { .zero-progress { grid-row-gap: calc(10px - 1%); - grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d]; + grid-template-rows: [a] 10px repeat(3, [b] calc(4px / 10) [c]) [d]; + height:40px; } .w50.zero-progress { grid-row-gap: calc(10px - 1%); grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d]; + height:50px; } .mw50.zero-progress { grid-row-gap: calc(10px - 1%); - grid-template-rows: [a] 10px repeat(4, [b] 0 [c]) [d]; + grid-template-rows: [a] 10px repeat(4, [b] calc(5px / 10) [c]) [d]; + height:50px; } </style> </head> diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list index 35e3140a8..62a397b54 100644 --- a/layout/reftests/css-grid/reftest.list +++ b/layout/reftests/css-grid/reftest.list @@ -1,5 +1,3 @@ -default-preferences pref(layout.css.grid.enabled,true) - fails == grid-whitespace-handling-1a.xhtml grid-whitespace-handling-1-ref.xhtml fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml == grid-whitespace-handling-2.xhtml grid-whitespace-handling-2-ref.xhtml diff --git a/layout/reftests/list-item/reftest.list b/layout/reftests/list-item/reftest.list index c47473d0b..a795dfdf4 100644 --- a/layout/reftests/list-item/reftest.list +++ b/layout/reftests/list-item/reftest.list @@ -1,6 +1,6 @@ fuzzy-if(OSX>=1008,55,4) == numbering-1.html numbering-1-ref.html == numbering-2.html numbering-2-ref.html -pref(layout.css.grid.enabled,true) fuzzy-if(OSX>=1008,8,1) == numbering-3.html numbering-3-ref.html +fuzzy-if(OSX>=1008,8,1) == numbering-3.html numbering-3-ref.html fuzzy-if(OSX>=1008,72,2) == numbering-4.html numbering-4-ref.html == ol-reversed-1a.html ol-reversed-1-ref.html asserts(1) == ol-reversed-1b.html ol-reversed-1-ref.html # bug 478135 diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html new file mode 100644 index 000000000..0606afe53 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001-ref.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Reference for the correctness of gaps in horizontal and vertical multi-line + flex containers. +--> +<html> +<head> + <title>Reference: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .outerBox { + width: 200px; + height: 220px; + border: 1px solid black; + float: left; + } + .flexContainer { + display: flex; + align-content: space-around; + justify-content: space-around; + } + .rowNoWrap { + flex-flow: row nowrap; + } + .columnNoWrap { + flex-flow: column nowrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + .autoBMargin { + margin-bottom: auto; + } + .right20 { + margin-right: 20px; + } + .bottom40 { + margin-bottom: 40px; + } + .tb30100 { + margin-top: 30px; + margin-bottom: 100px; + } + .lr3080 { + margin-left: 30px; + margin-right: 80px; + } + .w200 { + width: 200px; + } + .h220 { + height: 220px; + } + .fleft { + float: left; + } + </style> +</head> +<body> + <div class="outerBox"> + <div class="flexContainer w200 rowNoWrap tb30100"> + <div class="item right20"></div> + <div class="item right20"></div> + <div class="item right20"></div> + <div class="item"></div> + </div> + <div class="flexContainer w200 rowNoWrap"> + <div class="item autoLBMargins right20"></div> + <div class="item"></div> + </div> + </div> + <div class="outerBox"> + <div class="flexContainer fleft h220 columnNoWrap lr3080"> + <div class="item bottom40"></div> + <div class="item bottom40"></div> + <div class="item"></div> + </div> + <div class="flexContainer fleft h220 columnNoWrap"> + <div class="item bottom40"></div> + <div class="item bottom40"></div> + <div class="item autoBMargin"></div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html new file mode 100644 index 000000000..25b28e809 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Testcase for the correctness of gaps in horizontal and vertical multi-line + flex containers. +--> +<html> +<head> + <title>CSS Test: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> + <link rel="match" href="flexbox-column-row-gap-001-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 200px; + height: 220px; + border: 1px solid black; + column-gap: 10%; + row-gap: 40px; + align-content: space-around; + justify-content: space-around; + float: left; + } + .rowWrap { + flex-flow: row wrap; + } + .columnWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> + <div class="flexContainer columnWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html new file mode 100644 index 000000000..e23ddfe26 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Testcase for the correctness of gaps in vertical writing mode + multi-line flex containers. +--> +<html> +<head> + <title>Reference: Testing row and column gaps in vertical writing mode multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 220px; + height: 200px; + border: 1px solid black; + align-content: flex-start; + justify-content: flex-end; + float: left; + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .columnWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .b20 { + margin-bottom: 20px; + } + .t20 { + margin-top: 20px; + } + .l10 { + margin-left: 10px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap"> + <div class="item b20"></div> + <div class="item b20"></div> + <div class="item b20"></div> + <div class="item"></div> + <div class="item l10 b20"></div> + <div class="item l10"></div> + </div> + <div class="flexContainer columnWrap"> + <div class="item"></div> + <div class="item l10"></div> + <div class="item l10"></div> + <div class="item l10"></div> + <div class="item l10"></div> + <div class="item l10 t20"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html new file mode 100644 index 000000000..fcd19cf8d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-002.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<!-- + Testcase for the correctness of gaps in vertical writing mode multi-line + flex containers. +--> +<html> +<head> + <title>CSS Test: Testing row and column gaps in vertical writing mode multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> + <link rel="match" href="flexbox-column-row-gap-002-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + width: 220px; + height: 200px; + border: 1px solid black; + column-gap: 10%; + row-gap: 10px; + align-content: flex-start; + justify-content: flex-end; + float: left; + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .columnWrap { + flex-flow: column wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer columnWrap"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html new file mode 100644 index 000000000..6e7f220b4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> +</html> + <style> + .flexContainer { + display: flex; + border: 1px solid black; + column-gap: 20px; + row-gap: 40px; + align-content: space-around; + justify-content: space-around; + } + .rowWrap { + flex-flow: row wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + .w200 { + width: 200px; + } + .h100 { + height: 100px; + } + .h90 { + height: 90px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w200 h100"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> + <div class="flexContainer rowWrap w200 h90"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html new file mode 100644 index 000000000..2dcd02717 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-003.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing cross size computation with row and column gaps in horizontal multi-line flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#gap-flex"> + <link rel="match" href="flexbox-column-row-gap-003-ref.html"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + border: 1px solid black; + column-gap: 20px; + row-gap: 40px; + align-content: space-around; + justify-content: space-around; + } + .rowWrap { + flex-flow: row wrap; + } + .item { + border: 1px solid blue; + background: lightblue; + width: 28px; + height: 28px; + } + .autoLBMargins { + margin-left: auto; + margin-bottom: auto; + } + .w200 { + width: 200px; + } + .hclamp { + max-height: 90px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w200"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> + <div class="flexContainer rowWrap w200 hclamp"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item autoLBMargins"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html new file mode 100644 index 000000000..0b40fb2d6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing percentage gap resolution in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <meta charset="utf-8"> + <style> + .flexContainer { + display: flex; + border: 2px solid black; + column-gap: 10px; + align-content: start; + justify-content: start; + margin-top: 20px; + } + .item { + border: 1px solid blue; + background: yellow; + width: 48px; + height: 48px; + flex: none; + } + .vertLR { + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .colWrap { + flex-flow: column wrap; + } + .w50 { + width: 50px; + } + .h100 { + height: 100px; + } + .w100 { + width: 100px; + } + .noWrap { + flex-wrap: nowrap; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w50 h100"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer colWrap w50 h100 noWrap"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR rowWrap h100 w100"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR colWrap w100 noWrap"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html new file mode 100644 index 000000000..0d86b3818 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-column-row-gap-004.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing percentage gap resolution in flex containers</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-align/#column-row-gap"> + <link rel="match" href="flexbox-column-row-gap-004-ref.html"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5081"> + <meta charset="utf-8"> + <meta name="assert" content="% row-gaps in a flexbox with indefinite block size are treated as 'normal'." /> + <style> + .flexContainer { + display: flex; + border: 2px solid black; + row-gap: 20%; + column-gap: 10%; + align-content: start; + justify-content: start; + margin-top: 20px; + } + .item { + border: 1px solid blue; + background: yellow; + width: 48px; + height: 48px; + flex: none; + } + .vertLR { + writing-mode: vertical-lr; + } + .rowWrap { + flex-flow: row wrap; + } + .colWrap { + flex-flow: column wrap; + } + .w50 { + width: 50px; + } + </style> +</head> +<body> + <div class="flexContainer rowWrap w50"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer colWrap w50"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR rowWrap"> + <div class="item"></div> + <div class="item"></div> + </div> + <div class="flexContainer vertLR colWrap"> + <div class="item"></div> + <div class="item"></div> + </div> +</body> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html new file mode 100644 index 000000000..7cea1fb1d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Test Reference: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + div { + display: inline-flex; + background: fuchsia; + } + </style> + + <div> + <span>B</span> + <span style="width: 100px;"></span> + <span>C</span> + </div> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html new file mode 100644 index 000000000..850f1a42d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-gap-position-absolute.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Flexible Box Layout Test: Test flexbox intrinsic inline-size, gap, and absolute-positioned children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-sizes"> + <link rel="help" href="https://drafts.csswg.org/css-align-3/#gaps"> + <link rel="match" href="flexbox-gap-position-absolute-ref.html"> + <meta name="assert" content="This test verifies the absolute-positioned children do not contribute the gap size to the flexbox's intrinsic inline-size."> + + <style> + div { + display: inline-flex; + gap: 100px; + background: fuchsia; + } + </style> + + <div> + <span style="position: absolute;"></span> + <span style="position: fixed;"></span> + <span>B</span> + <span>C</span> + </div> +</html> diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest.list b/layout/reftests/w3c-css/submitted/flexbox/reftest.list index 281ef4758..075aa660e 100644 --- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list +++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list @@ -91,6 +91,13 @@ == flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002-ref.html == flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003-ref.html +# Tests for "row gap" and "column gap" +== flexbox-column-row-gap-001.html flexbox-column-row-gap-001-ref.html +== flexbox-column-row-gap-002.html flexbox-column-row-gap-002-ref.html +== flexbox-column-row-gap-003.html flexbox-column-row-gap-003-ref.html +== flexbox-column-row-gap-004.html flexbox-column-row-gap-004-ref.html +== flexbox-gap-position-absolute.html flexbox-gap-position-absolute-ref.html + # Tests for flex-flow shorthand property == flexbox-flex-flow-001.html flexbox-flex-flow-001-ref.html == flexbox-flex-flow-002.html flexbox-flex-flow-002-ref.html diff --git a/layout/style/Declaration.cpp b/layout/style/Declaration.cpp index 9d7ca312c..9e7a01aff 100644 --- a/layout/style/Declaration.cpp +++ b/layout/style/Declaration.cpp @@ -1249,13 +1249,13 @@ Declaration::GetPropertyValueInternal( // #3 [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> case eCSSProperty_grid: { const nsCSSValue& columnGapValue = - *data->ValueFor(eCSSProperty_grid_column_gap); + *data->ValueFor(eCSSProperty_column_gap); if (columnGapValue.GetUnit() != eCSSUnit_Pixel || columnGapValue.GetFloatValue() != 0.0f) { return; // Not serializable, bail. } const nsCSSValue& rowGapValue = - *data->ValueFor(eCSSProperty_grid_row_gap); + *data->ValueFor(eCSSProperty_row_gap); if (rowGapValue.GetUnit() != eCSSUnit_Pixel || rowGapValue.GetFloatValue() != 0.0f) { return; // Not serializable, bail. @@ -1475,7 +1475,7 @@ Declaration::GetPropertyValueInternal( } MOZ_FALLTHROUGH; } - case eCSSProperty_grid_gap: { + case eCSSProperty_gap: { const nsCSSPropertyID* subprops = nsCSSProps::SubpropertyEntryFor(aProperty); MOZ_ASSERT(subprops[2] == eCSSProperty_UNKNOWN, diff --git a/layout/style/nsCSSParser.cpp b/layout/style/nsCSSParser.cpp index 8b9e25066..198703223 100644 --- a/layout/style/nsCSSParser.cpp +++ b/layout/style/nsCSSParser.cpp @@ -1011,7 +1011,7 @@ protected: bool ParseGridColumnRow(nsCSSPropertyID aStartPropID, nsCSSPropertyID aEndPropID); bool ParseGridArea(); - bool ParseGridGap(); + bool ParseGap(); bool ParseInitialLetter(); @@ -9714,8 +9714,8 @@ CSSParserImpl::ParseGrid() // "Also, the gutter properties are reset by this shorthand, // even though they can't be set by it." value.SetFloatValue(0.0f, eCSSUnit_Pixel); - AppendValue(eCSSProperty_grid_row_gap, value); - AppendValue(eCSSProperty_grid_column_gap, value); + AppendValue(eCSSProperty_row_gap, value); + AppendValue(eCSSProperty_column_gap, value); // [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> auto res = ParseGridShorthandAutoProps(NS_STYLE_GRID_AUTO_FLOW_ROW); @@ -10038,12 +10038,12 @@ CSSParserImpl::ParseGridArea() } bool -CSSParserImpl::ParseGridGap() +CSSParserImpl::ParseGap() { nsCSSValue first; if (ParseSingleTokenVariant(first, VARIANT_INHERIT, nullptr)) { - AppendValue(eCSSProperty_grid_row_gap, first); - AppendValue(eCSSProperty_grid_column_gap, first); + AppendValue(eCSSProperty_row_gap, first); + AppendValue(eCSSProperty_column_gap, first); return true; } if (ParseNonNegativeVariant(first, VARIANT_LPCALC, nullptr) != @@ -10055,8 +10055,8 @@ CSSParserImpl::ParseGridGap() if (result == CSSParseResult::Error) { return false; } - AppendValue(eCSSProperty_grid_row_gap, first); - AppendValue(eCSSProperty_grid_column_gap, + AppendValue(eCSSProperty_row_gap, first); + AppendValue(eCSSProperty_column_gap, result == CSSParseResult::NotFound ? first : second); return true; } @@ -11956,8 +11956,8 @@ CSSParserImpl::ParsePropertyByFunction(nsCSSPropertyID aPropID) eCSSProperty_grid_row_end); case eCSSProperty_grid_area: return ParseGridArea(); - case eCSSProperty_grid_gap: - return ParseGridGap(); + case eCSSProperty_gap: + return ParseGap(); case eCSSProperty_image_region: return ParseRect(eCSSProperty_image_region); case eCSSProperty_align_content: diff --git a/layout/style/nsCSSPropAliasList.h b/layout/style/nsCSSPropAliasList.h index 4f2a6e6b6..7043d1931 100644 --- a/layout/style/nsCSSPropAliasList.h +++ b/layout/style/nsCSSPropAliasList.h @@ -34,6 +34,18 @@ ******/ +CSS_PROP_ALIAS(grid-gap, + gap, + GridGap, + "") +CSS_PROP_ALIAS(grid-column-gap, + column_gap, + GridColumnGap, + "") +CSS_PROP_ALIAS(grid-row-gap, + row_gap, + GridRowGap, + "") CSS_PROP_ALIAS(word-wrap, overflow_wrap, WordWrap, diff --git a/layout/style/nsCSSPropList.h b/layout/style/nsCSSPropList.h index 45e919d4f..b51867f3c 100644 --- a/layout/style/nsCSSPropList.h +++ b/layout/style/nsCSSPropList.h @@ -1516,7 +1516,7 @@ CSS_PROP_COLUMN( kColumnFillKTable, CSS_PROP_NO_OFFSET, eStyleAnimType_Discrete) -CSS_PROP_COLUMN( +CSS_PROP_POSITION( column-gap, column_gap, ColumnGap, @@ -1525,7 +1525,7 @@ CSS_PROP_COLUMN( "", VARIANT_HLP | VARIANT_NORMAL | VARIANT_CALC, nullptr, - offsetof(nsStyleColumn, mColumnGap), + offsetof(nsStylePosition, mColumnGap), eStyleAnimType_Coord) CSS_PROP_SHORTHAND( column-rule, @@ -2100,25 +2100,30 @@ CSS_PROP_UIRESET( CSS_PROP_NO_OFFSET, eStyleAnimType_Discrete) // bug 58646 CSS_PROP_SHORTHAND( + gap, + gap, + Gap, + CSS_PROPERTY_PARSE_FUNCTION, + "") +CSS_PROP_SHORTHAND( grid, grid, Grid, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled") + "") CSS_PROP_SHORTHAND( grid-area, grid_area, GridArea, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled") + "") CSS_PROP_POSITION( grid-auto-columns, grid_auto_columns, GridAutoColumns, CSS_PROPERTY_PARSE_FUNCTION | - CSS_PROPERTY_STORES_CALC | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", + CSS_PROPERTY_STORES_CALC, + "", 0, kGridTrackBreadthKTable, CSS_PROP_NO_OFFSET, @@ -2127,9 +2132,8 @@ CSS_PROP_POSITION( grid-auto-flow, grid_auto_flow, GridAutoFlow, - CSS_PROPERTY_PARSE_FUNCTION | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", + CSS_PROPERTY_PARSE_FUNCTION, + "", 0, kGridAutoFlowKTable, CSS_PROP_NO_OFFSET, @@ -2139,9 +2143,8 @@ CSS_PROP_POSITION( grid_auto_rows, GridAutoRows, CSS_PROPERTY_PARSE_FUNCTION | - CSS_PROPERTY_STORES_CALC | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", + CSS_PROPERTY_STORES_CALC, + "", 0, kGridTrackBreadthKTable, CSS_PROP_NO_OFFSET, @@ -2151,79 +2154,49 @@ CSS_PROP_SHORTHAND( grid_column, GridColumn, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled") + "") CSS_PROP_POSITION( grid-column-end, grid_column_end, GridColumnEnd, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled", + "", 0, nullptr, CSS_PROP_NO_OFFSET, eStyleAnimType_Discrete) CSS_PROP_POSITION( - grid-column-gap, - grid_column_gap, - GridColumnGap, - CSS_PROPERTY_PARSE_VALUE | - CSS_PROPERTY_VALUE_NONNEGATIVE | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", - VARIANT_HLP | VARIANT_CALC, - nullptr, - offsetof(nsStylePosition, mGridColumnGap), - eStyleAnimType_Coord) -CSS_PROP_POSITION( grid-column-start, grid_column_start, GridColumnStart, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled", + "", 0, nullptr, CSS_PROP_NO_OFFSET, eStyleAnimType_Discrete) CSS_PROP_SHORTHAND( - grid-gap, - grid_gap, - GridGap, - CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled") -CSS_PROP_SHORTHAND( grid-row, grid_row, GridRow, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled") + "") CSS_PROP_POSITION( grid-row-end, grid_row_end, GridRowEnd, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled", + "", 0, nullptr, CSS_PROP_NO_OFFSET, eStyleAnimType_Discrete) CSS_PROP_POSITION( - grid-row-gap, - grid_row_gap, - GridRowGap, - CSS_PROPERTY_PARSE_VALUE | - CSS_PROPERTY_VALUE_NONNEGATIVE | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", - VARIANT_HLP | VARIANT_CALC, - nullptr, - offsetof(nsStylePosition, mGridRowGap), - eStyleAnimType_Coord) -CSS_PROP_POSITION( grid-row-start, grid_row_start, GridRowStart, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled", + "", 0, nullptr, CSS_PROP_NO_OFFSET, @@ -2233,14 +2206,13 @@ CSS_PROP_SHORTHAND( grid_template, GridTemplate, CSS_PROPERTY_PARSE_FUNCTION, - "layout.css.grid.enabled") + "") CSS_PROP_POSITION( grid-template-areas, grid_template_areas, GridTemplateAreas, - CSS_PROPERTY_PARSE_FUNCTION | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", + CSS_PROPERTY_PARSE_FUNCTION, + "", 0, nullptr, CSS_PROP_NO_OFFSET, @@ -2251,9 +2223,8 @@ CSS_PROP_POSITION( GridTemplateColumns, CSS_PROPERTY_PARSE_FUNCTION | CSS_PROPERTY_STORES_CALC | - CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", + CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH, + "", 0, kGridTrackBreadthKTable, CSS_PROP_NO_OFFSET, @@ -2264,9 +2235,8 @@ CSS_PROP_POSITION( GridTemplateRows, CSS_PROPERTY_PARSE_FUNCTION | CSS_PROPERTY_STORES_CALC | - CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH | - CSS_PROPERTY_ENABLED_IN_UA_SHEETS, - "layout.css.grid.enabled", + CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH, + "", 0, kGridTrackBreadthKTable, CSS_PROP_NO_OFFSET, @@ -3560,6 +3530,17 @@ CSS_PROP_POSITION( nullptr, offsetof(nsStylePosition, mOffset), eStyleAnimType_Sides_Right) +CSS_PROP_POSITION( + row-gap, + row_gap, + RowGap, + CSS_PROPERTY_PARSE_VALUE | + CSS_PROPERTY_VALUE_NONNEGATIVE, + "", + VARIANT_HLP | VARIANT_NORMAL | VARIANT_CALC, + nullptr, + offsetof(nsStylePosition, mRowGap), + eStyleAnimType_Coord) CSS_PROP_TEXT( ruby-align, ruby_align, diff --git a/layout/style/nsCSSProps.cpp b/layout/style/nsCSSProps.cpp index 756e3eb25..7d4e008b4 100644 --- a/layout/style/nsCSSProps.cpp +++ b/layout/style/nsCSSProps.cpp @@ -1332,7 +1332,6 @@ KTableEntry nsCSSProps::kDisplayKTable[] = { { eCSSKeyword_ruby_base_container, StyleDisplay::RubyBaseContainer }, { eCSSKeyword_ruby_text, StyleDisplay::RubyText }, { eCSSKeyword_ruby_text_container, StyleDisplay::RubyTextContainer }, - // The next two entries are controlled by the layout.css.grid.enabled pref. { eCSSKeyword_grid, StyleDisplay::Grid }, { eCSSKeyword_inline_grid, StyleDisplay::InlineGrid }, // The next 4 entries are controlled by the layout.css.prefixes.webkit pref. @@ -2953,8 +2952,6 @@ static const nsCSSPropertyID gGridSubpropTable[] = { eCSSProperty_grid_auto_flow, eCSSProperty_grid_auto_rows, eCSSProperty_grid_auto_columns, - eCSSProperty_grid_row_gap, // can only be reset, not get/set - eCSSProperty_grid_column_gap, // can only be reset, not get/set eCSSProperty_UNKNOWN }; @@ -2978,9 +2975,9 @@ static const nsCSSPropertyID gGridAreaSubpropTable[] = { eCSSProperty_UNKNOWN }; -static const nsCSSPropertyID gGridGapSubpropTable[] = { - eCSSProperty_grid_row_gap, - eCSSProperty_grid_column_gap, +static const nsCSSPropertyID gGapSubpropTable[] = { + eCSSProperty_row_gap, + eCSSProperty_column_gap, eCSSProperty_UNKNOWN }; diff --git a/layout/style/nsComputedDOMStyle.cpp b/layout/style/nsComputedDOMStyle.cpp index efa485f61..eb56559d9 100644 --- a/layout/style/nsComputedDOMStyle.cpp +++ b/layout/style/nsComputedDOMStyle.cpp @@ -1093,21 +1093,6 @@ nsComputedDOMStyle::DoGetColumnWidth() } already_AddRefed<CSSValue> -nsComputedDOMStyle::DoGetColumnGap() -{ - RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue; - - const nsStyleColumn* column = StyleColumn(); - if (column->mColumnGap.GetUnit() == eStyleUnit_Normal) { - val->SetAppUnits(StyleFont()->mFont.size); - } else { - SetValueToCoord(val, StyleColumn()->mColumnGap, true); - } - - return val.forget(); -} - -already_AddRefed<CSSValue> nsComputedDOMStyle::DoGetColumnFill() { RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue; @@ -3003,18 +2988,32 @@ nsComputedDOMStyle::DoGetGridRowEnd() } already_AddRefed<CSSValue> -nsComputedDOMStyle::DoGetGridColumnGap() +nsComputedDOMStyle::DoGetColumnGap() { RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue; - SetValueToCoord(val, StylePosition()->mGridColumnGap, true); + + const nsStylePosition* positionData = StylePosition(); + if (positionData->mColumnGap.GetUnit() == eStyleUnit_Normal) { + val->SetIdent(eCSSKeyword_normal); + } else { + SetValueToCoord(val, positionData->mColumnGap, true); + } + return val.forget(); } already_AddRefed<CSSValue> -nsComputedDOMStyle::DoGetGridRowGap() +nsComputedDOMStyle::DoGetRowGap() { RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue; - SetValueToCoord(val, StylePosition()->mGridRowGap, true); + + const nsStylePosition* positionData = StylePosition(); + if (positionData->mRowGap.GetUnit() == eStyleUnit_Normal) { + val->SetIdent(eCSSKeyword_normal); + } else { + SetValueToCoord(val, positionData->mRowGap, true); + } + return val.forget(); } diff --git a/layout/style/nsComputedDOMStyle.h b/layout/style/nsComputedDOMStyle.h index 38a61e23c..363de2a8f 100644 --- a/layout/style/nsComputedDOMStyle.h +++ b/layout/style/nsComputedDOMStyle.h @@ -286,8 +286,6 @@ private: already_AddRefed<CSSValue> DoGetGridColumnEnd(); already_AddRefed<CSSValue> DoGetGridRowStart(); already_AddRefed<CSSValue> DoGetGridRowEnd(); - already_AddRefed<CSSValue> DoGetGridColumnGap(); - already_AddRefed<CSSValue> DoGetGridRowGap(); /* StyleImageLayer properties */ already_AddRefed<CSSValue> DoGetImageLayerImage(const nsStyleImageLayers& aLayers); @@ -503,7 +501,6 @@ private: already_AddRefed<CSSValue> DoGetColumnCount(); already_AddRefed<CSSValue> DoGetColumnFill(); already_AddRefed<CSSValue> DoGetColumnWidth(); - already_AddRefed<CSSValue> DoGetColumnGap(); already_AddRefed<CSSValue> DoGetColumnRuleWidth(); already_AddRefed<CSSValue> DoGetColumnRuleStyle(); already_AddRefed<CSSValue> DoGetColumnRuleColor(); @@ -541,6 +538,8 @@ private: already_AddRefed<CSSValue> DoGetJustifyContent(); already_AddRefed<CSSValue> DoGetJustifyItems(); already_AddRefed<CSSValue> DoGetJustifySelf(); + already_AddRefed<CSSValue> DoGetColumnGap(); + already_AddRefed<CSSValue> DoGetRowGap(); /* SVG properties */ already_AddRefed<CSSValue> DoGetFill(); diff --git a/layout/style/nsComputedDOMStylePropertyList.h b/layout/style/nsComputedDOMStylePropertyList.h index ec223cda4..a17a6a822 100644 --- a/layout/style/nsComputedDOMStylePropertyList.h +++ b/layout/style/nsComputedDOMStylePropertyList.h @@ -151,10 +151,8 @@ COMPUTED_STYLE_PROP(grid_auto_columns, GridAutoColumns) COMPUTED_STYLE_PROP(grid_auto_flow, GridAutoFlow) COMPUTED_STYLE_PROP(grid_auto_rows, GridAutoRows) COMPUTED_STYLE_PROP(grid_column_end, GridColumnEnd) -COMPUTED_STYLE_PROP(grid_column_gap, GridColumnGap) COMPUTED_STYLE_PROP(grid_column_start, GridColumnStart) COMPUTED_STYLE_PROP(grid_row_end, GridRowEnd) -COMPUTED_STYLE_PROP(grid_row_gap, GridRowGap) COMPUTED_STYLE_PROP(grid_row_start, GridRowStart) COMPUTED_STYLE_PROP(grid_template_areas, GridTemplateAreas) COMPUTED_STYLE_PROP(grid_template_columns, GridTemplateColumns) @@ -217,6 +215,7 @@ COMPUTED_STYLE_PROP(position, Position) COMPUTED_STYLE_PROP(quotes, Quotes) COMPUTED_STYLE_PROP(resize, Resize) COMPUTED_STYLE_PROP(right, Right) +COMPUTED_STYLE_PROP(row_gap, RowGap) COMPUTED_STYLE_PROP(ruby_align, RubyAlign) COMPUTED_STYLE_PROP(ruby_position, RubyPosition) COMPUTED_STYLE_PROP(scroll_behavior, ScrollBehavior) diff --git a/layout/style/nsLayoutStylesheetCache.cpp b/layout/style/nsLayoutStylesheetCache.cpp index 1905d8c5c..7c09202e6 100644 --- a/layout/style/nsLayoutStylesheetCache.cpp +++ b/layout/style/nsLayoutStylesheetCache.cpp @@ -380,8 +380,6 @@ nsLayoutStylesheetCache::For(StyleBackendType aType) // Preferences::RegisterCallback(&DependentPrefChanged, // "layout.css.example-pref.enabled"); Preferences::RegisterCallback(&DependentPrefChanged, - "layout.css.grid.enabled"); - Preferences::RegisterCallback(&DependentPrefChanged, "dom.details_element.enabled"); } @@ -553,7 +551,7 @@ nsLayoutStylesheetCache::DependentPrefChanged(const char* aPref, void* aData) InvalidateSheet(gStyleCache_Gecko ? &gStyleCache_Gecko->sheet_ : nullptr, \ gStyleCache_Servo ? &gStyleCache_Servo->sheet_ : nullptr); - INVALIDATE(mUASheet); // for layout.css.grid.enabled + // INVALIDATE(mUASheet); // for layout.css.example-pref.enabled INVALIDATE(mHTMLSheet); // for dom.details_element.enabled #undef INVALIDATE diff --git a/layout/style/nsRuleNode.cpp b/layout/style/nsRuleNode.cpp index e59c10cd2..e824e7721 100644 --- a/layout/style/nsRuleNode.cpp +++ b/layout/style/nsRuleNode.cpp @@ -8873,25 +8873,27 @@ nsRuleNode::ComputePositionData(void* aStartStruct, parentPos->mGridRowEnd, conditions); - // grid-column-gap - if (SetCoord(*aRuleData->ValueForGridColumnGap(), - pos->mGridColumnGap, parentPos->mGridColumnGap, - SETCOORD_LPH | SETCOORD_INITIAL_ZERO | SETCOORD_STORE_CALC | - SETCOORD_CALC_CLAMP_NONNEGATIVE | SETCOORD_UNSET_INITIAL, + // column-gap: normal, length, percent, calc, inherit, initial + if (SetCoord(*aRuleData->ValueForColumnGap(), + pos->mColumnGap, parentPos->mColumnGap, + SETCOORD_LPH | SETCOORD_NORMAL | SETCOORD_INITIAL_NORMAL | + SETCOORD_STORE_CALC | SETCOORD_CALC_CLAMP_NONNEGATIVE | + SETCOORD_UNSET_INITIAL, aContext, mPresContext, conditions)) { } else { - MOZ_ASSERT(aRuleData->ValueForGridColumnGap()->GetUnit() == eCSSUnit_Null, + MOZ_ASSERT(aRuleData->ValueForColumnGap()->GetUnit() == eCSSUnit_Null, "unexpected unit"); } - // grid-row-gap - if (SetCoord(*aRuleData->ValueForGridRowGap(), - pos->mGridRowGap, parentPos->mGridRowGap, - SETCOORD_LPH | SETCOORD_INITIAL_ZERO | SETCOORD_STORE_CALC | - SETCOORD_CALC_CLAMP_NONNEGATIVE | SETCOORD_UNSET_INITIAL, + // row-gap: normal, length, percent, calc, inherit, initial + if (SetCoord(*aRuleData->ValueForRowGap(), + pos->mRowGap, parentPos->mRowGap, + SETCOORD_LPH | SETCOORD_NORMAL | SETCOORD_INITIAL_NORMAL | + SETCOORD_STORE_CALC | SETCOORD_CALC_CLAMP_NONNEGATIVE | + SETCOORD_UNSET_INITIAL, aContext, mPresContext, conditions)) { } else { - MOZ_ASSERT(aRuleData->ValueForGridRowGap()->GetUnit() == eCSSUnit_Null, + MOZ_ASSERT(aRuleData->ValueForRowGap()->GetUnit() == eCSSUnit_Null, "unexpected unit"); } @@ -9298,18 +9300,6 @@ nsRuleNode::ComputeColumnData(void* aStartStruct, SETCOORD_UNSET_INITIAL, aContext, mPresContext, conditions); - // column-gap: length, inherit, normal - SetCoord(*aRuleData->ValueForColumnGap(), - column->mColumnGap, parent->mColumnGap, - SETCOORD_LH | SETCOORD_NORMAL | SETCOORD_INITIAL_NORMAL | - SETCOORD_CALC_LENGTH_ONLY | SETCOORD_UNSET_INITIAL, - aContext, mPresContext, conditions); - // clamp negative calc() to 0 - if (column->mColumnGap.GetUnit() == eStyleUnit_Coord) { - column->mColumnGap.SetCoordValue( - std::max(column->mColumnGap.GetCoordValue(), 0)); - } - // column-count: auto, integer, inherit const nsCSSValue* columnCountValue = aRuleData->ValueForColumnCount(); if (eCSSUnit_Auto == columnCountValue->GetUnit() || diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp index acf287ea8..e83a6dcf9 100644 --- a/layout/style/nsStyleStruct.cpp +++ b/layout/style/nsStyleStruct.cpp @@ -825,7 +825,6 @@ nsStyleXUL::CalcDifference(const nsStyleXUL& aNewData) const nsStyleColumn::nsStyleColumn(StyleStructContext aContext) : mColumnCount(NS_STYLE_COLUMN_COUNT_AUTO) , mColumnWidth(eStyleUnit_Auto) - , mColumnGap(eStyleUnit_Normal) , mColumnRuleColor(StyleComplexColor::CurrentColor()) , mColumnRuleStyle(NS_STYLE_BORDER_STYLE_NONE) , mColumnFill(NS_STYLE_COLUMN_FILL_BALANCE) @@ -844,7 +843,6 @@ nsStyleColumn::~nsStyleColumn() nsStyleColumn::nsStyleColumn(const nsStyleColumn& aSource) : mColumnCount(aSource.mColumnCount) , mColumnWidth(aSource.mColumnWidth) - , mColumnGap(aSource.mColumnGap) , mColumnRuleColor(aSource.mColumnRuleColor) , mColumnRuleStyle(aSource.mColumnRuleStyle) , mColumnFill(aSource.mColumnFill) @@ -867,7 +865,6 @@ nsStyleColumn::CalcDifference(const nsStyleColumn& aNewData) const } if (mColumnWidth != aNewData.mColumnWidth || - mColumnGap != aNewData.mColumnGap || mColumnFill != aNewData.mColumnFill) { return NS_STYLE_HINT_REFLOW; } @@ -1423,8 +1420,8 @@ nsStylePosition::nsStylePosition(StyleStructContext aContext) , mFlexGrow(0.0f) , mFlexShrink(1.0f) , mZIndex(eStyleUnit_Auto) - , mGridColumnGap(nscoord(0), nsStyleCoord::CoordConstructor) - , mGridRowGap(nscoord(0), nsStyleCoord::CoordConstructor) + , mColumnGap(eStyleUnit_Normal) + , mRowGap(eStyleUnit_Normal) { MOZ_COUNT_CTOR(nsStylePosition); @@ -1489,8 +1486,8 @@ nsStylePosition::nsStylePosition(const nsStylePosition& aSource) , mGridColumnEnd(aSource.mGridColumnEnd) , mGridRowStart(aSource.mGridRowStart) , mGridRowEnd(aSource.mGridRowEnd) - , mGridColumnGap(aSource.mGridColumnGap) - , mGridRowGap(aSource.mGridRowGap) + , mColumnGap(aSource.mColumnGap) + , mRowGap(aSource.mRowGap) { MOZ_COUNT_CTOR(nsStylePosition); } @@ -1590,8 +1587,8 @@ nsStylePosition::CalcDifference(const nsStylePosition& aNewData, mGridColumnEnd != aNewData.mGridColumnEnd || mGridRowStart != aNewData.mGridRowStart || mGridRowEnd != aNewData.mGridRowEnd || - mGridColumnGap != aNewData.mGridColumnGap || - mGridRowGap != aNewData.mGridRowGap) { + mColumnGap != aNewData.mColumnGap || + mRowGap != aNewData.mRowGap) { return hint | nsChangeHint_AllReflowHints; } diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h index 35ff071a5..a01685cc4 100644 --- a/layout/style/nsStyleStruct.h +++ b/layout/style/nsStyleStruct.h @@ -1848,8 +1848,8 @@ public: nsStyleGridLine mGridColumnEnd; nsStyleGridLine mGridRowStart; nsStyleGridLine mGridRowEnd; - nsStyleCoord mGridColumnGap; // [reset] coord, percent, calc - nsStyleCoord mGridRowGap; // [reset] coord, percent, calc + nsStyleCoord mColumnGap; // [reset] normal, coord, percent, calc + nsStyleCoord mRowGap; // [reset] normal, coord, percent, calc // FIXME: Logical-coordinate equivalents to these WidthDepends... and // HeightDepends... methods have been introduced (see below); we probably @@ -3502,7 +3502,6 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleColumn uint32_t mColumnCount; // [reset] see nsStyleConsts.h nsStyleCoord mColumnWidth; // [reset] coord, auto - nsStyleCoord mColumnGap; // [reset] <length-percentage> | normal mozilla::StyleComplexColor mColumnRuleColor; // [reset] uint8_t mColumnRuleStyle; // [reset] diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index 1d5dc989f..e3e719771 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -1432,23 +1432,6 @@ var gCSSProperties = { alias_for: "column-fill", subproperties: [ "column-fill" ] }, - "column-gap": { - domProp: "columnGap", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "normal", "1em", "calc(-2em + 3em)" ], - other_values: [ "2px", "1em", "4em", "3%", "calc(3%)", "calc(1em - 3%)", - "calc(2px)", - "calc(-2px)", - "calc(0px)", - "calc(0pt)", - "calc(5em)", - "calc(3*25px)", - "calc(25px*3)", - "calc(3*25px + 5em)", - ], - invalid_values: [ "-3%", "-1px", "4" ] - }, "-moz-column-gap": { domProp: "MozColumnGap", inherited: false, @@ -6187,561 +6170,581 @@ if (IsCSSPropertyPrefEnabled("layout.css.filters.enabled")) { }; } -if (IsCSSPropertyPrefEnabled("layout.css.grid.enabled")) { - var isGridTemplateSubgridValueEnabled = - IsCSSPropertyPrefEnabled("layout.css.grid-template-subgrid-value.enabled"); - - gCSSProperties["display"].other_values.push("grid", "inline-grid"); - gCSSProperties["grid-auto-flow"] = { - domProp: "gridAutoFlow", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "row" ], - other_values: [ - "column", - "column dense", - "row dense", - "dense column", - "dense row", - "dense", - ], - invalid_values: [ - "", - "auto", - "none", - "10px", - "column row", - "dense row dense", - ] - }; - - gCSSProperties["grid-auto-columns"] = { - domProp: "gridAutoColumns", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: [ - "40px", - "2em", - "2.5fr", - "12%", - "min-content", - "max-content", - "calc(2px - 99%)", - "minmax(20px, max-content)", - "minmax(min-content, auto)", - "minmax(auto, max-content)", - "m\\69nmax(20px, 4Fr)", - "MinMax(min-content, calc(20px + 10%))", - "fit-content(1px)", - "fit-content(calc(1px - 99%))", - "fit-content(10%)", - ], - invalid_values: [ - "", - "normal", - "40ms", - "-40px", - "-12%", - "-2em", - "-2.5fr", - "minmax()", - "minmax(20px)", - "mİnmax(20px, 100px)", - "minmax(20px, 100px, 200px)", - "maxmin(100px, 20px)", - "minmax(min-content, minmax(30px, max-content))", - "fit-content(-1px)", - "fit-content(auto)", - "fit-content(min-content)", - ] - }; - gCSSProperties["grid-auto-rows"] = { - domProp: "gridAutoRows", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: gCSSProperties["grid-auto-columns"].initial_values, - other_values: gCSSProperties["grid-auto-columns"].other_values, - invalid_values: gCSSProperties["grid-auto-columns"].invalid_values - }; - - gCSSProperties["grid-template-columns"] = { - domProp: "gridTemplateColumns", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ - "auto", - "40px", - "2.5fr", - "[normal] 40px [] auto [ ] 12%", - "[foo] 40px min-content [ bar ] calc(2px - 99%) max-content", - "40px min-content calc(20px + 10%) max-content", - "minmax(min-content, auto)", - "minmax(auto, max-content)", - "m\\69nmax(20px, 4Fr)", - "40px MinMax(min-content, calc(20px + 10%)) max-content", - "40px 2em", - "[] 40px [-foo] 2em [bar baz This\ is\ one\ ident]", - // TODO bug 978478: "[a] repeat(3, [b] 20px [c] 40px [d]) [e]", - "repeat(1, 20px)", - "repeat(1, [a] 20px)", - "[a] Repeat(4, [a] 20px [] auto [b c]) [d]", - "[a] 2.5fr Repeat(4, [a] 20px [] auto [b c]) [d]", - "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto [b c]) [d]", - "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto) [d]", - "[a] 2.5fr [z] Repeat(4, 20px [b c] auto [b c]) [d]", - "[a] 2.5fr [z] Repeat(4, 20px auto) [d]", - "repeat(auto-fill, 0)", - "[a] repeat( Auto-fill,1%)", - "minmax(auto,0) [a] repeat(Auto-fit, 0) minmax(0,auto)", - "minmax(calc(1% + 1px),auto) repeat(Auto-fit,[] 1%) minmax(auto,1%)", - "[a] repeat( auto-fit,[a b] minmax(0,0) )", - "[a] 40px repeat(auto-fit,[a b] minmax(1px, 0) [])", - "[a] calc(1px - 99%) [b] repeat(auto-fit,[a b] minmax(1mm, 1%) [c]) [c]", - "repeat(auto-fill,minmax(1%,auto))", - "repeat(auto-fill,minmax(1em,min-content)) minmax(min-content,0)", - "repeat(auto-fill,minmax(max-content,1mm))", - "repeat(2, fit-content(1px))", - "fit-content(1px) 1fr", - "[a] fit-content(calc(1px - 99%)) [b]", - "[a] fit-content(10%) [b c] fit-content(1em)", - ], - invalid_values: [ - "", - "normal", - "40ms", - "-40px", - "-12%", - "-2fr", - "[foo]", - "[inherit] 40px", - "[initial] 40px", - "[unset] 40px", - "[default] 40px", - "[span] 40px", - "[6%] 40px", - "[5th] 40px", - "[foo[] bar] 40px", - "[foo]] 40px", - "(foo) 40px", - "[foo] [bar] 40px", - "40px [foo] [bar]", - "minmax()", - "minmax(20px)", - "mİnmax(20px, 100px)", - "minmax(20px, 100px, 200px)", - "maxmin(100px, 20px)", - "minmax(min-content, minmax(30px, max-content))", - "repeat(0, 20px)", - "repeat(-3, 20px)", - "rêpeat(1, 20px)", - "repeat(1)", - "repeat(1, )", - "repeat(3px, 20px)", - "repeat(2.0, 20px)", - "repeat(2.5, 20px)", - "repeat(2, (foo))", - "repeat(2, foo)", - "40px calc(0px + rubbish)", - "repeat(1, repeat(1, 20px))", - "repeat(auto-fill, auto)", - "repeat(auto-fit,auto)", - "repeat(auto-fill, fit-content(1px))", - "repeat(auto-fit, fit-content(1px))", - "repeat(auto-fit,[])", - "repeat(auto-fill, 0) repeat(auto-fit, 0) ", - "repeat(auto-fit, 0) repeat(auto-fill, 0) ", - "[a] repeat(auto-fit, 0) repeat(auto-fit, 0) ", - "[a] repeat(auto-fill, 0) [a] repeat(auto-fill, 0) ", - "repeat(auto-fill, 0 0)", - "repeat(auto-fill, 0 [] 0)", - "repeat(auto-fill, min-content)", - "repeat(auto-fit,max-content)", - "repeat(auto-fit,1fr)", - "repeat(auto-fit,minmax(auto,auto))", - "repeat(auto-fit,minmax(min-content,1fr))", - "repeat(auto-fit,minmax(1fr,auto))", - "repeat(auto-fill,minmax(1fr,1em))", - "repeat(auto-fill, 10px) auto", - "auto repeat(auto-fit, 10px)", - "minmax(min-content,max-content) repeat(auto-fit, 0)", - "10px [a] 10px [b a] 1fr [b] repeat(auto-fill, 0)", - "fit-content(-1px)", - "fit-content(auto)", - "fit-content(min-content)", - "fit-content(1px) repeat(auto-fit, 1px)", - "fit-content(1px) repeat(auto-fill, 1px)", - ], - unbalanced_values: [ - "(foo] 40px", - ] - }; - if (isGridTemplateSubgridValueEnabled) { - gCSSProperties["grid-template-columns"].other_values.push( - // See https://bugzilla.mozilla.org/show_bug.cgi?id=981300 - "[none auto subgrid min-content max-content foo] 40px", - - "subgrid", - "subgrid [] [foo bar]", - "subgrid repeat(1, [])", - "subgrid Repeat(4, [a] [b c] [] [d])", - "subgrid repeat(auto-fill, [])", - "subgrid [x] repeat( Auto-fill, [a b c]) []", - "subgrid [x] repeat(auto-fill, []) [y z]" - ); - gCSSProperties["grid-template-columns"].invalid_values.push( - "subgrid [inherit]", - "subgrid [initial]", - "subgrid [unset]", - "subgrid [default]", - "subgrid [span]", - "subgrid [foo] 40px", - "subgrid [foo 40px]", - "[foo] subgrid", - "subgrid rêpeat(1, [])", - "subgrid repeat(0, [])", - "subgrid repeat(-3, [])", - "subgrid repeat(2.0, [])", - "subgrid repeat(2.5, [])", - "subgrid repeat(3px, [])", - "subgrid repeat(1)", - "subgrid repeat(1, )", - "subgrid repeat(2, [40px])", - "subgrid repeat(2, foo)", - "subgrid repeat(1, repeat(1, []))", - "subgrid repeat(auto-fit,[])", - "subgrid [] repeat(auto-fit,[])", - "subgrid [a] repeat(auto-fit,[])", - "subgrid repeat(auto-fill, 1px)", - "subgrid repeat(auto-fill, 1px [])", - "subgrid repeat(Auto-fill, [a] [b c] [] [d])", - "subgrid repeat(auto-fill, []) repeat(auto-fill, [])" - ); - } - gCSSProperties["grid-template-rows"] = { - domProp: "gridTemplateRows", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: gCSSProperties["grid-template-columns"].initial_values, - other_values: gCSSProperties["grid-template-columns"].other_values, - invalid_values: gCSSProperties["grid-template-columns"].invalid_values - }; - gCSSProperties["grid-template-areas"] = { - domProp: "gridTemplateAreas", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "none" ], - other_values: [ - "''", - "'' ''", - "'1a-é_ .' \"b .\"", - "' Z\t\\aZ' 'Z Z'", - " '. . a b' '. .a b' ", - "'a.b' '. . .'", - "'.' '..'", - "'...' '.'", - "'...-blah' '. .'", - "'.. ..' '.. ...'", - ], - invalid_values: [ - "'a b' 'a/b'", - "'a . a'", - "'. a a' 'a a a'", - "'a a .' 'a a a'", - "'a a' 'a .'", - "'a a'\n'..'\n'a a'", - ] - }; - - gCSSProperties["grid-template"] = { - domProp: "gridTemplate", - inherited: false, - type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "grid-template-areas", - "grid-template-rows", - "grid-template-columns", - ], - initial_values: [ - "none", - "none / none", - ], - other_values: [ - // <'grid-template-rows'> / <'grid-template-columns'> - "40px / 100px", - "[foo] 40px [bar] / [baz] repeat(auto-fill,100px) [fizz]", - " none/100px", - "40px/none", - // [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? - "'fizz'", - "[bar] 'fizz'", - "'fizz' / [foo] 40px", - "[bar] 'fizz' / [foo] 40px", - "'fizz' 100px / [foo] 40px", - "[bar] 'fizz' 100px / [foo] 40px", - "[bar] 'fizz' 100px [buzz] / [foo] 40px", - "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px", - ], - invalid_values: [ - "'fizz' / repeat(1, 100px)", - "'fizz' repeat(1, 100px) / 0px", - "[foo] [bar] 40px / 100px", - "[fizz] [buzz] 100px / 40px", - "[fizz] [buzz] 'foo' / 40px", - "'foo' / none" - ] - }; - if (isGridTemplateSubgridValueEnabled) { - gCSSProperties["grid-template"].other_values.push( - "subgrid", - "subgrid/40px 20px", - "subgrid [foo] [] [bar baz] / 40px 20px", - "40px 20px/subgrid", - "40px 20px/subgrid [foo] [] repeat(3, [a] [b]) [bar baz]", - "subgrid/subgrid", - "subgrid [foo] [] [bar baz]/subgrid [foo] [] [bar baz]" - ); - gCSSProperties["grid-template"].invalid_values.push( - "subgrid []", - "subgrid [] / 'fizz'", - "subgrid / 'fizz'" - ); - } - - gCSSProperties["grid"] = { - domProp: "grid", - inherited: false, - type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "grid-template-areas", - "grid-template-rows", - "grid-template-columns", - "grid-auto-flow", - "grid-auto-rows", - "grid-auto-columns", - "grid-column-gap", - "grid-row-gap", - ], - initial_values: [ - "none", - "none / none", - ], - other_values: [ - "auto-flow 40px / none", - "auto-flow / 40px", - "auto-flow dense auto / auto", - "dense auto-flow minmax(min-content, 2fr) / auto", - "dense auto-flow / 100px", - "none / auto-flow 40px", - "40px / auto-flow", - "none / dense auto-flow auto", - ].concat( - gCSSProperties["grid-template"].other_values - ), - invalid_values: [ - "auto-flow", - " / auto-flow", - "dense 0 / 0", - "dense dense 40px / 0", - "auto-flow / auto-flow", - "auto-flow / dense", - "auto-flow [a] 0 / 0", - "0 / auto-flow [a] 0", - "auto-flow -20px / 0", - "auto-flow 200ms / 0", - "auto-flow 40px 100px / 0", - ].concat( - gCSSProperties["grid-template"].invalid_values, - gCSSProperties["grid-auto-flow"].other_values, - gCSSProperties["grid-auto-flow"].invalid_values - .filter((v) => v != 'none') - ) - }; - - var gridLineOtherValues = [ - "foo", - "2", - "2 foo", - "foo 2", - "-3", - "-3 bar", - "bar -3", - "span 2", - "2 span", - "span foo", - "foo span", - "span 2 foo", - "span foo 2", - "2 foo span", - "foo 2 span", - ]; - var gridLineInvalidValues = [ +var isGridTemplateSubgridValueEnabled = + IsCSSPropertyPrefEnabled("layout.css.grid-template-subgrid-value.enabled"); + +gCSSProperties["display"].other_values.push("grid", "inline-grid"); +gCSSProperties["grid-auto-flow"] = { + domProp: "gridAutoFlow", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "row" ], + other_values: [ + "column", + "column dense", + "row dense", + "dense column", + "dense row", + "dense", + ], + invalid_values: [ "", - "4th", - "span", - "inherit 2", - "2 inherit", - "20px", - "2 3", - "2.5", - "2.0", - "0", - "0 foo", - "span 0", - "2 foo 3", - "foo 2 foo", - "2 span foo", - "foo span 2", - "span -3", - "span -3 bar", - "span 2 span", - "span foo span", - "span 2 foo span", - ]; - - gCSSProperties["grid-column-start"] = { - domProp: "gridColumnStart", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues - }; - gCSSProperties["grid-column-end"] = { - domProp: "gridColumnEnd", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues - }; - gCSSProperties["grid-row-start"] = { - domProp: "gridRowStart", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues - }; - gCSSProperties["grid-row-end"] = { - domProp: "gridRowEnd", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "auto" ], - other_values: gridLineOtherValues, - invalid_values: gridLineInvalidValues - }; - - // The grid-column and grid-row shorthands take values of the form - // <grid-line> [ / <grid-line> ]? - var gridColumnRowOtherValues = [].concat(gridLineOtherValues); - gridLineOtherValues.concat([ "auto" ]).forEach(function(val) { - gridColumnRowOtherValues.push(" foo / " + val); - gridColumnRowOtherValues.push(val + "/2"); - }); - var gridColumnRowInvalidValues = [ - "foo, bar", - "foo / bar / baz", - ].concat(gridLineInvalidValues); - gridLineInvalidValues.forEach(function(val) { - gridColumnRowInvalidValues.push("span 3 / " + val); - gridColumnRowInvalidValues.push(val + " / foo"); - }); - gCSSProperties["grid-column"] = { - domProp: "gridColumn", - inherited: false, - type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "grid-column-start", - "grid-column-end" - ], - initial_values: [ "auto", "auto / auto" ], - other_values: gridColumnRowOtherValues, - invalid_values: gridColumnRowInvalidValues - }; - gCSSProperties["grid-row"] = { - domProp: "gridRow", - inherited: false, - type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "grid-row-start", - "grid-row-end" - ], - initial_values: [ "auto", "auto / auto" ], - other_values: gridColumnRowOtherValues, - invalid_values: gridColumnRowInvalidValues - }; + "auto", + "none", + "10px", + "column row", + "dense row dense", + ] +}; + +gCSSProperties["grid-auto-columns"] = { + domProp: "gridAutoColumns", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "auto" ], + other_values: [ + "40px", + "2em", + "2.5fr", + "12%", + "min-content", + "max-content", + "calc(2px - 99%)", + "minmax(20px, max-content)", + "minmax(min-content, auto)", + "minmax(auto, max-content)", + "m\\69nmax(20px, 4Fr)", + "MinMax(min-content, calc(20px + 10%))", + "fit-content(1px)", + "fit-content(calc(1px - 99%))", + "fit-content(10%)", + ], + invalid_values: [ + "", + "normal", + "40ms", + "-40px", + "-12%", + "-2em", + "-2.5fr", + "minmax()", + "minmax(20px)", + "mİnmax(20px, 100px)", + "minmax(20px, 100px, 200px)", + "maxmin(100px, 20px)", + "minmax(min-content, minmax(30px, max-content))", + "fit-content(-1px)", + "fit-content(auto)", + "fit-content(min-content)", + ] +}; +gCSSProperties["grid-auto-rows"] = { + domProp: "gridAutoRows", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: gCSSProperties["grid-auto-columns"].initial_values, + other_values: gCSSProperties["grid-auto-columns"].other_values, + invalid_values: gCSSProperties["grid-auto-columns"].invalid_values +}; + +gCSSProperties["grid-template-columns"] = { + domProp: "gridTemplateColumns", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "none" ], + other_values: [ + "auto", + "40px", + "2.5fr", + "[normal] 40px [] auto [ ] 12%", + "[foo] 40px min-content [ bar ] calc(2px - 99%) max-content", + "40px min-content calc(20px + 10%) max-content", + "minmax(min-content, auto)", + "minmax(auto, max-content)", + "m\\69nmax(20px, 4Fr)", + "40px MinMax(min-content, calc(20px + 10%)) max-content", + "40px 2em", + "[] 40px [-foo] 2em [bar baz This\ is\ one\ ident]", + // TODO bug 978478: "[a] repeat(3, [b] 20px [c] 40px [d]) [e]", + "repeat(1, 20px)", + "repeat(1, [a] 20px)", + "[a] Repeat(4, [a] 20px [] auto [b c]) [d]", + "[a] 2.5fr Repeat(4, [a] 20px [] auto [b c]) [d]", + "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto [b c]) [d]", + "[a] 2.5fr [z] Repeat(4, [a] 20px [] auto) [d]", + "[a] 2.5fr [z] Repeat(4, 20px [b c] auto [b c]) [d]", + "[a] 2.5fr [z] Repeat(4, 20px auto) [d]", + "repeat(auto-fill, 0)", + "[a] repeat( Auto-fill,1%)", + "minmax(auto,0) [a] repeat(Auto-fit, 0) minmax(0,auto)", + "minmax(calc(1% + 1px),auto) repeat(Auto-fit,[] 1%) minmax(auto,1%)", + "[a] repeat( auto-fit,[a b] minmax(0,0) )", + "[a] 40px repeat(auto-fit,[a b] minmax(1px, 0) [])", + "[a] calc(1px - 99%) [b] repeat(auto-fit,[a b] minmax(1mm, 1%) [c]) [c]", + "repeat(auto-fill,minmax(1%,auto))", + "repeat(auto-fill,minmax(1em,min-content)) minmax(min-content,0)", + "repeat(auto-fill,minmax(max-content,1mm))", + "repeat(2, fit-content(1px))", + "fit-content(1px) 1fr", + "[a] fit-content(calc(1px - 99%)) [b]", + "[a] fit-content(10%) [b c] fit-content(1em)", + ], + invalid_values: [ + "", + "normal", + "40ms", + "-40px", + "-12%", + "-2fr", + "[foo]", + "[inherit] 40px", + "[initial] 40px", + "[unset] 40px", + "[default] 40px", + "[span] 40px", + "[6%] 40px", + "[5th] 40px", + "[foo[] bar] 40px", + "[foo]] 40px", + "(foo) 40px", + "[foo] [bar] 40px", + "40px [foo] [bar]", + "minmax()", + "minmax(20px)", + "mİnmax(20px, 100px)", + "minmax(20px, 100px, 200px)", + "maxmin(100px, 20px)", + "minmax(min-content, minmax(30px, max-content))", + "repeat(0, 20px)", + "repeat(-3, 20px)", + "rêpeat(1, 20px)", + "repeat(1)", + "repeat(1, )", + "repeat(3px, 20px)", + "repeat(2.0, 20px)", + "repeat(2.5, 20px)", + "repeat(2, (foo))", + "repeat(2, foo)", + "40px calc(0px + rubbish)", + "repeat(1, repeat(1, 20px))", + "repeat(auto-fill, auto)", + "repeat(auto-fit,auto)", + "repeat(auto-fill, fit-content(1px))", + "repeat(auto-fit, fit-content(1px))", + "repeat(auto-fit,[])", + "repeat(auto-fill, 0) repeat(auto-fit, 0) ", + "repeat(auto-fit, 0) repeat(auto-fill, 0) ", + "[a] repeat(auto-fit, 0) repeat(auto-fit, 0) ", + "[a] repeat(auto-fill, 0) [a] repeat(auto-fill, 0) ", + "repeat(auto-fill, 0 0)", + "repeat(auto-fill, 0 [] 0)", + "repeat(auto-fill, min-content)", + "repeat(auto-fit,max-content)", + "repeat(auto-fit,1fr)", + "repeat(auto-fit,minmax(auto,auto))", + "repeat(auto-fit,minmax(min-content,1fr))", + "repeat(auto-fit,minmax(1fr,auto))", + "repeat(auto-fill,minmax(1fr,1em))", + "repeat(auto-fill, 10px) auto", + "auto repeat(auto-fit, 10px)", + "minmax(min-content,max-content) repeat(auto-fit, 0)", + "10px [a] 10px [b a] 1fr [b] repeat(auto-fill, 0)", + "fit-content(-1px)", + "fit-content(auto)", + "fit-content(min-content)", + "fit-content(1px) repeat(auto-fit, 1px)", + "fit-content(1px) repeat(auto-fill, 1px)", + ], + unbalanced_values: [ + "(foo] 40px", + ] +}; +if (isGridTemplateSubgridValueEnabled) { + gCSSProperties["grid-template-columns"].other_values.push( + // See https://bugzilla.mozilla.org/show_bug.cgi?id=981300 + "[none auto subgrid min-content max-content foo] 40px", + + "subgrid", + "subgrid [] [foo bar]", + "subgrid repeat(1, [])", + "subgrid Repeat(4, [a] [b c] [] [d])", + "subgrid repeat(auto-fill, [])", + "subgrid [x] repeat( Auto-fill, [a b c]) []", + "subgrid [x] repeat(auto-fill, []) [y z]" + ); + gCSSProperties["grid-template-columns"].invalid_values.push( + "subgrid [inherit]", + "subgrid [initial]", + "subgrid [unset]", + "subgrid [default]", + "subgrid [span]", + "subgrid [foo] 40px", + "subgrid [foo 40px]", + "[foo] subgrid", + "subgrid rêpeat(1, [])", + "subgrid repeat(0, [])", + "subgrid repeat(-3, [])", + "subgrid repeat(2.0, [])", + "subgrid repeat(2.5, [])", + "subgrid repeat(3px, [])", + "subgrid repeat(1)", + "subgrid repeat(1, )", + "subgrid repeat(2, [40px])", + "subgrid repeat(2, foo)", + "subgrid repeat(1, repeat(1, []))", + "subgrid repeat(auto-fit,[])", + "subgrid [] repeat(auto-fit,[])", + "subgrid [a] repeat(auto-fit,[])", + "subgrid repeat(auto-fill, 1px)", + "subgrid repeat(auto-fill, 1px [])", + "subgrid repeat(Auto-fill, [a] [b c] [] [d])", + "subgrid repeat(auto-fill, []) repeat(auto-fill, [])" + ); +} +gCSSProperties["grid-template-rows"] = { + domProp: "gridTemplateRows", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: gCSSProperties["grid-template-columns"].initial_values, + other_values: gCSSProperties["grid-template-columns"].other_values, + invalid_values: gCSSProperties["grid-template-columns"].invalid_values +}; +gCSSProperties["grid-template-areas"] = { + domProp: "gridTemplateAreas", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "none" ], + other_values: [ + "''", + "'' ''", + "'1a-é_ .' \"b .\"", + "' Z\t\\aZ' 'Z Z'", + " '. . a b' '. .a b' ", + "'a.b' '. . .'", + "'.' '..'", + "'...' '.'", + "'...-blah' '. .'", + "'.. ..' '.. ...'", + ], + invalid_values: [ + "'a b' 'a/b'", + "'a . a'", + "'. a a' 'a a a'", + "'a a .' 'a a a'", + "'a a' 'a .'", + "'a a'\n'..'\n'a a'", + ] +}; + +gCSSProperties["grid-template"] = { + domProp: "gridTemplate", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + subproperties: [ + "grid-template-areas", + "grid-template-rows", + "grid-template-columns", + ], + initial_values: [ + "none", + "none / none", + ], + other_values: [ + // <'grid-template-rows'> / <'grid-template-columns'> + "40px / 100px", + "[foo] 40px [bar] / [baz] repeat(auto-fill,100px) [fizz]", + " none/100px", + "40px/none", + // [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? + "'fizz'", + "[bar] 'fizz'", + "'fizz' / [foo] 40px", + "[bar] 'fizz' / [foo] 40px", + "'fizz' 100px / [foo] 40px", + "[bar] 'fizz' 100px / [foo] 40px", + "[bar] 'fizz' 100px [buzz] / [foo] 40px", + "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px", + ], + invalid_values: [ + "'fizz' / repeat(1, 100px)", + "'fizz' repeat(1, 100px) / 0px", + "[foo] [bar] 40px / 100px", + "[fizz] [buzz] 100px / 40px", + "[fizz] [buzz] 'foo' / 40px", + "'foo' / none" + ] +}; +if (isGridTemplateSubgridValueEnabled) { + gCSSProperties["grid-template"].other_values.push( + "subgrid", + "subgrid/40px 20px", + "subgrid [foo] [] [bar baz] / 40px 20px", + "40px 20px/subgrid", + "40px 20px/subgrid [foo] [] repeat(3, [a] [b]) [bar baz]", + "subgrid/subgrid", + "subgrid [foo] [] [bar baz]/subgrid [foo] [] [bar baz]" + ); + gCSSProperties["grid-template"].invalid_values.push( + "subgrid []", + "subgrid [] / 'fizz'", + "subgrid / 'fizz'" + ); +} - var gridAreaOtherValues = gridLineOtherValues.slice(); - gridLineOtherValues.forEach(function(val) { - gridAreaOtherValues.push("foo / " + val); - gridAreaOtherValues.push(val + "/2/3"); - gridAreaOtherValues.push("foo / bar / " + val + " / baz"); - }); - var gridAreaInvalidValues = [ - "foo, bar", - "foo / bar / baz / fizz / buzz", - "default / foo / bar / baz", - "foo / initial / bar / baz", - "foo / bar / inherit / baz", - "foo / bar / baz / unset", - ].concat(gridLineInvalidValues); - gridLineInvalidValues.forEach(function(val) { - gridAreaInvalidValues.push("foo / " + val); - gridAreaInvalidValues.push("foo / bar / " + val); - gridAreaInvalidValues.push("foo / 4 / bar / " + val); - }); - - gCSSProperties["grid-area"] = { - domProp: "gridArea", - inherited: false, - type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ - "grid-row-start", - "grid-column-start", - "grid-row-end", - "grid-column-end" - ], - initial_values: [ - "auto", - "auto / auto", - "auto / auto / auto", - "auto / auto / auto / auto" - ], - other_values: gridAreaOtherValues, - invalid_values: gridAreaInvalidValues - }; +gCSSProperties["grid"] = { + domProp: "grid", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + subproperties: [ + "grid-template-areas", + "grid-template-rows", + "grid-template-columns", + "grid-auto-flow", + "grid-auto-rows", + "grid-auto-columns", + "grid-column-gap", + "grid-row-gap", + ], + initial_values: [ + "none", + "none / none", + ], + other_values: [ + "auto-flow 40px / none", + "auto-flow / 40px", + "auto-flow dense auto / auto", + "dense auto-flow minmax(min-content, 2fr) / auto", + "dense auto-flow / 100px", + "none / auto-flow 40px", + "40px / auto-flow", + "none / dense auto-flow auto", + ].concat( + gCSSProperties["grid-template"].other_values + ), + invalid_values: [ + "auto-flow", + " / auto-flow", + "dense 0 / 0", + "dense dense 40px / 0", + "auto-flow / auto-flow", + "auto-flow / dense", + "auto-flow [a] 0 / 0", + "0 / auto-flow [a] 0", + "auto-flow -20px / 0", + "auto-flow 200ms / 0", + "auto-flow 40px 100px / 0", + ].concat( + gCSSProperties["grid-template"].invalid_values, + gCSSProperties["grid-auto-flow"].other_values, + gCSSProperties["grid-auto-flow"].invalid_values + .filter((v) => v != 'none') + ) +}; + +var gridLineOtherValues = [ + "foo", + "2", + "2 foo", + "foo 2", + "-3", + "-3 bar", + "bar -3", + "span 2", + "2 span", + "span foo", + "foo span", + "span 2 foo", + "span foo 2", + "2 foo span", + "foo 2 span", +]; +var gridLineInvalidValues = [ + "", + "4th", + "span", + "inherit 2", + "2 inherit", + "20px", + "2 3", + "2.5", + "2.0", + "0", + "0 foo", + "span 0", + "2 foo 3", + "foo 2 foo", + "2 span foo", + "foo span 2", + "span -3", + "span -3 bar", + "span 2 span", + "span foo span", + "span 2 foo span", +]; - gCSSProperties["grid-column-gap"] = { - domProp: "gridColumnGap", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "0" ], - other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)", - "calc(1% + 1ch)" , "calc(1px - 99%)" ], - invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "fit-content(1px)" ], - }; - gCSSProperties["grid-row-gap"] = { - domProp: "gridRowGap", - inherited: false, - type: CSS_TYPE_LONGHAND, - initial_values: [ "0" ], - other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)", - "calc(1% + 1ch)" , "calc(1px - 99%)" ], - invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "min-content" ], - }; - gCSSProperties["grid-gap"] = { - domProp: "gridGap", - inherited: false, - type: CSS_TYPE_TRUE_SHORTHAND, - subproperties: [ "grid-column-gap", "grid-row-gap" ], - initial_values: [ "0", "0 0" ], - other_values: [ "1ch 0", "1px 1%", "1em 1px", "calc(1px) calc(1%)" ], - invalid_values: [ "-1px", "1px -1px", "1px 1px 1px", "inherit 1px", - "1px auto" ] - }; -} +gCSSProperties["grid-column-start"] = { + domProp: "gridColumnStart", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "auto" ], + other_values: gridLineOtherValues, + invalid_values: gridLineInvalidValues +}; +gCSSProperties["grid-column-end"] = { + domProp: "gridColumnEnd", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "auto" ], + other_values: gridLineOtherValues, + invalid_values: gridLineInvalidValues +}; +gCSSProperties["grid-row-start"] = { + domProp: "gridRowStart", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "auto" ], + other_values: gridLineOtherValues, + invalid_values: gridLineInvalidValues +}; +gCSSProperties["grid-row-end"] = { + domProp: "gridRowEnd", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "auto" ], + other_values: gridLineOtherValues, + invalid_values: gridLineInvalidValues +}; + +// The grid-column and grid-row shorthands take values of the form +// <grid-line> [ / <grid-line> ]? +var gridColumnRowOtherValues = [].concat(gridLineOtherValues); +gridLineOtherValues.concat([ "auto" ]).forEach(function(val) { + gridColumnRowOtherValues.push(" foo / " + val); + gridColumnRowOtherValues.push(val + "/2"); +}); +var gridColumnRowInvalidValues = [ + "foo, bar", + "foo / bar / baz", +].concat(gridLineInvalidValues); +gridLineInvalidValues.forEach(function(val) { + gridColumnRowInvalidValues.push("span 3 / " + val); + gridColumnRowInvalidValues.push(val + " / foo"); +}); +gCSSProperties["grid-column"] = { + domProp: "gridColumn", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + subproperties: [ + "grid-column-start", + "grid-column-end" + ], + initial_values: [ "auto", "auto / auto" ], + other_values: gridColumnRowOtherValues, + invalid_values: gridColumnRowInvalidValues +}; +gCSSProperties["grid-row"] = { + domProp: "gridRow", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + subproperties: [ + "grid-row-start", + "grid-row-end" + ], + initial_values: [ "auto", "auto / auto" ], + other_values: gridColumnRowOtherValues, + invalid_values: gridColumnRowInvalidValues +}; + +var gridAreaOtherValues = gridLineOtherValues.slice(); +gridLineOtherValues.forEach(function(val) { + gridAreaOtherValues.push("foo / " + val); + gridAreaOtherValues.push(val + "/2/3"); + gridAreaOtherValues.push("foo / bar / " + val + " / baz"); +}); +var gridAreaInvalidValues = [ + "foo, bar", + "foo / bar / baz / fizz / buzz", + "default / foo / bar / baz", + "foo / initial / bar / baz", + "foo / bar / inherit / baz", + "foo / bar / baz / unset", +].concat(gridLineInvalidValues); +gridLineInvalidValues.forEach(function(val) { + gridAreaInvalidValues.push("foo / " + val); + gridAreaInvalidValues.push("foo / bar / " + val); + gridAreaInvalidValues.push("foo / 4 / bar / " + val); +}); + +gCSSProperties["grid-area"] = { + domProp: "gridArea", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + subproperties: [ + "grid-row-start", + "grid-column-start", + "grid-row-end", + "grid-column-end" + ], + initial_values: [ + "auto", + "auto / auto", + "auto / auto / auto", + "auto / auto / auto / auto" + ], + other_values: gridAreaOtherValues, + invalid_values: gridAreaInvalidValues +}; + +gCSSProperties["column-gap"] = { + domProp: "columnGap", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "normal" ], + other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)", + "calc(1% + 1ch)" , "calc(1px - 99%)" ], + invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "fit-content(1px)" ], +}; +gCSSProperties["grid-column-gap"] = { + domProp: "gridColumnGap", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "column-gap", + subproperties: [ "column-gap" ] +}; +gCSSProperties["row-gap"] = { + domProp: "rowGap", + inherited: false, + type: CSS_TYPE_LONGHAND, + initial_values: [ "normal" ], + other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)", + "calc(1% + 1ch)" , "calc(1px - 99%)" ], + invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%", "min-content" ], +}; +gCSSProperties["grid-row-gap"] = { + domProp: "gridRowGap", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + alias_for: "row-gap", + subproperties: [ "row-gap" ] +}; +gCSSProperties["gap"] = { + domProp: "gap", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + subproperties: [ "column-gap", "row-gap" ], + initial_values: [ "normal", "normal normal" ], + other_values: [ "1ch 0", "1px 1%", "1em 1px", "calc(1px) calc(1%)", + "normal 0", "1% normal" ], + invalid_values: [ "-1px", "1px -1px", "1px 1px 1px", "inherit 1px", + "1px auto" ] +}; +gCSSProperties["grid-gap"] = { + domProp: "gridGap", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + alias_for: "gap", + subproperties: [ "column-gap", "row-gap" ], +}; if (IsCSSPropertyPrefEnabled("layout.css.display-contents.enabled")) { gCSSProperties["display"].other_values.push("contents"); diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html index 83524b60d..2e300fbe8 100644 --- a/layout/style/test/test_transitions_per_property.html +++ b/layout/style/test/test_transitions_per_property.html @@ -69,8 +69,6 @@ var supported_properties = { "box-shadow": [ test_shadow_transition ], "column-count": [ test_pos_integer_or_auto_transition, test_integer_at_least_one_clamping ], - "column-gap": [ test_length_transition, - test_length_clamped ], "column-rule-color": [ test_color_transition, test_true_currentcolor_transition ], "column-rule-width": [ test_length_transition, @@ -161,8 +159,8 @@ var supported_properties = { /* test_float_zeroToOne_clamped */ ], "font-stretch": [ test_font_stretch ], "font-weight": [ test_font_weight ], - "grid-column-gap": [ test_grid_gap ], - "grid-row-gap": [ test_grid_gap ], + "column-gap": [ test_gap ], + "row-gap": [ test_gap ], "height": [ test_length_transition, test_percent_transition, test_length_percent_calc_transition, test_length_clamped, test_percent_clamped ], @@ -1922,10 +1920,7 @@ function test_font_weight(prop) { div.style.setProperty("transition-timing-function", "linear", ""); } -function test_grid_gap(prop) { - if (!SpecialPowers.getBoolPref("layout.css.grid.enabled")) { - return; - } +function test_gap(prop) { test_length_transition(prop); test_length_clamped(prop); test_percent_transition(prop); diff --git a/system/platform-prefs.js b/system/platform-prefs.js index 8d4d6b98d..2a8acb7bc 100644 --- a/system/platform-prefs.js +++ b/system/platform-prefs.js @@ -2377,9 +2377,6 @@ pref("layout.css.variables.enabled", true); // Is support for CSS overflow-clip-box enabled for non-UA sheets? pref("layout.css.overflow-clip-box.enabled", false); -// Is support for CSS grid enabled? -pref("layout.css.grid.enabled", true); - // Is support for CSS "grid-template-{columns,rows}: subgrid X" enabled? pref("layout.css.grid-template-subgrid-value.enabled", false); |