Title: [196978] trunk
Revision
196978
Author
r...@igalia.com
Date
2016-02-23 08:49:54 -0800 (Tue, 23 Feb 2016)

Log 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):

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (196977 => 196978)


--- trunk/LayoutTests/ChangeLog	2016-02-23 16:30:50 UTC (rev 196977)
+++ trunk/LayoutTests/ChangeLog	2016-02-23 16:49:54 UTC (rev 196978)
@@ -1,3 +1,21 @@
+2016-02-23  Manuel Rego Casasnovas  <r...@igalia.com>
+
+        [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];
+
 2016-02-23  Nikos Andronikos  <nikos.andronikos-web...@cisra.canon.com.au>
 
         [SVG] Update SVG source to return string literals as ASCIILiteral and add test cases for case sensitivity

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt (196977 => 196978)


--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt	2016-02-23 16:30:50 UTC (rev 196977)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt	2016-02-23 16:49:54 UTC (rev 196978)
@@ -25,15 +25,27 @@
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-rows') is "[head1] 15px [tail1 head2] 20px [tail2]"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-rows') is "[head1] 0px [tail1 head2] 0px [tail2]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "100px [nav nav2] 25px [nav nav2] 25px [last]"
 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-rows') is "0px [nav nav2] 0px [nav nav2] 0px [last]"
+PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
@@ -96,6 +108,12 @@
 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-columns') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-rows') is "none"
+PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-areas') is "none"
 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-rows') is "none"
 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-areas') is "none"

Modified: trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html (196977 => 196978)


--- trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html	2016-02-23 16:30:50 UTC (rev 196977)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html	2016-02-23 16:49:54 UTC (rev 196978)
@@ -24,18 +24,33 @@
 #gridTemplateComplexFormWithLineNames {
     -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 {
     -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);
 }
+#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,6 +114,13 @@
 #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 {
     -webkit-grid-template: "a" [name] 10px / a;
 }
@@ -126,9 +148,13 @@
 <div class="grid" id="gridTemplateSimpleFormWithNone"></div>
 <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>
 <div class="grid" id="gridTemplateNoColumnsRowWithEmptyTrailingLineNames"></div>
@@ -151,6 +177,8 @@
 <div class="grid" id="gridTemplateComplexFormNoColumnSize"></div>
 <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>
 <div class="grid" id="gridTemplateComplexFormWithNoneColumns"></div>
@@ -167,9 +195,13 @@
     testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNone"), "none", "none", "none");
     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"');
     testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "none", "[first] 0px", '"a"');
@@ -193,6 +225,8 @@
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormNoColumnSize"), "none", "none", "none");
     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");
     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithNoneColumns"), "none", "none", "none");

Modified: trunk/Source/WebCore/ChangeLog (196977 => 196978)


--- trunk/Source/WebCore/ChangeLog	2016-02-23 16:30:50 UTC (rev 196977)
+++ trunk/Source/WebCore/ChangeLog	2016-02-23 16:49:54 UTC (rev 196978)
@@ -1,3 +1,25 @@
+2016-02-23  Manuel Rego Casasnovas  <r...@igalia.com>
+
+        [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];
+
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
+        (WebCore::CSSParser::parseGridTemplateShorthand):
+
 2016-02-23  Nikos Andronikos  <nikos.andronikos-web...@cisra.canon.com.au>
 
         [SVG] Update SVG source to return string literals as ASCIILiteral and add test cases for case sensitivity

Modified: trunk/Source/WebCore/css/CSSParser.cpp (196977 => 196978)


--- trunk/Source/WebCore/css/CSSParser.cpp	2016-02-23 16:30:50 UTC (rev 196977)
+++ trunk/Source/WebCore/css/CSSParser.cpp	2016-02-23 16:49:54 UTC (rev 196978)
@@ -5606,7 +5606,7 @@
         ++rowCount;
 
         // Handle template-rows's track-size.
-        if (m_valueList->current() && !isForwardSlashOperator(*m_valueList->current()) && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
+        if (m_valueList->current() && m_valueList->current()->unit != CSSParserValue::Operator && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
             RefPtr<CSSValue> value = parseGridTrackSize(*m_valueList);
             if (!value)
                 return false;
@@ -5679,7 +5679,7 @@
     }
 
 
-    // 3- [<line-names>? <string> [<track-size> <line-names>]? ]+ syntax.
+    // 3- [<line-names>? <string> <track-size>? <line-names>? ]+ syntax.
     // It requires to rewind parsing due to previous syntax failures.
     m_valueList->setCurrentIndex(0);
     return parseGridTemplateRowsAndAreasAndColumns(important);
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to