summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMoonchild <moonchild@palemoon.org>2019-09-29 13:54:29 +0200
committerGitHub <noreply@github.com>2019-09-29 13:54:29 +0200
commit206c149adcb9f187307b412b0f8987e6aaaba9c8 (patch)
treed520c6af8bea76fef65321a074dc59d1a88ccff0
parent81db54a1cbbaf9a8cbc64fcf8b232b0f1f13d14f (diff)
parent30d65c382f9404a31c46c9976a3b170273fd9509 (diff)
downloadUXP-206c149adcb9f187307b412b0f8987e6aaaba9c8.tar
UXP-206c149adcb9f187307b412b0f8987e6aaaba9c8.tar.gz
UXP-206c149adcb9f187307b412b0f8987e6aaaba9c8.tar.lz
UXP-206c149adcb9f187307b412b0f8987e6aaaba9c8.tar.xz
UXP-206c149adcb9f187307b412b0f8987e6aaaba9c8.zip
Merge pull request #1237 from g4jc/css-work
CSS Grid Improvements
-rw-r--r--devtools/shared/css/generated/properties-db.js6
-rw-r--r--dom/grid/GridLines.cpp42
-rw-r--r--dom/grid/test/chrome.ini1
-rw-r--r--dom/grid/test/chrome/test_grid_implicit.html63
-rw-r--r--dom/grid/test/chrome/test_grid_line_numbers.html101
-rw-r--r--layout/base/LayoutConstants.h31
-rw-r--r--layout/base/moz.build4
-rw-r--r--layout/base/nsLayoutUtils.cpp76
-rw-r--r--layout/base/nsLayoutUtils.h95
-rw-r--r--layout/generic/nsColumnSetFrame.cpp19
-rw-r--r--layout/generic/nsFrame.cpp93
-rw-r--r--layout/generic/nsFrame.h3
-rw-r--r--layout/generic/nsGridContainerFrame.cpp851
-rw-r--r--layout/generic/nsIFrame.h31
-rw-r--r--layout/generic/test/mochitest.ini4
-rw-r--r--layout/generic/test/test_grid_track_sizing_algo_001.html1641
-rw-r--r--layout/generic/test/test_grid_track_sizing_algo_002.html1641
-rw-r--r--layout/reftests/bugs/403519-2-ref.html2
-rw-r--r--layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html51
-rw-r--r--layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html2
-rw-r--r--layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html2
-rw-r--r--layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html10
-rw-r--r--layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html2
-rw-r--r--layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html2
-rw-r--r--layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html15
-rw-r--r--layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html15
-rw-r--r--layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html8
-rw-r--r--layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html78
-rw-r--r--layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html78
-rw-r--r--layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html4
-rw-r--r--layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html16
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html6
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html64
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html22
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html33
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html34
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html144
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html160
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html116
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html135
-rw-r--r--layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html30
-rw-r--r--layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html48
-rw-r--r--layout/reftests/css-grid/reftest.list6
-rw-r--r--layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html16
-rw-r--r--layout/style/nsCSSPropList.h2
-rw-r--r--layout/style/nsStyleStruct.h2
-rw-r--r--layout/style/test/property_database.js4
-rw-r--r--layout/tables/nsTableCellFrame.cpp6
-rw-r--r--layout/tables/nsTableCellFrame.h3
-rw-r--r--layout/tables/nsTableFrame.cpp7
-rw-r--r--layout/tables/nsTableFrame.h3
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>&nbsp;</div></td>
+ <td colspan="2"><div>&nbsp;</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>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
+
<div class="grid" style="width:436px">
-<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
+<span class="c1" style="width:374px; margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
-<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
+<span class="c1" style="width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:583px;">
-<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
+<span class="c1" style="width:507px; margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</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>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
-<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
-<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</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>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div></div>
+
<div class="wrap"><div class="grid" style="width:436px">
-<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
+<span class="c1" style="width:374px; margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</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>&nbsp;</x></span>
+<span class="c1" style="width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:583px;">
-<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
+<span class="c1" style="width:507px; margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</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>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
-<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
-<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
+<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</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,