[css-grid] Swap columns and rows in grid-template shorthand
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 22 Feb 2016 14:08:41 +0000 (14:08 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 22 Feb 2016 14:08:41 +0000 (14:08 +0000)
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.

Source/WebCore:

* css/CSSParser.cpp:
(WebCore::CSSParser::parseGridTemplateColumns):
(WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
(WebCore::CSSParser::parseGridTemplateShorthand):
(WebCore::CSSParser::parseGridTemplateRowsAndAreas): Renamed to
parseGridTemplateRowsAndAreasAndColumns().
* css/CSSParser.h:

LayoutTests:

* 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:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@196934 268f45cc-cd09-0410-ab3c-d52691b4dbfc

29 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html
LayoutTests/fast/css-grid-layout/flex-content-distribution.html
LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-align-content.html
LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html
LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html
LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html
LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html
LayoutTests/fast/css-grid-layout/grid-justify-content.html
LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html
LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html
LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html
LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html
LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html
LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html
LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html
LayoutTests/fast/repaint/align-items-overflow-change.html
LayoutTests/fast/repaint/align-self-change.html
LayoutTests/fast/repaint/align-self-overflow-change.html
LayoutTests/fast/repaint/justify-items-change.html
LayoutTests/fast/repaint/justify-items-overflow-change.html
LayoutTests/fast/repaint/justify-self-change.html
LayoutTests/fast/repaint/justify-self-overflow-change.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSParser.h

index 7a78205..2ccdc99 100644 (file)
@@ -1,5 +1,44 @@
 2016-02-22  Manuel Rego Casasnovas  <rego@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  <rego@igalia.com>
+
         [css-grid] Swap columns and rows in grid shorthand
         https://bugs.webkit.org/show_bug.cgi?id=154449
 
index 62b895a..e74c4e9 100644 (file)
@@ -2,7 +2,7 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-    -webkit-grid-template: 1fr / 50px 1fr;
+    -webkit-grid-template: 50px 1fr / 1fr;
 
     position: absolute;
     left: 50px;
index 03ba311..fc432e8 100644 (file)
@@ -4,13 +4,13 @@
 <link href="resources/grid-alignment.css" 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;
 }
index a1ee1ae..f5e2b64 100644 (file)
@@ -9,7 +9,7 @@ body {
 }
 
 .grid {
-    -webkit-grid: 50px 50px / 100px 100px;
+    -webkit-grid: 100px 100px / 50px 50px;
     position: relative;
     width: 300px;
     height: 200px;
index ed9ac32..cf95fcc 100644 (file)
@@ -9,7 +9,7 @@ body {
 }
 
 .grid {
-    -webkit-grid: 50px 50px / 100px 100px;
+    -webkit-grid: 100px 100px / 50px 50px;
     position: relative;
     width: 300px;
     height: 200px;
index 4d86b1b..804aa68 100644 (file)
@@ -10,7 +10,7 @@ body {
 }
 
 .grid {
-    -webkit-grid: 50px 50px / 100px 100px;
+    -webkit-grid: 100px 100px / 50px 50px;
     position: relative;
     width: 200px;
     height: 300px;
index 5e4aeb2..0b70a47 100644 (file)
@@ -14,7 +14,7 @@ body { margin: 0px; }
 }
 
 .grid50And100 {
-    -webkit-grid: 50px 50px / 100px 100px;
+    -webkit-grid: 100px 100px / 50px 50px;
     width: 200px;
     height: 300px;
     position: relative; /* For the <p> comments */
index 57a0456..01871f1 100644 (file)
@@ -5,13 +5,13 @@
 <script src="../../resources/check-layout.js"></script>
 <script src="../../resources/js-test.js"></script>
 <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; }
index 989531d..2a31f6c 100644 (file)
@@ -18,7 +18,7 @@ body { margin: 0px; }
 .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; }
index 5c2ce56..de4d080 100644 (file)
@@ -10,7 +10,7 @@ body {
 }
 
 .grid {
-    -webkit-grid: 50px 50px / 100px 100px;
+    -webkit-grid: 100px 100px / 50px 50px;
     position: relative;
     width: 300px;
     height: 200px;
index 005b47e..69d11c3 100644 (file)
@@ -10,7 +10,7 @@ body {
 }
 
 .grid {
-    -webkit-grid: 50px 50px / 100px 100px;
+    -webkit-grid: 100px 100px / 50px 50px;
     position: relative;
     width: 300px;
     height: 200px;
index beecebc..bd314c1 100644 (file)
@@ -10,7 +10,7 @@ body {
 }
 
 .grid {
-    -webkit-grid: 50px 50px / 100px 100px;
+    -webkit-grid: 100px 100px / 50px 50px;
     position: relative;
     width: 200px;
     height: 300px;
index e7ac4d2..eecb588 100644 (file)
@@ -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;
 
     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");
 
index 3328013..a11c23f 100644 (file)
@@ -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";
     -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 [] [];
 
     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>
index de9ab53..62db887 100644 (file)
@@ -2,7 +2,7 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-  -webkit-grid: 100px 100px / 150px;
+  -webkit-grid: 150px / 100px 100px;
   position: relative;
 }
 #fromStretch { align-items: stretch; }
index 571061e..3d431bc 100644 (file)
@@ -2,7 +2,7 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-  -webkit-grid: 100px 100px / 150px;
+  -webkit-grid: 150px / 100px 100px;
   width: 200px;
   position: relative;
 }
index 4063b56..849a448 100644 (file)
@@ -2,7 +2,7 @@
 <link href="resources/grid.css" 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; }
index 9832884..2edd662 100644 (file)
@@ -2,7 +2,7 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-  -webkit-grid: 150px / 100px 100px;
+  -webkit-grid: 100px 100px / 150px;
   width: 150px;
   position: relative;
 }
index 8920c18..d6a14fb 100644 (file)
@@ -2,7 +2,7 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-  -webkit-grid: 150px / 100px 100px;
+  -webkit-grid: 100px 100px / 150px;
   width: 150px;
   position: relative;
 }
index 0061f97..4f6f26e 100644 (file)
@@ -12,7 +12,7 @@ body {
 }
 #container {
   display: -webkit-grid;
-  -webkit-grid: 200px / 150px 150px;
+  -webkit-grid: 150px 150px / 200px;
   align-items: end unsafe;
   width: 200px;
   height: 300px;
index ba79f6d..ac1b9c0 100644 (file)
@@ -13,7 +13,7 @@ body {
 }
 #container {
   display: -webkit-grid;
-  -webkit-grid: 100px 100px / 300px;
+  -webkit-grid: 300px / 100px 100px;
   width: 200px;
   height: 300px;
   background-color: red;
index f16a842..59add4b 100644 (file)
@@ -13,7 +13,7 @@ body {
 }
 #container {
   display: -webkit-grid;
-  -webkit-grid: 200px / 150px 150px;
+  -webkit-grid: 150px 150px / 200px;
   width: 200px;
   height: 300px;
   background-color: red;
index 6b1bff2..1e44730 100644 (file)
@@ -12,7 +12,7 @@ body {
 }
 #container {
   display: -webkit-grid;
-  -webkit-grid: 200px / 300px;
+  -webkit-grid: 300px / 200px;
   justify-items: end;
   width: 200px;
   height: 300px;
index 4e27929..7e536eb 100644 (file)
@@ -12,7 +12,7 @@ body {
 }
 #container {
   display: -webkit-grid;
-  -webkit-grid: 100px 100px / 300px;
+  -webkit-grid: 300px / 100px 100px;
   justify-items: end unsafe;
   width: 200px;
   height: 300px;
index be1ab8d..b0275e7 100644 (file)
@@ -13,7 +13,7 @@ body {
 }
 #container {
   display: -webkit-grid;
-  -webkit-grid: 100px 100px / 300px;
+  -webkit-grid: 300px / 100px 100px;
   justify-items: center;
   width: 200px;
   background-color: red;
index 18916af..e5de79e 100644 (file)
@@ -13,7 +13,7 @@ body {
 }
 #container {
   display: -webkit-grid;
-  -webkit-grid: 100px 100px / 300px;
+  -webkit-grid: 300px / 100px 100px;
   width: 200px;
   height: 300px;
   background-color: red;
index 36a6369..8de1888 100644 (file)
@@ -1,5 +1,26 @@
 2016-02-22  Manuel Rego Casasnovas  <rego@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  <rego@igalia.com>
+
         [css-grid] Swap columns and rows in grid shorthand
         https://bugs.webkit.org/show_bug.cgi?id=154449
 
index 0aa3dcf..b7395df 100644 (file)
@@ -5565,10 +5565,23 @@ bool CSSParser::parseGridGapShorthand(bool important)
     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 CSSParser::parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue> templateColum
     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 @@ bool CSSParser::parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue> templateColum
         ++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 @@ bool CSSParser::parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue> templateColum
         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;
+    }
+
+    addProperty(CSSPropertyWebkitGridTemplateRows, templateRows.release(), important);
+    addProperty(CSSPropertyWebkitGridTemplateColumns, templateColumns ? templateColumns.release() : CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
 
-    // [<line-names>? <string> [<track-size> <line-names>]? ]+
     RefPtr<CSSValue> templateAreas = CSSGridTemplateAreasValue::create(gridAreaMap, rowCount, columnCount);
     addProperty(CSSPropertyWebkitGridTemplateAreas, templateAreas.release(), important);
-    addProperty(CSSPropertyWebkitGridTemplateRows, templateRows.release(), important);
 
     return true;
 }
@@ -5640,32 +5660,29 @@ bool CSSParser::parseGridTemplateShorthand(bool important)
         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)
index d2ab438..feff844 100644 (file)
@@ -210,7 +210,8 @@ public:
 #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);