Changeset 196978 in webkit


Ignore:
Timestamp:
Feb 23, 2016 8:49:54 AM (8 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):

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r196977 r196978  
     12016-02-23  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Rows track sizes are optional in grid-template shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=154586
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        You can omit the size of the rows in grid-template shorthand,
     9        even if you specify a named grid line for the end of the row,
     10        due to a change in the spec back in 2014:
     11        https://github.com/w3c/csswg-drafts/commit/9f660c4183c73c1f5279c46904dc6cb314f76194
     12
     13        Before if you want to specify a named grid line,
     14        you need to set the row size.
     15
     16        Update parsing, so it nows accepts things like:
     17            grid-template: 100px / "a" [bottom];
     18
    1192016-02-23  Nikos Andronikos  <nikos.andronikos-webkit@cisra.canon.com.au>
    220

  • trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt

    r185147 r196978  
    2626PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
    2727PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
     28PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
     29PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
     30PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    2831PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    2932PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
    3033PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
     34PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
     35PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 0px [tail]"
     36PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
    3137PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    3238PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-rows') is "[head1] 15px [tail1 head2] 20px [tail2]"
    3339PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
     40PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
     41PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-rows') is "[head1] 0px [tail1 head2] 0px [tail2]"
     42PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
    3443PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
    3544PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "100px [nav nav2] 25px [nav nav2] 25px [last]"
    3645PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
     46PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
     47PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-rows') is "0px [nav nav2] 0px [nav nav2] 0px [last]"
     48PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
    3749PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    3850PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
    … …  
    97109PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-rows') is "none"
    98110PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getPropertyValue('-webkit-grid-template-areas') is "none"
     111PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-columns') is "none"
     112PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-rows') is "none"
     113PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize3, '').getPropertyValue('-webkit-grid-template-areas') is "none"
     114PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-columns') is "none"
     115PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-rows') is "none"
     116PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize4, '').getPropertyValue('-webkit-grid-template-areas') is "none"
    99117PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    100118PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getPropertyValue('-webkit-grid-template-rows') is "none"

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

    r196934 r196978  
    2525    -webkit-grid-template: [head] "a" 15px [tail] / 10px;
    2626}
     27#gridTemplateComplexFormWithLineNamesWithoutRowSize {
     28    -webkit-grid-template: [head] "a" [tail] / 10px;
     29}
    2730#gridTemplateComplexFormWithLineNamesMultipleColumns {
    2831    -webkit-grid-template: [head] "a b" 15px [tail] / 10px;
     32}
     33#gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize {
     34    -webkit-grid-template: [head] "a b" [tail] / 10px;
    2935}
    3036#gridTemplateComplexFormWithLineNamesMultipleRows {
    3137    -webkit-grid-template: [head1] "a" 15px [tail1]
    3238                           [head2] "b" 20px [tail2] / 10px;
     39}
     40#gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes {
     41    -webkit-grid-template: [head1] "a" [tail1]
     42                           [head2] "b" [tail2] / 10px;
    3343}
    3444#gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
    … …  
    3747                           [nav2] "g h i" 25px  [last] / [first] 10px repeat(2, [nav nav2] 15px);
    3848}
     49#gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes {
     50    -webkit-grid-template:        "a b c" [nav]
     51                           [nav2] "d e f" [nav]
     52                           [nav2] "g h i" [last] / [first] 10px repeat(2, [nav nav2] 15px);
     53}
    3954#gridTemplateComplexFormWithAuto {
    4055    -webkit-grid-template: "a" / 10px;
    … …  
    99114#gridTemplateComplexFormMisplacedRowsSize2 {
    100115    -webkit-grid-template: "a" [name] 10px / 25px;
     116}
     117#gridTemplateComplexFormMisplacedRowsSize3 {
     118    -webkit-grid-template: [head] "a" [tail] 10px / 10px;
     119}
     120#gridTemplateComplexFormMisplacedRowsSize4 {
     121    -webkit-grid-template: [head1] "a" [tail1]
     122                           [head2] "a" [tail2] 100px / 10px;
    101123}
    102124#gridTemplateComplexFormColumnsNotParsing1 {
    … …  
    127149<div class="grid" id="gridTemplateComplexForm"></div>
    128150<div class="grid" id="gridTemplateComplexFormWithLineNames"></div>
     151<div class="grid" id="gridTemplateComplexFormWithLineNamesWithoutRowSize"></div>
    129152<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumns"></div>
     153<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"></div>
    130154<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRows"></div>
     155<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes"></div>
    131156<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns"></div>
     157<div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRowsAndColumnsWithoutRowsSizes"></div>
    132158<div class="grid" id="gridTemplateComplexFormWithAuto"></div>
    133159<div class="grid" id="gridTemplateComplexFormOnlyAreas"></div>
    … …  
    152178<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize1"></div>
    153179<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize2"></div>
     180<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize3"></div>
     181<div class="grid" id="gridTemplateComplexFormMisplacedRowsSize4"></div>
    154182<div class="grid" id="gridTemplateComplexFormColumnsNotParsing1"></div>
    155183<div class="grid" id="gridTemplateComplexFormColumnsNotParsing2"></div>
    … …  
    168196    testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm"), "10px", "15px", '"a"');
    169197    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "[head] 15px [tail]", '"a"');
     198    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesWithoutRowSize"), "10px", "[head] 0px [tail]", '"a"');
    170199    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px", "[head] 15px [tail]", '"a b"');
     200    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumnsWithoutRowSize"), "10px", "[head] 0px [tail]", '"a b"');
    171201    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "[head1] 15px [tail1 head2] 20px [tail2]", '"a" "b"');
     202    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRowsWithoutRowsSizes"), "10px", "[head1] 0px [tail1 head2] 0px [tail2]", '"a" "b"');
    172203    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"');
     204    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"');
    173205    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithAuto"), "10px", "0px", '"a"');
    174206    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "none", "0px", '"a"');
    … …  
    194226    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize1"), "none", "none", "none");
    195227    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize2"), "none", "none", "none");
     228    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize3"), "none", "none", "none");
     229    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMisplacedRowsSize4"), "none", "none", "none");
    196230    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing1"), "none", "none", "none");
    197231    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormColumnsNotParsing2"), "none", "none", "none");

  • trunk/Source/WebCore/ChangeLog

    r196977 r196978  
     12016-02-23  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Rows track sizes are optional in grid-template shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=154586
     5
     6        Reviewed by Sergio Villar Senin.
     7
     8        You can omit the size of the rows in grid-template shorthand,
     9        even if you specify a named grid line for the end of the row,
     10        due to a change in the spec back in 2014:
     11        https://github.com/w3c/csswg-drafts/commit/9f660c4183c73c1f5279c46904dc6cb314f76194
     12
     13        Before if you want to specify a named grid line,
     14        you need to set the row size.
     15
     16        Update parsing, so it nows accepts things like:
     17            grid-template: 100px / "a" [bottom];
     18
     19        * css/CSSParser.cpp:
     20        (WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
     21        (WebCore::CSSParser::parseGridTemplateShorthand):
     22
    1232016-02-23  Nikos Andronikos  <nikos.andronikos-webkit@cisra.canon.com.au>
    224

  • trunk/Source/WebCore/css/CSSParser.cpp

    r196934 r196978  
    56075607
    56085608        // Handle template-rows's track-size.
    5609         if (m_valueList->current() && !isForwardSlashOperator(*m_valueList->current()) && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
     5609        if (m_valueList->current() && m_valueList->current()->unit != CSSParserValue::Operator && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
    56105610            RefPtr<CSSValue> value = parseGridTrackSize(*m_valueList);
    56115611            if (!value)
    … …  
    56805680
    56815681
    5682     // 3- [<line-names>? <string> [<track-size> <line-names>]? ]+ syntax.
     5682    // 3- [<line-names>? <string> <track-size>? <line-names>? ]+ syntax.
    56835683    // It requires to rewind parsing due to previous syntax failures.
    56845684    m_valueList->setCurrentIndex(0);
Note: See TracChangeset for help on using the changeset viewer.