Diff
Modified: trunk/LayoutTests/ChangeLog (196933 => 196934)
--- trunk/LayoutTests/ChangeLog 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/ChangeLog 2016-02-22 14:08:41 UTC (rev 196934)
@@ -1,5 +1,44 @@
2016-02-22 Manuel Rego Casasnovas <r...@igalia.com>
+ [css-grid] Swap columns and rows in grid-template shorthand
+ https://bugs.webkit.org/show_bug.cgi?id=154472
+
+ Reviewed by Darin Adler.
+
+ The spec was modified past December to change the order of
+ columns and rows in the grid-template shorthand:
+ https://github.com/w3c/csswg-drafts/commit/f6c7691679a519017a80ebae44fd86c3eae5c5f9
+
+ Updated the parsing and modified the tests to follow the new syntax.
+
+ * fast/css-grid-layout/absolute-positioning-definite-sizes.html:
+ * fast/css-grid-layout/flex-content-distribution.html:
+ * fast/css-grid-layout/grid-align-content-vertical-lr.html:
+ * fast/css-grid-layout/grid-align-content-vertical-rl.html:
+ * fast/css-grid-layout/grid-align-content.html:
+ * fast/css-grid-layout/grid-gutters-and-alignment.html:
+ * fast/css-grid-layout/grid-gutters-and-flex-content.html:
+ * fast/css-grid-layout/grid-gutters-and-tracks.html:
+ * fast/css-grid-layout/grid-justify-content-vertical-lr.html:
+ * fast/css-grid-layout/grid-justify-content-vertical-rl.html:
+ * fast/css-grid-layout/grid-justify-content.html:
+ * fast/css-grid-layout/grid-shorthand-get-set.html:
+ * fast/css-grid-layout/grid-template-shorthand-get-set.html:
+ * fast/css-grid-layout/relayout-align-items-changed.html:
+ * fast/css-grid-layout/relayout-align-self-changed.html:
+ * fast/css-grid-layout/relayout-indefinite-heights.html:
+ * fast/css-grid-layout/relayout-justify-items-changed.html:
+ * fast/css-grid-layout/relayout-justify-self-changed.html:
+ * fast/repaint/align-items-overflow-change.html:
+ * fast/repaint/align-self-change.html:
+ * fast/repaint/align-self-overflow-change.html:
+ * fast/repaint/justify-items-change.html:
+ * fast/repaint/justify-items-overflow-change.html:
+ * fast/repaint/justify-self-change.html:
+ * fast/repaint/justify-self-overflow-change.html:
+
+2016-02-22 Manuel Rego Casasnovas <r...@igalia.com>
+
[css-grid] Swap columns and rows in grid shorthand
https://bugs.webkit.org/show_bug.cgi?id=154449
Modified: trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -2,7 +2,7 @@
<link href="" rel="stylesheet">
<style>
.grid {
- -webkit-grid-template: 1fr / 50px 1fr;
+ -webkit-grid-template: 50px 1fr / 1fr;
position: absolute;
left: 50px;
Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -4,13 +4,13 @@
<link href="" rel="stylesheet">
<style>
.freeSpaceForColumnsGrid {
- -webkit-grid-template: minmax(20px, 0.7fr) / 100%;
+ -webkit-grid-template: 100% / minmax(20px, 0.7fr);
width: 50px;
height: 100px;
}
.freeSpaceForRowsGrid {
- -webkit-grid-template: 100% / minmax(20px, 0.7fr);
+ -webkit-grid-template: minmax(20px, 0.7fr) / 100%;
width: 50px;
height: 100px;
}
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -9,7 +9,7 @@
}
.grid {
- -webkit-grid: 50px 50px / 100px 100px;
+ -webkit-grid: 100px 100px / 50px 50px;
position: relative;
width: 300px;
height: 200px;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -9,7 +9,7 @@
}
.grid {
- -webkit-grid: 50px 50px / 100px 100px;
+ -webkit-grid: 100px 100px / 50px 50px;
position: relative;
width: 300px;
height: 200px;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -10,7 +10,7 @@
}
.grid {
- -webkit-grid: 50px 50px / 100px 100px;
+ -webkit-grid: 100px 100px / 50px 50px;
position: relative;
width: 200px;
height: 300px;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -14,7 +14,7 @@
}
.grid50And100 {
- -webkit-grid: 50px 50px / 100px 100px;
+ -webkit-grid: 100px 100px / 50px 50px;
width: 200px;
height: 300px;
position: relative; /* For the <p> comments */
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -5,13 +5,13 @@
<script src=""
<script src=""
<style>
-.gridMaxFlexContent { -webkit-grid-template: minmax(30px, 2fr) / 50px; }
-.gridTwoDoubleMaxFlexContent { -webkit-grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
-.gridIgnoreSecondGridItem { -webkit-grid-template: minmax(300px, 3fr) minmax(150px, 1fr) / 50px; }
+.gridMaxFlexContent { -webkit-grid-template: 50px / minmax(30px, 2fr); }
+.gridTwoDoubleMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
+.gridIgnoreSecondGridItem { -webkit-grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); }
-.gridRowsMaxFlexContent { -webkit-grid-template: 50px / minmax(30px, 2fr); }
-.gridRowsTwoMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 1fr) minmax(10px, 2fr); }
-.gridRowsTwoDoubleMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
+.gridRowsMaxFlexContent { -webkit-grid-template: minmax(30px, 2fr) / 50px; }
+.gridRowsTwoMaxFlexContent { -webkit-grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
+.gridRowsTwoDoubleMaxFlexContent { -webkit-grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
.gridMinMaxFlexFixedAndMinContentAndFixed { -webkit-grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px; }
.gridMinContentAndMinMaxFixedMinContentAndFlex { -webkit-grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr; }
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -18,7 +18,7 @@
.gridMultipleCols { -webkit-grid-template-columns: 30px minmax(10px, 50px) 80px; }
.gridMultipleRows { -webkit-grid-template-rows: 90px 70px -webkit-min-content; }
.gridAutoAuto { -webkit-grid-template: auto auto / auto auto; }
-.gridMultipleFixed { -webkit-grid-template: [first] 15px [foo] 25px [bar] 35px [last] / [first] 37px [foo] 57px [bar] 77px [last]; }
+.gridMultipleFixed { -webkit-grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; }
.gridFixed100 { -webkit-grid-template: repeat(2, 100px) / repeat(2, 100px); }
.thirdRowThirdColumn { -webkit-grid-area: 3 / 3; }
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -10,7 +10,7 @@
}
.grid {
- -webkit-grid: 50px 50px / 100px 100px;
+ -webkit-grid: 100px 100px / 50px 50px;
position: relative;
width: 300px;
height: 200px;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -10,7 +10,7 @@
}
.grid {
- -webkit-grid: 50px 50px / 100px 100px;
+ -webkit-grid: 100px 100px / 50px 50px;
position: relative;
width: 300px;
height: 200px;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -10,7 +10,7 @@
}
.grid {
- -webkit-grid: 50px 50px / 100px 100px;
+ -webkit-grid: 100px 100px / 50px 50px;
position: relative;
width: 200px;
height: 300px;
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -7,13 +7,13 @@
-webkit-grid: dense;
}
#gridWithTemplate {
- -webkit-grid: 15px / 10px;
+ -webkit-grid: 10px / 15px;
}
#gridWithTemplate1 {
- -webkit-grid: none / 10px;
+ -webkit-grid: 10px / none;
}
#gridWithTemplateNone {
- -webkit-grid: none / 10px;
+ -webkit-grid: 10px / none;
}
#gridWithAutoFlowDenseAndRowsAndColumns {
-webkit-grid: dense 10px / 20px;
@@ -156,8 +156,8 @@
debug("");
debug("Test getting and setting 'grid' shorthand through JS");
- testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
- testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial");
+ testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
+ testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial");
testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "row dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px");
testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -7,37 +7,37 @@
-webkit-grid-template: none;
}
#gridTemplateSimpleForm {
- -webkit-grid-template: 10px / 15px;
+ -webkit-grid-template: 15px / 10px;
}
#gridTemplateSimpleFormWithNoneColumns {
- -webkit-grid-template: none / 15px;
+ -webkit-grid-template: 15px / none;
}
#gridTemplateSimpleFormWithNoneRows {
- -webkit-grid-template: 10px / none;
+ -webkit-grid-template: none / 10px;
}
#gridTemplateSimpleFormWithNone {
-webkit-grid-template: none / none;
}
#gridTemplateComplexForm {
- -webkit-grid-template: 10px / "a" 15px;
+ -webkit-grid-template: "a" 15px / 10px;
}
#gridTemplateComplexFormWithLineNames {
- -webkit-grid-template: 10px / [head] "a" 15px [tail];
+ -webkit-grid-template: [head] "a" 15px [tail] / 10px;
}
#gridTemplateComplexFormWithLineNamesMultipleColumns {
- -webkit-grid-template: 10px / [head] "a b" 15px [tail]
+ -webkit-grid-template: [head] "a b" 15px [tail] / 10px;
}
#gridTemplateComplexFormWithLineNamesMultipleRows {
- -webkit-grid-template: 10px / [head1] "a" 15px [tail1]
- [head2] "b" 20px [tail2];
+ -webkit-grid-template: [head1] "a" 15px [tail1]
+ [head2] "b" 20px [tail2] / 10px;
}
#gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
- -webkit-grid-template: [first] 10px repeat(2, [nav nav2] 15px) / "a b c" 100px [nav]
- [nav2] "d e f" 25px [nav]
- [nav2] "g h i" 25px [last];
+ -webkit-grid-template: "a b c" 100px [nav]
+ [nav2] "d e f" 25px [nav]
+ [nav2] "g h i" 25px [last] / [first] 10px repeat(2, [nav nav2] 15px);
}
#gridTemplateComplexFormWithAuto {
- -webkit-grid-template: 10px / "a";
+ -webkit-grid-template: "a" / 10px;
}
#gridTemplateComplexFormOnlyAreas {
-webkit-grid-template: "a";
@@ -55,58 +55,58 @@
-webkit-grid-template: 10px;
}
#gridTemplateSimpleFormNoRows {
- -webkit-grid-template: 10px /;
+ -webkit-grid-template: / 10px;
}
#gridTemplateSimpleFormNoColumns {
- -webkit-grid-template: / 10px;
+ -webkit-grid-template: 10px /;
}
#gridTemplateSimpleFormNoColumnSize {
- -webkit-grid-template: [line] / 10px;
+ -webkit-grid-template: 10px / [line];
}
#gridTemplateSimpleFormWithFitContent {
- -webkit-grid-template: -webkit-fit-content / 10px;
+ -webkit-grid-template: 10px / -webkit-fit-content;
}
#gridTemplateSimpleFormWithWrongRepeat {
- -webkit-grid-template: repeat(2, 50% [title] a) / 10px;
+ -webkit-grid-template: 10px / repeat(2, 50% [title] a);
}
#gridTemplateSimpleFormWithMisplacedNone1 {
- -webkit-grid-template: 10px / none 20px;
+ -webkit-grid-template: none 20px / 10px;
}
#gridTemplateSimpleFormWithMisplacedNone2 {
- -webkit-grid-template: 10px / 20px none;
+ -webkit-grid-template: 20px none / 10px;
}
#gridTemplateSimpleFormWithMisplacedNone3 {
- -webkit-grid-template: none 10px / 20px;
+ -webkit-grid-template: 20px / none 10px;
}
#gridTemplateSimpleFormWithMisplacedNone4 {
- -webkit-grid-template: 10px none / 20px;
+ -webkit-grid-template: 20px / 10px none;
}
#gridTemplateComplexFormWithRepeat {
- -webkit-grid-template: 10px / "a" repeat(2, 50% [title]);
+ -webkit-grid-template: "a" repeat(2, 50% [title]) / 10px;
}
#gridTemplateComplexFormWithWrongRepeat {
- -webkit-grid-template: repeat(2, 50% [title] a) / "a";
+ -webkit-grid-template: "a" / repeat(2, 50% [title] a);
}
#griTemplateComplexFormdWithFitAvailable {
- -webkit-grid-template: -webkit-fit-available / "a";
+ -webkit-grid-template: "a" / -webkit-fit-available;
}
#gridTemplateComplexFormNoColumnSize {
- -webkit-grid-template: [line] / "a";
+ -webkit-grid-template: "a" / [line];
}
#gridTemplateComplexFormMisplacedRowsSize1 {
- -webkit-grid-template: 25px / 10px "a";
+ -webkit-grid-template: 10px "a" / 25px;
}
#gridTemplateComplexFormMisplacedRowsSize2 {
- -webkit-grid-template: 25px / "a" [name] 10px;
+ -webkit-grid-template: "a" [name] 10px / 25px;
}
#gridTemplateComplexFormColumnsNotParsing1 {
- -webkit-grid-template: a / "a" [name] 10px;
+ -webkit-grid-template: "a" [name] 10px / a;
}
#gridTemplateComplexFormColumnsNotParsing2 {
- -webkit-grid-template: "B" / "a" [name] 10px;
+ -webkit-grid-template: "a" [name] 10px / "B";
}
#gridTemplateComplexFormWithNoneColumns {
- -webkit-grid-template: none / "a" [name] 10px;
+ -webkit-grid-template: "a" [name] 10px / none;
}
#gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames {
-webkit-grid-template: [first] "a" auto [] [];
@@ -210,23 +210,23 @@
debug("");
debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
- testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "10px", "[line] 20px", "\"a\"");
+ testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"");
testGridDefinitionsSetJSValues("none", "none", "none", "none");
debug("");
debug("Test getting and setting grid-template shorthand through JS");
- testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
- testGridDefinitionsSetJSValues("10px / [head] 'a' 15px [tail]", "10px", "[head] 15px [tail]", "\"a\"");
+ testGridDefinitionsSetJSValues("66px / 18px", "18px", "66px", "none");
+ testGridDefinitionsSetJSValues("[head] 'a' 15px [tail] / 10px", "10px", "[head] 15px [tail]", "\"a\"");
testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto");
debug("");
debug("Test setting grid-template shorthand to bad values through JS");
- testGridDefinitionsSetBadJSValues("none / 'a'");
- testGridDefinitionsSetBadJSValues("25px / 'a' [name] 10px");
- testGridDefinitionsSetBadJSValues("'a' / 'b'");
+ testGridDefinitionsSetBadJSValues("'a' / none");
+ testGridDefinitionsSetBadJSValues("'a' [name] 10px / 25px");
+ testGridDefinitionsSetBadJSValues("'b' / 'a'");
testGridDefinitionsSetBadJSValues("15px");
- testGridDefinitionsSetBadJSValues("15px / 20px none");
- testGridDefinitionsSetBadJSValues("25px / 10px 'a'");
+ testGridDefinitionsSetBadJSValues("20px none / 15px");
+ testGridDefinitionsSetBadJSValues("10px 'a' / 25px");
</script>
</body>
Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -2,7 +2,7 @@
<link href="" rel="stylesheet">
<style>
.grid {
- -webkit-grid: 100px 100px / 150px;
+ -webkit-grid: 150px / 100px 100px;
position: relative;
}
#fromStretch { align-items: stretch; }
Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -2,7 +2,7 @@
<link href="" rel="stylesheet">
<style>
.grid {
- -webkit-grid: 100px 100px / 150px;
+ -webkit-grid: 150px / 100px 100px;
width: 200px;
position: relative;
}
Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -2,7 +2,7 @@
<link href="" rel="stylesheet">
<style>
.grid {
- -webkit-grid: 50px / minmax(5px, 1fr) minmax(5px, 2fr);
+ -webkit-grid: minmax(5px, 1fr) minmax(5px, 2fr) / 50px;
}
#fromIndefinite { height: auto; }
Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -2,7 +2,7 @@
<link href="" rel="stylesheet">
<style>
.grid {
- -webkit-grid: 150px / 100px 100px;
+ -webkit-grid: 100px 100px / 150px;
width: 150px;
position: relative;
}
Modified: trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html (196933 => 196934)
--- trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -2,7 +2,7 @@
<link href="" rel="stylesheet">
<style>
.grid {
- -webkit-grid: 150px / 100px 100px;
+ -webkit-grid: 100px 100px / 150px;
width: 150px;
position: relative;
}
Modified: trunk/LayoutTests/fast/repaint/align-items-overflow-change.html (196933 => 196934)
--- trunk/LayoutTests/fast/repaint/align-items-overflow-change.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/repaint/align-items-overflow-change.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -12,7 +12,7 @@
}
#container {
display: -webkit-grid;
- -webkit-grid: 200px / 150px 150px;
+ -webkit-grid: 150px 150px / 200px;
align-items: end unsafe;
width: 200px;
height: 300px;
Modified: trunk/LayoutTests/fast/repaint/align-self-change.html (196933 => 196934)
--- trunk/LayoutTests/fast/repaint/align-self-change.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/repaint/align-self-change.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -13,7 +13,7 @@
}
#container {
display: -webkit-grid;
- -webkit-grid: 100px 100px / 300px;
+ -webkit-grid: 300px / 100px 100px;
width: 200px;
height: 300px;
background-color: red;
Modified: trunk/LayoutTests/fast/repaint/align-self-overflow-change.html (196933 => 196934)
--- trunk/LayoutTests/fast/repaint/align-self-overflow-change.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/repaint/align-self-overflow-change.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -13,7 +13,7 @@
}
#container {
display: -webkit-grid;
- -webkit-grid: 200px / 150px 150px;
+ -webkit-grid: 150px 150px / 200px;
width: 200px;
height: 300px;
background-color: red;
Modified: trunk/LayoutTests/fast/repaint/justify-items-change.html (196933 => 196934)
--- trunk/LayoutTests/fast/repaint/justify-items-change.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/repaint/justify-items-change.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -12,7 +12,7 @@
}
#container {
display: -webkit-grid;
- -webkit-grid: 200px / 300px;
+ -webkit-grid: 300px / 200px;
justify-items: end;
width: 200px;
height: 300px;
Modified: trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html (196933 => 196934)
--- trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -12,7 +12,7 @@
}
#container {
display: -webkit-grid;
- -webkit-grid: 100px 100px / 300px;
+ -webkit-grid: 300px / 100px 100px;
justify-items: end unsafe;
width: 200px;
height: 300px;
Modified: trunk/LayoutTests/fast/repaint/justify-self-change.html (196933 => 196934)
--- trunk/LayoutTests/fast/repaint/justify-self-change.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/repaint/justify-self-change.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -13,7 +13,7 @@
}
#container {
display: -webkit-grid;
- -webkit-grid: 100px 100px / 300px;
+ -webkit-grid: 300px / 100px 100px;
justify-items: center;
width: 200px;
background-color: red;
Modified: trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html (196933 => 196934)
--- trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html 2016-02-22 14:08:41 UTC (rev 196934)
@@ -13,7 +13,7 @@
}
#container {
display: -webkit-grid;
- -webkit-grid: 100px 100px / 300px;
+ -webkit-grid: 300px / 100px 100px;
width: 200px;
height: 300px;
background-color: red;
Modified: trunk/Source/WebCore/ChangeLog (196933 => 196934)
--- trunk/Source/WebCore/ChangeLog 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/Source/WebCore/ChangeLog 2016-02-22 14:08:41 UTC (rev 196934)
@@ -1,5 +1,26 @@
2016-02-22 Manuel Rego Casasnovas <r...@igalia.com>
+ [css-grid] Swap columns and rows in grid-template shorthand
+ https://bugs.webkit.org/show_bug.cgi?id=154472
+
+ Reviewed by Darin Adler.
+
+ The spec was modified past December to change the order of
+ columns and rows in the grid-template shorthand:
+ https://github.com/w3c/csswg-drafts/commit/f6c7691679a519017a80ebae44fd86c3eae5c5f9
+
+ Updated the parsing and modified the tests to follow the new syntax.
+
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseGridTemplateColumns):
+ (WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
+ (WebCore::CSSParser::parseGridTemplateShorthand):
+ (WebCore::CSSParser::parseGridTemplateRowsAndAreas): Renamed to
+ parseGridTemplateRowsAndAreasAndColumns().
+ * css/CSSParser.h:
+
+2016-02-22 Manuel Rego Casasnovas <r...@igalia.com>
+
[css-grid] Swap columns and rows in grid shorthand
https://bugs.webkit.org/show_bug.cgi?id=154449
Modified: trunk/Source/WebCore/css/CSSParser.cpp (196933 => 196934)
--- trunk/Source/WebCore/css/CSSParser.cpp 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2016-02-22 14:08:41 UTC (rev 196934)
@@ -5565,10 +5565,23 @@
return true;
}
-bool CSSParser::parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue> templateColumns, bool important)
+RefPtr<CSSValue> CSSParser::parseGridTemplateColumns()
{
+ if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current()) && m_valueList->next()))
+ return nullptr;
+ if (auto columnsValue = parseGridTrackList()) {
+ if (m_valueList->current())
+ return nullptr;
+ return columnsValue;
+ }
+
+ return nullptr;
+}
+
+bool CSSParser::parseGridTemplateRowsAndAreasAndColumns(bool important)
+{
// At least template-areas strings must be defined.
- if (!m_valueList->current())
+ if (!m_valueList->current() || isForwardSlashOperator(*m_valueList->current()))
return false;
NamedGridAreaMap gridAreaMap;
@@ -5577,7 +5590,7 @@
bool trailingIdentWasAdded = false;
RefPtr<CSSValueList> templateRows = CSSValueList::createSpaceSeparated();
- do {
+ while (m_valueList->current() && !isForwardSlashOperator(*m_valueList->current())) {
// Handle leading <custom-ident>*.
if (m_valueList->current()->unit == CSSParserValue::ValueList) {
if (trailingIdentWasAdded) {
@@ -5593,7 +5606,7 @@
++rowCount;
// Handle template-rows's track-size.
- if (m_valueList->current() && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
+ if (m_valueList->current() && !isForwardSlashOperator(*m_valueList->current()) && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
RefPtr<CSSValue> value = parseGridTrackSize(*m_valueList);
if (!value)
return false;
@@ -5605,18 +5618,25 @@
trailingIdentWasAdded = false;
if (m_valueList->current() && m_valueList->current()->unit == CSSParserValue::ValueList)
trailingIdentWasAdded = parseGridLineNames(*m_valueList, *templateRows);
- } while (m_valueList->current());
+ }
// [<track-list> /]?
- if (templateColumns)
- addProperty(CSSPropertyWebkitGridTemplateColumns, templateColumns, important);
- else
- addProperty(CSSPropertyWebkitGridTemplateColumns, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
+ RefPtr<CSSValue> templateColumns = nullptr;
+ if (m_valueList->current()) {
+ ASSERT(isForwardSlashOperator(*m_valueList->current()));
+ templateColumns = parseGridTemplateColumns();
+ if (!templateColumns)
+ return false;
+ // The template-columns <track-list> can't be 'none'.
+ if (templateColumns->isPrimitiveValue() && downcast<CSSPrimitiveValue>(*templateColumns).getValueID() == CSSValueNone)
+ return false;
+ }
- // [<line-names>? <string> [<track-size> <line-names>]? ]+
+ addProperty(CSSPropertyWebkitGridTemplateRows, templateRows.release(), important);
+ addProperty(CSSPropertyWebkitGridTemplateColumns, templateColumns ? templateColumns.release() : CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
+
RefPtr<CSSValue> templateAreas = CSSGridTemplateAreasValue::create(gridAreaMap, rowCount, columnCount);
addProperty(CSSPropertyWebkitGridTemplateAreas, templateAreas.release(), important);
- addProperty(CSSPropertyWebkitGridTemplateRows, templateRows.release(), important);
return true;
}
@@ -5640,32 +5660,29 @@
return true;
}
- unsigned index = 0;
- RefPtr<CSSValue> columnsValue = firstValueIsNone ? CSSValuePool::singleton().createIdentifierValue(CSSValueNone) : parseGridTrackList();
+ // 2- <grid-template-rows> / <grid-template-columns> syntax.
+ RefPtr<CSSValue> rowsValue;
+ if (firstValueIsNone)
+ rowsValue = CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
+ else
+ rowsValue = parseGridTrackList();
- // 2- <grid-template-columns> / <grid-template-columns> syntax.
- if (columnsValue) {
- if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current()) && m_valueList->next()))
+ if (rowsValue) {
+ auto columnsValue = parseGridTemplateColumns();
+ if (!columnsValue)
return false;
- index = m_valueList->currentIndex();
- if (RefPtr<CSSValue> rowsValue = parseGridTrackList()) {
- if (m_valueList->current())
- return false;
- addProperty(CSSPropertyWebkitGridTemplateColumns, columnsValue.release(), important);
- addProperty(CSSPropertyWebkitGridTemplateRows, rowsValue.release(), important);
- addProperty(CSSPropertyWebkitGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
- return true;
- }
+
+ addProperty(CSSPropertyWebkitGridTemplateColumns, columnsValue.release(), important);
+ addProperty(CSSPropertyWebkitGridTemplateRows, rowsValue.release(), important);
+ addProperty(CSSPropertyWebkitGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
+ return true;
}
- // 3- [<track-list> /]? [<line-names>? <string> [<track-size> <line-names>]? ]+ syntax.
- // The template-columns <track-list> can't be 'none'.
- if (firstValueIsNone)
- return false;
+ // 3- [<line-names>? <string> [<track-size> <line-names>]? ]+ syntax.
// It requires to rewind parsing due to previous syntax failures.
- m_valueList->setCurrentIndex(index);
- return parseGridTemplateRowsAndAreas(columnsValue, important);
+ m_valueList->setCurrentIndex(0);
+ return parseGridTemplateRowsAndAreasAndColumns(important);
}
bool CSSParser::parseGridShorthand(bool important)
Modified: trunk/Source/WebCore/css/CSSParser.h (196933 => 196934)
--- trunk/Source/WebCore/css/CSSParser.h 2016-02-22 11:49:09 UTC (rev 196933)
+++ trunk/Source/WebCore/css/CSSParser.h 2016-02-22 14:08:41 UTC (rev 196934)
@@ -210,7 +210,8 @@
#if ENABLE(CSS_GRID_LAYOUT)
RefPtr<CSSValue> parseGridPosition();
bool parseGridItemPositionShorthand(CSSPropertyID, bool important);
- bool parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue>, bool important);
+ RefPtr<CSSValue> parseGridTemplateColumns();
+ bool parseGridTemplateRowsAndAreasAndColumns(bool important);
bool parseGridTemplateShorthand(bool important);
bool parseGridShorthand(bool important);
bool parseGridAreaShorthand(bool important);
