diff options
51 files changed, 4947 insertions, 881 deletions
diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js index 070167496..25d9e2d33 100644 --- a/devtools/shared/css/generated/properties-db.js +++ b/devtools/shared/css/generated/properties-db.js @@ -779,7 +779,8 @@ exports.CSS_PROPERTIES = { "column-gap" ], "supports": [ - 6 + 6, + 8 ], "values": [ "-moz-calc", @@ -5434,7 +5435,8 @@ exports.CSS_PROPERTIES = { "column-gap" ], "supports": [ - 6 + 6, + 8 ], "values": [ "-moz-calc", diff --git a/dom/grid/GridLines.cpp b/dom/grid/GridLines.cpp index fac645c64..898885346 100644 --- a/dom/grid/GridLines.cpp +++ b/dom/grid/GridLines.cpp @@ -90,7 +90,9 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo, for (uint32_t i = aTrackInfo->mStartFragmentTrack; i < aTrackInfo->mEndFragmentTrack + 1; i++) { - uint32_t line1Index = i + 1; + // Since line indexes are 1-based, calculate a 1-based value + // for this track to simplify some calculations. + const uint32_t line1Index = i + 1; startOfNextTrack = (i < aTrackInfo->mEndFragmentTrack) ? aTrackInfo->mPositions[i] : @@ -127,7 +129,8 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo, } } - if (i >= aTrackInfo->mRepeatFirstTrack && + if (i >= (aTrackInfo->mRepeatFirstTrack + + aTrackInfo->mNumLeadingImplicitTracks) && repeatIndex < numRepeatTracks) { numAddedLines += AppendRemovedAutoFits(aTrackInfo, aLineInfo, @@ -139,23 +142,30 @@ GridLines::SetLineInfo(const ComputedGridTrackInfo* aTrackInfo, RefPtr<GridLine> line = new GridLine(this); mLines.AppendElement(line); + MOZ_ASSERT(line1Index > 0, "line1Index must be positive."); + bool isBeforeFirstExplicit = + (line1Index <= aTrackInfo->mNumLeadingImplicitTracks); + // Calculate an actionable line number for this line, that could be used + // in a css grid property to align a grid item or area at that line. + // For implicit lines that appear before line 1, report a number of 0. + // We can't report negative indexes, because those have a different + // meaning in the css grid spec (negative indexes are negative-1-based + // from the end of the grid decreasing towards the front). + uint32_t lineNumber = isBeforeFirstExplicit ? 0 : + (line1Index - aTrackInfo->mNumLeadingImplicitTracks + numAddedLines); + GridDeclaration lineType = + (isBeforeFirstExplicit || + line1Index > (aTrackInfo->mNumLeadingImplicitTracks + + aTrackInfo->mNumExplicitTracks + 1)) + ? GridDeclaration::Implicit + : GridDeclaration::Explicit; line->SetLineValues( lineNames, nsPresContext::AppUnitsToDoubleCSSPixels(lastTrackEdge), nsPresContext::AppUnitsToDoubleCSSPixels(startOfNextTrack - lastTrackEdge), - line1Index + numAddedLines, - ( - // Implicit if there are no explicit tracks, or if the index - // is before the first explicit track, or after - // a track beyond the last explicit track. - (aTrackInfo->mNumExplicitTracks == 0) || - (i < aTrackInfo->mNumLeadingImplicitTracks) || - (i > aTrackInfo->mNumLeadingImplicitTracks + - aTrackInfo->mNumExplicitTracks) ? - GridDeclaration::Implicit : - GridDeclaration::Explicit - ) + lineNumber, + lineType ); if (i < aTrackInfo->mEndFragmentTrack) { @@ -215,11 +225,13 @@ GridLines::AppendRemovedAutoFits(const ComputedGridTrackInfo* aTrackInfo, RefPtr<GridLine> line = new GridLine(this); mLines.AppendElement(line); + uint32_t lineNumber = aTrackInfo->mRepeatFirstTrack + + aRepeatIndex + 1; line->SetLineValues( aLineNames, nsPresContext::AppUnitsToDoubleCSSPixels(aLastTrackEdge), nsPresContext::AppUnitsToDoubleCSSPixels(0), - aTrackInfo->mRepeatFirstTrack + aRepeatIndex + 1, + lineNumber, GridDeclaration::Explicit ); diff --git a/dom/grid/test/chrome.ini b/dom/grid/test/chrome.ini index 2241cf9eb..169fa9b89 100644 --- a/dom/grid/test/chrome.ini +++ b/dom/grid/test/chrome.ini @@ -2,6 +2,7 @@ [chrome/test_grid_fragmentation.html] [chrome/test_grid_implicit.html] [chrome/test_grid_lines.html] +[chrome/test_grid_line_numbers.html] [chrome/test_grid_object.html] [chrome/test_grid_repeats.html] [chrome/test_grid_tracks.html] diff --git a/dom/grid/test/chrome/test_grid_implicit.html b/dom/grid/test/chrome/test_grid_implicit.html index c7782e0e5..1f7142658 100644 --- a/dom/grid/test/chrome/test_grid_implicit.html +++ b/dom/grid/test/chrome/test_grid_implicit.html @@ -33,6 +33,11 @@ body { grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start]; } +.template4 { + grid-template-columns: 100px 50px 100px; + grid-template-rows: 50px; +} + .box { background-color: #444; color: #fff; @@ -50,6 +55,9 @@ body { .d { grid-area: areaD; } +.e { + grid-column: -7 / 5; +} </style> <script> @@ -78,9 +86,12 @@ function runTests() { is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit."); is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit."); - is(grid.rows.lines[0].type, "implicit", "Grid row line 1 is implicit."); - is(grid.rows.lines[1].type, "explicit", "Grid row line 2 is explicit."); - is(grid.rows.lines[3].type, "explicit", "Grid row line 4 is explicit."); + is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit."); + is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number."); + is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit."); + is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number."); + is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit."); + is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number."); // test that row line 1 gets the name forced on it by placement of item B todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1, @@ -221,6 +232,48 @@ function runTests() { } } + // test the fourth grid wrapper + wrapper = document.getElementById("wrapper4"); + grid = wrapper.getGridFragments()[0]; + + // test column and row line counts + is(grid.cols.lines.length, 8, + "Grid.cols.lines property expands properly with implicit columns on both sides." + ); + is(grid.rows.lines.length, 2, + "Grid.rows.lines property is as expected" + ); + + if (grid.cols.lines.length == 8) { + // check that all the lines get correct implict/explicit type and number + let expectedType = [ + "implicit", + "implicit", + "implicit", + "explicit", + "explicit", + "explicit", + "explicit", + "implicit", + ]; + let expectedNumber = [ + 0, + 0, + 0, + 1, + 2, + 3, + 4, + 5, + ]; + + for (let i = 0; i < grid.cols.lines.length; i++) { + let line = grid.cols.lines[i]; + is(line.type, expectedType[i], "Line index " + i + " has expected type."); + is(line.number, expectedNumber[i], "Line index " + i + " has expected number."); + } + } + SimpleTest.finish(); } </script> @@ -246,5 +299,9 @@ function runTests() { <div id="boxC" class="box c">C</div> </div> + <div id="wrapper4" class="wrapper template4"> + <div id="boxE" class="box e">E</div> + </div> + </body> </html> diff --git a/dom/grid/test/chrome/test_grid_line_numbers.html b/dom/grid/test/chrome/test_grid_line_numbers.html new file mode 100644 index 000000000..c8e5226b6 --- /dev/null +++ b/dom/grid/test/chrome/test_grid_line_numbers.html @@ -0,0 +1,101 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> +<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> +<style> +body { + margin: 40px; +} +.wrapper { + display: grid; + grid-gap: 0px; + background-color: #f00; +} +.wrapper > div { + background-color: #444; + color: #fff; +} +.repeatColumns { + width: 600px; + grid-auto-columns: 50px; + grid-template-columns: repeat(auto-fit, 100px); +} +.repeatRows { + height: 600px; + grid-auto-rows: 50px; + grid-template-rows: repeat(auto-fit, 100px); +} +</style> + +<script> +'use strict'; + +SimpleTest.waitForExplicitFinish(); + +function testLines(elementName, lines, expectedValues) { + is(lines.count, expectedValues.count, elementName + " has expected number of lines."); + for (let i = 0; i < lines.length; i++) { + is(lines[i].number, expectedValues[i].number, elementName + " line index " + i + " has expected number."); + } +} + +function runTests() { + let grid; + let lines; + let expectedValues; + + grid = document.getElementById("gridWithColumns").getGridFragments()[0]; + lines = grid.cols.lines; + expectedValues = [ + { "number": 0 }, + { "number": 0 }, + { "number": 1 }, + { "number": 2 }, + { "number": 3 }, + { "number": 4 }, + { "number": 5 }, + { "number": 6 }, + { "number": 7 }, + { "number": 8 }, + ]; + testLines("gridWithColumns", lines, expectedValues); + + grid = document.getElementById("gridWithRows").getGridFragments()[0]; + lines = grid.rows.lines; + expectedValues = [ + { "number": 0 }, + { "number": 0 }, + { "number": 1 }, + { "number": 2 }, + { "number": 3 }, + { "number": 4 }, + { "number": 5 }, + { "number": 6 }, + { "number": 7 }, + { "number": 8 }, + ]; + testLines("gridWithRows", lines, expectedValues); + + SimpleTest.finish(); +} +</script> +</head> +<body onLoad="runTests();"> + +<div id="gridWithColumns" class="wrapper repeatColumns"> +<div style="grid-column: -9">A</div> +<div style="grid-column: 4">B</div> +<div style="grid-column: 7">C</div> +</div> + +<div id="gridWithRows" class="wrapper repeatRows"> +<div style="grid-row: span 3 / 2">A</div> +<div style="grid-row: 4">B</div> +<div style="grid-row: 5">C</div> +<div style="grid-row: span 2 / 8">D</div> +</div> + +</body> +</html> diff --git a/layout/base/LayoutConstants.h b/layout/base/LayoutConstants.h new file mode 100644 index 000000000..cd6e1c3f5 --- /dev/null +++ b/layout/base/LayoutConstants.h @@ -0,0 +1,31 @@ +/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ +/* vim: set ts=8 sts=2 et sw=2 tw=80: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* constants used throughout the Layout module */ + +#ifndef LayoutConstants_h___ +#define LayoutConstants_h___ + +#include "nsSize.h" // for NS_MAXSIZE + +/** + * Constant used to indicate an unconstrained size. + */ +#define NS_UNCONSTRAINEDSIZE NS_MAXSIZE + +// NOTE: There are assumptions all over that these have the same value, +// namely NS_UNCONSTRAINEDSIZE. +#define NS_INTRINSICSIZE NS_UNCONSTRAINEDSIZE +#define NS_AUTOHEIGHT NS_UNCONSTRAINEDSIZE +#define NS_AUTOOFFSET NS_UNCONSTRAINEDSIZE + +// +1 is to avoid clamped huge margin values being processed as auto margins +#define NS_AUTOMARGIN (NS_UNCONSTRAINEDSIZE + 1) + +#define NS_INTRINSIC_WIDTH_UNKNOWN nscoord_MIN + + +#endif // LayoutConstants_h___ diff --git a/layout/base/moz.build b/layout/base/moz.build index 4308a6e4d..afc683665 100644 --- a/layout/base/moz.build +++ b/layout/base/moz.build @@ -13,6 +13,9 @@ with Files('Display*'): with Files('FrameLayerBuilder.*'): BUG_COMPONENT = ('Core', 'Layout: View Rendering') +with Files('LayoutConstants.*'): + BUG_COMPONENT = ('Core', 'Layout: View Rendering') + with Files('LayerState.*'): BUG_COMPONENT = ('Core', 'Layout: View Rendering') @@ -63,6 +66,7 @@ EXPORTS += [ 'FrameLayerBuilder.h', 'FrameProperties.h', 'LayerState.h', + 'LayoutConstants.h', 'LayoutLogging.h', 'nsArenaMemoryStats.h', 'nsBidi.h', diff --git a/layout/base/nsLayoutUtils.cpp b/layout/base/nsLayoutUtils.cpp index 06690b208..21d20c69f 100644 --- a/layout/base/nsLayoutUtils.cpp +++ b/layout/base/nsLayoutUtils.cpp @@ -4671,8 +4671,6 @@ GetDefiniteSize(const nsStyleCoord& aStyle, nscoord pb = aIsInlineAxis ? aPercentageBasis.value().ISize(wm) : aPercentageBasis.value().BSize(wm); if (pb == NS_UNCONSTRAINEDSIZE) { - // XXXmats given that we're calculating an intrinsic size here, - // maybe we should back-compute the calc-size using AddPercents? return false; } *aResult = std::max(0, calc->mLength + @@ -4916,12 +4914,9 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext, nscoord result = aContentSize; nscoord min = aContentMinSize; nscoord coordOutsideSize = 0; - float pctOutsideSize = 0; - float pctTotal = 0.0f; if (!(aFlags & nsLayoutUtils::IGNORE_PADDING)) { coordOutsideSize += aOffsets.hPadding; - pctOutsideSize += aOffsets.hPctPadding; } coordOutsideSize += aOffsets.hBorder; @@ -4929,21 +4924,15 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext, if (aBoxSizing == StyleBoxSizing::Border) { min += coordOutsideSize; result = NSCoordSaturatingAdd(result, coordOutsideSize); - pctTotal += pctOutsideSize; coordOutsideSize = 0; - pctOutsideSize = 0.0f; } coordOutsideSize += aOffsets.hMargin; - pctOutsideSize += aOffsets.hPctMargin; min += coordOutsideSize; result = NSCoordSaturatingAdd(result, coordOutsideSize); - pctTotal += pctOutsideSize; - const bool shouldAddPercent = aType == nsLayoutUtils::PREF_ISIZE || - (aFlags & nsLayoutUtils::ADD_PERCENTS); nscoord size; if (aType == nsLayoutUtils::MIN_ISIZE && (((aStyleSize.HasPercent() || aStyleMaxSize.HasPercent()) && @@ -4961,18 +4950,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext, GetIntrinsicCoord(aStyleSize, aRenderingContext, aFrame, PROP_WIDTH, size)) { result = size + coordOutsideSize; - if (shouldAddPercent) { - result = nsLayoutUtils::AddPercents(result, pctOutsideSize); - } - } else { - // NOTE: We could really do a lot better for percents and for some - // cases of calc() containing percent (certainly including any where - // the coefficient on the percent is positive and there are no max() - // expressions). However, doing better for percents wouldn't be - // backwards compatible. - if (shouldAddPercent) { - result = nsLayoutUtils::AddPercents(result, pctTotal); - } } nscoord maxSize = aFixedMaxSize ? *aFixedMaxSize : 0; @@ -4980,9 +4957,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext, GetIntrinsicCoord(aStyleMaxSize, aRenderingContext, aFrame, PROP_MAX_WIDTH, maxSize)) { maxSize += coordOutsideSize; - if (shouldAddPercent) { - maxSize = nsLayoutUtils::AddPercents(maxSize, pctOutsideSize); - } if (result > maxSize) { result = maxSize; } @@ -4993,17 +4967,11 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext, GetIntrinsicCoord(aStyleMinSize, aRenderingContext, aFrame, PROP_MIN_WIDTH, minSize)) { minSize += coordOutsideSize; - if (shouldAddPercent) { - minSize = nsLayoutUtils::AddPercents(minSize, pctOutsideSize); - } if (result < minSize) { result = minSize; } } - if (shouldAddPercent) { - min = nsLayoutUtils::AddPercents(min, pctTotal); - } if (result < min) { result = min; } @@ -5020,9 +4988,6 @@ AddIntrinsicSizeOffset(nsRenderingContext* aRenderingContext, : devSize.width); // GetMinimumWidgetSize() returns a border-box width. themeSize += aOffsets.hMargin; - if (shouldAddPercent) { - themeSize = nsLayoutUtils::AddPercents(themeSize, aOffsets.hPctMargin); - } if (themeSize > result || !canOverride) { result = themeSize; } @@ -5267,9 +5232,19 @@ nsLayoutUtils::IntrinsicForAxis(PhysicalAxis aAxis, min = aFrame->GetMinISize(aRenderingContext); } + nscoord pmPercentageBasis = NS_UNCONSTRAINEDSIZE; + if (aPercentageBasis.isSome()) { + // The padding/margin percentage basis is the inline-size in the parent's + // writing-mode. + auto childWM = aFrame->GetWritingMode(); + pmPercentageBasis = + aFrame->GetParent()->GetWritingMode().IsOrthogonalTo(childWM) ? + aPercentageBasis->BSize(childWM) : + aPercentageBasis->ISize(childWM); + } nsIFrame::IntrinsicISizeOffsetData offsets = - MOZ_LIKELY(isInlineAxis) ? aFrame->IntrinsicISizeOffsets() - : aFrame->IntrinsicBSizeOffsets(); + MOZ_LIKELY(isInlineAxis) ? aFrame->IntrinsicISizeOffsets(pmPercentageBasis) + : aFrame->IntrinsicBSizeOffsets(pmPercentageBasis); nscoord contentBoxSize = result; result = AddIntrinsicSizeOffset(aRenderingContext, aFrame, offsets, aType, boxSizing, result, min, styleISize, @@ -5310,11 +5285,12 @@ nsLayoutUtils::IntrinsicForContainer(nsRenderingContext* aRenderingContext, } /* static */ nscoord -nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis, +nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis, nsRenderingContext* aRC, - nsIFrame* aFrame, - IntrinsicISizeType aType, - uint32_t aFlags) + nsIFrame* aFrame, + IntrinsicISizeType aType, + const LogicalSize& aPercentageBasis, + uint32_t aFlags) { MOZ_ASSERT(aFrame); MOZ_ASSERT(aFrame->IsFlexOrGridItem(), @@ -5328,9 +5304,7 @@ nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis, aWM.IsVertical() ? "vertical" : "horizontal"); #endif - // Note: this method is only meant for grid/flex items which always - // include percentages in their intrinsic size. - aFlags |= nsLayoutUtils::ADD_PERCENTS; + // Note: this method is only meant for grid/flex items. const nsStylePosition* const stylePos = aFrame->StylePosition(); const nsStyleCoord* style = aAxis == eAxisHorizontal ? &stylePos->mMinWidth : &stylePos->mMinHeight; @@ -5375,11 +5349,17 @@ nsLayoutUtils::MinSizeContributionForAxis(PhysicalAxis aAxis, // wrapping inside of it should not apply font size inflation. AutoMaybeDisableFontInflation an(aFrame); - PhysicalAxis ourInlineAxis = - aFrame->GetWritingMode().PhysicalAxis(eLogicalAxisInline); + // The padding/margin percentage basis is the inline-size in the parent's + // writing-mode. + auto childWM = aFrame->GetWritingMode(); + nscoord pmPercentageBasis = + aFrame->GetParent()->GetWritingMode().IsOrthogonalTo(childWM) ? + aPercentageBasis.BSize(childWM) : + aPercentageBasis.ISize(childWM); + PhysicalAxis ourInlineAxis = childWM.PhysicalAxis(eLogicalAxisInline); nsIFrame::IntrinsicISizeOffsetData offsets = - ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets() - : aFrame->IntrinsicBSizeOffsets(); + ourInlineAxis == aAxis ? aFrame->IntrinsicISizeOffsets(pmPercentageBasis) + : aFrame->IntrinsicBSizeOffsets(pmPercentageBasis); nscoord result = 0; nscoord min = 0; diff --git a/layout/base/nsLayoutUtils.h b/layout/base/nsLayoutUtils.h index 0a82dbf6a..bba1f3265 100644 --- a/layout/base/nsLayoutUtils.h +++ b/layout/base/nsLayoutUtils.h @@ -6,6 +6,7 @@ #ifndef nsLayoutUtils_h__ #define nsLayoutUtils_h__ +#include "LayoutConstants.h" #include "mozilla/MemoryReporting.h" #include "mozilla/ArrayUtils.h" #include "mozilla/Maybe.h" @@ -154,6 +155,7 @@ public: typedef mozilla::ScreenMargin ScreenMargin; typedef mozilla::LayoutDeviceIntSize LayoutDeviceIntSize; typedef mozilla::StyleGeometryBox StyleGeometryBox; + typedef mozilla::LogicalSize LogicalSize; /** * Finds previously assigned ViewID for the given content element, if any. @@ -1381,7 +1383,8 @@ public: * variations if that's what matches aAxis) and its padding, border and margin * in the corresponding dimension. * @param aPercentageBasis an optional percentage basis (in aFrame's WM). - * Pass NS_UNCONSTRAINEDSIZE if the basis is indefinite in either/both axes. + * If the basis is indefinite in a given axis, pass a size with + * NS_UNCONSTRAINEDSIZE in that component. * If you pass Nothing() a percentage basis will be calculated from aFrame's * ancestors' computed size in the relevant axis, if needed. * @param aMarginBoxMinSizeClamp make the result fit within this margin-box @@ -1395,14 +1398,13 @@ public: IGNORE_PADDING = 0x01, BAIL_IF_REFLOW_NEEDED = 0x02, // returns NS_INTRINSIC_WIDTH_UNKNOWN if so MIN_INTRINSIC_ISIZE = 0x04, // use min-width/height instead of width/height - ADD_PERCENTS = 0x08, // apply AddPercents also for MIN_ISIZE }; static nscoord IntrinsicForAxis(mozilla::PhysicalAxis aAxis, nsRenderingContext* aRenderingContext, nsIFrame* aFrame, IntrinsicISizeType aType, - const mozilla::Maybe<mozilla::LogicalSize>& aPercentageBasis = mozilla::Nothing(), + const mozilla::Maybe<LogicalSize>& aPercentageBasis = mozilla::Nothing(), uint32_t aFlags = 0, nscoord aMarginBoxMinSizeClamp = NS_MAXSIZE); /** @@ -1427,31 +1429,18 @@ public: * calculates the result as if the 'min-' computed value is zero. * Otherwise, return NS_UNCONSTRAINEDSIZE. * + * @param aPercentageBasis the percentage basis (in aFrame's WM). + * Pass NS_UNCONSTRAINEDSIZE if the basis is indefinite in either/both axes. * @note this behavior is specific to Grid/Flexbox (currently) so aFrame * should be a grid/flex item. */ - static nscoord MinSizeContributionForAxis(mozilla::PhysicalAxis aAxis, - nsRenderingContext* aRC, - nsIFrame* aFrame, - IntrinsicISizeType aType, - uint32_t aFlags = 0); - - /** - * This function increases an initial intrinsic size, 'aCurrent', according - * to the given 'aPercent', such that the size-increase makes up exactly - * 'aPercent' percent of the returned value. If 'aPercent' or 'aCurrent' are - * less than or equal to zero the original 'aCurrent' value is returned. - * If 'aPercent' is greater than or equal to 1.0 the value nscoord_MAX is - * returned. - */ - static nscoord AddPercents(nscoord aCurrent, float aPercent) - { - if (aPercent > 0.0f && aCurrent > 0) { - return MOZ_UNLIKELY(aPercent >= 1.0f) ? nscoord_MAX - : NSToCoordRound(float(aCurrent) / (1.0f - aPercent)); - } - return aCurrent; - } + static nscoord + MinSizeContributionForAxis(mozilla::PhysicalAxis aAxis, + nsRenderingContext* aRC, + nsIFrame* aFrame, + IntrinsicISizeType aType, + const LogicalSize& aPercentageBasis, + uint32_t aFlags = 0); /* * Convert nsStyleCoord to nscoord when percentages depend on the @@ -2876,6 +2865,62 @@ public: static nsRect ComputeGeometryBox(nsIFrame* aFrame, StyleGeometryBox aGeometryBox); + /** + * Resolve a CSS <length-percentage> value to a definite size. + */ + template<bool clampNegativeResultToZero> + static nscoord ResolveToLength(const nsStyleCoord& aCoord, + nscoord aPercentageBasis) + { + NS_WARNING_ASSERTION(aPercentageBasis >= nscoord(0), "nscoord overflow?"); + + switch (aCoord.GetUnit()) { + case eStyleUnit_Coord: + MOZ_ASSERT(!clampNegativeResultToZero || aCoord.GetCoordValue() >= 0, + "This value should have been rejected by the style system"); + return aCoord.GetCoordValue(); + case eStyleUnit_Percent: + if (aPercentageBasis == NS_UNCONSTRAINEDSIZE) { + return nscoord(0); + } + MOZ_ASSERT(!clampNegativeResultToZero || aCoord.GetPercentValue() >= 0, + "This value should have been rejected by the style system"); + return NSToCoordFloorClamped(aPercentageBasis * + aCoord.GetPercentValue()); + case eStyleUnit_Calc: { + nsStyleCoord::Calc* calc = aCoord.GetCalcValue(); + nscoord result; + if (aPercentageBasis == NS_UNCONSTRAINEDSIZE) { + result = calc->mLength; + } else { + result = calc->mLength + + NSToCoordFloorClamped(aPercentageBasis * calc->mPercent); + } + if (clampNegativeResultToZero && result < 0) { + return nscoord(0); + } + return result; + } + default: + MOZ_ASSERT_UNREACHABLE("Unexpected unit!"); + return nscoord(0); + } + } + + /** + * Resolve a column-gap/row-gap to a definite size. + * @note This method resolves 'normal' to zero. + * Callers who want different behavior should handle 'normal' on their own. + */ + static nscoord ResolveGapToLength(const nsStyleCoord& aGap, + nscoord aPercentageBasis) + { + if (aGap.GetUnit() == eStyleUnit_Normal) { + return nscoord(0); + } + return ResolveToLength<true>(aGap, aPercentageBasis); + } + private: static uint32_t sFontSizeInflationEmPerLine; static uint32_t sFontSizeInflationMinTwips; diff --git a/layout/generic/nsColumnSetFrame.cpp b/layout/generic/nsColumnSetFrame.cpp index ad36ba1a8..6ea15d4d2 100644 --- a/layout/generic/nsColumnSetFrame.cpp +++ b/layout/generic/nsColumnSetFrame.cpp @@ -183,18 +183,15 @@ nsColumnSetFrame::GetAvailableContentBSize(const ReflowInput& aReflowInput) static nscoord GetColumnGap(nsColumnSetFrame* aFrame, - const nsStyleColumn* aColStyle) + const nsStyleColumn* aColStyle, + nscoord aPercentageBasis) { - if (eStyleUnit_Normal == aColStyle->mColumnGap.GetUnit()) + const auto& columnGap = aColStyle->mColumnGap; + if (columnGap.GetUnit() == eStyleUnit_Normal) { return aFrame->StyleFont()->mFont.size; - if (eStyleUnit_Coord == aColStyle->mColumnGap.GetUnit()) { - nscoord colGap = aColStyle->mColumnGap.GetCoordValue(); - NS_ASSERTION(colGap >= 0, "negative column gap"); - return colGap; } - NS_NOTREACHED("Unknown gap type"); - return 0; + return nsLayoutUtils::ResolveGapToLength(columnGap, aPercentageBasis); } nsColumnSetFrame::ReflowConfig @@ -227,7 +224,7 @@ nsColumnSetFrame::ChooseColumnStrategy(const ReflowInput& aReflowInput, colBSize = std::min(colBSize, aReflowInput.ComputedMaxBSize()); } - nscoord colGap = GetColumnGap(this, colStyle); + nscoord colGap = GetColumnGap(this, colStyle, aReflowInput.ComputedISize()); int32_t numColumns = colStyle->mColumnCount; // If column-fill is set to 'balance', then we want to balance the columns. @@ -403,7 +400,7 @@ nsColumnSetFrame::GetMinISize(nsRenderingContext *aRenderingContext) // include n-1 column gaps. colISize = iSize; iSize *= colStyle->mColumnCount; - nscoord colGap = GetColumnGap(this, colStyle); + nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE); iSize += colGap * (colStyle->mColumnCount - 1); // The multiplication above can make 'width' negative (integer overflow), // so use std::max to protect against that. @@ -424,7 +421,7 @@ nsColumnSetFrame::GetPrefISize(nsRenderingContext *aRenderingContext) nscoord result = 0; DISPLAY_PREF_WIDTH(this, result); const nsStyleColumn* colStyle = StyleColumn(); - nscoord colGap = GetColumnGap(this, colStyle); + nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE); nscoord colISize; if (colStyle->mColumnWidth.GetUnit() == eStyleUnit_Coord) { diff --git a/layout/generic/nsFrame.cpp b/layout/generic/nsFrame.cpp index bd96f213b..a531dea07 100644 --- a/layout/generic/nsFrame.cpp +++ b/layout/generic/nsFrame.cpp @@ -4515,68 +4515,44 @@ nsIFrame::InlinePrefISizeData::ForceBreak() mSkipWhitespace = true; } -static void -AddCoord(const nsStyleCoord& aStyle, - nsIFrame* aFrame, - nscoord* aCoord, float* aPercent, - bool aClampNegativeToZero) -{ - switch (aStyle.GetUnit()) { - case eStyleUnit_Coord: { - NS_ASSERTION(!aClampNegativeToZero || aStyle.GetCoordValue() >= 0, - "unexpected negative value"); - *aCoord += aStyle.GetCoordValue(); - return; - } - case eStyleUnit_Percent: { - NS_ASSERTION(!aClampNegativeToZero || aStyle.GetPercentValue() >= 0.0f, - "unexpected negative value"); - *aPercent += aStyle.GetPercentValue(); - return; - } - case eStyleUnit_Calc: { - const nsStyleCoord::Calc *calc = aStyle.GetCalcValue(); - if (aClampNegativeToZero) { - // This is far from ideal when one is negative and one is positive. - *aCoord += std::max(calc->mLength, 0); - *aPercent += std::max(calc->mPercent, 0.0f); - } else { - *aCoord += calc->mLength; - *aPercent += calc->mPercent; - } - return; - } - default: { - return; - } +static nscoord +ResolveMargin(const nsStyleCoord& aStyle, nscoord aPercentageBasis) +{ + if (aStyle.GetUnit() == eStyleUnit_Auto) { + return nscoord(0); } + return nsLayoutUtils::ResolveToLength<false>(aStyle, aPercentageBasis); +} + +static nscoord +ResolvePadding(const nsStyleCoord& aStyle, nscoord aPercentageBasis) +{ + return nsLayoutUtils::ResolveToLength<true>(aStyle, aPercentageBasis); } static nsIFrame::IntrinsicISizeOffsetData -IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize) +IntrinsicSizeOffsets(nsIFrame* aFrame, nscoord aPercentageBasis, bool aForISize) { nsIFrame::IntrinsicISizeOffsetData result; WritingMode wm = aFrame->GetWritingMode(); - const nsStyleMargin* styleMargin = aFrame->StyleMargin(); + const auto& margin = aFrame->StyleMargin()->mMargin; bool verticalAxis = aForISize == wm.IsVertical(); - AddCoord(verticalAxis ? styleMargin->mMargin.GetTop() - : styleMargin->mMargin.GetLeft(), - aFrame, &result.hMargin, &result.hPctMargin, - false); - AddCoord(verticalAxis ? styleMargin->mMargin.GetBottom() - : styleMargin->mMargin.GetRight(), - aFrame, &result.hMargin, &result.hPctMargin, - false); - - const nsStylePadding* stylePadding = aFrame->StylePadding(); - AddCoord(verticalAxis ? stylePadding->mPadding.GetTop() - : stylePadding->mPadding.GetLeft(), - aFrame, &result.hPadding, &result.hPctPadding, - true); - AddCoord(verticalAxis ? stylePadding->mPadding.GetBottom() - : stylePadding->mPadding.GetRight(), - aFrame, &result.hPadding, &result.hPctPadding, - true); + if (verticalAxis) { + result.hMargin += ResolveMargin(margin.GetTop(), aPercentageBasis); + result.hMargin += ResolveMargin(margin.GetBottom(), aPercentageBasis); + } else { + result.hMargin += ResolveMargin(margin.GetLeft(), aPercentageBasis); + result.hMargin += ResolveMargin(margin.GetRight(), aPercentageBasis); + } + + const auto& padding = aFrame->StylePadding()->mPadding; + if (verticalAxis) { + result.hPadding += ResolvePadding(padding.GetTop(), aPercentageBasis); + result.hPadding += ResolvePadding(padding.GetBottom(), aPercentageBasis); + } else { + result.hPadding += ResolvePadding(padding.GetLeft(), aPercentageBasis); + result.hPadding += ResolvePadding(padding.GetRight(), aPercentageBasis); + } const nsStyleBorder* styleBorder = aFrame->StyleBorder(); if (verticalAxis) { @@ -4606,22 +4582,21 @@ IntrinsicSizeOffsets(nsIFrame* aFrame, bool aForISize) result.hPadding = presContext->DevPixelsToAppUnits(verticalAxis ? padding.TopBottom() : padding.LeftRight()); - result.hPctPadding = 0; } } return result; } /* virtual */ nsIFrame::IntrinsicISizeOffsetData -nsFrame::IntrinsicISizeOffsets() +nsFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis) { - return IntrinsicSizeOffsets(this, true); + return IntrinsicSizeOffsets(this, aPercentageBasis, true); } nsIFrame::IntrinsicISizeOffsetData -nsIFrame::IntrinsicBSizeOffsets() +nsIFrame::IntrinsicBSizeOffsets(nscoord aPercentageBasis) { - return IntrinsicSizeOffsets(this, false); + return IntrinsicSizeOffsets(this, aPercentageBasis, false); } /* virtual */ IntrinsicSize diff --git a/layout/generic/nsFrame.h b/layout/generic/nsFrame.h index af1c95ef2..439e39856 100644 --- a/layout/generic/nsFrame.h +++ b/layout/generic/nsFrame.h @@ -261,7 +261,8 @@ public: InlineMinISizeData *aData) override; virtual void AddInlinePrefISize(nsRenderingContext *aRenderingContext, InlinePrefISizeData *aData) override; - virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override; + IntrinsicISizeOffsetData + IntrinsicISizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE) override; virtual mozilla::IntrinsicSize GetIntrinsicSize() override; virtual nsSize GetIntrinsicRatio() override; diff --git a/layout/generic/nsGridContainerFrame.cpp b/layout/generic/nsGridContainerFrame.cpp index 3a2d5ad1d..959061e33 100644 --- a/layout/generic/nsGridContainerFrame.cpp +++ b/layout/generic/nsGridContainerFrame.cpp @@ -8,8 +8,8 @@ #include "nsGridContainerFrame.h" -#include <algorithm> // for std::stable_sort #include <limits> +#include <stdlib.h> // for div() #include "mozilla/CSSAlignUtils.h" #include "mozilla/dom/GridBinding.h" #include "mozilla/Function.h" @@ -127,43 +127,6 @@ ResolveToDefiniteSize(const nsStyleCoord& aCoord, nscoord aPercentBasis) nsRuleNode::ComputeCoordPercentCalc(aCoord, aPercentBasis)); } -static bool -GetPercentSizeParts(const nsStyleCoord& aCoord, nscoord* aLength, float* aPercent) -{ - switch (aCoord.GetUnit()) { - case eStyleUnit_Percent: - *aLength = 0; - *aPercent = aCoord.GetPercentValue(); - return true; - case eStyleUnit_Calc: { - nsStyleCoord::Calc* calc = aCoord.GetCalcValue(); - *aLength = calc->mLength; - *aPercent = calc->mPercent; - return true; - } - default: - return false; - } -} - -static void -ResolvePercentSizeParts(const nsStyleCoord& aCoord, nscoord aPercentBasis, - nscoord* aLength, float* aPercent) -{ - MOZ_ASSERT(aCoord.IsCoordPercentCalcUnit()); - if (aPercentBasis != NS_UNCONSTRAINEDSIZE) { - *aLength = std::max(nscoord(0), - nsRuleNode::ComputeCoordPercentCalc(aCoord, - aPercentBasis)); - *aPercent = 0.0f; - return; - } - if (!GetPercentSizeParts(aCoord, aLength, aPercent)) { - *aLength = aCoord.ToLength(); - *aPercent = 0.0f; - } -} - // Synthesize a baseline from a border box. For an alphabetical baseline // this is the end edge of the border box. For a central baseline it's // the center of the border box. @@ -198,7 +161,7 @@ struct nsGridContainerFrame::TrackSize eMaxContentMinSizing = 0x4, eMinOrMaxContentMinSizing = eMinContentMinSizing | eMaxContentMinSizing, eIntrinsicMinSizing = eMinOrMaxContentMinSizing | eAutoMinSizing, - // 0x8 is unused, feel free to take it! + eModified = 0x8, eAutoMaxSizing = 0x10, eMinContentMaxSizing = 0x20, eMaxContentMaxSizing = 0x40, @@ -211,6 +174,7 @@ struct nsGridContainerFrame::TrackSize eSkipGrowUnlimited = eSkipGrowUnlimited1 | eSkipGrowUnlimited2, eBreakBefore = 0x800, eFitContent = 0x1000, + eInfinitelyGrowable = 0x2000, }; StateBits Initialize(nscoord aPercentageBasis, @@ -724,9 +688,6 @@ struct nsGridContainerFrame::LineRange mEnd > mStart, "invalid line range"); mEnd -= aNumRemovedTracks[mEnd]; } - if (mStart == mEnd) { - mEnd = nsGridContainerFrame::kAutoLine; - } } /** * Return the contribution of this line range for step 2 in @@ -856,6 +817,8 @@ struct nsGridContainerFrame::GridItemInfo // Return true if we should apply Automatic Minimum Size to this item. // https://drafts.csswg.org/css-grid/#min-size-auto + // @note the caller should also check that the item spans at least one track + // that has a min track sizing function that is 'auto' before applying it. bool ShouldApplyAutoMinSize(WritingMode aContainerWM, LogicalAxis aContainerAxis, nscoord aPercentageBasis) const @@ -915,6 +878,12 @@ nsGridContainerFrame::GridItemInfo::Dump() const if (state & ItemState::eIsFlexing) { printf("flexing "); } + if (state & ItemState::eApplyAutoMinSize) { + printf("auto-min-size "); + } + if (state & ItemState::eClampMarginBoxMinSize) { + printf("clamp "); + } if (state & ItemState::eFirstBaseline) { printf("first baseline %s-alignment ", (state & ItemState::eSelfBaseline) ? "self" : "content"); @@ -1091,6 +1060,7 @@ private: const nsTArray<nsString>& mRepeatAutoLineNameListBefore; const nsTArray<nsString>& mRepeatAutoLineNameListAfter; // The index of the repeat(auto-fill/fit) track, or zero if there is none. + // Relative to mExplicitGridOffset (repeat tracks are explicit by definition). const uint32_t mRepeatAutoStart; // The (hypothetical) index of the last such repeat() track. const uint32_t mRepeatAutoEnd; @@ -1101,6 +1071,7 @@ private: // generates one track (making mRepeatEndDelta == 0). const uint32_t mTemplateLinesEnd; // True if there is a specified repeat(auto-fill/fit) track. + // Indexed relative to mExplicitGridOffset + mRepeatAutoStart. const bool mHasRepeatAuto; }; @@ -1164,7 +1135,7 @@ struct nsGridContainerFrame::TrackSizingFunctions return 1; } nscoord repeatTrackSize = 0; - // Note that the repeat() track size is included in |sum| in this loop. + // Note that one repeat() track size is included in |sum| in this loop. nscoord sum = 0; const nscoord percentBasis = aSize; for (uint32_t i = 0; i < numTracks; ++i) { @@ -1181,54 +1152,31 @@ struct nsGridContainerFrame::TrackSizingFunctions } nscoord trackSize = ::ResolveToDefiniteSize(*coord, percentBasis); if (i == mRepeatAutoStart) { - if (percentBasis != NS_UNCONSTRAINEDSIZE) { - // Use a minimum 1px for the repeat() track-size. - if (trackSize < AppUnitsPerCSSPixel()) { - trackSize = AppUnitsPerCSSPixel(); - } + // Use a minimum 1px for the repeat() track-size. + if (trackSize < AppUnitsPerCSSPixel()) { + trackSize = AppUnitsPerCSSPixel(); } repeatTrackSize = trackSize; } sum += trackSize; } - nscoord gridGap; - float percentSum = 0.0f; - float gridGapPercent; - ResolvePercentSizeParts(aGridGap, percentBasis, &gridGap, &gridGapPercent); + nscoord gridGap = nsLayoutUtils::ResolveGapToLength(aGridGap, aSize); if (numTracks > 1) { // Add grid-gaps for all the tracks including the repeat() track. sum += gridGap * (numTracks - 1); - percentSum = gridGapPercent * (numTracks - 1); } // Calculate the max number of tracks that fits without overflow. nscoord available = maxFill != NS_UNCONSTRAINEDSIZE ? maxFill : aMinSize; - nscoord size = nsLayoutUtils::AddPercents(sum, percentSum); - if (available - size < 0) { + nscoord spaceToFill = available - sum; + if (spaceToFill <= 0) { // "if any number of repetitions would overflow, then 1 repetition" return 1; } - uint32_t numRepeatTracks = 1; - bool exactFit = false; - while (true) { - sum += gridGap + repeatTrackSize; - percentSum += gridGapPercent; - nscoord newSize = nsLayoutUtils::AddPercents(sum, percentSum); - if (newSize <= size) { - // Adding more repeat-tracks won't make forward progress. - return numRepeatTracks; - } - size = newSize; - nscoord remaining = available - size; - exactFit = remaining == 0; - if (remaining >= 0) { - ++numRepeatTracks; - } - if (remaining <= 0) { - break; - } - } - - if (!exactFit && maxFill == NS_UNCONSTRAINEDSIZE) { + // Calculate the max number of tracks that fits without overflow. + div_t q = div(spaceToFill, repeatTrackSize + gridGap); + // The +1 here is for the one repeat track we already accounted for above. + uint32_t numRepeatTracks = q.quot + 1; + if (q.rem != 0 && maxFill == NS_UNCONSTRAINEDSIZE) { // "Otherwise, if the grid container has a definite min size in // the relevant axis, the number of repetitions is the largest possible // positive integer that fulfills that minimum requirement." @@ -1340,15 +1288,9 @@ struct nsGridContainerFrame::Tracks nscoord aContentBoxSize); /** - * Return true if aRange spans at least one track with an intrinsic sizing - * function and does not span any tracks with a <flex> max-sizing function. - * @param aRange the span of tracks to check - * @param aState will be set to the union of the state bits of all the spanned - * tracks, unless a flex track is found - then it only contains - * the union of the tracks up to and including the flex track. + * Return the union of the state bits for the tracks in aRange. */ - bool HasIntrinsicButNoFlexSizingInRange(const LineRange& aRange, - TrackSize::StateBits* aState) const; + TrackSize::StateBits StateBitsForRange(const LineRange& aRange) const; // Some data we collect for aligning baseline-aligned items. struct ItemBaselineData @@ -1383,6 +1325,62 @@ struct nsGridContainerFrame::Tracks */ void AlignBaselineSubtree(const GridItemInfo& aGridItem) const; + enum class TrackSizingPhase + { + eIntrinsicMinimums, + eContentBasedMinimums, + eMaxContentMinimums, + eIntrinsicMaximums, + eMaxContentMaximums, + }; + + // Some data we collect on each item for Step 2 of the Track Sizing Algorithm + // in ResolveIntrinsicSize below. + struct Step2ItemData final + { + uint32_t mSpan; + TrackSize::StateBits mState; + LineRange mLineRange; + nscoord mMinSize; + nscoord mMinContentContribution; + nscoord mMaxContentContribution; + nsIFrame* mFrame; + static bool IsSpanLessThan(const Step2ItemData& a, const Step2ItemData& b) + { + return a.mSpan < b.mSpan; + } + + template<TrackSizingPhase phase> + nscoord SizeContributionForPhase() const + { + switch (phase) { + case TrackSizingPhase::eIntrinsicMinimums: + case TrackSizingPhase::eIntrinsicMaximums: + return mMinSize; + case TrackSizingPhase::eContentBasedMinimums: + return mMinContentContribution; + case TrackSizingPhase::eMaxContentMinimums: + case TrackSizingPhase::eMaxContentMaximums: + return mMaxContentContribution; + } + MOZ_MAKE_COMPILER_ASSUME_IS_UNREACHABLE("Unexpected phase"); + } + }; + + using FitContentClamper = + function<bool(uint32_t aTrack, nscoord aMinSize, nscoord* aSize)>; + + // Helper method for ResolveIntrinsicSize. + template<TrackSizingPhase phase> + bool GrowSizeForSpanningItems(nsTArray<Step2ItemData>::iterator aIter, + const nsTArray<Step2ItemData>::iterator aEnd, + nsTArray<uint32_t>& aTracks, + nsTArray<TrackSize>& aPlan, + nsTArray<TrackSize>& aItemPlan, + TrackSize::StateBits aSelector, + const FitContentClamper& aClamper = nullptr, + bool aNeedInfinitelyGrowableFlag = false); + /** * Resolve Intrinsic Track Sizes. * http://dev.w3.org/csswg/css-grid/#algo-content @@ -1405,66 +1403,117 @@ struct nsGridContainerFrame::Tracks SizingConstraint aConstraint, const LineRange& aRange, const GridItemInfo& aGridItem); + + // Helper method that returns the track size to use in §11.5.1.2 + // https://drafts.csswg.org/css-grid/#extra-space + template<TrackSizingPhase phase> static + nscoord StartSizeInDistribution(const TrackSize& aSize) + { + switch (phase) { + case TrackSizingPhase::eIntrinsicMinimums: + case TrackSizingPhase::eContentBasedMinimums: + case TrackSizingPhase::eMaxContentMinimums: + return aSize.mBase; + case TrackSizingPhase::eIntrinsicMaximums: + case TrackSizingPhase::eMaxContentMaximums: + if (aSize.mLimit == NS_UNCONSTRAINEDSIZE) { + return aSize.mBase; + } + return aSize.mLimit; + } + MOZ_MAKE_COMPILER_ASSUME_IS_UNREACHABLE("Unexpected phase"); + } + /** * Collect the tracks which are growable (matching aSelector) into * aGrowableTracks, and return the amount of space that can be used - * to grow those tracks. Specifically, we return aAvailableSpace minus - * the sum of mBase's (and corresponding grid gaps) in aPlan (clamped to 0) - * for the tracks in aRange, or zero when there are no growable tracks. - * @note aPlan[*].mBase represents a planned new base or limit. + * to grow those tracks. This method implements CSS Grid §11.5.1.2. + * https://drafts.csswg.org/css-grid/#extra-space */ - nscoord CollectGrowable(nscoord aAvailableSpace, - const nsTArray<TrackSize>& aPlan, - const LineRange& aRange, - TrackSize::StateBits aSelector, - nsTArray<uint32_t>& aGrowableTracks) const + template<TrackSizingPhase phase> + nscoord CollectGrowable(nscoord aAvailableSpace, + const LineRange& aRange, + TrackSize::StateBits aSelector, + nsTArray<uint32_t>& aGrowableTracks) const { MOZ_ASSERT(aAvailableSpace > 0, "why call me?"); nscoord space = aAvailableSpace - mGridGap * (aRange.Extent() - 1); const uint32_t start = aRange.mStart; const uint32_t end = aRange.mEnd; for (uint32_t i = start; i < end; ++i) { - const TrackSize& sz = aPlan[i]; - space -= sz.mBase; + const TrackSize& sz = mSizes[i]; + space -= StartSizeInDistribution<phase>(sz); if (space <= 0) { return 0; } - if ((sz.mState & aSelector) && !sz.IsFrozen()) { + if (sz.mState & aSelector) { aGrowableTracks.AppendElement(i); } } return aGrowableTracks.IsEmpty() ? 0 : space; } - void SetupGrowthPlan(nsTArray<TrackSize>& aPlan, - const nsTArray<uint32_t>& aTracks) const + template<TrackSizingPhase phase> + void InitializeItemPlan(nsTArray<TrackSize>& aItemPlan, + const nsTArray<uint32_t>& aTracks) const { for (uint32_t track : aTracks) { - aPlan[track] = mSizes[track]; + auto& plan = aItemPlan[track]; + const TrackSize& sz = mSizes[track]; + plan.mBase = StartSizeInDistribution<phase>(sz); + bool unlimited = sz.mState & TrackSize::eInfinitelyGrowable; + plan.mLimit = unlimited ? NS_UNCONSTRAINEDSIZE : sz.mLimit; + plan.mState = sz.mState; } } - void CopyPlanToBase(const nsTArray<TrackSize>& aPlan, - const nsTArray<uint32_t>& aTracks) + template<TrackSizingPhase phase> + void InitializePlan(nsTArray<TrackSize>& aPlan) const { - for (uint32_t track : aTracks) { - MOZ_ASSERT(mSizes[track].mBase <= aPlan[track].mBase); - mSizes[track].mBase = aPlan[track].mBase; + for (size_t i = 0, len = aPlan.Length(); i < len; ++i) { + auto& plan = aPlan[i]; + const auto& sz = mSizes[i]; + plan.mBase = StartSizeInDistribution<phase>(sz); + MOZ_ASSERT(phase == TrackSizingPhase::eMaxContentMaximums || + !(sz.mState & TrackSize::eInfinitelyGrowable), + "forgot to reset the eInfinitelyGrowable bit?"); + plan.mState = sz.mState; } } - void CopyPlanToLimit(const nsTArray<TrackSize>& aPlan, - const nsTArray<uint32_t>& aTracks) + template<TrackSizingPhase phase> + void CopyPlanToSize(const nsTArray<TrackSize>& aPlan, + bool aNeedInfinitelyGrowableFlag = false) { - for (uint32_t track : aTracks) { - MOZ_ASSERT(mSizes[track].mLimit == NS_UNCONSTRAINEDSIZE || - mSizes[track].mLimit <= aPlan[track].mBase); - mSizes[track].mLimit = aPlan[track].mBase; + for (size_t i = 0, len = mSizes.Length(); i < len; ++i) { + const auto& plan = aPlan[i]; + MOZ_ASSERT(plan.mBase >= 0); + auto& sz = mSizes[i]; + switch (phase) { + case TrackSizingPhase::eIntrinsicMinimums: + case TrackSizingPhase::eContentBasedMinimums: + case TrackSizingPhase::eMaxContentMinimums: + sz.mBase = plan.mBase; + break; + case TrackSizingPhase::eIntrinsicMaximums: + if (plan.mState & TrackSize::eModified) { + if (sz.mLimit == NS_UNCONSTRAINEDSIZE && + aNeedInfinitelyGrowableFlag) { + sz.mState |= TrackSize::eInfinitelyGrowable; + } + sz.mLimit = plan.mBase; + } + break; + case TrackSizingPhase::eMaxContentMaximums: + if (plan.mState & TrackSize::eModified) { + sz.mLimit = plan.mBase; + } + sz.mState &= ~TrackSize::eInfinitelyGrowable; + break; + } } } - using FitContentClamper = - function<bool(uint32_t aTrack, nscoord aMinSize, nscoord* aSize)>; /** * Grow the planned size for tracks in aGrowableTracks up to their limit * and then freeze them (all aGrowableTracks must be unfrozen on entry). @@ -1524,12 +1573,13 @@ struct nsGridContainerFrame::Tracks * assumed that aPlan have no aSkipFlag set for tracks in aGrowableTracks * on entry to this method. */ - uint32_t MarkExcludedTracks(nsTArray<TrackSize>& aPlan, - uint32_t aNumGrowable, - const nsTArray<uint32_t>& aGrowableTracks, - TrackSize::StateBits aMinSizingSelector, - TrackSize::StateBits aMaxSizingSelector, - TrackSize::StateBits aSkipFlag) const + static uint32_t + MarkExcludedTracks(nsTArray<TrackSize>& aPlan, + uint32_t aNumGrowable, + const nsTArray<uint32_t>& aGrowableTracks, + TrackSize::StateBits aMinSizingSelector, + TrackSize::StateBits aMaxSizingSelector, + TrackSize::StateBits aSkipFlag) { bool foundOneSelected = false; bool foundOneGrowable = false; @@ -1559,41 +1609,60 @@ struct nsGridContainerFrame::Tracks } /** - * Increase the planned size for tracks in aGrowableTracks that match - * aSelector (or all tracks if aSelector is zero) beyond their limit. + * Mark all tracks in aGrowableTracks with an eSkipGrowUnlimited bit if + * they *shouldn't* grow unlimited in §11.5.1.2.3 "Distribute space beyond + * growth limits" https://drafts.csswg.org/css-grid/#extra-space + * Return the number of tracks that are still growable. + */ + template<TrackSizingPhase phase> + static uint32_t + MarkExcludedTracks(nsTArray<TrackSize>& aPlan, + const nsTArray<uint32_t>& aGrowableTracks, + TrackSize::StateBits aSelector) + { + uint32_t numGrowable = aGrowableTracks.Length(); + if (phase == TrackSizingPhase::eIntrinsicMaximums || + phase == TrackSizingPhase::eMaxContentMaximums) { + // "when handling any intrinsic growth limit: all affected tracks" + return numGrowable; + } + MOZ_ASSERT(aSelector == (aSelector & TrackSize::eIntrinsicMinSizing) && + (aSelector & TrackSize::eMaxContentMinSizing), + "Should only get here for track sizing steps 2.1 to 2.3"); + // Note that eMaxContentMinSizing is always included. We do those first: + numGrowable = MarkExcludedTracks(aPlan, numGrowable, aGrowableTracks, + TrackSize::eMaxContentMinSizing, + TrackSize::eMaxContentMaxSizing, + TrackSize::eSkipGrowUnlimited1); + // Now mark min-content/auto min-sizing tracks if requested. + auto minOrAutoSelector = aSelector & ~TrackSize::eMaxContentMinSizing; + if (minOrAutoSelector) { + numGrowable = MarkExcludedTracks(aPlan, numGrowable, aGrowableTracks, + minOrAutoSelector, + TrackSize::eIntrinsicMaxSizing, + TrackSize::eSkipGrowUnlimited2); + } + return numGrowable; + } + + /** + * Increase the planned size for tracks in aGrowableTracks that aren't + * marked with a eSkipGrowUnlimited flag beyond their limit. * This implements the "Distribute space beyond growth limits" step in * https://drafts.csswg.org/css-grid/#distribute-extra-space */ void GrowSelectedTracksUnlimited(nscoord aAvailableSpace, nsTArray<TrackSize>& aPlan, const nsTArray<uint32_t>& aGrowableTracks, - TrackSize::StateBits aSelector, + uint32_t aNumGrowable, FitContentClamper aFitContentClamper) const { - MOZ_ASSERT(aAvailableSpace > 0 && aGrowableTracks.Length() > 0); - uint32_t numGrowable = aGrowableTracks.Length(); - if (aSelector) { - MOZ_ASSERT(aSelector == (aSelector & TrackSize::eIntrinsicMinSizing) && - (aSelector & TrackSize::eMaxContentMinSizing), - "Should only get here for track sizing steps 2.1 to 2.3"); - // Note that eMaxContentMinSizing is always included. We do those first: - numGrowable = MarkExcludedTracks(aPlan, numGrowable, aGrowableTracks, - TrackSize::eMaxContentMinSizing, - TrackSize::eMaxContentMaxSizing, - TrackSize::eSkipGrowUnlimited1); - // Now mark min-content/auto min-sizing tracks if requested. - auto minOrAutoSelector = aSelector & ~TrackSize::eMaxContentMinSizing; - if (minOrAutoSelector) { - numGrowable = MarkExcludedTracks(aPlan, numGrowable, aGrowableTracks, - minOrAutoSelector, - TrackSize::eIntrinsicMaxSizing, - TrackSize::eSkipGrowUnlimited2); - } - } + MOZ_ASSERT(aAvailableSpace > 0 && aGrowableTracks.Length() > 0 && + aNumGrowable <= aGrowableTracks.Length()); nscoord space = aAvailableSpace; DebugOnly<bool> didClamp = false; - while (numGrowable) { - nscoord spacePerTrack = std::max<nscoord>(space / numGrowable, 1); + while (aNumGrowable) { + nscoord spacePerTrack = std::max<nscoord>(space / aNumGrowable, 1); for (uint32_t track : aGrowableTracks) { TrackSize& sz = aPlan[track]; if (sz.mState & TrackSize::eSkipGrowUnlimited) { @@ -1609,7 +1678,7 @@ struct nsGridContainerFrame::Tracks delta = newBase - sz.mBase; MOZ_ASSERT(delta >= 0, "track size shouldn't shrink"); sz.mState |= TrackSize::eSkipGrowUnlimited1; - --numGrowable; + --aNumGrowable; } } sz.mBase = newBase; @@ -1628,46 +1697,30 @@ struct nsGridContainerFrame::Tracks * Distribute aAvailableSpace to the planned base size for aGrowableTracks * up to their limits, then distribute the remaining space beyond the limits. */ - void DistributeToTrackBases(nscoord aAvailableSpace, + template<TrackSizingPhase phase> + void DistributeToTrackSizes(nscoord aAvailableSpace, nsTArray<TrackSize>& aPlan, + nsTArray<TrackSize>& aItemPlan, nsTArray<uint32_t>& aGrowableTracks, - TrackSize::StateBits aSelector) + TrackSize::StateBits aSelector, + const FitContentClamper& aFitContentClamper) { - SetupGrowthPlan(aPlan, aGrowableTracks); - nscoord space = GrowTracksToLimit(aAvailableSpace, aPlan, aGrowableTracks, nullptr); + InitializeItemPlan<phase>(aItemPlan, aGrowableTracks); + nscoord space = GrowTracksToLimit(aAvailableSpace, aItemPlan, aGrowableTracks, + aFitContentClamper); if (space > 0) { - GrowSelectedTracksUnlimited(space, aPlan, aGrowableTracks, aSelector, nullptr); + uint32_t numGrowable = + MarkExcludedTracks<phase>(aItemPlan, aGrowableTracks, aSelector); + GrowSelectedTracksUnlimited(space, aItemPlan, aGrowableTracks, + numGrowable, aFitContentClamper); } - CopyPlanToBase(aPlan, aGrowableTracks); - } - - /** - * Distribute aAvailableSpace to the planned limits for aGrowableTracks. - */ - void DistributeToTrackLimits(nscoord aAvailableSpace, - nsTArray<TrackSize>& aPlan, - nsTArray<uint32_t>& aGrowableTracks, - const TrackSizingFunctions& aFunctions, - nscoord aPercentageBasis) - { - auto fitContentClamper = [&aFunctions, aPercentageBasis] (uint32_t aTrack, - nscoord aMinSize, - nscoord* aSize) { - nscoord fitContentLimit = - ::ResolveToDefiniteSize(aFunctions.MaxSizingFor(aTrack), aPercentageBasis); - if (*aSize > fitContentLimit) { - *aSize = std::max(aMinSize, fitContentLimit); - return true; + for (uint32_t track : aGrowableTracks) { + nscoord& plannedSize = aPlan[track].mBase; + nscoord itemIncurredSize = aItemPlan[track].mBase; + if (plannedSize < itemIncurredSize) { + plannedSize = itemIncurredSize; } - return false; - }; - nscoord space = GrowTracksToLimit(aAvailableSpace, aPlan, aGrowableTracks, - fitContentClamper); - if (space > 0) { - GrowSelectedTracksUnlimited(aAvailableSpace, aPlan, aGrowableTracks, - TrackSize::StateBits(0), fitContentClamper); } - CopyPlanToLimit(aPlan, aGrowableTracks); } /** @@ -1769,13 +1822,6 @@ struct nsGridContainerFrame::Tracks WritingMode aWM, const LogicalSize& aContainerSize); - /** - * Return the intrinsic size by back-computing percentages as: - * IntrinsicSize = SumOfCoordSizes / (1 - SumOfPercentages). - */ - nscoord BackComputedIntrinsicSize(const TrackSizingFunctions& aFunctions, - const nsStyleCoord& aGridGap) const; - nscoord GridLineEdge(uint32_t aLine, GridLineSide aSide) const { if (MOZ_UNLIKELY(mSizes.IsEmpty())) { @@ -2085,11 +2131,10 @@ struct MOZ_STACK_CLASS nsGridContainerFrame::GridReflowInput } /** - * Calculate our track sizes. If the given aContentBox block-axis size is - * unconstrained, it is assigned to the resulting intrinsic block-axis size. + * Calculate our track sizes. */ void CalculateTrackSizes(const Grid& aGrid, - LogicalSize& aContentBox, + const LogicalSize& aContentBox, SizingConstraint aConstraint); /** @@ -2575,7 +2620,7 @@ struct MOZ_STACK_CLASS nsGridContainerFrame::Grid void nsGridContainerFrame::GridReflowInput::CalculateTrackSizes( const Grid& aGrid, - LogicalSize& aContentBox, + const LogicalSize& aContentBox, SizingConstraint aConstraint) { mCols.Initialize(mColFunctions, mGridStyle->mGridColumnGap, @@ -2593,12 +2638,6 @@ nsGridContainerFrame::GridReflowInput::CalculateTrackSizes( mRows.CalculateSizes(*this, mGridItems, mRowFunctions, aContentBox.BSize(mWM), &GridArea::mRows, aConstraint); - if (aContentBox.BSize(mWM) == NS_AUTOHEIGHT) { - aContentBox.BSize(mWM) = - mRows.BackComputedIntrinsicSize(mRowFunctions, mGridStyle->mGridRowGap); - mRows.mGridGap = - ::ResolveToDefiniteSize(mGridStyle->mGridRowGap, aContentBox.BSize(mWM)); - } } /** @@ -3545,19 +3584,27 @@ nsGridContainerFrame::Grid::PlaceGridItems(GridReflowInput& aState, // Count empty 'auto-fit' tracks in the repeat() range. // |colAdjust| will have a count for each line in the grid of how many // tracks were empty between the start of the grid and that line. + + // Since this loop is concerned with just the repeat tracks, we + // iterate from 0..NumRepeatTracks() which is the natural range of + // mRemoveRepeatTracks. This means we have to add + // (mExplicitGridOffset + mRepeatAutoStart) to get a zero-based + // index for arrays like mCellMap and colAdjust. We'll then fill out + // the colAdjust array for all the remaining lines. Maybe<nsTArray<uint32_t>> colAdjust; uint32_t numEmptyCols = 0; if (aState.mColFunctions.mHasRepeatAuto && !gridStyle->mGridTemplateColumns.mIsAutoFill && aState.mColFunctions.NumRepeatTracks() > 0) { - for (uint32_t col = aState.mColFunctions.mRepeatAutoStart, - endRepeat = aState.mColFunctions.mRepeatAutoEnd, - numColLines = mGridColEnd + 1; - col < numColLines; ++col) { + const uint32_t repeatStart = (aState.mColFunctions.mExplicitGridOffset + + aState.mColFunctions.mRepeatAutoStart); + const uint32_t numRepeats = aState.mColFunctions.NumRepeatTracks(); + const uint32_t numColLines = mGridColEnd + 1; + for (uint32_t i = 0; i < numRepeats; ++i) { if (numEmptyCols) { - (*colAdjust)[col] = numEmptyCols; + (*colAdjust)[repeatStart + i] = numEmptyCols; } - if (col < endRepeat && mCellMap.IsEmptyCol(col)) { + if (mCellMap.IsEmptyCol(repeatStart + i)) { ++numEmptyCols; if (colAdjust.isNothing()) { colAdjust.emplace(numColLines); @@ -3565,26 +3612,34 @@ nsGridContainerFrame::Grid::PlaceGridItems(GridReflowInput& aState, PodZero(colAdjust->Elements(), colAdjust->Length()); } - uint32_t repeatIndex = col - aState.mColFunctions.mRepeatAutoStart; - MOZ_ASSERT(aState.mColFunctions.mRemovedRepeatTracks.Length() > - repeatIndex); - aState.mColFunctions.mRemovedRepeatTracks[repeatIndex] = true; + aState.mColFunctions.mRemovedRepeatTracks[i] = true; + } + } + // Fill out the colAdjust array for all the columns after the + // repeats. + if (numEmptyCols) { + for (uint32_t col = repeatStart + numRepeats; + col < numColLines; ++col) { + (*colAdjust)[col] = numEmptyCols; } } } + + // Do similar work for the row tracks, with the same logic. Maybe<nsTArray<uint32_t>> rowAdjust; uint32_t numEmptyRows = 0; if (aState.mRowFunctions.mHasRepeatAuto && !gridStyle->mGridTemplateRows.mIsAutoFill && aState.mRowFunctions.NumRepeatTracks() > 0) { - for (uint32_t row = aState.mRowFunctions.mRepeatAutoStart, - endRepeat = aState.mRowFunctions.mRepeatAutoEnd, - numRowLines = mGridRowEnd + 1; - row < numRowLines; ++row) { + const uint32_t repeatStart = (aState.mRowFunctions.mExplicitGridOffset + + aState.mRowFunctions.mRepeatAutoStart); + const uint32_t numRepeats = aState.mRowFunctions.NumRepeatTracks(); + const uint32_t numRowLines = mGridRowEnd + 1; + for (uint32_t i = 0; i < numRepeats; ++i) { if (numEmptyRows) { - (*rowAdjust)[row] = numEmptyRows; + (*rowAdjust)[repeatStart + i] = numEmptyRows; } - if (row < endRepeat && mCellMap.IsEmptyRow(row)) { + if (mCellMap.IsEmptyRow(repeatStart + i)) { ++numEmptyRows; if (rowAdjust.isNothing()) { rowAdjust.emplace(numRowLines); @@ -3592,10 +3647,13 @@ nsGridContainerFrame::Grid::PlaceGridItems(GridReflowInput& aState, PodZero(rowAdjust->Elements(), rowAdjust->Length()); } - uint32_t repeatIndex = row - aState.mRowFunctions.mRepeatAutoStart; - MOZ_ASSERT(aState.mRowFunctions.mRemovedRepeatTracks.Length() > - repeatIndex); - aState.mRowFunctions.mRemovedRepeatTracks[repeatIndex] = true; + aState.mRowFunctions.mRemovedRepeatTracks[i] = true; + } + } + if (numEmptyRows) { + for (uint32_t row = repeatStart + numRepeats; + row < numRowLines; ++row) { + (*rowAdjust)[row] = numEmptyRows; } } } @@ -3681,7 +3739,7 @@ nsGridContainerFrame::Tracks::Initialize( aFunctions.MinSizingFor(i), aFunctions.MaxSizingFor(i)); } - mGridGap = ::ResolveToDefiniteSize(aGridGap, aContentBoxSize); + mGridGap = nsLayoutUtils::ResolveGapToLength(aGridGap, aContentBoxSize); mContentBoxSize = aContentBoxSize; } @@ -3762,8 +3820,7 @@ ContentContribution(const GridItemInfo& aGridItem, PhysicalAxis axis(aCBWM.PhysicalAxis(aAxis)); nscoord size = nsLayoutUtils::IntrinsicForAxis(axis, aRC, child, aConstraint, aPercentageBasis, - aFlags | nsLayoutUtils::BAIL_IF_REFLOW_NEEDED | - nsLayoutUtils::ADD_PERCENTS, + aFlags | nsLayoutUtils::BAIL_IF_REFLOW_NEEDED, aMinSizeClamp); if (size == NS_INTRINSIC_WIDTH_UNKNOWN) { // We need to reflow the child to find its BSize contribution. @@ -3800,15 +3857,7 @@ ContentContribution(const GridItemInfo& aGridItem, LogicalSize availableSize(childWM, availISize, availBSize); size = ::MeasuringReflow(child, aState.mReflowInput, aRC, availableSize, cbSize, iMinSizeClamp, bMinSizeClamp); - nsIFrame::IntrinsicISizeOffsetData offsets = child->IntrinsicBSizeOffsets(); - size += offsets.hMargin; - auto percent = offsets.hPctMargin; - if (availBSize == NS_UNCONSTRAINEDSIZE) { - // We always want to add in percent padding too, unless we already did so - // using a resolved column size above. - percent += offsets.hPctPadding; - } - size = nsLayoutUtils::AddPercents(size, percent); + size += child->GetLogicalUsedMargin(childWM).BStartEnd(childWM); nscoord overflow = size - aMinSizeClamp; if (MOZ_UNLIKELY(overflow > 0)) { nscoord contentSize = child->ContentBSize(childWM); @@ -3913,6 +3962,10 @@ MinSize(const GridItemInfo& aGridItem, return s; } + if (aCache->mPercentageBasis.isNothing()) { + aCache->mPercentageBasis.emplace(aState.PercentageBasisFor(aAxis, aGridItem)); + } + // https://drafts.csswg.org/css-grid/#min-size-auto // This calculates the min-content contribution from either a definite // min-width (or min-height depending on aAxis), or the "specified / @@ -3926,7 +3979,8 @@ MinSize(const GridItemInfo& aGridItem, "baseline offset should be zero when not baseline-aligned"); nscoord sz = aGridItem.mBaselineOffset[aAxis] + nsLayoutUtils::MinSizeContributionForAxis(axis, aRC, child, - nsLayoutUtils::MIN_ISIZE); + nsLayoutUtils::MIN_ISIZE, + *aCache->mPercentageBasis); const nsStyleCoord& style = axis == eAxisHorizontal ? stylePos->mMinWidth : stylePos->mMinHeight; auto unit = style.GetUnit(); @@ -3935,9 +3989,6 @@ MinSize(const GridItemInfo& aGridItem, child->StyleDisplay()->mOverflowX == NS_STYLE_OVERFLOW_VISIBLE)) { // Now calculate the "content size" part and return whichever is smaller. MOZ_ASSERT(unit != eStyleUnit_Enumerated || sz == NS_UNCONSTRAINEDSIZE); - if (aCache->mPercentageBasis.isNothing()) { - aCache->mPercentageBasis.emplace(aState.PercentageBasisFor(aAxis, aGridItem)); - } sz = std::min(sz, ContentContribution(aGridItem, aState, aRC, aCBWM, aAxis, aCache->mPercentageBasis, nsLayoutUtils::MIN_ISIZE, @@ -3974,28 +4025,16 @@ nsGridContainerFrame::Tracks::CalculateSizes( } } -bool -nsGridContainerFrame::Tracks::HasIntrinsicButNoFlexSizingInRange( - const LineRange& aRange, - TrackSize::StateBits* aState) const +TrackSize::StateBits +nsGridContainerFrame::Tracks::StateBitsForRange(const LineRange& aRange) const { - MOZ_ASSERT(!aRange.IsAuto(), "must have a definite range"); + TrackSize::StateBits state = TrackSize::StateBits(0); const uint32_t start = aRange.mStart; const uint32_t end = aRange.mEnd; - const TrackSize::StateBits selector = - TrackSize::eIntrinsicMinSizing | TrackSize::eIntrinsicMaxSizing; - bool foundIntrinsic = false; for (uint32_t i = start; i < end; ++i) { - TrackSize::StateBits state = mSizes[i].mState; - *aState |= state; - if (state & TrackSize::eFlexMaxSizing) { - return false; - } - if (state & selector) { - foundIntrinsic = true; - } + state |= mSizes[i].mState; } - return foundIntrinsic; + return state; } bool @@ -4010,6 +4049,13 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSizeStep1( CachedIntrinsicSizes cache; TrackSize& sz = mSizes[aRange.mStart]; WritingMode wm = aState.mWM; + + // Check if we need to apply "Automatic Minimum Size" and cache it. + if ((sz.mState & TrackSize::eAutoMinSizing) && + aGridItem.ShouldApplyAutoMinSize(wm, mAxis, aPercentageBasis)) { + aGridItem.mState[mAxis] |= ItemState::eApplyAutoMinSize; + } + // Calculate data for "Automatic Minimum Size" clamping, if needed. bool needed = ((sz.mState & TrackSize::eIntrinsicMinSizing) || aConstraint == SizingConstraint::eNoConstraint) && @@ -4370,6 +4416,55 @@ nsGridContainerFrame::Tracks::AlignBaselineSubtree( } } +template<nsGridContainerFrame::Tracks::TrackSizingPhase phase> +bool +nsGridContainerFrame::Tracks::GrowSizeForSpanningItems( + nsTArray<Step2ItemData>::iterator aIter, + const nsTArray<Step2ItemData>::iterator aIterEnd, + nsTArray<uint32_t>& aTracks, + nsTArray<TrackSize>& aPlan, + nsTArray<TrackSize>& aItemPlan, + TrackSize::StateBits aSelector, + const FitContentClamper& aFitContentClamper, + bool aNeedInfinitelyGrowableFlag) +{ + constexpr bool isMaxSizingPhase = + phase == TrackSizingPhase::eIntrinsicMaximums || + phase == TrackSizingPhase::eMaxContentMaximums; + bool needToUpdateSizes = false; + InitializePlan<phase>(aPlan); + for (; aIter != aIterEnd; ++aIter) { + const Step2ItemData& item = *aIter; + if (!(item.mState & aSelector)) { + continue; + } + if (isMaxSizingPhase) { + for (auto j = item.mLineRange.mStart, end = item.mLineRange.mEnd; j < end; ++j) { + aPlan[j].mState |= TrackSize::eModified; + } + } + nscoord space = item.SizeContributionForPhase<phase>(); + if (space <= 0) { + continue; + } + aTracks.ClearAndRetainStorage(); + space = CollectGrowable<phase>(space, item.mLineRange, aSelector, + aTracks); + if (space > 0) { + DistributeToTrackSizes<phase>(space, aPlan, aItemPlan, aTracks, aSelector, + aFitContentClamper); + needToUpdateSizes = true; + } + } + if (isMaxSizingPhase) { + needToUpdateSizes = true; + } + if (needToUpdateSizes) { + CopyPlanToSize<phase>(aPlan, aNeedInfinitelyGrowableFlag); + } + return needToUpdateSizes; +} + void nsGridContainerFrame::Tracks::ResolveIntrinsicSize( GridReflowInput& aState, @@ -4379,21 +4474,6 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize( nscoord aPercentageBasis, SizingConstraint aConstraint) { - // Some data we collect on each item for Step 2 of the algorithm below. - struct Step2ItemData - { - uint32_t mSpan; - TrackSize::StateBits mState; - LineRange mLineRange; - nscoord mMinSize; - nscoord mMinContentContribution; - nscoord mMaxContentContribution; - nsIFrame* mFrame; - static bool IsSpanLessThan(const Step2ItemData& a, const Step2ItemData& b) - { - return a.mSpan < b.mSpan; - } - }; // Resolve Intrinsic Track Sizes // http://dev.w3.org/csswg/css-grid/#algo-content @@ -4418,12 +4498,10 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize( for (; !iter.AtEnd(); iter.Next()) { auto& gridItem = aGridItems[iter.GridItemIndex()]; - // Check if we need to apply "Automatic Minimum Size" and cache it. - MOZ_ASSERT(!(gridItem.mState[mAxis] & ItemState::eApplyAutoMinSize), - "Why is eApplyAutoMinSize set already?"); - if (gridItem.ShouldApplyAutoMinSize(wm, mAxis, aPercentageBasis)) { - gridItem.mState[mAxis] |= ItemState::eApplyAutoMinSize; - } + MOZ_ASSERT(!(gridItem.mState[mAxis] & + (ItemState::eApplyAutoMinSize | ItemState::eIsFlexing | + ItemState::eClampMarginBoxMinSize)), + "Why are any of these bits set already?"); const GridArea& area = gridItem.mArea; const LineRange& lineRange = area.*aRange; @@ -4435,8 +4513,17 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize( gridItem.mState[mAxis] |= ItemState::eIsFlexing; } } else { - TrackSize::StateBits state = TrackSize::StateBits(0); - if (HasIntrinsicButNoFlexSizingInRange(lineRange, &state)) { + TrackSize::StateBits state = StateBitsForRange(lineRange); + + // Check if we need to apply "Automatic Minimum Size" and cache it. + if ((state & TrackSize::eAutoMinSizing) && + gridItem.ShouldApplyAutoMinSize(wm, mAxis, aPercentageBasis)) { + gridItem.mState[mAxis] |= ItemState::eApplyAutoMinSize; + } + + if ((state & (TrackSize::eIntrinsicMinSizing | + TrackSize::eIntrinsicMaxSizing)) && + !(state & TrackSize::eFlexMaxSizing)) { // Collect data for Step 2. maxSpan = std::max(maxSpan, span); if (span >= stateBitsPerSpan.Length()) { @@ -4500,6 +4587,18 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize( // Step 2. if (maxSpan) { + auto fitContentClamper = [&aFunctions, aPercentageBasis] (uint32_t aTrack, + nscoord aMinSize, + nscoord* aSize) + { + nscoord fitContentLimit = + ::ResolveToDefiniteSize(aFunctions.MaxSizingFor(aTrack), aPercentageBasis); + if (*aSize > fitContentLimit) { + *aSize = std::max(aMinSize, fitContentLimit); + return true; + } + return false; + }; // Sort the collected items on span length, shortest first. std::stable_sort(step2Items.begin(), step2Items.end(), Step2ItemData::IsSpanLessThan); @@ -4507,85 +4606,44 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize( nsTArray<uint32_t> tracks(maxSpan); nsTArray<TrackSize> plan(mSizes.Length()); plan.SetLength(mSizes.Length()); - for (uint32_t i = 0, len = step2Items.Length(); i < len; ) { - // Start / end index for items of the same span length: - const uint32_t spanGroupStartIndex = i; - uint32_t spanGroupEndIndex = len; - const uint32_t span = step2Items[i].mSpan; - for (++i; i < len; ++i) { - if (step2Items[i].mSpan != span) { - spanGroupEndIndex = i; - break; - } - } - + nsTArray<TrackSize> itemPlan(mSizes.Length()); + itemPlan.SetLength(mSizes.Length()); + // Start / end iterator for items of the same span length: + auto spanGroupStart = step2Items.begin(); + auto spanGroupEnd = spanGroupStart; + const auto end = step2Items.end(); + for (; spanGroupStart != end; spanGroupStart = spanGroupEnd) { + while (spanGroupEnd != end && + !Step2ItemData::IsSpanLessThan(*spanGroupStart, *spanGroupEnd)) { + ++spanGroupEnd; + } + + const uint32_t span = spanGroupStart->mSpan; bool updatedBase = false; // Did we update any mBase in step 2.1 - 2.3? TrackSize::StateBits selector(TrackSize::eIntrinsicMinSizing); if (stateBitsPerSpan[span] & selector) { // Step 2.1 MinSize to intrinsic min-sizing. - for (i = spanGroupStartIndex; i < spanGroupEndIndex; ++i) { - Step2ItemData& item = step2Items[i]; - if (!(item.mState & selector)) { - continue; - } - nscoord space = item.mMinSize; - if (space <= 0) { - continue; - } - tracks.ClearAndRetainStorage(); - space = CollectGrowable(space, mSizes, item.mLineRange, selector, - tracks); - if (space > 0) { - DistributeToTrackBases(space, plan, tracks, selector); - updatedBase = true; - } - } + updatedBase = + GrowSizeForSpanningItems<TrackSizingPhase::eIntrinsicMinimums>( + spanGroupStart, spanGroupEnd, tracks, plan, itemPlan, selector); } selector = contentBasedMinSelector; if (stateBitsPerSpan[span] & selector) { // Step 2.2 MinContentContribution to min-/max-content (and 'auto' when // sizing under a min-content constraint) min-sizing. - for (i = spanGroupStartIndex; i < spanGroupEndIndex; ++i) { - Step2ItemData& item = step2Items[i]; - if (!(item.mState & selector)) { - continue; - } - nscoord space = item.mMinContentContribution; - if (space <= 0) { - continue; - } - tracks.ClearAndRetainStorage(); - space = CollectGrowable(space, mSizes, item.mLineRange, selector, - tracks); - if (space > 0) { - DistributeToTrackBases(space, plan, tracks, selector); - updatedBase = true; - } - } + updatedBase |= + GrowSizeForSpanningItems<TrackSizingPhase::eContentBasedMinimums>( + spanGroupStart, spanGroupEnd, tracks, plan, itemPlan, selector); } selector = maxContentMinSelector; if (stateBitsPerSpan[span] & selector) { // Step 2.3 MaxContentContribution to max-content (and 'auto' when // sizing under a max-content constraint) min-sizing. - for (i = spanGroupStartIndex; i < spanGroupEndIndex; ++i) { - Step2ItemData& item = step2Items[i]; - if (!(item.mState & selector)) { - continue; - } - nscoord space = item.mMaxContentContribution; - if (space <= 0) { - continue; - } - tracks.ClearAndRetainStorage(); - space = CollectGrowable(space, mSizes, item.mLineRange, selector, - tracks); - if (space > 0) { - DistributeToTrackBases(space, plan, tracks, selector); - updatedBase = true; - } - } + updatedBase |= + GrowSizeForSpanningItems<TrackSizingPhase::eMaxContentMinimums>( + spanGroupStart, spanGroupEnd, tracks, plan, itemPlan, selector); } if (updatedBase) { @@ -4596,63 +4654,22 @@ nsGridContainerFrame::Tracks::ResolveIntrinsicSize( } } } - if (stateBitsPerSpan[span] & TrackSize::eIntrinsicMaxSizing) { - plan = mSizes; - for (TrackSize& sz : plan) { - if (sz.mLimit == NS_UNCONSTRAINEDSIZE) { - // use mBase as the planned limit - } else { - sz.mBase = sz.mLimit; - } - } + selector = TrackSize::eIntrinsicMaxSizing; + if (stateBitsPerSpan[span] & selector) { + const bool willRunStep2_6 = + stateBitsPerSpan[span] & TrackSize::eAutoOrMaxContentMaxSizing; // Step 2.5 MinSize to intrinsic max-sizing. - for (i = spanGroupStartIndex; i < spanGroupEndIndex; ++i) { - Step2ItemData& item = step2Items[i]; - if (!(item.mState & TrackSize::eIntrinsicMaxSizing)) { - continue; - } - nscoord space = item.mMinSize; - if (space <= 0) { - continue; - } - tracks.ClearAndRetainStorage(); - space = CollectGrowable(space, plan, item.mLineRange, - TrackSize::eIntrinsicMaxSizing, - tracks); - if (space > 0) { - DistributeToTrackLimits(space, plan, tracks, aFunctions, - aPercentageBasis); - } - } - for (size_t j = 0, len = mSizes.Length(); j < len; ++j) { - TrackSize& sz = plan[j]; - sz.mState &= ~(TrackSize::eFrozen | TrackSize::eSkipGrowUnlimited); - if (sz.mLimit != NS_UNCONSTRAINEDSIZE) { - sz.mLimit = sz.mBase; // collect the results from 2.5 - } - } + GrowSizeForSpanningItems<TrackSizingPhase::eIntrinsicMaximums>( + spanGroupStart, spanGroupEnd, tracks, plan, itemPlan, selector, + fitContentClamper, willRunStep2_6); - if (stateBitsPerSpan[span] & TrackSize::eAutoOrMaxContentMaxSizing) { + if (willRunStep2_6) { // Step 2.6 MaxContentContribution to max-content max-sizing. - for (i = spanGroupStartIndex; i < spanGroupEndIndex; ++i) { - Step2ItemData& item = step2Items[i]; - if (!(item.mState & TrackSize::eAutoOrMaxContentMaxSizing)) { - continue; - } - nscoord space = item.mMaxContentContribution; - if (space <= 0) { - continue; - } - tracks.ClearAndRetainStorage(); - space = CollectGrowable(space, plan, item.mLineRange, - TrackSize::eAutoOrMaxContentMaxSizing, - tracks); - if (space > 0) { - DistributeToTrackLimits(space, plan, tracks, aFunctions, - aPercentageBasis); - } - } + selector = TrackSize::eAutoOrMaxContentMaxSizing; + GrowSizeForSpanningItems<TrackSizingPhase::eMaxContentMaximums>( + spanGroupStart, spanGroupEnd, tracks, plan, itemPlan, selector, + fitContentClamper); } } } @@ -4984,6 +5001,7 @@ nsGridContainerFrame::Tracks::AlignJustifyContent( default: MOZ_ASSERT_UNREACHABLE("unknown align-/justify-content value"); between = 0; // just to avoid a compiler warning + roundingError = 0; // just to avoid a compiler warning } between += mGridGap; for (TrackSize& sz : mSizes) { @@ -4998,36 +5016,6 @@ nsGridContainerFrame::Tracks::AlignJustifyContent( MOZ_ASSERT(!roundingError, "we didn't distribute all rounding error?"); } -nscoord -nsGridContainerFrame::Tracks::BackComputedIntrinsicSize( - const TrackSizingFunctions& aFunctions, - const nsStyleCoord& aGridGap) const -{ - // Sum up the current sizes (where percentage tracks were treated as 'auto') - // in 'size'. - nscoord size = 0; - for (size_t i = 0, len = mSizes.Length(); i < len; ++i) { - size += mSizes[i].mBase; - } - - // Add grid-gap contributions to 'size' and calculate a 'percent' sum. - float percent = 0.0f; - size_t numTracks = mSizes.Length(); - if (numTracks > 1) { - const size_t gridGapCount = numTracks - 1; - nscoord gridGapLength; - float gridGapPercent; - if (::GetPercentSizeParts(aGridGap, &gridGapLength, &gridGapPercent)) { - percent = gridGapCount * gridGapPercent; - } else { - gridGapLength = aGridGap.ToLength(); - } - size += gridGapCount * gridGapLength; - } - - return std::max(0, nsLayoutUtils::AddPercents(size, percent)); -} - void nsGridContainerFrame::LineRange::ToPositionAndLength( const nsTArray<TrackSize>& aTrackSizes, nscoord* aPos, nscoord* aLength) const @@ -5077,10 +5065,15 @@ nsGridContainerFrame::LineRange::ToPositionAndLengthForAbsPos( : GridLineSide::eBeforeGridGap; nscoord endPos = aTracks.GridLineEdge(mEnd, side); *aLength = std::max(aGridOrigin + endPos, 0); - } else { + } else if (MOZ_LIKELY(mStart != mEnd)) { nscoord pos; ToPositionAndLength(aTracks.mSizes, &pos, aLength); *aPos = aGridOrigin + pos; + } else { + // The grid area only covers removed 'auto-fit' tracks. + nscoord pos = aTracks.GridLineEdge(mStart, GridLineSide::eBeforeGridGap); + *aPos = aGridOrigin + pos; + *aLength = nscoord(0); } } } @@ -6188,7 +6181,7 @@ nsGridContainerFrame::Reflow(nsPresContext* aPresContext, LogicalSize computedSize(wm, computedISize, computedBSize); nscoord consumedBSize = 0; - nscoord bSize; + nscoord bSize = 0; if (!prevInFlow) { Grid grid; grid.PlaceGridItems(gridReflowInput, aReflowInput.ComputedMinSize(), @@ -6196,7 +6189,12 @@ nsGridContainerFrame::Reflow(nsPresContext* aPresContext, gridReflowInput.CalculateTrackSizes(grid, computedSize, SizingConstraint::eNoConstraint); - bSize = computedSize.BSize(wm); + // Note: we can't use GridLineEdge here since we haven't calculated + // the rows' mPosition yet (happens in AlignJustifyContent below). + for (const auto& sz : gridReflowInput.mRows.mSizes) { + bSize += sz.mBase; + } + bSize += gridReflowInput.mRows.SumOfGridGaps(); } else { consumedBSize = GetConsumedBSize(); gridReflowInput.InitializeForContinuation(this, consumedBSize); @@ -6595,8 +6593,14 @@ nsGridContainerFrame::IntrinsicISize(nsRenderingContext* aRenderingContext, state.mCols.CalculateSizes(state, state.mGridItems, state.mColFunctions, NS_UNCONSTRAINEDSIZE, &GridArea::mCols, constraint); - return state.mCols.BackComputedIntrinsicSize(state.mColFunctions, - state.mGridStyle->mGridColumnGap); + state.mCols.mGridGap = + nsLayoutUtils::ResolveGapToLength(state.mGridStyle->mGridColumnGap, + NS_UNCONSTRAINEDSIZE); + nscoord length = 0; + for (const TrackSize& sz : state.mCols.mSizes) { + length += sz.mBase; + } + return length + state.mCols.SumOfGridGaps(); } nscoord @@ -7113,6 +7117,9 @@ nsGridContainerFrame::TrackSize::Dump() const if (mState & eFrozen) { printf("frozen "); } + if (mState & eModified) { + printf("modified "); + } if (mState & eBreakBefore) { printf("break-before "); } diff --git a/layout/generic/nsIFrame.h b/layout/generic/nsIFrame.h index ec3568483..57f5c460c 100644 --- a/layout/generic/nsIFrame.h +++ b/layout/generic/nsIFrame.h @@ -25,6 +25,7 @@ #include "CaretAssociationHint.h" #include "FrameProperties.h" +#include "LayoutConstants.h" #include "mozilla/layout/FrameChildList.h" #include "mozilla/Maybe.h" #include "mozilla/WritingModes.h" @@ -130,30 +131,12 @@ typedef uint32_t nsSplittableType; #define NS_FRAME_IS_NOT_SPLITTABLE(type)\ (0 == ((type) & NS_FRAME_SPLITTABLE)) -#define NS_INTRINSIC_WIDTH_UNKNOWN nscoord_MIN - //---------------------------------------------------------------------- #define NS_SUBTREE_DIRTY(_frame) \ (((_frame)->GetStateBits() & \ (NS_FRAME_IS_DIRTY | NS_FRAME_HAS_DIRTY_CHILDREN)) != 0) -/** - * Constant used to indicate an unconstrained size. - * - * @see #Reflow() - */ -#define NS_UNCONSTRAINEDSIZE NS_MAXSIZE - -#define NS_INTRINSICSIZE NS_UNCONSTRAINEDSIZE -#define NS_AUTOHEIGHT NS_UNCONSTRAINEDSIZE -// +1 is to avoid clamped huge margin values being processed as auto margins -#define NS_AUTOMARGIN (NS_UNCONSTRAINEDSIZE + 1) -#define NS_AUTOOFFSET NS_UNCONSTRAINEDSIZE -// NOTE: there are assumptions all over that these have the same value, namely NS_UNCONSTRAINEDSIZE -// if any are changed to be a value other than NS_UNCONSTRAINEDSIZE -// at least update AdjustComputedHeight/Width and test ad nauseum - // 1 million CSS pixels less than our max app unit measure. // For reflowing with an "infinite" available inline space per [css-sizing]. // (reflowing with an NS_UNCONSTRAINEDSIZE available inline size isn't allowed @@ -2050,23 +2033,27 @@ public: /** * Return the horizontal components of padding, border, and margin * that contribute to the intrinsic width that applies to the parent. + * @param aPercentageBasis the percentage basis to use for padding/margin - + * i.e. the Containing Block's inline-size */ struct IntrinsicISizeOffsetData { nscoord hPadding, hBorder, hMargin; - float hPctPadding, hPctMargin; IntrinsicISizeOffsetData() : hPadding(0), hBorder(0), hMargin(0) - , hPctPadding(0.0f), hPctMargin(0.0f) {} }; - virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() = 0; + virtual IntrinsicISizeOffsetData + IntrinsicISizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE) = 0; /** * Return the bsize components of padding, border, and margin * that contribute to the intrinsic width that applies to the parent. + * @param aPercentageBasis the percentage basis to use for padding/margin - + * i.e. the Containing Block's inline-size */ - IntrinsicISizeOffsetData IntrinsicBSizeOffsets(); + IntrinsicISizeOffsetData + IntrinsicBSizeOffsets(nscoord aPercentageBasis = NS_UNCONSTRAINEDSIZE); virtual mozilla::IntrinsicSize GetIntrinsicSize() = 0; diff --git a/layout/generic/test/mochitest.ini b/layout/generic/test/mochitest.ini index 934ffc8a4..33dacddab 100644 --- a/layout/generic/test/mochitest.ini +++ b/layout/generic/test/mochitest.ini @@ -138,3 +138,7 @@ support-files = file_taintedfilters_feDisplacementMap-tainted-1.svg file_tainted support-files = file_scroll_position_restore.html [test_scroll_animation_restore.html] [test_scroll_position_iframe.html] +[test_grid_track_sizing_algo_001.html] +skip-if = debug == true # the test is slow +[test_grid_track_sizing_algo_002.html] +skip-if = debug == true # the test is slow diff --git a/layout/generic/test/test_grid_track_sizing_algo_001.html b/layout/generic/test/test_grid_track_sizing_algo_001.html new file mode 100644 index 000000000..68956c2df --- /dev/null +++ b/layout/generic/test/test_grid_track_sizing_algo_001.html @@ -0,0 +1,1641 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: intrinsic track sizing with spanning items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1425599"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content"> + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } +* { vertical-align: top; line-height: 1px; } + +.grid { + display: inline-grid; + grid-template-rows: 1px; + grid-auto-rows: 10px; + border: 1px solid; + place-content: start; + place-items: start; +} + +x { + grid-row: 1; + height: 1px; + background: grey; +} + +x:nth-child(1) { background: lime; width: 3px; grid-column: 1/span 2; } +x:nth-child(2) { background: silver; width: 6px; grid-column: 2/span 4; } +x:nth-child(3) { background: blue; width: 12px; grid-column: 2/span 2; } + </style> +</head> +<body> + +<script> +let min1 = [ + "0", "4px" +]; +let min2 = [ + "auto", "min-content", "max-content" +]; +let max1 = [ + "8px" +]; +let max2 = [ + "auto", "min-content", "max-content" +]; + +var track = []; +min1.forEach((min) => { max2.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +min2.forEach((min) => { max2.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +min2.forEach((min) => { max1.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +min2.forEach((min) => { max2.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +track.push("fit-content(8px)"); + +var cols = []; +track.forEach((c1) => { + cols.push(c1 + " " + c1 + " " + c1 + " " + c1 + " " + c1); + track.forEach((c2) => { + if (c1 != c2) { + cols.push(c1 + " " + c2 + " " + c2 + " " + c2 + " " + c2); + cols.push(c2 + " " + c1 + " " + c1 + " " + c2 + " " + c2); + } +})}); + +document.body.style.display = 'none'; +cols.forEach((col) => { + let grid = document.createElement('div'); + grid.className = "grid"; + grid.style.gridTemplateColumns = col; + grid.appendChild(document.createElement('x')) + grid.appendChild(document.createElement('x')) + grid.appendChild(document.createElement('x')) + document.body.appendChild(grid); +}); +document.body.style.display = ''; +</script> + +<script> +var actual = []; +[...document.querySelectorAll('.grid')].forEach(function(e) { + let cs = window.getComputedStyle(e); + actual.push([cs.gridTemplateColumns, cs.width]); +}); + +function dumpResult() { + var s = ""; + actual.forEach(v => { + s += '["' + v[0] + '","' + v[1] + '"],\n'; + }); + let pre = document.createElement("pre"); + pre.innerHTML = s; + document.body.appendChild(pre); +} + +let expected = [ +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 8px 8px 8px 8px","32px"], +["8px 6px 6px 8px 8px","36px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 3px 3px","21px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 4px 4px","24px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 8px 8px 8px 8px","36px"], +["8px 6px 6px 8px 8px","36px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["4px 6px 6px 0px 0px","16px"], +["0px 6px 6px 0px 0px","12px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 0px 0px","20px"], +["0px 8px 8px 0px 0px","16px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 4px 4px","28px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["8px 6px 6px 0px 0px","20px"], +["1.5px 8px 8px 0px 0px","17.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["3px 6px 6px 0px 0px","15px"], +["0px 6px 6px 0px 0px","12px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["0px 6px 6px 4px 4px","20px"], +["4px 6px 6px 4px 4px","24px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 8px 8px 8px 8px","33.5px"], +["8px 6px 6px 8px 8px","36px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +["1.5px 6px 6px 0px 0px","13.5px"], +]; + +function test() { + ok(expected.length > 0, "sanity check"); + for (i = 0; i < expected.length; ++i) { + var msg = ""; + if (actual[i][0] != expected[i][0]) { + msg = "'grid-template-columns' for grid index " + i + ":\n" + [...document.querySelectorAll('.grid')][i].outerHTML; + is(actual[i][0], expected[i][0], msg); + } + if (actual[i][1] != expected[i][1]) { + msg = "'width' for grid index " + i + ":\n" + [...document.querySelectorAll('.grid')][i].outerHTML; + is(actual[i][1], expected[i][1], msg); + } + if (msg != "") { + i = expected.length; // stop after first failed grid by default + } + } + SimpleTest.finish(); +} + +</script> + +<script> +window.onload = function() { setTimeout(test, 0); }; +SimpleTest.waitForExplicitFinish(); +</script> + +</body> +</html> diff --git a/layout/generic/test/test_grid_track_sizing_algo_002.html b/layout/generic/test/test_grid_track_sizing_algo_002.html new file mode 100644 index 000000000..40f50e20f --- /dev/null +++ b/layout/generic/test/test_grid_track_sizing_algo_002.html @@ -0,0 +1,1641 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: intrinsic track sizing with spanning items</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1425599"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content"> + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> + <style type="text/css"> +body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } +* { vertical-align: top; line-height: 1px; } + +.grid { + display: inline-grid; + grid-template-rows: 1px; + grid-auto-rows: 10px; + border: 1px solid; + place-content: start; + place-items: start; +} + +x { + grid-row: 1; + height: 1px; + background: grey; +} + +x:nth-child(1) { background: lime; width: 3px; grid-column: 1/span 2; } +x:nth-child(2) { background: silver; width: 6px; grid-column: 2/span 3; } +x:nth-child(3) { background: blue; width: 12px; grid-column: 1/span 2; } + </style> +</head> +<body> + +<script> +let min1 = [ + "0", "4px" +]; +let min2 = [ + "auto", "min-content", "max-content" +]; +let max1 = [ + "8px" +]; +let max2 = [ + "auto", "min-content", "max-content" +]; + +var track = []; +min1.forEach((min) => { max2.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +min2.forEach((min) => { max2.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +min2.forEach((min) => { max1.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +min2.forEach((min) => { max2.forEach((max) => { + track.push("minmax(" + min + "," + max + ")"); +})}); +track.push("fit-content(8px)"); + +var cols = []; +track.forEach((c1) => { + cols.push(c1 + " " + c1 + " " + c1 + " " + c1 + " " + c1); + track.forEach((c2) => { + if (c1 != c2) { + cols.push(c1 + " " + c2 + " " + c2 + " " + c2 + " " + c2); + cols.push(c2 + " " + c1 + " " + c1 + " " + c2 + " " + c2); + } +})}); + +document.body.style.display = 'none'; +cols.forEach((col) => { + let grid = document.createElement('div'); + grid.className = "grid"; + grid.style.gridTemplateColumns = col; + grid.appendChild(document.createElement('x')) + grid.appendChild(document.createElement('x')) + grid.appendChild(document.createElement('x')) + document.body.appendChild(grid); +}); +document.body.style.display = ''; +</script> + +<script> +var actual = []; +[...document.querySelectorAll('.grid')].forEach(function(e) { + let cs = window.getComputedStyle(e); + actual.push([cs.gridTemplateColumns, cs.width]); +}); + +function dumpResult() { + var s = ""; + actual.forEach(v => { + s += '["' + v[0] + '","' + v[1] + '"],\n'; + }); + let pre = document.createElement("pre"); + pre.innerHTML = s; + document.body.appendChild(pre); +} + +let expected = [ +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["4px 8px 4px 4px 4px","24px"], +["8px 4px 0px 4px 4px","20px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 8px 8px 8px","36px"], +["12px 0px 0px 8px 8px","28px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 0px 6px 0px","18px"], +["6px 6px 4px 4px 4px","24px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["6px 6px 4px 4px 4px","24px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["6px 6px 4px 4px 4px","24px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["8px 4px 1px 1px 0px","14px"], +["4px 8px 4px 0px 0px","16px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["6px 6px 4px 4px 4px","24px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 8px 8px 8px","36px"], +["8px 4px 4px 8px 8px","32px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["4px 8px 0px 0px 0px","12px"], +["8px 4px 4px 0px 0px","16px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["8px 8px 8px 8px 8px","40px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 8px 8px 8px 8px","40px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 8px 8px 8px 8px","40px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 8px 0px 0px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 8px 4px 4px","28px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 8px 8px 8px 8px","40px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["8px 6px 0px 0px 0px","14px"], +["6px 8px 8px 0px 0px","22px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["12px 0px 3px 3px 0px","18px"], +["0px 12px 0px 0px 0px","12px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["8px 4px 4px 4px 4px","24px"], +["4px 8px 0px 4px 4px","20px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 8px 8px 8px 8px","38px"], +["8px 6px 0px 8px 8px","30px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +["6px 6px 0px 0px 0px","12px"], +]; + +function test() { + ok(expected.length > 0, "sanity check"); + for (i = 0; i < expected.length; ++i) { + var msg = ""; + if (actual[i][0] != expected[i][0]) { + msg = "'grid-template-columns' for grid index " + i + ":\n" + [...document.querySelectorAll('.grid')][i].outerHTML; + is(actual[i][0], expected[i][0], msg); + } + if (actual[i][1] != expected[i][1]) { + msg = "'width' for grid index " + i + ":\n" + [...document.querySelectorAll('.grid')][i].outerHTML; + is(actual[i][1], expected[i][1], msg); + } + if (msg != "") { + i = expected.length; // stop after first failed grid by default + } + } + SimpleTest.finish(); +} + +</script> + +<script> +window.onload = function() { setTimeout(test, 0); }; +SimpleTest.waitForExplicitFinish(); +</script> + +</body> +</html> diff --git a/layout/reftests/bugs/403519-2-ref.html b/layout/reftests/bugs/403519-2-ref.html index e00fb5e24..72176a89a 100644 --- a/layout/reftests/bugs/403519-2-ref.html +++ b/layout/reftests/bugs/403519-2-ref.html @@ -17,7 +17,7 @@ table { <body> <table> <tbody><tr> - <td colspan="2" style="width: 100%;"><div> </div></td> + <td colspan="2"><div> </div></td> <td>b</td> </tr> <tr> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html index 8858b4ea8..f2c76f78b 100644 --- a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html +++ b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html @@ -65,32 +65,49 @@ b40 { .h.r { height: 42px; width: 42px; - /* This margin-left is 20% of 98px-wide grid area */ - margin-left: 19.6px; - /* This padding-bottom is 10% of 98px wide grid area */ - /* This padding-left is 30% of 98px wide grid area */ - padding: 1px 3px 9.8px 29.4px; + /* 49px is the percentage basis, i.e. the column size */ + margin-left: calc(0.2 * 49px); + padding: 1px 3px calc(0.1 * 49px) calc(0.3 * 49px); } .v.r { height: 42px; width: 42px; - /* This margin-left is 20% of 54px-wide grid area */ - margin-left: 10.8px; - /* This padding-bottom is 10% of 54px wide grid area */ - /* This padding-left is 30% of 54px wide grid area */ - padding: 1px 3px 5.4px 16.2px; + /* 27px is the percentage basis, i.e. the column size */ + margin-left: calc(0.2 * 27px); + padding: 1px 3px calc(0.1 * 27px) calc(0.3 * 27px); } .r { position:relative; } +.t4 { width: 49px; + height: calc(10px /* item min-height */ + + 7px /* item margin-top */ + + 1px /* item padding-top */ + + 1px /* item border-top */ + + calc(0.5 * 49px) /* item margin-bottom */ + + calc(0.1 * 49px) /* item padding-bottom */); + } + .t6 { width:46px; } -.t8 { width:118px; height: 102.5px; } +.t8 { width: 27px; + height: calc(30px /* item min-height */ + + 7px /* item margin-top */ + + 3px /* item padding-top */ + + 1px /* item border-top */ + + calc(0.5 * 27px) /* item margin-bottom */ + + calc(0.1 * 27px) /* item padding-bottom */); + } xx { display: block; background: lime; - padding:32px 32px 16px 32px; - margin: 0 0 32px 16px; + padding: 32px 32px calc(0.2 * 32px) calc(0.4 * 32px); + margin: 0 0 calc(0.4 * 32px) calc(0.2 * 32px); +} +.t9, .t10 { + position: relative; + z-index: 1; + grid: calc(32px + calc(0.4 * 32px) + calc(0.2 * 32px)) 0 / 32px; } </style> </head> @@ -100,15 +117,15 @@ xx { <div class="grid"><span class="h"><x></x></span></div> <div class="grid"><span class="h bb"><x></x></span></div> <div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div> -<div class="grid" style="grid:48px / 122px"><span class="h r"><b40></b40></span></div> +<div class="grid t4"><span class="h r"><b40></b40></span></div> <br> <div class="grid"><span class="v"><x></x></span></div> -<div class="grid t6"><span class="v bb"><x></x></span></div> +<div class="grid"><span class="v bb"><x></x></span></div> <div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div> <div class="grid t8"><span class="v r"><b40></b40></span></div> -<div class="grid"><xx class="v"></xx></div> -<div class="grid v"><xx class="h"></xx></div> +<div class="grid t9"><xx class="v"></xx></div> +<div class="grid v t10"><xx class="h"></xx></div> </body> </html> diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html index 35f596928..183f00e24 100644 --- a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html @@ -36,7 +36,7 @@ var coltest = [ "min-height:40%", "min-height:40%; max-width:30px" ]; var results = [ -"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "24px", "24px", +"24px", "24px", "24px", "24px", "24px", "24px", "80px", "24px", "24px", "24px", "24px", "24px", "24px" ]; var item_width = [ diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html index caef8b031..6533c97b6 100644 --- a/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html +++ b/layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html @@ -36,7 +36,7 @@ var rowtest = [ "min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" ]; var results = [ -"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px" +"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px" ]; var item_height = [ "0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px" diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html index fd2302add..d435f8f3e 100644 --- a/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html +++ b/layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html @@ -54,9 +54,9 @@ br { clear:both; } .c10 { grid-template-columns: minmax(10px,0) 1fr; } #px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; } -#percent-border .c100 { grid-template-columns: 111px 0; } -#percent-border .c100calc100 { grid-template-columns: 100px 11px; } -#percent-border .c10 { grid-template-columns: minmax(11px,0) 0; } +#percent-border .c100 { grid-template-columns: 100px 0; } +#percent-border .c100calc100 { grid-template-columns: 100px 10px; } +#percent-border .c10 { grid-template-columns: minmax(10px,0) 0; } #percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; } #percent-border .c200 { grid-template-columns: 250px; } </style> @@ -99,7 +99,7 @@ var grids = [ "grid c100", "grid c100", "grid", -"grid c200", +"grid c100", "grid c10", "grid c100", "grid c100", @@ -110,7 +110,7 @@ var grids = [ "grid c100", "grid c100", "grid", -"grid c200", +"grid c100", "grid c10", "grid c100", "grid c100", diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html index 8dcdd563b..528d63bc7 100644 --- a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html @@ -36,7 +36,7 @@ var coltest = [ "min-height:40%", "min-height:40%; max-width:30px" ]; var results = [ -"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "20px", "24px", +"360px", "0px", "0px", "0px", "24px", "360px", "80px", "24px", "20px", "24px", "6px", "24px", "24px" ]; var item_width = [ diff --git a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html index 36a2d4920..4eb623b7d 100644 --- a/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html +++ b/layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html @@ -36,7 +36,7 @@ var rowtest = [ "min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%" ]; var results = [ -"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px" +"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px" ]; var item_height = [ "0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px" diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html index eda06249b..da30a8b89 100644 --- a/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html +++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html @@ -17,9 +17,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0; clear:left; } -.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; } +.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; } .r1 { min-width:70px; margin-left: 38px; margin-top: 2px; } -.c3 { min-width:0; margin: 2px 18px 1px 85px; } +.c3 { width:10px; margin: 2px 18px 1px 71px; } span { display: block; @@ -52,21 +52,22 @@ x { display:inline-block; width:10px; height:18px; } <span class="r1"><x> </x></span> <span class="r1"><x> </x></span> </div> + <div class="grid" style="width:436px"> -<span class="c1" style="margin-right:41px"><x> </x></span> +<span class="c1" style="width:374px; margin-right:41px"><x> </x></span> <span class="r1" style="margin-left:5px"><x> </x></span> <span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span> </div> <div class="grid" style="width:500px;"> -<span class="c1" style="min-width:20px;margin-right:448px"><x> </x></span> +<span class="c1" style="width:20px;margin-right:448px"><x> </x></span> <span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> <span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span> <span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> </div> <div class="grid" style="width:583px;"> -<span class="c1" style="margin-right:55px"><x> </x></span> +<span class="c1" style="width:507px; margin-right:55px"><x> </x></span> <span class="r1"><x> </x></span> <span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span> </div> @@ -74,13 +75,13 @@ x { display:inline-block; width:10px; height:18px; } <div class="grid" style="width:389px;"> <span class="c1" style="width:100px"><x> </x></span> <span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> -<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> </div> <div class="grid" style="width:389px;"> <span class="c1" style="width:100px"><x> </x></span> <span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> -<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> </div> diff --git a/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html index 23ca12e7b..eeb4e407f 100644 --- a/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html +++ b/layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html @@ -21,9 +21,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0; clear:left; } -.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; } +.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; } .r1 { min-width:70px; margin-left: 38px; margin-top: 2px; } -.c3 { min-width:0; margin: 2px 18px 1px 85px; } +.c3 { width:10px; margin: 2px 18px 1px 71px; } span { display: block; @@ -56,21 +56,22 @@ x { display:inline-block; width:10px; height:18px; } <span class="r1"><x> </x></span> <span class="r1"><x> </x></span> </div></div> + <div class="wrap"><div class="grid" style="width:436px"> -<span class="c1" style="margin-right:41px"><x> </x></span> +<span class="c1" style="width:374px; margin-right:41px"><x> </x></span> <span class="r1" style="margin-left:5px"><x> </x></span> <span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span> </div></div> <div class="wrap" style="float:left;"><div class="grid" style="width:500px;"> -<span class="c1" style="min-width:20px;margin-right:448px"><x> </x></span> +<span class="c1" style="width:20px;margin-right:448px"><x> </x></span> <span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> <span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span> <span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span> </div></div> <div class="wrap"><div class="grid" style="width:583px;"> -<span class="c1" style="margin-right:55px"><x> </x></span> +<span class="c1" style="width:507px; margin-right:55px"><x> </x></span> <span class="r1"><x> </x></span> <span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </x></span> </div></div> @@ -78,13 +79,13 @@ x { display:inline-block; width:10px; height:18px; } <div class="wrap"><div class="grid" style="width:389px;"> <span class="c1" style="width:100px"><x> </x></span> <span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> -<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> </div></div> <div class="wrap"><div class="grid" style="width:389px;"> <span class="c1" style="width:100px"><x> </x></span> <span class="r1" style="width:300px;margin-left:68px;"><x> </x></span> -<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span> +<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span> </div></div> diff --git a/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html index d9af7e43c..d811447ff 100644 --- a/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html +++ b/layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html @@ -127,10 +127,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px } .gF { - grid-template-columns: 22px - 1px - 1px - auto; + grid-template-columns: 2px + 20px + 2px + 0; } diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html index fb4d15ff8..a55dcc989 100644 --- a/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html +++ b/layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html @@ -69,67 +69,67 @@ a { <div style="float:left"> <div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> <div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(21px/0.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> </div> <div style="float:left" class="maxw"> <div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> <div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> </div> <div style="float:left" class="minw"> <div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> <div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> </div> <div style="float:left"> -<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> </div> <br clear="all"> <div style="float:left" class="maxw"> -<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> </div> <div style="float:left" class="minw"> -<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> </div> diff --git a/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html b/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html index 51f71e662..96365b468 100644 --- a/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html +++ b/layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html @@ -62,71 +62,71 @@ a { <div style="float:left"> <div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> <div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> </div> <br clear="all"> <div style="float:left" class="maxw"> <div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(43.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:35px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> <div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(51.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:41px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> </div> <br clear="all"> <div style="float:left" class="minw"> <div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div> <div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 41px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 21px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div> </div> <div style="float:left"> -<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> </div> <br clear="all"> <div style="float:left" class="maxw"> -<div class="grid" style="grid-template-columns:calc(35px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(57.15px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(46px/.7)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(46px/.7)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:35px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:40px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:46px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 46px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> </div> <div style="float:left" class="minw"> -<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> -<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:26px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div> +<div class="grid" style="grid-template-columns:0 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div> </div> diff --git a/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html index 6446c0ee6..b0ac02bf5 100644 --- a/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html +++ b/layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html @@ -51,8 +51,8 @@ x { display:inline-block; height:10px; width:18px; } <div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div> --> -<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> -<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> +<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> +<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div> <!-- TODO: fails due to broken align:stretch <div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span></div> <div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div> 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 945b43b52..7ad85e1e5 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="align-self:start; justify-self:start; grid-gap:15px"> +<div class="grid" style="width:60px; height:60px; grid-column-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="align-self:start; justify-self:start; grid-gap:15px"> +<div class="grid" style="width:60px; height:60px; grid-column-gap:12px; align-self:start; justify-self:start;"> <span><x></x></span> <span><x></x></span> <span><x></x></span> @@ -141,12 +141,12 @@ br { clear: both; } </div> </div> -<div class="float" style="margin-top:-50px"> -<div class="grid" style="min-width:300%; grid-gap:15px 15px"> - <span><x></x></span> - <span style="margin-left:31px; width:30px"><x></x></span> - <span><x></x></span> - <span style="margin-left:31px; width:30px"><x></x></span> +<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);"> + <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> + <span style="margin-left:-186px; width:30px"><x></x></span> </div> </div> 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 a404a0905..682e0ca38 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,12 +83,16 @@ fill,fit { .zero-progress { grid-row-gap: calc(10px - 1%); - grid-template-rows: [a] 10px repeat(4, [b] minmax(0,auto) [c]) [d]; + grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d]; } .w50.zero-progress { grid-row-gap: calc(10px - 1%); grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d]; } +.mw50.zero-progress { + grid-row-gap: calc(10px - 1%); + grid-template-rows: [a] 10px repeat(4, [b] 0 [c]) [d]; +} </style> </head> <body> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html index 79ac94548..ab07edd5f 100644 --- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html @@ -129,55 +129,55 @@ float { float:left; margin-right:20px; } <body> <float> -<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> <div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> <div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> -<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> </float> <float> -<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> -<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t2 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c3 t2 x2"><x></x><a></a><b></b><f></f><x></x></div> -<div class="grid c1 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x1"><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div> -<div class="grid c1 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 x1"><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t2 x1"><a></a><b></b><f></f><x></x></div> +<div class="grid c3 t2 x1"><a></a><b></b><f></f><x></x></div> -<div class="grid c1 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> -<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> -<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> +<div class="grid c1 t1 x1 p1"><a></a><b></b><f></f></div> +<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div> +<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div> -<div class="grid c1 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> -<div class="grid c2 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> -<div class="grid c3 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> +<div class="grid c1 t2 x0 p1"><a></a><b></b><f></f></div> +<div class="grid c2 t2 x0 p1"><a></a><b></b><f></f></div> +<div class="grid c3 t2 x0 p1"><a></a><b></b><f></f></div> </float> </body> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html index 5f3cebf6a..fd073a072 100644 --- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html @@ -146,7 +146,7 @@ float { float:left; margin-right:20px; } <div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> <div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> @@ -154,23 +154,23 @@ float { float:left; margin-right:20px; } <div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> <div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> </float> <float> -<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div> +<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> +<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div> -<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div> </float> </body> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html index 96f606682..028d9e209 100644 --- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html @@ -139,8 +139,7 @@ float { float:left; margin-right:20px; } .x2 e { left:23px; width:20px; right:auto; } .c2.x2 e { left:20px; } -.t1.c3.x2 e { width:40px; } -.t1.c3.x2 b { width:63px; } +.t1.c3.x2 e { width:20px; } .t1.c3.x2 c { width:20px; right:auto;} .t2.x5 e { left:23px; width:60px; } @@ -159,35 +158,35 @@ float { float:left; margin-right:20px; } <div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div> <div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div> -<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><c></c><d></d><e class="s2"></e><f class="e5"></f><x></x></div> -<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><c></c><d></d><e class="s2e"></e><f class="e5"></f><x></x></div> -<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><d></d><e class="s2"></e><f class="e5"></f><x></x></div> +<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><d></d><e class="s2e"></e><f class="e5"></f><x></x></div> +<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> <div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> <div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> -<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div> <div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> <div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> <div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> -<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div> -<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div> +<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div> </float> <float> -<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div> -<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> -<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div> +<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div> +<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div> </float> </body> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html index e821c8d0e..300be60ca 100644 --- a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html @@ -156,32 +156,32 @@ function testGridTemplateColumns(elem, expected) { } } var a1 = [ -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", -"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", -"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", -"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", "3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", -"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", "3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", +"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px", +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px 3px" +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px" ]; var a2 = [ -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 3px", -"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", -"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", +"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px", -"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 3px" +"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px" ]; function runTest() { var t1 = document.querySelectorAll('.t1'); @@ -195,7 +195,7 @@ function runTest() { document.documentElement.className=''; } -document.addEventListener('MozReftestInvalidate', runTest, false); +document.addEventListener('MozReftestInvalidate', runTest); </script> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html new file mode 100644 index 000000000..04963b45f --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html @@ -0,0 +1,144 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: repeat(auto-fit) with removed tracks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0; +} + +.container { + width: 200px; +} + +.grid { + position: relative; + display: grid; + grid: 10px / repeat(5, 30px); + grid-auto-columns: 2px; + background: lightgrey; + margin-bottom: 4px; + grid-gap: 5px; +} +.distribute { + grid-gap: 0; + align-content: space-around; +} + +span { + background: blue; + height: 10px; +} + +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + grid-column-end: span 1; + background: pink; +} + + </style> +</head> +<body> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 3" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / auto" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 3" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 2" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / auto" class="abs"></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html new file mode 100644 index 000000000..7ed0843af --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html @@ -0,0 +1,160 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Grid Test: repeat(auto-fit) with removed tracks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> + <link rel="match" href="grid-repeat-auto-fill-fit-012-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0; +} + +.container { + width: 200px; +} + +.grid { + position: relative; + display: grid; + grid: 10px / repeat(auto-fit, 30px); + grid-auto-columns: 2px; + background: lightgrey; + margin-bottom: 4px; + grid-gap: 5px; +} +.distribute { + grid-gap: 0; + align-content: space-around; +} + +span { + background: blue; + height: 10px; +} + +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + grid-column-end: span 1; + background: pink; +} + + </style> +</head> +<body> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 3"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 1 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2 / 4"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 4 / 5"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 5" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid"> +<span style="grid-column: 2 / 10" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 3"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 4 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 1 / 5" class="abs"></span> +<span style="grid-column: 1"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 2 / 4"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +<span style="grid-column: 4 / 5"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 5" class="abs"></span> +</div> +</div> + +<div class="container"> +<div class="grid distribute"> +<span style="grid-column: 2 / 10" class="abs"></span> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html new file mode 100644 index 000000000..9b8267f88 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html @@ -0,0 +1,116 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Test Reference: test auto placement in repeat auto-fit grids with leading implicit tracks</title> +<style type="text/css"> +body { + margin: 10px; + font-size: 10px; +} +.wrapper { + display: grid; + width: 600px; + background-color: #f00; +} +.wrapper > * { + background-color: #444; + color: #fff; +} + +.templateFit { + grid-template-columns: 10px 10px repeat(auto-fill, 40px); +} +.templateFixedFit { + grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px); +} +.templateFitFixed { + grid-template-columns: 10px 10px repeat(auto-fill, 40px) 40px; +} +.templateFixedFitFixed { + grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px) 40px; +} + +z { + grid-column: 1; +} +z::after { + content: "Z"; +} + +y { + grid-column: auto; +} +y::after { + content: "Y"; +} + + +b { + grid-column: 3; +} +b::after { + content: "B"; +} + +c { + grid-column: 4; +} +c::after { + content: "C"; +} + +d { + grid-column: 5; +} +d::after { + content: "D"; +} + +e { + grid-column: 6; +} +e::after { + content: "E"; +} + +f { + grid-column: 7; +} +f::after { + content: "F"; +} + +</style> +</head> +<body> + +<div class="wrapper templateFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html new file mode 100644 index 000000000..5a9c05d73 --- /dev/null +++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html @@ -0,0 +1,135 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Test: test placement in repeat auto-fit grids with leading implicit tracks</title> +<link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> +<link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html"> +<style type="text/css"> +body { + margin: 10px; + font-size: 10px; +} +.wrapper { + display: grid; + width: 600px; + background-color: #f00; + grid-auto-columns: 10px; + grid-auto-flow: row; +} +.wrapper > * { + background-color: #444; + color: #fff; +} + +.relative { + position: relative; +} + +.absposchild { + z-index: -1; + position: absolute; + grid-column-end: span 1; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; +} + +.templateFit { + grid-template-columns: repeat(auto-fit, 40px); +} +.templateFixedFit { + grid-template-columns: 20px repeat(auto-fit, 40px); +} +.templateFitFixed { + grid-template-columns: repeat(auto-fit, 40px) 40px; +} +.templateFixedFitFixed { + grid-template-columns: 20px repeat(auto-fit, 40px) 40px; +} + +z { + grid-column: -18; +} +z::after { + content: "Z"; +} + +y { + grid-column: auto; +} +y::after { + content: "Y"; +} + + +b { + grid-column: 3; +} +b::after { + content: "B"; +} + +c { + grid-column: 5; +} +c::after { + content: "C"; +} + +d { + grid-column: 7; +} +d::after { + content: "D"; +} + +e { + grid-column: 9; +} +e::after { + content: "E"; +} + +f { + grid-column: 11; +} +f::after { + content: "F"; +} + +</style> +</head> +<body> + +<div class="wrapper templateFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div> +<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div> +<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div> +<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div> + +</body> +</html> diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html index 7fb00f1da..23dc42b69 100644 --- a/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html @@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px background: grey; } .g1 .d1 { - width: 52px; + width: 0px; } .g2 .d1 { - width: 56px; + width: 0px; } .g2f .d1 { - width: 69px; + width: 0px; } .g3 .d1 { - width: 56px; + width: 0px; } .g4 .d1 { - width: 96px; + width: 80px; } .g4f .d1 { - width: 69px; + width: 0px; } .g5 .d1 { - width: 96px; + width: 80px; } .g6 .d1 { - width: 69px; + width: 0px; } .g6f .d1 { - width: 69px; + width: 0px; } .g7 .d1 { - width: 69px; + width: 0px; } .g8 .t { width: 196px; @@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px width: 200px; } .g9 .d1 { - width: 69px; + width: 0px; } .gA .d1 { - width: 93px; + width: 80px; } .gB .d1 { - width: 93px; + width: 80px; } .gC .d1 { - width: 93px; + width: 80px; } .gD .d1 { - width: 93px; + width: 80px; } .t { grid-column: span 1; border:2px solid; } diff --git a/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html index bc52f4ca0..01739578c 100644 --- a/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html +++ b/layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html @@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px background: grey; } .g1 .d1 { - width: 52px; + width: 0px; } .g2 .d1 { - width: 56px; + width: 0px; } .g2f .d1 { width: 69px; } .g3 .d1 { - width: 56px; + width: 0px; } .g4 .d1 { - width: 96px; + width: 80px; } .g4f .d1 { width: 104px; } .g5 .d1 { - width: 96px; + width: 80px; } .g6 .d1 { - width: 69px; + width: 0px; } .g6f .d1 { width: 89px; } .g7 .d1 { - width: 69px; + width: 0px; } .g8 .t { width: 196px; @@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px width: 200px; } .g9 .d1 { - width: 69px; + width: 0px; } .gA .d1 { - width: 93px; + width: 80px; } .gB .d1 { - width: 93px; + width: 80px; } .gC .d1 { - width: 93px; + width: 80px; } .gD .d1 { - width: 93px; + width: 80px; } .d2 { position: absolute; @@ -84,10 +84,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px background: blue; } .g1 .d2 { - width: 448px; + width: 500px; } .g2 .d2 { - width: 444px; + width: 500px; } .g2f .d2 { right: auto; @@ -95,10 +95,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px width: 35px; } .g3 .d2 { - width: 444px; + width: 500px; } .g4 .d2 { - width: 404px; + width: 420px; } .g4f .d2 { right: auto; @@ -106,10 +106,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px width: 35px; } .g5 .d2 { - width: 404px; + width: 420px; } .g6 .d2 { - width: 431px; + width: 500px; } .g6f .d2 { right: auto; @@ -117,25 +117,25 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px width: 35px; } .g7 .d2 { - width: 431px; + width: 500px; } .g8 .d2 { width: 300px; } .g9 .d2 { - width: 431px; + width: 500px; } .gA .d2 { - width: 407px; + width: 420px; } .gB .d2 { - width: 407px; + width: 420px; } .gC .d2 { - width: 407px; + width: 420px; } .gD .d2 { - width: 407px; + width: 420px; } .t { grid-column: span 1; border:2px solid; } diff --git a/layout/reftests/css-grid/reftest.list b/layout/reftests/css-grid/reftest.list index 3087ca49b..7c5e6be51 100644 --- a/layout/reftests/css-grid/reftest.list +++ b/layout/reftests/css-grid/reftest.list @@ -112,9 +112,9 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p == grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html == grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html == grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html -== grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html +# == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html # bug 1421976 == grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html -== grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html +# == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html # bug 1421976 == grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html == grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html == grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html @@ -184,6 +184,8 @@ skip-if(Android&&isDebugBuild) == grid-row-gap-004.html grid-row-gap-004-ref.htm == grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html == grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html == grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html +== grid-repeat-auto-fill-fit-012.html grid-repeat-auto-fill-fit-012-ref.html +== grid-repeat-auto-fill-fit-013.html grid-repeat-auto-fill-fit-013-ref.html == grid-item-blockifying-001.html grid-item-blockifying-001-ref.html == grid-fragmentation-001.html grid-fragmentation-001-ref.html == grid-fragmentation-002.html grid-fragmentation-002-ref.html diff --git a/layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html b/layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html index 629c0a917..3645fa006 100644 --- a/layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html +++ b/layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html @@ -13,20 +13,20 @@ div.v, div.h { display: block; position: relative; border: 1px dashed silver; - width:92px; - height:60px; + width:74px; + height:24px; } div.h { - width:124px; - height:98px; + width:62px; + height:61.2px; } .h span { - margin: 7px 13px 62px 25px; - padding: 1px 3px 12px 37px; + margin: 7px 13px 32px 12px; + padding: 1px 3px 6px 19px; } .v span { - margin: 7px 13px 30px 12px; - padding: 1px 3px 6px 18px; + margin: 7px 13px 30px 5px; + padding: 1px 3px 2px 7px; } span { diff --git a/layout/style/nsCSSPropList.h b/layout/style/nsCSSPropList.h index 2049f70e8..07db6d3dd 100644 --- a/layout/style/nsCSSPropList.h +++ b/layout/style/nsCSSPropList.h @@ -1499,7 +1499,7 @@ CSS_PROP_COLUMN( CSS_PROPERTY_PARSE_VALUE | CSS_PROPERTY_VALUE_NONNEGATIVE, "", - VARIANT_HL | VARIANT_NORMAL | VARIANT_CALC, + VARIANT_HLP | VARIANT_NORMAL | VARIANT_CALC, nullptr, offsetof(nsStyleColumn, mColumnGap), eStyleAnimType_Coord) diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h index c8182b8f1..b257c6bb5 100644 --- a/layout/style/nsStyleStruct.h +++ b/layout/style/nsStyleStruct.h @@ -3495,7 +3495,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleColumn uint32_t mColumnCount; // [reset] see nsStyleConsts.h nsStyleCoord mColumnWidth; // [reset] coord, auto - nsStyleCoord mColumnGap; // [reset] coord, normal + 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 272931c15..c75f7b498 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -1438,7 +1438,7 @@ var gCSSProperties = { inherited: false, type: CSS_TYPE_LONGHAND, initial_values: [ "normal", "1em", "calc(-2em + 3em)" ], - other_values: [ "2px", "4em", + other_values: [ "2px", "1em", "4em", "3%", "calc(3%)", "calc(1em - 3%)", "calc(2px)", "calc(-2px)", "calc(0px)", @@ -1448,7 +1448,7 @@ var gCSSProperties = { "calc(25px*3)", "calc(3*25px + 5em)", ], - invalid_values: [ "3%", "-1px", "4" ] + invalid_values: [ "-3%", "-1px", "4" ] }, "-moz-column-gap": { domProp: "MozColumnGap", diff --git a/layout/tables/nsTableCellFrame.cpp b/layout/tables/nsTableCellFrame.cpp index 316a96613..dea82ea59 100644 --- a/layout/tables/nsTableCellFrame.cpp +++ b/layout/tables/nsTableCellFrame.cpp @@ -796,12 +796,12 @@ nsTableCellFrame::GetPrefISize(nsRenderingContext *aRenderingContext) } /* virtual */ nsIFrame::IntrinsicISizeOffsetData -nsTableCellFrame::IntrinsicISizeOffsets() +nsTableCellFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis) { - IntrinsicISizeOffsetData result = nsContainerFrame::IntrinsicISizeOffsets(); + IntrinsicISizeOffsetData result = + nsContainerFrame::IntrinsicISizeOffsets(aPercentageBasis); result.hMargin = 0; - result.hPctMargin = 0; WritingMode wm = GetWritingMode(); result.hBorder = GetBorderWidth(wm).IStartEnd(wm); diff --git a/layout/tables/nsTableCellFrame.h b/layout/tables/nsTableCellFrame.h index 6717e1b70..240809850 100644 --- a/layout/tables/nsTableCellFrame.h +++ b/layout/tables/nsTableCellFrame.h @@ -118,7 +118,8 @@ public: virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override; virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override; - virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override; + IntrinsicISizeOffsetData IntrinsicISizeOffsets(nscoord aPercentageBasis = + NS_UNCONSTRAINEDSIZE) override; virtual void Reflow(nsPresContext* aPresContext, ReflowOutput& aDesiredSize, diff --git a/layout/tables/nsTableFrame.cpp b/layout/tables/nsTableFrame.cpp index b9b6ca5fe..272a77406 100644 --- a/layout/tables/nsTableFrame.cpp +++ b/layout/tables/nsTableFrame.cpp @@ -1564,16 +1564,15 @@ nsTableFrame::GetPrefISize(nsRenderingContext *aRenderingContext) } /* virtual */ nsIFrame::IntrinsicISizeOffsetData -nsTableFrame::IntrinsicISizeOffsets() +nsTableFrame::IntrinsicISizeOffsets(nscoord aPercentageBasis) { - IntrinsicISizeOffsetData result = nsContainerFrame::IntrinsicISizeOffsets(); + IntrinsicISizeOffsetData result = + nsContainerFrame::IntrinsicISizeOffsets(aPercentageBasis); result.hMargin = 0; - result.hPctMargin = 0; if (IsBorderCollapse()) { result.hPadding = 0; - result.hPctPadding = 0; WritingMode wm = GetWritingMode(); LogicalMargin outerBC = GetIncludedOuterBCBorder(wm); diff --git a/layout/tables/nsTableFrame.h b/layout/tables/nsTableFrame.h index 7e56c28c1..c7b92d387 100644 --- a/layout/tables/nsTableFrame.h +++ b/layout/tables/nsTableFrame.h @@ -324,7 +324,8 @@ public: // border to the results of these functions. virtual nscoord GetMinISize(nsRenderingContext *aRenderingContext) override; virtual nscoord GetPrefISize(nsRenderingContext *aRenderingContext) override; - virtual IntrinsicISizeOffsetData IntrinsicISizeOffsets() override; + IntrinsicISizeOffsetData IntrinsicISizeOffsets(nscoord aPercentageBasis = + NS_UNCONSTRAINEDSIZE) override; virtual mozilla::LogicalSize ComputeSize(nsRenderingContext* aRenderingContext, |