Changeset 196978 in webkit for trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html

Timestamp:

Feb 23, 2016, 8:49:54 AM (10 years ago)

Author:

Manuel Rego Casasnovas

Message:

[css-grid] Rows track sizes are optional in grid-template shorthand
​https://bugs.webkit.org/show_bug.cgi?id=154586

Reviewed by Sergio Villar Senin.

You can omit the size of the rows in grid-template shorthand,
even if you specify a named grid line for the end of the row,
due to a change in the spec back in 2014:
​https://github.com/w3c/csswg-drafts/commit/9f660c4183c73c1f5279c46904dc6cb314f76194

Before if you want to specify a named grid line,
you need to set the row size.

Update parsing, so it nows accepts things like:

grid-template: 100px / "a" [bottom];

Source/WebCore:

• css/CSSParser.cpp:

(WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
(WebCore::CSSParser::parseGridTemplateShorthand):

File:

• trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html (modified) (7 diffs)

trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html

@@ -25 +25 @@
     -webkit-grid-template: [head] "a" 15px [tail] / 10px;
 }
+#gridTemplateComplexFormWithLineNamesWithoutRowSize {
+    -webkit-grid-template: [head] "a" [tail] / 10px;
+}
 #gridTemplateComplexFormWithLineNamesMultipleColumns {
     -webkit-grid-template: [head] "a b" 15px [tail] / 10px;
+}
+#gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize {
+    -webkit-grid-template: [head] "a b" [tail] / 10px;
 }
 #gridTemplateComplexFormWithLineNamesMultipleRows {
     -webkit-grid-template: [head1] "a" 15px [tail1]
                            [head2] "b" 20px [tail2] / 10px;
+}
+#gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes {
+    -webkit-grid-template: [head1] "a" [tail1]
+                           [head2] "b" [tail2] / 10px;
 }
 #gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
@@ -37 +47 @@
                            [nav2] "g h i" 25px  [last] / [first] 10px repeat(2, [nav nav2] 15px);
 }
+#gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes {
+    -webkit-grid-template:        "a b c" [nav]
+                           [nav2] "d e f" [nav]
+                           [nav2] "g h i" [last] / [first] 10px repeat(2, [nav nav2] 15px);
+}
 #gridTemplateComplexFormWithAuto {
     -webkit-grid-template: "a" / 10px;
@@ -99 +114 @@
 #gridTemplateComplexFormMisplacedRowsSize2 {
     -webkit-grid-template: "a" [name] 10px / 25px;
+}
+#gridTemplateComplexFormMisplacedRowsSize3 {
+    -webkit-grid-template: [head] "a" [tail] 10px / 10px;
+}
+#gridTemplateComplexFormMisplacedRowsSize4 {
+    -webkit-grid-template: [head1] "a" [tail1]
+                           [head2] "a" [tail2] 100px / 10px;
 }
 #gridTemplateComplexFormColumnsNotParsing1 {
@@ -127 +149 @@
 <div class="grid" id="gridTemplateComplexForm"></div>
 <div class="grid" id="gridTemplateComplexFormWithLineNames"></div>
+<div class="grid" id="gridTemplateComplexFormWithLineNamesWithoutRowSize"></div>
 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumns"></div>
+<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"></div>
 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRows"></div>
+<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes"></div>
 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"></div>
+<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes"></div>
 <div class="grid" id="gridTemplateComplexFormWithAuto"></div>
 <div class="grid" id="gridTemplateComplexFormOnlyAreas"></div>
@@ -152 +178 @@
 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize1"></div>
 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize2"></div>
+<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize3"></div>
+<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize4"></div>
 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing1"></div>
 <div class="grid" id="gridTemplateComplexFormColumnsNotParsing2"></div>
@@ -168 +196 @@
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm"), "10px", "15px", '"a"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "[head] 15px [tail]", '"a"');
+    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesWithoutRowSize"), "10px", "[head] 0px [tail]", '"a"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px", "[head] 15px [tail]", '"a b"');
+    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"), "10px", "[head] 0px [tail]", '"a b"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "[head1] 15px [tail1 head2] 20px [tail2]", '"a" "b"');
+    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes"), "10px", "[head1] 0px [tail1 head2] 0px [tail2]", '"a" "b"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"), "[first] 10px [nav nav2] 15px [nav nav2] 15px", "100px [nav nav2] 25px [nav nav2] 25px [last]", '"a b c" "d e f" "g h i"');
+    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes"), "[first] 10px [nav nav2] 15px [nav nav2] 15px", "0px [nav nav2] 0px [nav nav2] 0px [last]", '"a b c" "d e f" "g h i"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithAuto"), "10px", "0px", '"a"');
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "none", "0px", '"a"');
@@ -194 +226 @@
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize1"), "none", "none", "none");
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize2"), "none", "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize3"), "none", "none", "none");
+    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize4"), "none", "none", "none");
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing1"), "none", "none", "none");
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing2"), "none", "none", "none");