[css-grid] repeat() syntax should take a <track-list> argument
The repeat() notation used to allow just 1 <track-size> as second argument.
It was recently changed to support <track-list> instead, meaning that we can
pass an arbitrary number of track sizes and line numbers.
It has been working for some time for repeat() if the first argument was
a positive integer, but it requires some changes for the auto repeat cases
(auto-fill and auto-fit).
BUG=619930
Review-Url: https://codereview.chromium.org/2161003003
Cr-Commit-Position: refs/heads/master@{#406540}
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html
index 5132ffc..7afa992ab 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-columns.html
@@ -17,6 +17,7 @@
.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
.item { background-color: cyan; }
@@ -141,4 +142,14 @@
<div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
</div>
+<div class="grid gridMultipleTracks">
+ <div class="item" style="grid-column: a / 2 c" data-offset-x="20" data-offset-y="0" data-expected-width="84" data-expected-height="25"></div>
+ <div class="item" style="grid-column: 3 / e; grid-row: 2;" data-offset-x="52" data-offset-y="25" data-expected-width="72" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+ <div class="item" style="grid-column: a / c" data-offset-x="40" data-offset-y="0" data-expected-width="32" data-expected-height="25"></div>
+ <div class="item" style="grid-column: 3 / last; grid-row: 2;" data-offset-x="92" data-offset-y="25" data-expected-width="115" data-expected-height="25"></div>
+</div>
+
</body>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html
index d81bd21c..ef6c6ec 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fill-rows.html
@@ -21,6 +21,7 @@
.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
.item { background-color: cyan; }
@@ -145,4 +146,14 @@
<div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
+<div class="grid gridMultipleTracks">
+ <div class="item" style="grid-row: a / 2 c" data-offset-y="20" data-offset-x="0" data-expected-height="84" data-expected-width="25"></div>
+ <div class="item" style="grid-row: 3 / e; grid-column: 2;" data-offset-y="52" data-offset-x="25" data-expected-height="72" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+ <div class="item" style="grid-row: a / c" data-offset-y="40" data-offset-x="0" data-expected-height="32" data-expected-width="25"></div>
+ <div class="item" style="grid-row: 3 / last; grid-column: 2;" data-offset-y="92" data-offset-x="25" data-expected-height="115" data-expected-width="25"></div>
+</div>
+
</body>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html
index c292e72..df8dc63 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html
@@ -17,8 +17,10 @@
.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
.item { background-color: cyan; }
+.item:nth-child(2n) { background-color: green; }
.gap { grid-column-gap: 20px; }
@@ -141,4 +143,13 @@
<div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
</div>
+<div class="grid gridMultipleTracks">
+ <div class="item" style="grid-column: e / last;" data-offset-x="52" data-offset-y="0" data-expected-width="148" data-expected-height="25"></div>
+ <div class="item" style="grid-column: start / b;" data-offset-x="0" data-offset-y="25" data-expected-width="52" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+ <div class="item" style="grid-column: c / -1;" data-offset-x="40" data-offset-y="0" data-expected-width="160" data-expected-height="25"></div>
+</div>
+
</body>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html
index ec0d2be..1586265 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-rows.html
@@ -21,8 +21,10 @@
.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
.item { background-color: cyan; }
+.item:nth-child(2n) { background-color: green; }
.gap { grid-row-gap: 20px; }
@@ -145,4 +147,13 @@
<div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
</div>
+<div class="grid gridMultipleTracks">
+ <div class="item" style="grid-row: e / last;" data-offset-y="52" data-offset-x="0" data-expected-height="148" data-expected-width="25"></div>
+ <div class="item" style="grid-row: start / b;" data-offset-y="0" data-offset-x="0" data-expected-height="52" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+ <div class="item" style="grid-row: c / -1;" data-offset-y="40" data-offset-x="0" data-expected-height="160" data-expected-width="25"></div>
+</div>
+
</body>
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt
index 4fe6b4f..e2608b6 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt
@@ -24,6 +24,10 @@
PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] 150px)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [foo bar] 0px [foo bar]"
PASS element.style.gridTemplateRows is "repeat(auto-fit, 24em [foo bar])"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[start] 200px 100px [end start] 200px 100px [end]"
+PASS element.style.gridTemplateColumns is "repeat(auto-fill, [start] 200px 100px [end])"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px [foo a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c bar] 30px"
+PASS element.style.gridTemplateRows is "100px [foo] repeat(auto-fill, [a] 2em [b] 10% [c]) [bar] 3em"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo bar] 0px"
PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] minmax(270px, 1fr))"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]"
@@ -40,6 +44,10 @@
PASS element.style.gridTemplateColumns is "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [e]"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]"
PASS element.style.gridTemplateRows is "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[start] 0px 0px [end start] 0px 0px [end]"
+PASS element.style.gridTemplateColumns is "repeat(auto-fit, [start] 200px 100px [end])"
+PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px [foo a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c bar] 30px"
+PASS element.style.gridTemplateRows is "100px [foo] repeat(auto-fit, [a] 2em [b] 10% [c]) [bar] 3em"
Test invalid repeat syntax.
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html
index 3b61a85..2c32870 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set.html
@@ -16,10 +16,12 @@
testGridDefinitionsSetJSValues("repeat(auto-fill, minmax(50px, 100px)) repeat(2, 250px)", "repeat(1, 450px) repeat(auto-fill, minmax(max-content, 5em) [bar]) repeat(2, [foo] 1em)", "100px 100px 100px 250px 250px", "450px 50px [bar] 50px [bar foo] 10px [foo] 10px", "repeat(auto-fill, minmax(50px, 100px)) 250px 250px", "450px repeat(auto-fill, minmax(max-content, 5em) [bar]) [foo] 1em [foo] 1em");
testGridDefinitionsSetJSValues("[start] 10% repeat(auto-fill, [foo bar] 200px) [end]", "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end]", "[start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]", "75px [prev] 200px [foo bar next] 150px [last end]");
testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] 150px)", "repeat(auto-fit, 24em [foo bar])", "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px", "0px [foo bar] 0px [foo bar]");
+ testGridDefinitionsSetJSValues("repeat(auto-fill, [start] 200px 100px [end])", "100px [foo] repeat(auto-fill, [a] 2em [b] 10% [c]) [bar] 3em", "[start] 200px 100px [end start] 200px 100px [end]", "100px [foo a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c bar] 30px");
testGridDefinitionsSetJSValues("repeat(auto-fit, [foo bar] minmax(270px, 1fr))", "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])", "[foo bar] 0px [foo bar] 0px", "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]");
testGridDefinitionsSetJSValues("repeat(auto-fit, minmax(300px, min-content)) repeat(2, 20px)", "repeat(1, 10%) repeat(auto-fit, minmax(30em, max-content) [bar]) repeat(2, [foo] 1em)", "0px 0px 20px 20px", "60px 0px [bar foo] 10px [foo] 10px", "repeat(auto-fit, minmax(300px, min-content)) 20px 20px", "10% repeat(auto-fit, minmax(30em, max-content) [bar]) [foo] 1em [foo] 1em");
testGridDefinitionsSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]", "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]", "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]");
testGridDefinitionsSetJSValues("[a] repeat(auto-fit, [z] 100px [y]) repeat(1, [b] 30px [c]) 20px [e]", "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])", "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c] 20px [e]", "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]", "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c] 20px [e]");
+ testGridDefinitionsSetJSValues("repeat(auto-fit, [start] 200px 100px [end])", "100px [foo] repeat(auto-fit, [a] 2em [b] 10% [c]) [bar] 3em", "[start] 0px 0px [end start] 0px 0px [end]", "100px [foo a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c bar] 30px");
debug("");
debug("Test invalid repeat syntax.");
@@ -33,14 +35,14 @@
testInvalidSyntax("repeat(auto-fill, 1fr)");
testInvalidSyntax("repeat(auto-fill, [bar] auto)");
- testInvalidSyntax("repeat(auto-fill, 20px 10px)");
- testInvalidSyntax("repeat(auto-fill, 20px [foo bar] 10px)");
+ testInvalidSyntax("repeat(auto-fill, 20px min-content)");
+ testInvalidSyntax("repeat(auto-fill, auto [foo bar] 10px)");
testInvalidSyntax("repeat(auto-fill,)");
testInvalidSyntax("repeat(auto-fill, [foo])");
testInvalidSyntax("repeat(auto-fit, 1fr)");
testInvalidSyntax("repeat(auto-fit, [bar] auto)");
- testInvalidSyntax("repeat(auto-fit, 20px 10px)");
- testInvalidSyntax("repeat(auto-fit, 20px [foo bar] 10px)");
+ testInvalidSyntax("repeat(auto-fit, minmax(20px, 30px) auto)");
+ testInvalidSyntax("repeat(auto-fit, max-content 2em)");
testInvalidSyntax("repeat(auto-fit,)");
testInvalidSyntax("repeat(auto-fit, [foo])");
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt
index deb7d264..54dce41 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt
@@ -26,6 +26,8 @@
PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('grid-template-rows') is "44px 10px 10px"
PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('grid-template-columns') is "250px 250px 120px [last]"
PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('grid-template-rows') is "10px 10px [end] 0px"
+PASS window.getComputedStyle(multipleTrackRepeat, '').getPropertyValue('grid-template-columns') is "[start] 20px [a] 20px 0px [b a] 20px 0px [b] 200px [c] 0px [end]"
+PASS window.getComputedStyle(multipleTrackRepeat, '').getPropertyValue('grid-template-rows') is "0px [a] 0px [b c] 20px [d] 0px [a] 0px [b c] 20px [d] 0px [a] 0px [b c] 20px [d e] 16px"
Test invalid repeat syntax.
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
@@ -38,6 +40,8 @@
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS successfullyParsed is true
TEST COMPLETE
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html
index 8f0fb4d1..ba0ee177 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html
@@ -68,6 +68,12 @@
grid-template-rows: repeat(2, 10px) [end] auto;
grid-template-columns: repeat(2, 250px) 15% [last];
}
+
+.multipleTrackRepeat {
+ grid-template-rows: repeat(3, min-content [a] max-content [b c] 20px [d]) [e] 1em;
+ grid-template-columns: [start] 20px repeat(2, [a] minmax(20px, min-content) max-content [b]) 200px [c] min-content [end];
+}
+
</style>
<script src="../../resources/js-test.js"></script>
</head>
@@ -94,6 +100,7 @@
<div class="gridItem"></div>
</div>
<div class="grid definite mixNonRepeatAfterRepeat alignContentStart" id="mixNonRepeatAfterRepeat"></div>
+<div class="grid multipleTrackRepeat" id="multipleTrackRepeat"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
@@ -111,6 +118,7 @@
testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "[start] 250px 250px", "[start] 10px 10px");
testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "[start] 140px 250px 250px", "44px 10px 10px");
testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px [last]", "10px 10px [end] 0px");
+ testGridDefinitionsValues(document.getElementById("multipleTrackRepeat"), "[start] 20px [a] 20px 0px [b a] 20px 0px [b] 200px [c] 0px [end]", "0px [a] 0px [b c] 20px [d] 0px [a] 0px [b c] 20px [d] 0px [a] 0px [b c] 20px [d e] 16px");
debug("");
debug("Test invalid repeat syntax.");
@@ -130,8 +138,10 @@
testInvalidSyntax("repeat(1, [foo])");
testInvalidSyntax("repeat(1, )");
testInvalidSyntax("repeat(1)");
+ testInvalidSyntax("repeat(3, [a] [a] 100px 200px)");
// Nesting is no allowed.
testInvalidSyntax("repeat(2, repeat(1, auto))");
+ testInvalidSyntax("repeat(2, [a] 100px 200px repeat(2, 20px))");
</script>
</body>
</html>
diff --git a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
index ae4ba1f..d6d2f3e 100644
--- a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
+++ b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
@@ -744,11 +744,12 @@
STACK_ALLOCATED();
WTF_MAKE_NONCOPYABLE(OrderedNamedLinesCollector);
public:
- OrderedNamedLinesCollector(const ComputedStyle& style, bool isRowAxis, size_t repetitions)
+ OrderedNamedLinesCollector(const ComputedStyle& style, bool isRowAxis, size_t autoRepeatTracksCount)
: m_orderedNamedGridLines(isRowAxis ? style.orderedNamedGridColumnLines() : style.orderedNamedGridRowLines())
, m_orderedNamedAutoRepeatGridLines(isRowAxis ? style.autoRepeatOrderedNamedGridColumnLines() : style.autoRepeatOrderedNamedGridRowLines())
, m_insertionPoint(isRowAxis ? style.gridAutoRepeatColumnsInsertionPoint() : style.gridAutoRepeatRowsInsertionPoint())
- , m_repetitions(repetitions)
+ , m_autoRepeatTotalTracks(autoRepeatTracksCount)
+ , m_autoRepeatTrackListLength(isRowAxis ? style.gridAutoRepeatColumns().size() : style.gridAutoRepeatRows().size())
{
}
@@ -763,7 +764,8 @@
const OrderedNamedGridLines& m_orderedNamedGridLines;
const OrderedNamedGridLines& m_orderedNamedAutoRepeatGridLines;
size_t m_insertionPoint;
- size_t m_repetitions;
+ size_t m_autoRepeatTotalTracks;
+ size_t m_autoRepeatTrackListLength;
};
void OrderedNamedLinesCollector::appendLines(CSSGridLineNamesValue& lineNamesValue, size_t index, NamedLinesType type) const
@@ -785,9 +787,10 @@
return;
}
- DCHECK(m_repetitions);
- if (i > m_insertionPoint + m_repetitions) {
- appendLines(lineNamesValue, i - (m_repetitions - 1), NamedLines);
+ DCHECK(m_autoRepeatTotalTracks);
+
+ if (i > m_insertionPoint + m_autoRepeatTotalTracks) {
+ appendLines(lineNamesValue, i - (m_autoRepeatTotalTracks - 1), NamedLines);
return;
}
@@ -797,14 +800,16 @@
return;
}
- if (i == m_insertionPoint + m_repetitions) {
- appendLines(lineNamesValue, 1, AutoRepeatNamedLines);
+ if (i == m_insertionPoint + m_autoRepeatTotalTracks) {
+ appendLines(lineNamesValue, m_autoRepeatTrackListLength, AutoRepeatNamedLines);
appendLines(lineNamesValue, m_insertionPoint + 1, NamedLines);
return;
}
- appendLines(lineNamesValue, 1, AutoRepeatNamedLines);
- appendLines(lineNamesValue, 0, AutoRepeatNamedLines);
+ size_t autoRepeatIndexInFirstRepetition = (i - m_insertionPoint) % m_autoRepeatTrackListLength;
+ if (!autoRepeatIndexInFirstRepetition && i > m_insertionPoint)
+ appendLines(lineNamesValue, m_autoRepeatTrackListLength, AutoRepeatNamedLines);
+ appendLines(lineNamesValue, autoRepeatIndexInFirstRepetition, AutoRepeatNamedLines);
}
static void addValuesForNamedGridLinesAtIndex(OrderedNamedLinesCollector& collector, size_t i, CSSValueList& list)
@@ -837,8 +842,8 @@
if (trackListIsEmpty)
return CSSPrimitiveValue::createIdentifier(CSSValueNone);
- size_t repetitions = isLayoutGrid ? toLayoutGrid(layoutObject)->autoRepeatCountForDirection(direction) : 0;
- OrderedNamedLinesCollector collector(style, isRowAxis, repetitions);
+ size_t autoRepeatTotalTracks = isLayoutGrid ? toLayoutGrid(layoutObject)->autoRepeatCountForDirection(direction) : 0;
+ OrderedNamedLinesCollector collector(style, isRowAxis, autoRepeatTotalTracks);
CSSValueList* list = CSSValueList::createSpaceSeparated();
size_t insertionIndex;
if (isLayoutGrid) {
diff --git a/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp b/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
index 4860e464..6a5ef8dd 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
+++ b/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
@@ -3448,8 +3448,6 @@
size_t numberOfTracks = 0;
while (!args.atEnd()) {
- if (isAutoRepeat && numberOfTracks)
- return false;
CSSValue* trackSize = consumeGridTrackSize(args, cssParserMode);
if (!trackSize)
return false;
diff --git a/third_party/WebKit/Source/core/layout/LayoutGrid.cpp b/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
index c310533d..3210271 100644
--- a/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutGrid.cpp
@@ -850,12 +850,12 @@
const Vector<GridTrackSize>& autoRepeatTrackStyles = isRowAxis ? styleRef().gridAutoRepeatColumns() : styleRef().gridAutoRepeatRows();
const GridTrackSize& autoTrackSize = isRowAxis ? styleRef().gridAutoColumns() : styleRef().gridAutoRows();
size_t insertionPoint = isRowAxis ? styleRef().gridAutoRepeatColumnsInsertionPoint() : styleRef().gridAutoRepeatRowsInsertionPoint();
- size_t repetitions = autoRepeatCountForDirection(direction);
+ size_t autoRepeatTracksCount = autoRepeatCountForDirection(direction);
// We should not use GridPositionsResolver::explicitGridXXXCount() for this because the
// explicit grid might be larger than the number of tracks in grid-template-rows|columns (if
// grid-template-areas is specified for example).
- size_t explicitTracksCount = trackStyles.size() + repetitions;
+ size_t explicitTracksCount = trackStyles.size() + autoRepeatTracksCount;
int untranslatedIndexAsInt = translatedIndex + (isRowAxis ? m_smallestColumnStart : m_smallestRowStart);
if (untranslatedIndexAsInt < 0)
@@ -865,13 +865,15 @@
if (untranslatedIndex >= explicitTracksCount)
return autoTrackSize;
- if (LIKELY(!repetitions) || untranslatedIndex < insertionPoint)
+ if (LIKELY(!autoRepeatTracksCount) || untranslatedIndex < insertionPoint)
return trackStyles[untranslatedIndex];
- if (untranslatedIndex < (insertionPoint + repetitions))
- return autoRepeatTrackStyles[0];
+ if (untranslatedIndex < (insertionPoint + autoRepeatTracksCount)) {
+ size_t autoRepeatLocalIndex = untranslatedIndexAsInt - insertionPoint;
+ return autoRepeatTrackStyles[autoRepeatLocalIndex % autoRepeatTrackStyles.size()];
+ }
- return trackStyles[untranslatedIndex - repetitions];
+ return trackStyles[untranslatedIndex - autoRepeatTracksCount];
}
GridTrackSize LayoutGrid::gridTrackSize(GridTrackSizingDirection direction, size_t translatedIndex, SizingOperation sizingOperation) const
@@ -1384,15 +1386,11 @@
{
bool isRowAxis = direction == ForColumns;
const auto& autoRepeatTracks = isRowAxis ? styleRef().gridAutoRepeatColumns() : styleRef().gridAutoRepeatRows();
+ size_t autoRepeatTrackListLength = autoRepeatTracks.size();
- if (!autoRepeatTracks.size())
+ if (!autoRepeatTrackListLength)
return 0;
- DCHECK_EQ(autoRepeatTracks.size(), static_cast<size_t>(1));
- auto autoTrackSize = autoRepeatTracks.at(0);
- DCHECK(autoTrackSize.minTrackBreadth().isLength());
- DCHECK(!autoTrackSize.minTrackBreadth().isFlex());
-
LayoutUnit availableSize = isRowAxis ? availableLogicalWidth() : computeContentLogicalHeight(MainOrPreferredSize, styleRef().logicalHeight(), LayoutUnit(-1));
if (availableSize == -1) {
const Length& maxLength = isRowAxis ? styleRef().logicalMaxWidth() : styleRef().logicalMaxHeight();
@@ -1412,21 +1410,27 @@
if (indefiniteMainAndMaxSizes) {
const Length& minSize = isRowAxis ? styleRef().logicalMinWidth() : styleRef().logicalMinHeight();
if (!minSize.isSpecified())
- return 1;
+ return autoRepeatTrackListLength;
LayoutUnit containingBlockAvailableSize = isRowAxis ? containingBlockLogicalWidthForContent() : containingBlockLogicalHeightForContent(ExcludeMarginBorderPadding);
availableSize = valueForLength(minSize, containingBlockAvailableSize);
needsToFulfillMinimumSize = true;
}
- bool hasDefiniteMaxTrackSizingFunction = autoTrackSize.maxTrackBreadth().isLength() && !autoTrackSize.maxTrackBreadth().isContentSized();
- const Length trackLength = hasDefiniteMaxTrackSizingFunction ? autoTrackSize.maxTrackBreadth().length() : autoTrackSize.minTrackBreadth().length();
+ LayoutUnit autoRepeatTracksSize;
+ for (auto autoTrackSize : autoRepeatTracks) {
+ DCHECK(autoTrackSize.minTrackBreadth().isLength());
+ DCHECK(!autoTrackSize.minTrackBreadth().isFlex());
+ bool hasDefiniteMaxTrackSizingFunction = autoTrackSize.maxTrackBreadth().isLength() && !autoTrackSize.maxTrackBreadth().isContentSized();
+ auto trackLength = hasDefiniteMaxTrackSizingFunction ? autoTrackSize.maxTrackBreadth().length() : autoTrackSize.minTrackBreadth().length();
+ autoRepeatTracksSize += valueForLength(trackLength, availableSize);
+ }
// For the purpose of finding the number of auto-repeated tracks, the UA must floor the track size to a UA-specified
// value to avoid division by zero. It is suggested that this floor be 1px.
- LayoutUnit autoRepeatTrackSize = std::max<LayoutUnit>(LayoutUnit(1), valueForLength(trackLength, availableSize));
+ autoRepeatTracksSize = std::max<LayoutUnit>(LayoutUnit(1), autoRepeatTracksSize);
// There will be always at least 1 auto-repeat track, so take it already into account when computing the total track size.
- LayoutUnit tracksSize = autoRepeatTrackSize;
+ LayoutUnit tracksSize = autoRepeatTracksSize;
const Vector<GridTrackSize>& trackSizes = isRowAxis ? styleRef().gridTemplateColumns() : styleRef().gridTemplateRows();
for (const auto& track : trackSizes) {
@@ -1442,9 +1446,9 @@
LayoutUnit freeSpace = availableSize - tracksSize;
if (freeSpace <= 0)
- return 1;
+ return autoRepeatTrackListLength;
- size_t repetitions = 1 + (freeSpace / (autoRepeatTrackSize + gapSize)).toInt();
+ size_t repetitions = 1 + (freeSpace / (autoRepeatTracksSize + gapSize)).toInt();
// Provided the grid container does not have a definite size or max-size in the relevant axis,
// if the min size is definite then the number of repetitions is the largest possible positive
@@ -1452,7 +1456,7 @@
if (needsToFulfillMinimumSize)
++repetitions;
- return repetitions;
+ return repetitions * autoRepeatTrackListLength;
}
@@ -1465,9 +1469,8 @@
std::unique_ptr<OrderedTrackIndexSet> emptyTrackIndexes;
size_t insertionPoint = isRowAxis ? styleRef().gridAutoRepeatColumnsInsertionPoint() : styleRef().gridAutoRepeatRowsInsertionPoint();
- size_t repetitions = autoRepeatCountForDirection(direction);
size_t firstAutoRepeatTrack = insertionPoint + std::abs(isRowAxis ? m_smallestColumnStart : m_smallestRowStart);
- size_t lastAutoRepeatTrack = firstAutoRepeatTrack + repetitions;
+ size_t lastAutoRepeatTrack = firstAutoRepeatTrack + autoRepeatCountForDirection(direction);
if (m_gridItemArea.isEmpty()) {
emptyTrackIndexes = wrapUnique(new OrderedTrackIndexSet);
@@ -1494,7 +1497,7 @@
ASSERT(m_gridItemArea.isEmpty());
if (sizingOperation == IntrinsicSizeComputation)
- m_autoRepeatColumns = styleRef().gridAutoRepeatColumns().isEmpty() ? 0 : 1;
+ m_autoRepeatColumns = styleRef().gridAutoRepeatColumns().size();
else
m_autoRepeatColumns = computeAutoRepeatTracksCount(ForColumns);
m_autoRepeatRows = computeAutoRepeatTracksCount(ForRows);
diff --git a/third_party/WebKit/Source/core/style/GridPositionsResolver.cpp b/third_party/WebKit/Source/core/style/GridPositionsResolver.cpp
index 23cb2441..e868749 100644
--- a/third_party/WebKit/Source/core/style/GridPositionsResolver.cpp
+++ b/third_party/WebKit/Source/core/style/GridPositionsResolver.cpp
@@ -22,7 +22,7 @@
NamedLineCollection::NamedLineCollection(const ComputedStyle& gridContainerStyle, const String& namedLine, GridTrackSizingDirection direction, size_t lastLine, size_t autoRepeatTracksCount)
: m_lastLine(lastLine)
- , m_repetitions(autoRepeatTracksCount)
+ , m_autoRepeatTotalTracks(autoRepeatTracksCount)
{
bool isRowAxis = direction == ForColumns;
const NamedGridLinesMap& gridLineNames = isRowAxis ? gridContainerStyle.namedGridColumnLines() : gridContainerStyle.namedGridRowLines();
@@ -39,6 +39,8 @@
}
m_insertionPoint = isRowAxis ? gridContainerStyle.gridAutoRepeatColumnsInsertionPoint() : gridContainerStyle.gridAutoRepeatRowsInsertionPoint();
+
+ m_autoRepeatTrackListLength = isRowAxis ? gridContainerStyle.gridAutoRepeatColumns().size() : gridContainerStyle.gridAutoRepeatRows().size();
}
bool NamedLineCollection::isValidNamedLineOrArea(const String& namedLine, const ComputedStyle& gridContainerStyle, GridPositionSide side)
@@ -67,22 +69,24 @@
if (!m_autoRepeatNamedLinesIndexes || line < m_insertionPoint)
return m_namedLinesIndexes ? m_namedLinesIndexes->find(line) : kNotFound;
- if (line <= (m_insertionPoint + m_repetitions)) {
+ if (line <= (m_insertionPoint + m_autoRepeatTotalTracks)) {
size_t localIndex = line - m_insertionPoint;
+ size_t indexInFirstRepetition = localIndex % m_autoRepeatTrackListLength;
+ if (indexInFirstRepetition)
+ return m_autoRepeatNamedLinesIndexes->find(indexInFirstRepetition);
+
// The line names defined in the last line are also present in the first line of the next
- // repetition (if any). Same for the line names defined in the first line. Note that there
- // is only one auto-repeated track allowed by the syntax, that's why it's enough to store
- // indexes 0 and 1 (before and after the track size).
- if (localIndex == m_repetitions)
- return m_autoRepeatNamedLinesIndexes->find(static_cast<size_t>(1));
+ // repetition (if any). Same for the line names defined in the first line.
+ if (localIndex == m_autoRepeatTotalTracks)
+ return m_autoRepeatNamedLinesIndexes->find(m_autoRepeatTrackListLength);
size_t position = m_autoRepeatNamedLinesIndexes->find(static_cast<size_t>(0));
if (position != kNotFound)
return position;
- return localIndex == 0 ? kNotFound : m_autoRepeatNamedLinesIndexes->find(static_cast<size_t>(1));
+ return localIndex == 0 ? kNotFound : m_autoRepeatNamedLinesIndexes->find(m_autoRepeatTrackListLength);
}
- return m_namedLinesIndexes ? m_namedLinesIndexes->find(line - (m_repetitions - 1)) : kNotFound;
+ return m_namedLinesIndexes ? m_namedLinesIndexes->find(line - (m_autoRepeatTotalTracks - 1)) : kNotFound;
}
bool NamedLineCollection::contains(size_t line)
@@ -99,7 +103,7 @@
if (!m_autoRepeatNamedLinesIndexes) {
if (m_insertionPoint == 0 || m_insertionPoint < m_namedLinesIndexes->at(firstLine))
- return m_namedLinesIndexes->at(firstLine) + (m_repetitions ? m_repetitions - 1 : 0);
+ return m_namedLinesIndexes->at(firstLine) + (m_autoRepeatTotalTracks ? m_autoRepeatTotalTracks - 1 : 0);
return m_namedLinesIndexes->at(firstLine);
}
@@ -107,7 +111,7 @@
return m_autoRepeatNamedLinesIndexes->at(firstLine) + m_insertionPoint;
if (m_insertionPoint == 0)
- return m_autoRepeatNamedLinesIndexes->at(firstLine);
+ return std::min(m_namedLinesIndexes->at(firstLine) + m_autoRepeatTotalTracks, m_autoRepeatNamedLinesIndexes->at(firstLine));
return std::min(m_namedLinesIndexes->at(firstLine), m_autoRepeatNamedLinesIndexes->at(firstLine) + m_insertionPoint);
}
diff --git a/third_party/WebKit/Source/core/style/GridPositionsResolver.h b/third_party/WebKit/Source/core/style/GridPositionsResolver.h
index b53f746..b33d862b 100644
--- a/third_party/WebKit/Source/core/style/GridPositionsResolver.h
+++ b/third_party/WebKit/Source/core/style/GridPositionsResolver.h
@@ -44,7 +44,8 @@
size_t m_insertionPoint;
size_t m_lastLine;
- size_t m_repetitions;
+ size_t m_autoRepeatTotalTracks;
+ size_t m_autoRepeatTrackListLength;
};
// This is a utility class with all the code related to grid items positions resolution.
