Changeset 196934 in webkit


Ignore:
Timestamp:
Feb 22, 2016 6:08:41 AM (8 years ago)
Author:
Manuel Rego Casasnovas
Message:

[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.

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:
Location:
trunk
Files:
29 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r196906 r196934  
     12016-02-22  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Swap columns and rows in grid-template shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=154472
     5
     6        Reviewed by Darin Adler.
     7
     8        The spec was modified past December to change the order of
     9        columns and rows in the grid-template shorthand:
     10        https://github.com/w3c/csswg-drafts/commit/f6c7691679a519017a80ebae44fd86c3eae5c5f9
     11
     12        Updated the parsing and modified the tests to follow the new syntax.
     13
     14        * fast/css-grid-layout/absolute-positioning-definite-sizes.html:
     15        * fast/css-grid-layout/flex-content-distribution.html:
     16        * fast/css-grid-layout/grid-align-content-vertical-lr.html:
     17        * fast/css-grid-layout/grid-align-content-vertical-rl.html:
     18        * fast/css-grid-layout/grid-align-content.html:
     19        * fast/css-grid-layout/grid-gutters-and-alignment.html:
     20        * fast/css-grid-layout/grid-gutters-and-flex-content.html:
     21        * fast/css-grid-layout/grid-gutters-and-tracks.html:
     22        * fast/css-grid-layout/grid-justify-content-vertical-lr.html:
     23        * fast/css-grid-layout/grid-justify-content-vertical-rl.html:
     24        * fast/css-grid-layout/grid-justify-content.html:
     25        * fast/css-grid-layout/grid-shorthand-get-set.html:
     26        * fast/css-grid-layout/grid-template-shorthand-get-set.html:
     27        * fast/css-grid-layout/relayout-align-items-changed.html:
     28        * fast/css-grid-layout/relayout-align-self-changed.html:
     29        * fast/css-grid-layout/relayout-indefinite-heights.html:
     30        * fast/css-grid-layout/relayout-justify-items-changed.html:
     31        * fast/css-grid-layout/relayout-justify-self-changed.html:
     32        * fast/repaint/align-items-overflow-change.html:
     33        * fast/repaint/align-self-change.html:
     34        * fast/repaint/align-self-overflow-change.html:
     35        * fast/repaint/justify-items-change.html:
     36        * fast/repaint/justify-items-overflow-change.html:
     37        * fast/repaint/justify-self-change.html:
     38        * fast/repaint/justify-self-overflow-change.html:
     39
    1402016-02-22  Manuel Rego Casasnovas  <rego@igalia.com>
    241
  • trunk/LayoutTests/fast/css-grid-layout/absolute-positioning-definite-sizes.html

    r192154 r196934  
    33<style>
    44.grid {
    5     -webkit-grid-template: 1fr / 50px 1fr;
     5    -webkit-grid-template: 50px 1fr / 1fr;
    66
    77    position: absolute;
  • trunk/LayoutTests/fast/css-grid-layout/flex-content-distribution.html

    r191385 r196934  
    55<style>
    66.freeSpaceForColumnsGrid {
    7     -webkit-grid-template: minmax(20px, 0.7fr) / 100%;
     7    -webkit-grid-template: 100% / minmax(20px, 0.7fr);
    88    width: 50px;
    99    height: 100px;
     
    1111
    1212.freeSpaceForRowsGrid {
    13     -webkit-grid-template: 100% / minmax(20px, 0.7fr);
     13    -webkit-grid-template: minmax(20px, 0.7fr) / 100%;
    1414    width: 50px;
    1515    height: 100px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-lr.html

    r190484 r196934  
    1010
    1111.grid {
    12     -webkit-grid: 50px 50px / 100px 100px;
     12    -webkit-grid: 100px 100px / 50px 50px;
    1313    position: relative;
    1414    width: 300px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-align-content-vertical-rl.html

    r190484 r196934  
    1010
    1111.grid {
    12     -webkit-grid: 50px 50px / 100px 100px;
     12    -webkit-grid: 100px 100px / 50px 50px;
    1313    position: relative;
    1414    width: 300px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-align-content.html

    r190663 r196934  
    1111
    1212.grid {
    13     -webkit-grid: 50px 50px / 100px 100px;
     13    -webkit-grid: 100px 100px / 50px 50px;
    1414    position: relative;
    1515    width: 200px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html

    r196819 r196934  
    1515
    1616.grid50And100 {
    17     -webkit-grid: 50px 50px / 100px 100px;
     17    -webkit-grid: 100px 100px / 50px 50px;
    1818    width: 200px;
    1919    height: 300px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html

    r190663 r196934  
    66<script src="../../resources/js-test.js"></script>
    77<style>
    8 .gridMaxFlexContent { -webkit-grid-template: minmax(30px, 2fr) / 50px; }
    9 .gridTwoDoubleMaxFlexContent { -webkit-grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
    10 .gridIgnoreSecondGridItem { -webkit-grid-template: minmax(300px, 3fr) minmax(150px, 1fr) / 50px; }
     8.gridMaxFlexContent { -webkit-grid-template: 50px / minmax(30px, 2fr); }
     9.gridTwoDoubleMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
     10.gridIgnoreSecondGridItem { -webkit-grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); }
    1111
    12 .gridRowsMaxFlexContent { -webkit-grid-template: 50px / minmax(30px, 2fr); }
    13 .gridRowsTwoMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 1fr) minmax(10px, 2fr); }
    14 .gridRowsTwoDoubleMaxFlexContent { -webkit-grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
     12.gridRowsMaxFlexContent { -webkit-grid-template: minmax(30px, 2fr) / 50px; }
     13.gridRowsTwoMaxFlexContent { -webkit-grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
     14.gridRowsTwoDoubleMaxFlexContent { -webkit-grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
    1515
    1616.gridMinMaxFlexFixedAndMinContentAndFixed { -webkit-grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px; }
  • trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.html

    r190663 r196934  
    1919.gridMultipleRows { -webkit-grid-template-rows: 90px 70px -webkit-min-content; }
    2020.gridAutoAuto { -webkit-grid-template: auto auto / auto auto; }
    21 .gridMultipleFixed { -webkit-grid-template: [first] 15px [foo] 25px [bar] 35px [last] / [first] 37px [foo] 57px [bar] 77px [last]; }
     21.gridMultipleFixed { -webkit-grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; }
    2222.gridFixed100 { -webkit-grid-template: repeat(2, 100px) / repeat(2, 100px); }
    2323
  • trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-lr.html

    r196819 r196934  
    1111
    1212.grid {
    13     -webkit-grid: 50px 50px / 100px 100px;
     13    -webkit-grid: 100px 100px / 50px 50px;
    1414    position: relative;
    1515    width: 300px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-justify-content-vertical-rl.html

    r196819 r196934  
    1111
    1212.grid {
    13     -webkit-grid: 50px 50px / 100px 100px;
     13    -webkit-grid: 100px 100px / 50px 50px;
    1414    position: relative;
    1515    width: 300px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-justify-content.html

    r190663 r196934  
    1111
    1212.grid {
    13     -webkit-grid: 50px 50px / 100px 100px;
     13    -webkit-grid: 100px 100px / 50px 50px;
    1414    position: relative;
    1515    width: 200px;
  • trunk/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html

    r196906 r196934  
    88}
    99#gridWithTemplate {
    10     -webkit-grid: 15px / 10px;
     10    -webkit-grid: 10px / 15px;
    1111}
    1212#gridWithTemplate1 {
    13     -webkit-grid: none / 10px;
     13    -webkit-grid: 10px / none;
    1414}
    1515#gridWithTemplateNone {
    16     -webkit-grid: none / 10px;
     16    -webkit-grid: 10px / none;
    1717}
    1818#gridWithAutoFlowDenseAndRowsAndColumns {
     
    157157    debug("");
    158158    debug("Test getting and setting 'grid' shorthand through JS");
    159     testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
    160     testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial");
     159    testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
     160    testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", "initial", "initial");
    161161    testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "row dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px");
    162162    testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "20px");
  • trunk/LayoutTests/fast/css-grid-layout/grid-template-shorthand-get-set.html

    r185147 r196934  
    88}
    99#gridTemplateSimpleForm {
    10     -webkit-grid-template: 10px / 15px;
     10    -webkit-grid-template: 15px / 10px;
    1111}
    1212#gridTemplateSimpleFormWithNoneColumns {
    13     -webkit-grid-template: none / 15px;
     13    -webkit-grid-template: 15px / none;
    1414}
    1515#gridTemplateSimpleFormWithNoneRows {
    16     -webkit-grid-template: 10px / none;
     16    -webkit-grid-template: none / 10px;
    1717}
    1818#gridTemplateSimpleFormWithNone {
     
    2020}
    2121#gridTemplateComplexForm {
    22     -webkit-grid-template: 10px / "a" 15px;
     22    -webkit-grid-template: "a" 15px / 10px;
    2323}
    2424#gridTemplateComplexFormWithLineNames {
    25     -webkit-grid-template: 10px / [head] "a" 15px [tail];
     25    -webkit-grid-template: [head] "a" 15px [tail] / 10px;
    2626}
    2727#gridTemplateComplexFormWithLineNamesMultipleColumns {
    28     -webkit-grid-template: 10px / [head] "a b" 15px [tail]
     28    -webkit-grid-template: [head] "a b" 15px [tail] / 10px;
    2929}
    3030#gridTemplateComplexFormWithLineNamesMultipleRows {
    31     -webkit-grid-template: 10px / [head1] "a" 15px [tail1]
    32                           [head2] "b" 20px [tail2];
     31    -webkit-grid-template: [head1] "a" 15px [tail1]
     32                           [head2] "b" 20px [tail2] / 10px;
    3333}
    3434#gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns {
    35     -webkit-grid-template: [first] 10px repeat(2, [nav nav2] 15px) /       "a b c" 100px [nav]
    36                                                             [nav2] "d e f" 25px  [nav]
    37                                                             [nav2] "g h i" 25px  [last];
     35    -webkit-grid-template:        "a b c" 100px [nav]
     36                           [nav2] "d e f" 25px  [nav]
     37                           [nav2] "g h i" 25px  [last] / [first] 10px repeat(2, [nav nav2] 15px);
    3838}
    3939#gridTemplateComplexFormWithAuto {
    40     -webkit-grid-template: 10px / "a";
     40    -webkit-grid-template: "a" / 10px;
    4141}
    4242#gridTemplateComplexFormOnlyAreas {
     
    5656}
    5757#gridTemplateSimpleFormNoRows {
     58    -webkit-grid-template: / 10px;
     59}
     60#gridTemplateSimpleFormNoColumns {
    5861    -webkit-grid-template: 10px /;
    5962}
    60 #gridTemplateSimpleFormNoColumns {
    61     -webkit-grid-template: / 10px;
    62 }
    6363#gridTemplateSimpleFormNoColumnSize {
    64     -webkit-grid-template: [line] / 10px;
     64    -webkit-grid-template: 10px / [line];
    6565}
    6666#gridTemplateSimpleFormWithFitContent {
    67     -webkit-grid-template: -webkit-fit-content / 10px;
     67    -webkit-grid-template: 10px / -webkit-fit-content;
    6868}
    6969#gridTemplateSimpleFormWithWrongRepeat {
    70     -webkit-grid-template: repeat(2, 50% [title] a) / 10px;
     70    -webkit-grid-template:  10px / repeat(2, 50% [title] a);
    7171}
    7272#gridTemplateSimpleFormWithMisplacedNone1 {
    73     -webkit-grid-template: 10px / none 20px;
     73    -webkit-grid-template: none 20px / 10px;
    7474}
    7575#gridTemplateSimpleFormWithMisplacedNone2 {
    76     -webkit-grid-template: 10px / 20px none;
     76    -webkit-grid-template: 20px none / 10px;
    7777}
    7878#gridTemplateSimpleFormWithMisplacedNone3 {
    79     -webkit-grid-template: none 10px / 20px;
     79    -webkit-grid-template: 20px / none 10px;
    8080}
    8181#gridTemplateSimpleFormWithMisplacedNone4 {
    82     -webkit-grid-template: 10px none / 20px;
     82    -webkit-grid-template: 20px / 10px none;
    8383}
    8484#gridTemplateComplexFormWithRepeat {
    85     -webkit-grid-template: 10px / "a" repeat(2, 50% [title]);
     85    -webkit-grid-template: "a" repeat(2, 50% [title]) / 10px;
    8686}
    8787#gridTemplateComplexFormWithWrongRepeat {
    88     -webkit-grid-template: repeat(2, 50% [title] a) / "a";
     88    -webkit-grid-template: "a" / repeat(2, 50% [title] a);
    8989}
    9090#griTemplateComplexFormdWithFitAvailable {
    91     -webkit-grid-template: -webkit-fit-available / "a";
     91    -webkit-grid-template: "a" / -webkit-fit-available;
    9292}
    9393#gridTemplateComplexFormNoColumnSize {
    94     -webkit-grid-template: [line] / "a";
     94    -webkit-grid-template: "a" / [line];
    9595}
    9696#gridTemplateComplexFormMisplacedRowsSize1 {
    97     -webkit-grid-template: 25px / 10px "a";
     97    -webkit-grid-template: 10px "a" / 25px;
    9898}
    9999#gridTemplateComplexFormMisplacedRowsSize2 {
    100     -webkit-grid-template: 25px / "a" [name] 10px;
     100    -webkit-grid-template: "a" [name] 10px / 25px;
    101101}
    102102#gridTemplateComplexFormColumnsNotParsing1 {
    103     -webkit-grid-template: a / "a" [name] 10px;
     103    -webkit-grid-template: "a" [name] 10px / a;
    104104}
    105105#gridTemplateComplexFormColumnsNotParsing2 {
    106     -webkit-grid-template: "B" / "a" [name] 10px;
     106    -webkit-grid-template: "a" [name] 10px / "B";
    107107}
    108108#gridTemplateComplexFormWithNoneColumns {
    109     -webkit-grid-template: none / "a" [name] 10px;
     109    -webkit-grid-template: "a" [name] 10px / none;
    110110}
    111111#gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames {
     
    211211    debug("");
    212212    debug("Test setting grid-template-columns and grid-template-rows back to 'none' through JS");
    213     testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "10px", "[line] 20px", "\"a\"");
     213    testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20px", "\"a\"");
    214214    testGridDefinitionsSetJSValues("none", "none", "none", "none");
    215215
    216216    debug("");
    217217    debug("Test getting and setting grid-template shorthand through JS");
    218     testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
    219     testGridDefinitionsSetJSValues("10px / [head] 'a' 15px [tail]", "10px", "[head] 15px [tail]", "\"a\"");
     218    testGridDefinitionsSetJSValues("66px / 18px", "18px", "66px", "none");
     219    testGridDefinitionsSetJSValues("[head] 'a' 15px [tail] / 10px", "10px", "[head] 15px [tail]", "\"a\"");
    220220    testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto");
    221221
    222222    debug("");
    223223    debug("Test setting grid-template shorthand to bad values through JS");
    224     testGridDefinitionsSetBadJSValues("none / 'a'");
    225     testGridDefinitionsSetBadJSValues("25px / 'a' [name] 10px");
    226     testGridDefinitionsSetBadJSValues("'a' / 'b'");
     224    testGridDefinitionsSetBadJSValues("'a' / none");
     225    testGridDefinitionsSetBadJSValues("'a' [name] 10px / 25px");
     226    testGridDefinitionsSetBadJSValues("'b' / 'a'");
    227227    testGridDefinitionsSetBadJSValues("15px");
    228     testGridDefinitionsSetBadJSValues("15px / 20px none");
    229     testGridDefinitionsSetBadJSValues("25px / 10px 'a'");
     228    testGridDefinitionsSetBadJSValues("20px none / 15px");
     229    testGridDefinitionsSetBadJSValues("10px 'a' / 25px");
    230230
    231231</script>
  • trunk/LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html

    r189910 r196934  
    33<style>
    44.grid {
    5   -webkit-grid: 100px 100px / 150px;
     5  -webkit-grid: 150px / 100px 100px;
    66  position: relative;
    77}
  • trunk/LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html

    r189910 r196934  
    33<style>
    44.grid {
    5   -webkit-grid: 100px 100px / 150px;
     5  -webkit-grid: 150px / 100px 100px;
    66  width: 200px;
    77  position: relative;
  • trunk/LayoutTests/fast/css-grid-layout/relayout-indefinite-heights.html

    r191879 r196934  
    33<style>
    44.grid {
    5     -webkit-grid: 50px / minmax(5px, 1fr) minmax(5px, 2fr);
     5    -webkit-grid: minmax(5px, 1fr) minmax(5px, 2fr) / 50px;
    66}
    77
  • trunk/LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html

    r189910 r196934  
    33<style>
    44.grid {
    5   -webkit-grid: 150px / 100px 100px;
     5  -webkit-grid: 100px 100px / 150px;
    66  width: 150px;
    77  position: relative;
  • trunk/LayoutTests/fast/css-grid-layout/relayout-justify-self-changed.html

    r189910 r196934  
    33<style>
    44.grid {
    5   -webkit-grid: 150px / 100px 100px;
     5  -webkit-grid: 100px 100px / 150px;
    66  width: 150px;
    77  position: relative;
  • trunk/LayoutTests/fast/repaint/align-items-overflow-change.html

    r194104 r196934  
    1313#container {
    1414  display: -webkit-grid;
    15   -webkit-grid: 200px / 150px 150px;
     15  -webkit-grid: 150px 150px / 200px;
    1616  align-items: end unsafe;
    1717  width: 200px;
  • trunk/LayoutTests/fast/repaint/align-self-change.html

    r189910 r196934  
    1414#container {
    1515  display: -webkit-grid;
    16   -webkit-grid: 100px 100px / 300px;
     16  -webkit-grid: 300px / 100px 100px;
    1717  width: 200px;
    1818  height: 300px;
  • trunk/LayoutTests/fast/repaint/align-self-overflow-change.html

    r194104 r196934  
    1414#container {
    1515  display: -webkit-grid;
    16   -webkit-grid: 200px / 150px 150px;
     16  -webkit-grid: 150px 150px / 200px;
    1717  width: 200px;
    1818  height: 300px;
  • trunk/LayoutTests/fast/repaint/justify-items-change.html

    r189910 r196934  
    1313#container {
    1414  display: -webkit-grid;
    15   -webkit-grid: 200px / 300px;
     15  -webkit-grid: 300px / 200px;
    1616  justify-items: end;
    1717  width: 200px;
  • trunk/LayoutTests/fast/repaint/justify-items-overflow-change.html

    r194104 r196934  
    1313#container {
    1414  display: -webkit-grid;
    15   -webkit-grid: 100px 100px / 300px;
     15  -webkit-grid: 300px / 100px 100px;
    1616  justify-items: end unsafe;
    1717  width: 200px;
  • trunk/LayoutTests/fast/repaint/justify-self-change.html

    r189910 r196934  
    1414#container {
    1515  display: -webkit-grid;
    16   -webkit-grid: 100px 100px / 300px;
     16  -webkit-grid: 300px / 100px 100px;
    1717  justify-items: center;
    1818  width: 200px;
  • trunk/LayoutTests/fast/repaint/justify-self-overflow-change.html

    r194104 r196934  
    1414#container {
    1515  display: -webkit-grid;
    16   -webkit-grid: 100px 100px / 300px;
     16  -webkit-grid: 300px / 100px 100px;
    1717  width: 200px;
    1818  height: 300px;
  • trunk/Source/WebCore/ChangeLog

    r196906 r196934  
     12016-02-22  Manuel Rego Casasnovas  <rego@igalia.com>
     2
     3        [css-grid] Swap columns and rows in grid-template shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=154472
     5
     6        Reviewed by Darin Adler.
     7
     8        The spec was modified past December to change the order of
     9        columns and rows in the grid-template shorthand:
     10        https://github.com/w3c/csswg-drafts/commit/f6c7691679a519017a80ebae44fd86c3eae5c5f9
     11
     12        Updated the parsing and modified the tests to follow the new syntax.
     13
     14        * css/CSSParser.cpp:
     15        (WebCore::CSSParser::parseGridTemplateColumns):
     16        (WebCore::CSSParser::parseGridTemplateRowsAndAreasAndColumns):
     17        (WebCore::CSSParser::parseGridTemplateShorthand):
     18        (WebCore::CSSParser::parseGridTemplateRowsAndAreas): Renamed to
     19        parseGridTemplateRowsAndAreasAndColumns().
     20        * css/CSSParser.h:
     21
    1222016-02-22  Manuel Rego Casasnovas  <rego@igalia.com>
    223
  • trunk/Source/WebCore/css/CSSParser.cpp

    r196906 r196934  
    55665566}
    55675567
    5568 bool CSSParser::parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue> templateColumns, bool important)
     5568RefPtr<CSSValue> CSSParser::parseGridTemplateColumns()
     5569{
     5570    if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current()) && m_valueList->next()))
     5571        return nullptr;
     5572    if (auto columnsValue = parseGridTrackList()) {
     5573        if (m_valueList->current())
     5574            return nullptr;
     5575        return columnsValue;
     5576    }
     5577
     5578    return nullptr;
     5579}
     5580
     5581bool CSSParser::parseGridTemplateRowsAndAreasAndColumns(bool important)
    55695582{
    55705583    // At least template-areas strings must be defined.
    5571     if (!m_valueList->current())
     5584    if (!m_valueList->current() || isForwardSlashOperator(*m_valueList->current()))
    55725585        return false;
    55735586
     
    55785591    RefPtr<CSSValueList> templateRows = CSSValueList::createSpaceSeparated();
    55795592
    5580     do {
     5593    while (m_valueList->current() && !isForwardSlashOperator(*m_valueList->current())) {
    55815594        // Handle leading <custom-ident>*.
    55825595        if (m_valueList->current()->unit == CSSParserValue::ValueList) {
     
    55945607
    55955608        // Handle template-rows's track-size.
    5596         if (m_valueList->current() && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
     5609        if (m_valueList->current() && !isForwardSlashOperator(*m_valueList->current()) && m_valueList->current()->unit != CSSParserValue::ValueList && m_valueList->current()->unit != CSSPrimitiveValue::CSS_STRING) {
    55975610            RefPtr<CSSValue> value = parseGridTrackSize(*m_valueList);
    55985611            if (!value)
     
    56065619        if (m_valueList->current() && m_valueList->current()->unit == CSSParserValue::ValueList)
    56075620            trailingIdentWasAdded = parseGridLineNames(*m_valueList, *templateRows);
    5608     } while (m_valueList->current());
     5621    }
    56095622
    56105623    // [<track-list> /]?
    5611     if (templateColumns)
    5612         addProperty(CSSPropertyWebkitGridTemplateColumns, templateColumns, important);
    5613     else
    5614         addProperty(CSSPropertyWebkitGridTemplateColumns, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
    5615 
    5616     // [<line-names>? <string> [<track-size> <line-names>]? ]+
     5624    RefPtr<CSSValue> templateColumns = nullptr;
     5625    if (m_valueList->current()) {
     5626        ASSERT(isForwardSlashOperator(*m_valueList->current()));
     5627        templateColumns = parseGridTemplateColumns();
     5628        if (!templateColumns)
     5629            return false;
     5630        // The template-columns <track-list> can't be 'none'.
     5631        if (templateColumns->isPrimitiveValue() && downcast<CSSPrimitiveValue>(*templateColumns).getValueID() == CSSValueNone)
     5632            return false;
     5633    }
     5634
     5635    addProperty(CSSPropertyWebkitGridTemplateRows, templateRows.release(), important);
     5636    addProperty(CSSPropertyWebkitGridTemplateColumns, templateColumns ? templateColumns.release() : CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
     5637
    56175638    RefPtr<CSSValue> templateAreas = CSSGridTemplateAreasValue::create(gridAreaMap, rowCount, columnCount);
    56185639    addProperty(CSSPropertyWebkitGridTemplateAreas, templateAreas.release(), important);
    5619     addProperty(CSSPropertyWebkitGridTemplateRows, templateRows.release(), important);
    56205640
    56215641    return true;
     
    56415661    }
    56425662
    5643     unsigned index = 0;
    5644     RefPtr<CSSValue> columnsValue = firstValueIsNone ? CSSValuePool::singleton().createIdentifierValue(CSSValueNone) : parseGridTrackList();
    5645 
    5646     // 2- <grid-template-columns> / <grid-template-columns> syntax.
    5647     if (columnsValue) {
    5648         if (!(m_valueList->current() && isForwardSlashOperator(*m_valueList->current()) && m_valueList->next()))
     5663    // 2- <grid-template-rows> / <grid-template-columns> syntax.
     5664    RefPtr<CSSValue> rowsValue;
     5665    if (firstValueIsNone)
     5666        rowsValue = CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
     5667    else
     5668        rowsValue = parseGridTrackList();
     5669
     5670    if (rowsValue) {
     5671        auto columnsValue = parseGridTemplateColumns();
     5672        if (!columnsValue)
    56495673            return false;
    5650         index = m_valueList->currentIndex();
    5651         if (RefPtr<CSSValue> rowsValue = parseGridTrackList()) {
    5652             if (m_valueList->current())
    5653                 return false;
    5654             addProperty(CSSPropertyWebkitGridTemplateColumns, columnsValue.release(), important);
    5655             addProperty(CSSPropertyWebkitGridTemplateRows, rowsValue.release(), important);
    5656             addProperty(CSSPropertyWebkitGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
    5657             return true;
    5658         }
    5659     }
    5660 
    5661 
    5662     // 3- [<track-list> /]? [<line-names>? <string> [<track-size> <line-names>]? ]+ syntax.
    5663     // The template-columns <track-list> can't be 'none'.
    5664     if (firstValueIsNone)
    5665         return false;
     5674
     5675        addProperty(CSSPropertyWebkitGridTemplateColumns, columnsValue.release(), important);
     5676        addProperty(CSSPropertyWebkitGridTemplateRows, rowsValue.release(), important);
     5677        addProperty(CSSPropertyWebkitGridTemplateAreas, CSSValuePool::singleton().createIdentifierValue(CSSValueNone), important);
     5678        return true;
     5679    }
     5680
     5681
     5682    // 3- [<line-names>? <string> [<track-size> <line-names>]? ]+ syntax.
    56665683    // It requires to rewind parsing due to previous syntax failures.
    5667     m_valueList->setCurrentIndex(index);
    5668     return parseGridTemplateRowsAndAreas(columnsValue, important);
     5684    m_valueList->setCurrentIndex(0);
     5685    return parseGridTemplateRowsAndAreasAndColumns(important);
    56695686}
    56705687
  • trunk/Source/WebCore/css/CSSParser.h

    r196851 r196934  
    211211    RefPtr<CSSValue> parseGridPosition();
    212212    bool parseGridItemPositionShorthand(CSSPropertyID, bool important);
    213     bool parseGridTemplateRowsAndAreas(PassRefPtr<CSSValue>, bool important);
     213    RefPtr<CSSValue> parseGridTemplateColumns();
     214    bool parseGridTemplateRowsAndAreasAndColumns(bool important);
    214215    bool parseGridTemplateShorthand(bool important);
    215216    bool parseGridShorthand(bool important);
Note: See TracChangeset for help on using the changeset viewer.