Changeset 185147 in webkit


Ignore:
Timestamp:
Jun 2, 2015 11:44:45 PM (9 years ago)
Author:
svillar@igalia.com
Message:

[CSS Grid Layout] Switch from parenthesis to brackets for grid line names
​https://bugs.webkit.org/show_bug.cgi?id=144996

Reviewed by Darin Adler.

Source/WebCore:

Grid line names are now enclosed by brackets instead of parentheses
as mentioned in the latest version of the spec. Appartently the CSS
code is now more readable and avoids issues with tools like SASS.

  • css/CSSGrammar.y.in:
  • css/CSSGridLineNamesValue.cpp:

(WebCore::CSSGridLineNamesValue::customCSSText):

LayoutTests:

Replaced parentheses by brackets when specifying grid line names.

  • fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
  • fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
  • fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
  • fast/css-grid-layout/grid-element-repeat-get-set-expected.txt:
  • fast/css-grid-layout/grid-element-repeat-get-set.html:
  • fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
  • fast/css-grid-layout/grid-item-bad-resolution-double-span.html:
  • fast/css-grid-layout/grid-item-column-row-get-set.html:
  • fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
  • fast/css-grid-layout/grid-item-named-grid-line-resolution.html:
  • fast/css-grid-layout/grid-item-negative-position-resolution.html:
  • fast/css-grid-layout/grid-item-position-changed-dynamic.html:
  • fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
  • fast/css-grid-layout/grid-shorthand-get-set.html:
  • fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt:
  • fast/css-grid-layout/grid-template-shorthand-get-set.html:
  • fast/css-grid-layout/named-grid-line-get-set-expected.txt:
  • fast/css-grid-layout/named-grid-line-get-set.html:
  • fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt:
  • fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html:
  • fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
  • fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html:
  • fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
  • fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
  • fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt:
  • fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt:
  • fast/css-grid-layout/non-grid-element-repeat-get-set.html:
  • fast/css-grid-layout/non-named-grid-line-get-set-expected.txt:
  • fast/css-grid-layout/non-named-grid-line-get-set.html:
  • fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:

(testInherit):
(testInitial):

  • fast/css-grid-layout/resources/grid-columns-rows-get-set.js:

(testInherit):
(testInitial):

  • fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js:

(testInherit):
(testInitial):

  • fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:

(testInherit):
(testInitial):

Location:
trunk
Files:
37 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r185145 r185147  
     12015-06-02  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Switch from parenthesis to brackets for grid line names
     4        https://bugs.webkit.org/show_bug.cgi?id=144996
     5
     6        Reviewed by Darin Adler.
     7
     8        Replaced parentheses by brackets when specifying grid line names.
     9
     10        * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
     11        * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
     12        * fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
     13        * fast/css-grid-layout/grid-element-repeat-get-set-expected.txt:
     14        * fast/css-grid-layout/grid-element-repeat-get-set.html:
     15        * fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
     16        * fast/css-grid-layout/grid-item-bad-resolution-double-span.html:
     17        * fast/css-grid-layout/grid-item-column-row-get-set.html:
     18        * fast/css-grid-layout/grid-item-named-grid-area-resolution.html:
     19        * fast/css-grid-layout/grid-item-named-grid-line-resolution.html:
     20        * fast/css-grid-layout/grid-item-negative-position-resolution.html:
     21        * fast/css-grid-layout/grid-item-position-changed-dynamic.html:
     22        * fast/css-grid-layout/grid-shorthand-get-set-expected.txt:
     23        * fast/css-grid-layout/grid-shorthand-get-set.html:
     24        * fast/css-grid-layout/grid-template-shorthand-get-set-expected.txt:
     25        * fast/css-grid-layout/grid-template-shorthand-get-set.html:
     26        * fast/css-grid-layout/named-grid-line-get-set-expected.txt:
     27        * fast/css-grid-layout/named-grid-line-get-set.html:
     28        * fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt:
     29        * fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html:
     30        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html:
     31        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html:
     32        * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
     33        * fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
     34        * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt:
     35        * fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt:
     36        * fast/css-grid-layout/non-grid-element-repeat-get-set.html:
     37        * fast/css-grid-layout/non-named-grid-line-get-set-expected.txt:
     38        * fast/css-grid-layout/non-named-grid-line-get-set.html:
     39        * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
     40        (testInherit):
     41        (testInitial):
     42        * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
     43        (testInherit):
     44        (testInitial):
     45        * fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js:
     46        (testInherit):
     47        (testInitial):
     48        * fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
     49        (testInherit):
     50        (testInitial):
     51
    1522015-06-02  Commit Queue  <commit-queue@webkit.org>
    253

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt

    r166157 r185147  
    171171
    172172Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
    173 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '50px (last)'
    174 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '(first) 20px'
     173PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '50px [last]'
     174PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 20px'
    175175
    176176Test setting grid-template-columns and grid-template-rows to 'initial' through JS
    177 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '450px (last)'
    178 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '(first) 150px'
     177PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '450px [last]'
     178PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 150px'
    179179PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
    180180PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt

    r166157 r185147  
    111111
    112112Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
    113 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 750px (last)"
    114 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "20px (middle) 45px"
     113PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 750px [last]"
     114PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "20px [middle] 45px"
    115115
    116116Test setting grid-template-columns and grid-template-rows to 'initial' through JS
    117 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "1200px (middle) 55px"
    118 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "200px (line) 400px (line)"
     117PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "1200px [middle] 55px"
     118PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "200px [line] 400px [line]"
    119119PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    120120PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"

  • trunk/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html

    r171082 r185147  
    5454function testChangingGridDefinitions()
    5555{
    56     testGridDefinitions('10px (row) 20px', '30px (column)', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
    57     testGridDefinitions('10px (row) 20px', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' });
    58     testGridDefinitions('10px 20px (row)', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' });
    59     testGridDefinitions('10px 20px (row)', '30px (column)', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
     56    testGridDefinitions('10px [row] 20px', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
     57    testGridDefinitions('10px [row] 20px', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' });
     58    testGridDefinitions('10px 20px [row]', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' });
     59    testGridDefinitions('10px 20px [row]', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
    6060}
    6161

  • trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt

    r172904 r185147  
    1515PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "33px 120px 0px 120px"
    1616PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 77px 10px 0px"
    17 PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "33px (middle) 250px (end) 0px (middle) 250px (end)"
    18 PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px (start) 77px (end) 10px (start) 0px (end)"
    19 PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "(before) 0px (before) 0px"
    20 PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "(before) 10px (before) 10px"
    21 PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px (end)"
    22 PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px (end)"
    23 PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "(start) 250px 250px"
    24 PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "(start) 10px 10px"
    25 PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "(start) 140px 250px 250px"
     17PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "33px [middle] 250px [end] 0px [middle] 250px [end]"
     18PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [start] 77px [end] 10px [start] 0px [end]"
     19PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[before] 0px [before] 0px"
     20PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[before] 10px [before] 10px"
     21PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px [end]"
     22PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [end]"
     23PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 250px 250px"
     24PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[start] 10px 10px"
     25PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 140px 250px 250px"
    2626PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "44px 10px 10px"
    27 PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px 250px 120px (last)"
    28 PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 10px (end) 0px"
     27PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px 250px 120px [last]"
     28PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 10px [end] 0px"
    2929
    3030Test invalid repeat syntax.

  • trunk/LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html

    r172904 r185147  
    4040
    4141.twoDoubleTrackWithNamedGridLineRepeat {
    42     -webkit-grid-template-rows: repeat(2, 10px (start) auto (end));
    43     -webkit-grid-template-columns: repeat(2, auto (middle) 250px (end));
     42    -webkit-grid-template-rows: repeat(2, 10px [start] auto [end]);
     43    -webkit-grid-template-columns: repeat(2, auto [middle] 250px [end]);
    4444}
    4545
    4646.twoDoubleTrackWithTrailingNamedGridLineRepeat {
    47     -webkit-grid-template-rows: repeat(2, (before) 10px);
    48     -webkit-grid-template-columns: repeat(2, (before) auto);
     47    -webkit-grid-template-rows: repeat(2, [before] 10px);
     48    -webkit-grid-template-columns: repeat(2, [before] auto);
    4949}
    5050
    5151.trailingNamedGridLineRepeat {
    52     -webkit-grid-template-rows: repeat(1, 10px) (end);
    53     -webkit-grid-template-columns: repeat(1, 250px) (end);
     52    -webkit-grid-template-rows: repeat(1, 10px) [end];
     53    -webkit-grid-template-columns: repeat(1, 250px) [end];
    5454}
    5555
    5656.leadingNamedGridLineRepeat {
    57     -webkit-grid-template-rows: (start) repeat(2, 10px);
    58     -webkit-grid-template-columns: (start) repeat(2, 250px);
     57    -webkit-grid-template-rows: [start] repeat(2, 10px);
     58    -webkit-grid-template-columns: [start] repeat(2, 250px);
    5959}
    6060
    6161.mixRepeatAfterNonRepeat {
    6262    -webkit-grid-template-rows: auto repeat(2, 10px);
    63     -webkit-grid-template-columns: (start) 140px repeat(2, 250px);
     63    -webkit-grid-template-columns: [start] 140px repeat(2, 250px);
    6464}
    6565
    6666.mixNonRepeatAfterRepeat {
    67     -webkit-grid-template-rows: repeat(2, 10px) (end) auto;
    68     -webkit-grid-template-columns: repeat(2, 250px) 15% (last);
     67    -webkit-grid-template-rows: repeat(2, 10px) [end] auto;
     68    -webkit-grid-template-columns: repeat(2, 250px) 15% [last];
    6969}
    7070</style>
    … …  
    105105    testGridTemplatesValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");
    106106    testGridTemplatesValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");
    107     testGridTemplatesValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (start) 77px (end) 10px (start) 0px (end)");
    108     testGridTemplatesValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10px");
    109     testGridTemplatesValues(document.getElementById("trailingNamedGridLineRepeat"), "250px (end)", "10px (end)");
    110     testGridTemplatesValues(document.getElementById("leadingNamedGridLineRepeat"), "(start) 250px 250px", "(start) 10px 10px");
    111     testGridTemplatesValues(document.getElementById("mixRepeatAfterNonRepeat"), "(start) 140px 250px 250px", "44px 10px 10px");
    112     testGridTemplatesValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px (last)", "10px 10px (end) 0px");
     107    testGridTemplatesValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px [middle] 250px [end] 0px [middle] 250px [end]", "10px [start] 77px [end] 10px [start] 0px [end]");
     108    testGridTemplatesValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "[before] 0px [before] 0px", "[before] 10px [before] 10px");
     109    testGridTemplatesValues(document.getElementById("trailingNamedGridLineRepeat"), "250px [end]", "10px [end]");
     110    testGridTemplatesValues(document.getElementById("leadingNamedGridLineRepeat"), "[start] 250px 250px", "[start] 10px 10px");
     111    testGridTemplatesValues(document.getElementById("mixRepeatAfterNonRepeat"), "[start] 140px 250px 250px", "44px 10px 10px");
     112    testGridTemplatesValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px [last]", "10px 10px [end] 0px");
    113113
    114114    debug("");
    … …  
    127127    testInvalidSyntax("repeat(0, 15px)");
    128128    testInvalidSyntax("repeat(-1, auto)");
    129     testInvalidSyntax("repeat(1, (foo))");
     129    testInvalidSyntax("repeat(1, [foo])");
    130130    testInvalidSyntax("repeat(1, )");
    131131    testInvalidSyntax("repeat(1)");

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html

    r171293 r185147  
    99
    1010.gridNamedGridLinesColumns {
    11     -webkit-grid-template-columns: 50px 100px (line) 200px (line);
     11    -webkit-grid-template-columns: 50px 100px [line] 200px [line];
    1212}
    1313
    1414.gridNamedGridLinesRows {
    15     -webkit-grid-template-rows: 50px 100px (line) 200px (line);
     15    -webkit-grid-template-rows: 50px 100px [line] 200px [line];
    1616}
    1717

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html

    r168416 r185147  
    55.grid {
    66    display: -webkit-grid;
    7     -webkit-grid-template-rows: (firstRow) 10px 20px;
    8     -webkit-grid-template-columns: (firstColumn) 30px 40px;
     7    -webkit-grid-template-rows: [firstRow] 10px 20px;
     8    -webkit-grid-template-columns: [firstColumn] 30px 40px;
    99    -webkit-grid-auto-flow: row;
    1010}

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html

    r168416 r185147  
    88                                 "thirdArea thirdArea";
    99
    10     -webkit-grid-template-columns: (first nav) 10px 10px;
    11     -webkit-grid-template-rows: (last) 10px 10px;
     10    -webkit-grid-template-columns: [first nav] 10px 10px;
     11    -webkit-grid-template-rows: [last] 10px 10px;
    1212}
    1313

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html

    r177858 r185147  
    55<style>
    66.grid {
    7     -webkit-grid-template-rows: (before) 50px (middle) 100px (after) 150px;
     7    -webkit-grid-template-rows: [before] 50px [middle] 100px [after] 150px;
    88    -webkit-grid-template-columns: 40px 80px 160px;
    99}

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-named-grid-line-resolution.html

    r168416 r185147  
    55<style>
    66.gridWithoutRepeat {
    7     -webkit-grid-template-columns: (a) 50px (b) 100px (c) 200px (d);
    8     -webkit-grid-template-rows: (e) 50px (f) 100px (g) 200px (h);
     7    -webkit-grid-template-columns: [a] 50px [b] 100px [c] 200px [d];
     8    -webkit-grid-template-rows: [e] 50px [f] 100px [g] 200px [h];
    99}
    1010
    1111.gridWithRepeat {
    12     -webkit-grid-template-columns: (b) 50px (b) 100px (b) 200px (b);
    13     -webkit-grid-template-rows: (g) 50px (g) 100px (g) 200px (g);
     12    -webkit-grid-template-columns: [b] 50px [b] 100px [b] 200px [b];
     13    -webkit-grid-template-rows: [g] 50px [g] 100px [g] 200px [g];
    1414}
    1515
    1616.gridFromSpecs {
    17     -webkit-grid-template-columns: (A) 10px (B) 20px (C) 30px (A) 40px (B) 50px (C) 60px (A) 70px (B) 80px (C);
     17    -webkit-grid-template-columns: [A] 10px [B] 20px [C] 30px [A] 40px [B] 50px [C] 60px [A] 70px [B] 80px [C];
    1818    -webkit-grid-template-rows: 100px;
    1919}

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html

    r168416 r185147  
    44<style>
    55.grid {
    6     -webkit-grid-template-columns: (first) 50px (middle) 100px (last);
    7     -webkit-grid-template-rows: (first) 50px (middle) 100px (last);
     6    -webkit-grid-template-columns: [first] 50px [middle] 100px [last];
     7    -webkit-grid-template-rows: [first] 50px [middle] 100px [last];
    88    /* To detect how much we extend the grid. */
    99    -webkit-grid-auto-columns: 200px;

  • trunk/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html

    r168416 r185147  
    44<style type="text/css">
    55.grid {
    6     -webkit-grid-template-columns: (col) 50px (col) 100px (col) 200px (col);
    7     -webkit-grid-template-rows: (row) 70px (row) 140px (row) 280px (row);
     6    -webkit-grid-template-columns: [col] 50px [col] 100px [col] 200px [col];
     7    -webkit-grid-template-rows: [row] 70px [row] 140px [row] 280px [row];
    88}
    99.differentNamedGridLines {
    10     -webkit-grid-template-columns: (col1) 50px (col2) 100px (col3) 200px (col4);
    11     -webkit-grid-template-rows: (row1) 70px (row2) 140px (row3) 280px (row4);
     10    -webkit-grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4];
     11    -webkit-grid-template-rows: [row1] 70px [row2] 140px [row3] 280px [row4];
    1212}
    1313</style>

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

    r177858 r185147  
    185185PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    186186PASS element.style.webkitGridTemplateColumns is "10px"
    187 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(line) 20px"
    188 PASS element.style.webkitGridTemplateRows is "(line) 20px"
     187PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[line] 20px"
     188PASS element.style.webkitGridTemplateRows is "[line] 20px"
    189189PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    190190PASS element.style.webkitGridTemplateAreas is "\"a\""

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

    r177858 r185147  
    158158    debug("Test getting and setting 'grid' shorthand through JS");
    159159    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");
     160    testGridDefinitionsSetJSValues("10px / [line] 'a' 20px", "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", "20px", "10px", "initial", "initial", "initial", "column", "20px", "10px");

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

    r173615 r185147  
    2424PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    2525PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    26 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "(head) 15px (tail)"
     26PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
    2727PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    2828PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    29 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-rows') is "(head) 15px (tail)"
     29PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
    3030PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b\""
    3131PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    32 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-rows') is "(head1) 15px (tail1 head2) 20px (tail2)"
     32PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-rows') is "[head1] 15px [tail1 head2] 20px [tail2]"
    3333PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\" \"b\""
    34 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 10px (nav nav2) 15px (nav nav2) 15px"
    35 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "100px (nav nav2) 25px (nav nav2) 25px (last)"
     34PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px [nav nav2] 15px [nav nav2] 15px"
     35PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-rows') is "100px [nav nav2] 25px [nav nav2] 25px [last]"
    3636PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAndColumns, '').getPropertyValue('-webkit-grid-template-areas') is "\"a b c\" \"d e f\" \"g h i\""
    3737PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    … …  
    4242PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    4343PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-columns') is "none"
    44 PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "(first) 0px"
     44PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-rows') is "[first] 0px"
    4545PASS window.getComputedStyle(gridTemplateNoColumnsRowWithEmptyTrailingLineNames, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    4646
    … …  
    124124PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    125125PASS element.style.webkitGridTemplateColumns is "10px"
    126 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(line) 20px"
    127 PASS element.style.webkitGridTemplateRows is "(line) 20px"
     126PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[line] 20px"
     127PASS element.style.webkitGridTemplateRows is "[line] 20px"
    128128PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    129129PASS element.style.webkitGridTemplateAreas is "\"a\""
    … …  
    144144PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "10px"
    145145PASS element.style.webkitGridTemplateColumns is "10px"
    146 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(head) 15px (tail)"
    147 PASS element.style.webkitGridTemplateRows is "(head) 15px (tail)"
     146PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[head] 15px [tail]"
     147PASS element.style.webkitGridTemplateRows is "[head] 15px [tail]"
    148148PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-areas') is "\"a\""
    149149PASS element.style.webkitGridTemplateAreas is "\"a\""

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

    r173615 r185147  
    2323}
    2424#gridTemplateComplexFormWithLineNames {
    25     -webkit-grid-template: 10px / (head) "a" 15px (tail);
     25    -webkit-grid-template: 10px / [head] "a" 15px [tail];
    2626}
    2727#gridTemplateComplexFormWithLineNamesMultipleColumns {
    28     -webkit-grid-template: 10px / (head) "a b" 15px (tail)
     28    -webkit-grid-template: 10px / [head] "a b" 15px [tail]
    2929}
    3030#gridTemplateComplexFormWithLineNamesMultipleRows {
    31     -webkit-grid-template: 10px / (head1) "a" 15px (tail1)
    32                           (head2) "b" 20px (tail2);
     31    -webkit-grid-template: 10px / [head1] "a" 15px [tail1]
     32                          [head2] "b" 20px [tail2];
    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: [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];
    3838}
    3939#gridTemplateComplexFormWithAuto {
    … …  
    4444}
    4545#gridTemplateNoColumnsRowWithEmptyTrailingLineNames {
    46     -webkit-grid-template: (first) "a" auto ();
     46    -webkit-grid-template: [first] "a" auto [];
    4747}
    4848
    … …  
    6262}
    6363#gridTemplateSimpleFormNoColumnSize {
    64     -webkit-grid-template: (line) / 10px;
     64    -webkit-grid-template: [line] / 10px;
    6565}
    6666#gridTemplateSimpleFormWithFitContent {
    … …  
    6868}
    6969#gridTemplateSimpleFormWithWrongRepeat {
    70     -webkit-grid-template: repeat(2, 50% (title) a) / 10px;
     70    -webkit-grid-template: repeat(2, 50% [title] a) / 10px;
    7171}
    7272#gridTemplateSimpleFormWithMisplacedNone1 {
    … …  
    8383}
    8484#gridTemplateComplexFormWithRepeat {
    85     -webkit-grid-template: 10px / "a" repeat(2, 50% (title));
     85    -webkit-grid-template: 10px / "a" repeat(2, 50% [title]);
    8686}
    8787#gridTemplateComplexFormWithWrongRepeat {
    88     -webkit-grid-template: repeat(2, 50% (title) a) / "a";
     88    -webkit-grid-template: repeat(2, 50% [title] a) / "a";
    8989}
    9090#griTemplateComplexFormdWithFitAvailable {
    … …  
    9292}
    9393#gridTemplateComplexFormNoColumnSize {
    94     -webkit-grid-template: (line) / "a";
     94    -webkit-grid-template: [line] / "a";
    9595}
    9696#gridTemplateComplexFormMisplacedRowsSize1 {
    … …  
    9898}
    9999#gridTemplateComplexFormMisplacedRowsSize2 {
    100     -webkit-grid-template: 25px / "a" (name) 10px;
     100    -webkit-grid-template: 25px / "a" [name] 10px;
    101101}
    102102#gridTemplateComplexFormColumnsNotParsing1 {
    103     -webkit-grid-template: a / "a" (name) 10px;
     103    -webkit-grid-template: a / "a" [name] 10px;
    104104}
    105105#gridTemplateComplexFormColumnsNotParsing2 {
    106     -webkit-grid-template: "B" / "a" (name) 10px;
     106    -webkit-grid-template: "B" / "a" [name] 10px;
    107107}
    108108#gridTemplateComplexFormWithNoneColumns {
    109     -webkit-grid-template: none / "a" (name) 10px;
     109    -webkit-grid-template: none / "a" [name] 10px;
    110110}
    111111#gridTemplateNoColumnsRowWithTwoEmptyTrailingLineNames {
    112     -webkit-grid-template: (first) "a" auto () ();
     112    -webkit-grid-template: [first] "a" auto [] [];
    113113}
    114114#gridTemplateNoColumnsRowWithEmptyTrailingLineNamesAndNonEmptyLeadingLineNames {
    115     -webkit-grid-template: (first) "a" auto () (tail);
     115    -webkit-grid-template: [first] "a" auto [] [tail];
    116116}
    117117
    … …  
    167167    testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWithNone"), "none", "none", "none");
    168168    testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm"), "10px", "15px", '"a"');
    169     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "(head) 15px (tail)", '"a"');
    170     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px", "(head) 15px (tail)", '"a b"');
    171     testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "(head1) 15px (tail1 head2) 20px (tail2)", '"a" "b"');
    172     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"');
     169    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNames"), "10px", "[head] 15px [tail]", '"a"');
     170    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleColumns"), "10px", "[head] 15px [tail]", '"a b"');
     171    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithLineNamesMultipleRows"), "10px", "[head1] 15px [tail1 head2] 20px [tail2]", '"a" "b"');
     172    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"');
    173173    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWithAuto"), "10px", "0px", '"a"');
    174174    testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOnlyAreas"), "none", "0px", '"a"');
    175     testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "none", "(first) 0px", '"a"');
     175    testGridDefinitionsValues(document.getElementById("gridTemplateNoColumnsRowWithEmptyTrailingLineNames"), "none", "[first] 0px", '"a"');
    176176
    177177    debug("");
    … …  
    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("10px / [line] 'a' 20px", "10px", "[line] 20px", "\"a\"");
    214214    testGridDefinitionsSetJSValues("none", "none", "none", "none");
    215215
    … …  
    217217    debug("Test getting and setting grid-template shorthand through JS");
    218218    testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none");
    219     testGridDefinitionsSetJSValues("10px / (head) 'a' 15px (tail)", "10px", "(head) 15px (tail)", "\"a\"");
     219    testGridDefinitionsSetJSValues("10px / [head] 'a' 15px [tail]", "10px", "[head] 15px [tail]", "\"a\"");
    220220    testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto");
    221221
    … …  
    223223    debug("Test setting grid-template shorthand to bad values through JS");
    224224    testGridDefinitionsSetBadJSValues("none / 'a'");
    225     testGridDefinitionsSetBadJSValues("25px / 'a' (name) 10px");
     225    testGridDefinitionsSetBadJSValues("25px / 'a' [name] 10px");
    226226    testGridDefinitionsSetBadJSValues("'a' / 'b'");
    227227    testGridDefinitionsSetBadJSValues("15px");

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt

    r166157 r185147  
    55
    66Test getting -webkit-grid-template-columns and -webkit-grid-template-rows set through CSS
    7 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 10px"
    8 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "(first) 15px"
    9 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "424px (last)"
    10 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "162px (last)"
    11 PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-columns') is "0px (last)"
    12 PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-rows') is "0px (last)"
    13 PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "77px (last)"
    14 PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "22px (last)"
    15 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 0px"
    16 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "0px (last)"
    17 PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 77px"
    18 PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-rows') is "22px (last)"
    19 PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 80px"
    20 PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "300px (last)"
    21 PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) 10px (last)"
    22 PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav) 15px (last)"
    23 PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) 80px (nav) 120px (last)"
    24 PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav2) 150px (nav2) 450px (last)"
     7PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px"
     8PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "[first] 15px"
     9PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "424px [last]"
     10PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "162px [last]"
     11PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-columns') is "0px [last]"
     12PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
     13PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-columns') is "77px [last]"
     14PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('-webkit-grid-template-rows') is "22px [last]"
     15PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
     16PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
     17PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 77px"
     18PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('-webkit-grid-template-rows') is "22px [last]"
     19PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 80px"
     20PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "300px [last]"
     21PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 10px [last]"
     22PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] 15px [last]"
     23PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 80px [nav] 120px [last]"
     24PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] 150px [nav2] 450px [last]"
    2525
    2626Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows through JS
    27 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 18px"
    28 PASS element.style.webkitGridTemplateColumns is "(first) 18px"
    29 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px (last)"
    30 PASS element.style.webkitGridTemplateRows is "66px (last)"
    31 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 440px"
    32 PASS element.style.webkitGridTemplateColumns is "(first) 55%"
    33 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px (last)"
    34 PASS element.style.webkitGridTemplateRows is "40% (last)"
    35 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 0px"
    36 PASS element.style.webkitGridTemplateColumns is "(first) auto"
    37 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px (last)"
    38 PASS element.style.webkitGridTemplateRows is "auto (last)"
    39 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 0px"
    40 PASS element.style.webkitGridTemplateColumns is "(first) -webkit-min-content"
    41 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px (last)"
    42 PASS element.style.webkitGridTemplateRows is "-webkit-min-content (last)"
    43 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 0px"
    44 PASS element.style.webkitGridTemplateColumns is "(first) -webkit-max-content"
    45 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px (last)"
    46 PASS element.style.webkitGridTemplateRows is "-webkit-max-content (last)"
    47 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 440px"
    48 PASS element.style.webkitGridTemplateColumns is "(first) minmax(55%, 45px)"
    49 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px (last)"
    50 PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%) (last)"
    51 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 220px"
    52 PASS element.style.webkitGridTemplateColumns is "(first) minmax(22em, -webkit-max-content)"
    53 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "50px (last)"
    54 PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em) (last)"
    55 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 220px"
    56 PASS element.style.webkitGridTemplateColumns is "(first) minmax(22em, -webkit-min-content)"
    57 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "50px (last)"
    58 PASS element.style.webkitGridTemplateRows is "minmax(-webkit-min-content, 5em) (last)"
    59 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 0px"
    60 PASS element.style.webkitGridTemplateColumns is "(first) minmax(-webkit-min-content, -webkit-max-content)"
    61 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px (last)"
    62 PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) (last)"
    63 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) 0px (last)"
    64 PASS element.style.webkitGridTemplateColumns is "(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)"
    65 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav) 0px (last)"
    66 PASS element.style.webkitGridTemplateRows is "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)"
    67 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) 0px (nav) 0px (last)"
    68 PASS element.style.webkitGridTemplateColumns is "(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)"
    69 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav2) 0px (nav2) 15px (last)"
    70 PASS element.style.webkitGridTemplateRows is "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)"
    71 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(foo bar) 0px (foo) 0px (bar)"
    72 PASS element.style.webkitGridTemplateColumns is "(foo bar) auto (foo) auto (bar)"
    73 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(foo bar) 0px (foo) 0px (bar)"
    74 PASS element.style.webkitGridTemplateRows is "(foo bar) auto (foo) auto (bar)"
     27PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 18px"
     28PASS element.style.webkitGridTemplateColumns is "[first] 18px"
     29PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px [last]"
     30PASS element.style.webkitGridTemplateRows is "66px [last]"
     31PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 440px"
     32PASS element.style.webkitGridTemplateColumns is "[first] 55%"
     33PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px [last]"
     34PASS element.style.webkitGridTemplateRows is "40% [last]"
     35PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
     36PASS element.style.webkitGridTemplateColumns is "[first] auto"
     37PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
     38PASS element.style.webkitGridTemplateRows is "auto [last]"
     39PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
     40PASS element.style.webkitGridTemplateColumns is "[first] -webkit-min-content"
     41PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
     42PASS element.style.webkitGridTemplateRows is "-webkit-min-content [last]"
     43PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
     44PASS element.style.webkitGridTemplateColumns is "[first] -webkit-max-content"
     45PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
     46PASS element.style.webkitGridTemplateRows is "-webkit-max-content [last]"
     47PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 440px"
     48PASS element.style.webkitGridTemplateColumns is "[first] minmax(55%, 45px)"
     49PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "240px [last]"
     50PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%) [last]"
     51PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 220px"
     52PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-max-content)"
     53PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "50px [last]"
     54PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em) [last]"
     55PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 220px"
     56PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-min-content)"
     57PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "50px [last]"
     58PASS element.style.webkitGridTemplateRows is "minmax(-webkit-min-content, 5em) [last]"
     59PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 0px"
     60PASS element.style.webkitGridTemplateColumns is "[first] minmax(-webkit-min-content, -webkit-max-content)"
     61PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px [last]"
     62PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) [last]"
     63PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 0px [last]"
     64PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
     65PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] 0px [last]"
     66PASS element.style.webkitGridTemplateRows is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
     67PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 0px [nav] 0px [last]"
     68PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
     69PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] 0px [nav2] 15px [last]"
     70PASS element.style.webkitGridTemplateRows is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
     71PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] 0px [foo] 0px [bar]"
     72PASS element.style.webkitGridTemplateColumns is "[foo bar] auto [foo] auto [bar]"
     73PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[foo bar] 0px [foo] 0px [bar]"
     74PASS element.style.webkitGridTemplateRows is "[foo bar] auto [foo] auto [bar]"
    7575
    7676Test getting and setting invalid -webkit-grid-template-columns and -webkit-grid-template-rows through JS

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

    r168416 r185147  
    1616}
    1717.gridWithFixed {
    18     -webkit-grid-template-columns: (first) 10px;
    19     -webkit-grid-template-rows: (first) 15px;
     18    -webkit-grid-template-columns: [first] 10px;
     19    -webkit-grid-template-rows: [first] 15px;
    2020}
    2121.gridWithPercent {
    22     -webkit-grid-template-columns: 53% (last);
    23     -webkit-grid-template-rows: 27% (last);
     22    -webkit-grid-template-columns: 53% [last];
     23    -webkit-grid-template-rows: 27% [last];
    2424}
    2525.gridWithAuto {
    26     -webkit-grid-template-columns: (first) auto;
    27     -webkit-grid-template-rows: auto (last);
     26    -webkit-grid-template-columns: [first] auto;
     27    -webkit-grid-template-rows: auto [last];
    2828}
    2929.gridWithMinMax {
    30     -webkit-grid-template-columns: (first) minmax(10%, 15px);
    31     -webkit-grid-template-rows: minmax(20px, 50%) (last);
     30    -webkit-grid-template-columns: [first] minmax(10%, 15px);
     31    -webkit-grid-template-rows: minmax(20px, 50%) [last];
    3232}
    3333.gridWithFixedMultiple {
    34     -webkit-grid-template-columns: (first nav) 10px (last);
    35     -webkit-grid-template-rows: (first nav) 15px (last);
     34    -webkit-grid-template-columns: [first nav] 10px [last];
     35    -webkit-grid-template-rows: [first nav] 15px [last];
    3636}
    3737.gridWithPercentageSameStringMultipleTimes {
    38     -webkit-grid-template-columns: (first nav) 10% (nav) 15% (last);
    39     -webkit-grid-template-rows: (first nav2) 25% (nav2) 75% (last);
     38    -webkit-grid-template-columns: [first nav] 10% [nav] 15% [last];
     39    -webkit-grid-template-rows: [first nav2] 25% [nav2] 75% [last];
    4040}
    4141</style>
    … …  
    6161
    6262    debug("Test getting -webkit-grid-template-columns and -webkit-grid-template-rows set through CSS");
    63     testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "(first) 10px", "(first) 15px");
    64     testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "424px (last)", "162px (last)");
    65     testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "0px (last)", "0px (last)");
    66     testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px (last)", "22px (last)");
    67     testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "(first) 0px", "0px (last)");
    68     testGridTemplatesValues(document.getElementById("gridWithAutoWithChildrenElement"), "(first) 77px", "22px (last)");
    69     testGridTemplatesValues(document.getElementById("gridWithMinMax"), "(first) 80px", "300px (last)");
    70     testGridTemplatesValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
    71     testGridTemplatesValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "(first nav) 80px (nav) 120px (last)", "(first nav2) 150px (nav2) 450px (last)");
     63    testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
     64    testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]");
     65    testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
     66    testGridTemplatesValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px [last]", "22px [last]");
     67    testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "[first] 0px", "0px [last]");
     68    testGridTemplatesValues(document.getElementById("gridWithAutoWithChildrenElement"), "[first] 77px", "22px [last]");
     69    testGridTemplatesValues(document.getElementById("gridWithMinMax"), "[first] 80px", "300px [last]");
     70    testGridTemplatesValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
     71    testGridTemplatesValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [nav2] 450px [last]");
    7272
    7373    debug("");
    7474    debug("Test getting and setting -webkit-grid-template-columns and -webkit-grid-template-rows through JS");
    75     testGridTemplatesSetJSValues("(first) 18px", "66px (last)", "(first) 18px", "66px (last)", "(first) 18px", "66px (last)");
    76     testGridTemplatesSetJSValues("(first) 55%", "40% (last)", "(first) 440px", "240px (last)", "(first) 55%", "40% (last)");
    77     testGridTemplatesSetJSValues("(first) auto", "auto (last)", "(first) 0px", "0px (last)", "(first) auto", "auto (last)");
    78     testGridTemplatesSetJSValues("(first) -webkit-min-content", "-webkit-min-content (last)", "(first) 0px", "0px (last)", "(first) -webkit-min-content", "-webkit-min-content (last)");
    79     testGridTemplatesSetJSValues("(first) -webkit-max-content", "-webkit-max-content (last)", "(first) 0px", "0px (last)", "(first) -webkit-max-content", "-webkit-max-content (last)");
    80     testGridTemplatesSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) 440px", "240px (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)");
    81     testGridTemplatesSetJSValues("(first) minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) (last)");
    82     testGridTemplatesSetJSValues("(first) minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) (last)", "(first) 220px", "50px (last)", "(first) minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) (last)");
    83     testGridTemplatesSetJSValues("(first) minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) (last)", "(first) 0px", "0px (last)", "(first) minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) (last)");
    84     testGridTemplatesSetJSValues("(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)", "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)", "(first nav) 0px (last)", "(first nav) 0px (last)", "(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)", "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)");
    85     testGridTemplatesSetJSValues("(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)", "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) 0px (nav) 0px (last)", "(first nav2) 0px (nav2) 15px (last)", "(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)", "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)");
    86     testGridTemplatesSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) 0px (foo) 0px (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)");
     75    testGridTemplatesSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
     76    testGridTemplatesSetJSValues("[first] 55%", "40% [last]", "[first] 440px", "240px [last]", "[first] 55%", "40% [last]");
     77    testGridTemplatesSetJSValues("[first] auto", "auto [last]", "[first] 0px", "0px [last]", "[first] auto", "auto [last]");
     78    testGridTemplatesSetJSValues("[first] -webkit-min-content", "-webkit-min-content [last]", "[first] 0px", "0px [last]", "[first] -webkit-min-content", "-webkit-min-content [last]");
     79    testGridTemplatesSetJSValues("[first] -webkit-max-content", "-webkit-max-content [last]", "[first] 0px", "0px [last]", "[first] -webkit-max-content", "-webkit-max-content [last]");
     80    testGridTemplatesSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] 440px", "240px [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
     81    testGridTemplatesSetJSValues("[first] minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) [last]");
     82    testGridTemplatesSetJSValues("[first] minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) [last]");
     83    testGridTemplatesSetJSValues("[first] minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) [last]", "[first] 0px", "0px [last]", "[first] minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) [last]");
     84    testGridTemplatesSetJSValues("[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]", "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]", "[first nav] 0px [last]", "[first nav] 0px [last]", "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]", "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]");
     85    testGridTemplatesSetJSValues("[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]", "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] 0px [nav] 0px [last]", "[first nav2] 0px [nav2] 15px [last]", "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]", "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]");
     86    testGridTemplatesSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
    8787
    8888    debug("");

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks-expected.txt

    r183739 r185147  
    44
    55
    6 PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b)"
    7 PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y) 50px 50px 50px"
    8 PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b) 150px"
    9 PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y) 50px"
    10 PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b) 150px 100px"
    11 PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y) 50px"
    12 PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "(a) 200px (b) 150px 100px 50px"
    13 PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "(x) 50px (y)"
    14 PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e)"
    15 PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w) 50px 50px 50px"
    16 PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e) 150px"
    17 PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w) 50px"
    18 PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e) 150px 100px"
    19 PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w) 50px"
    20 PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(a b c) 200px (d e) 150px 100px 50px"
    21 PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(x y z) 50px (v w)"
     6PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b]"
     7PASS window.getComputedStyle(gridOneColumnSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y] 50px 50px 50px"
     8PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b] 150px"
     9PASS window.getComputedStyle(gridTwoColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y] 50px"
     10PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b] 150px 100px"
     11PASS window.getComputedStyle(gridThreeColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y] 50px"
     12PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-columns') is "[a] 200px [b] 150px 100px 50px"
     13PASS window.getComputedStyle(gridFourColumnsSingle, '').getPropertyValue('-webkit-grid-template-rows') is "[x] 50px [y]"
     14PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e]"
     15PASS window.getComputedStyle(gridOneColumnMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w] 50px 50px 50px"
     16PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e] 150px"
     17PASS window.getComputedStyle(gridTwoColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w] 50px"
     18PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e] 150px 100px"
     19PASS window.getComputedStyle(gridThreeColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w] 50px"
     20PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[a b c] 200px [d e] 150px 100px 50px"
     21PASS window.getComputedStyle(gridFourColumnsMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[x y z] 50px [v w]"
    2222PASS successfullyParsed is true
    2323

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-computed-style-implicit-tracks.html

    r183739 r185147  
    77
    88.singleNamedGridLines {
    9     -webkit-grid-template-columns: (a) auto (b);
    10     -webkit-grid-template-rows: (x) auto (y);
     9    -webkit-grid-template-columns: [a] auto [b];
     10    -webkit-grid-template-rows: [x] auto [y];
    1111}
    1212
    1313.multipleNamedGridLines {
    14     -webkit-grid-template-columns: (a b c) auto (d e);
    15     -webkit-grid-template-rows: (x y z) auto (v w);
     14    -webkit-grid-template-columns: [a b c] auto [d e];
     15    -webkit-grid-template-rows: [x y z] auto [v w];
    1616}
    1717</style>
    … …  
    7878    description('Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks');
    7979
    80     testGridTemplatesValues(document.getElementById("gridOneColumnSingle"), "(a) 200px (b)", "(x) 50px (y) 50px 50px 50px");
    81     testGridTemplatesValues(document.getElementById("gridTwoColumnsSingle"), "(a) 200px (b) 150px", "(x) 50px (y) 50px");
    82     testGridTemplatesValues(document.getElementById("gridThreeColumnsSingle"), "(a) 200px (b) 150px 100px", "(x) 50px (y) 50px");
    83     testGridTemplatesValues(document.getElementById("gridFourColumnsSingle"), "(a) 200px (b) 150px 100px 50px", "(x) 50px (y)");
     80    testGridTemplatesValues(document.getElementById("gridOneColumnSingle"), "[a] 200px [b]", "[x] 50px [y] 50px 50px 50px");
     81    testGridTemplatesValues(document.getElementById("gridTwoColumnsSingle"), "[a] 200px [b] 150px", "[x] 50px [y] 50px");
     82    testGridTemplatesValues(document.getElementById("gridThreeColumnsSingle"), "[a] 200px [b] 150px 100px", "[x] 50px [y] 50px");
     83    testGridTemplatesValues(document.getElementById("gridFourColumnsSingle"), "[a] 200px [b] 150px 100px 50px", "[x] 50px [y]");
    8484
    85     testGridTemplatesValues(document.getElementById("gridOneColumnMultiple"), "(a b c) 200px (d e)", "(x y z) 50px (v w) 50px 50px 50px");
    86     testGridTemplatesValues(document.getElementById("gridTwoColumnsMultiple"), "(a b c) 200px (d e) 150px", "(x y z) 50px (v w) 50px");
    87     testGridTemplatesValues(document.getElementById("gridThreeColumnsMultiple"), "(a b c) 200px (d e) 150px 100px", "(x y z) 50px (v w) 50px");
    88     testGridTemplatesValues(document.getElementById("gridFourColumnsMultiple"), "(a b c) 200px (d e) 150px 100px 50px", "(x y z) 50px (v w)");
     85    testGridTemplatesValues(document.getElementById("gridOneColumnMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w] 50px 50px 50px");
     86    testGridTemplatesValues(document.getElementById("gridTwoColumnsMultiple"), "[a b c] 200px [d e] 150px", "[x y z] 50px [v w] 50px");
     87    testGridTemplatesValues(document.getElementById("gridThreeColumnsMultiple"), "[a b c] 200px [d e] 150px 100px", "[x y z] 50px [v w] 50px");
     88    testGridTemplatesValues(document.getElementById("gridFourColumnsMultiple"), "[a b c] 200px [d e] 150px 100px 50px", "[x y z] 50px [v w]");
    8989</script>

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-dynamic-get-set.html

    r177858 r185147  
    5151    var templateAreaTwo = '". d d" "a d d" ". . c"';
    5252
    53     var columnUniqueNames = '(a) 50px (b b-start) 100px (c -start) 200px (d)';
    54     var rowUniqueNames = '(e) 50px (f -end) 100px (g g-start) 200px (h)';
    55     var columnNamedLineBeforeArea = '(a-start c-start) 50px (d-start) 100px 200px';
    56     var rowNamedLineBeforeArea = '(c-start) 50px (d-start) 100px 200px';
    57     var columnRepeatedNames = '(d-start) 50px (d-start) 100px (d-start) 200px';
    58     var rowRepeatedNames = '50px (c-end) 100px (c-end) 200px (c-end)';
     53    var columnUniqueNames = '[a] 50px [b b-start] 100px [c -start] 200px [d]';
     54    var rowUniqueNames = '[e] 50px [f -end] 100px [g g-start] 200px [h]';
     55    var columnNamedLineBeforeArea = '[a-start c-start] 50px [d-start] 100px 200px';
     56    var rowNamedLineBeforeArea = '[c-start] 50px [d-start] 100px 200px';
     57    var columnRepeatedNames = '[d-start] 50px [d-start] 100px [d-start] 200px';
     58    var rowRepeatedNames = '50px [c-end] 100px [c-end] 200px [c-end]';
    5959    var columnNoNames = '50px 100px 200px';
    6060    var rowNoNames = '50px 100px 200px';

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-get-set.html

    r168416 r185147  
    1717
    1818  .gridUniqueNames {
    19       -webkit-grid-template-columns: (a) 50px (b b-start) 100px (c) 200px (d);
    20       -webkit-grid-template-rows: (e) 50px (f) 100px (g g-start) 200px (h);
     19      -webkit-grid-template-columns: [a] 50px (b b-start) 100px [c] 200px [d];
     20      -webkit-grid-template-rows: [e] 50px [f] 100px (g g-start) 200px [h];
    2121  }
    2222

  • trunk/LayoutTests/fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html

    r177858 r185147  
    2323
    2424  .gridUniqueNames {
    25       -webkit-grid-template-columns: (a) 50px (b b-start) 100px (c -start) 200px (d);
    26       -webkit-grid-template-rows: (e) 50px (f -end) 100px (g g-start) 200px (h);
     25      -webkit-grid-template-columns: [a] 50px [b b-start] 100px [c -start] 200px [d];
     26      -webkit-grid-template-rows: [e] 50px [f -end] 100px [g g-start] 200px [h];
    2727  }
    2828
    2929  .gridWithNamedLineBeforeGridArea {
    30       -webkit-grid-template-columns: (a-start c-start) 50px (d-start) 100px 200px;
    31       -webkit-grid-template-rows: (c-start) 50px (d-start) 100px 200px;
     30      -webkit-grid-template-columns: [a-start c-start] 50px [d-start] 100px 200px;
     31      -webkit-grid-template-rows: [c-start] 50px [d-start] 100px 200px;
    3232  }
    3333
    3434  .gridWithNamedLineAfterGridArea {
    35       -webkit-grid-template-columns: 50px 100px (a-start) 200px;
    36       -webkit-grid-template-rows: 50px 100px (c-start) 200px;
     35      -webkit-grid-template-columns: 50px 100px [a-start] 200px;
     36      -webkit-grid-template-rows: 50px 100px [c-start] 200px;
    3737  }
    3838
    3939  .gridWithEndLines {
    40       -webkit-grid-template-columns: 50px 100px (a-end) 200px (c-end);
    41       -webkit-grid-template-rows: 50px (c-end) 100px (d-end) 200px;
     40      -webkit-grid-template-columns: 50px 100px [a-end] 200px [c-end];
     41      -webkit-grid-template-rows: 50px [c-end] 100px [d-end] 200px;
    4242  }
    4343
    4444  .gridRepeatedNames {
    45       -webkit-grid-template-columns: (d-start) 50px (d-start) 100px (d-start) 200px;
    46       -webkit-grid-template-rows: 50px (c-end) 100px (c-end) 200px (c-end);
     45      -webkit-grid-template-columns: [d-start] 50px [d-start] 100px [d-start] 200px;
     46      -webkit-grid-template-rows: 50px [c-end] 100px [c-end] 200px [c-end];
    4747  }
    4848
    4949  .gridImplicitArea {
    50       -webkit-grid-template-columns: 50px (z-start) 100px (z-end) 200px;
    51       -webkit-grid-template-rows: 50px (z-start) 100px 200px (z-end);
     50      -webkit-grid-template-columns: 50px [z-start] 100px [z-end] 200px;
     51      -webkit-grid-template-rows: 50px [z-start] 100px 200px [z-end];
    5252  }
    5353

  • trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt

    r166157 r185147  
    141141
    142142Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
    143 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '50px (last)'
    144 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '(first) 101%'
     143PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '50px [last]'
     144PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 101%'
    145145
    146146Test setting grid-template-columns and grid-template-rows to 'initial' through JS
    147 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '150% (last)'
    148 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '(first) 1fr'
     147PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is '150% [last]'
     148PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is '[first] 1fr'
    149149PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
    150150PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'

  • trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt

    r166157 r185147  
    9999
    100100Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
    101 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 1fr (last)"
    102 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "101% (middle) 45px"
    103 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 1fr (last)"
    104 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "101% (middle) 45px"
     101PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 1fr [last]"
     102PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "101% [middle] 45px"
     103PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 1fr [last]"
     104PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "101% [middle] 45px"
    105105
    106106Test setting grid-template-columns and grid-template-rows to 'initial' through JS
    107 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "150% (middle) 55px"
    108 PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "1fr (line) 2fr (line)"
     107PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "150% [middle] 55px"
     108PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "1fr [line] 2fr [line]"
    109109PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
    110110PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is 'none'

  • trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt

    r166157 r185147  
    1111PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "auto minmax(100px, 120px) auto minmax(100px, 120px)"
    1212PASS window.getComputedStyle(twoDoubleTrackRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(5px, 10px) auto minmax(5px, 10px) auto"
    13 PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "auto (middle) 250px (end) auto (middle) 250px (end)"
    14 PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px (start) auto (end) 10px (start) auto (end)"
    15 PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "(before) auto (before) auto"
    16 PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "(before) 10px (before) 10px"
    17 PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px (end)"
    18 PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px (end)"
    19 PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "(start) 250px 250px"
    20 PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "(start) 10px 10px"
    21 PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "(start) 140px 250px 250px"
     13PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "auto [middle] 250px [end] auto [middle] 250px [end]"
     14PASS window.getComputedStyle(twoDoubleTrackWithNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [start] auto [end] 10px [start] auto [end]"
     15PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[before] auto [before] auto"
     16PASS window.getComputedStyle(twoDoubleTrackWithTrailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[before] 10px [before] 10px"
     17PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px [end]"
     18PASS window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px [end]"
     19PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 250px 250px"
     20PASS window.getComputedStyle(leadingNamedGridLineRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "[start] 10px 10px"
     21PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "[start] 140px 250px 250px"
    2222PASS window.getComputedStyle(mixRepeatAfterNonRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "auto 10px 10px"
    23 PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px 250px 15% (last)"
    24 PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 10px (end) auto"
     23PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-columns') is "250px 250px 15% [last]"
     24PASS window.getComputedStyle(mixNonRepeatAfterRepeat, '').getPropertyValue('-webkit-grid-template-rows') is "10px 10px [end] auto"
    2525
    2626Test invalid repeat syntax.

  • trunk/LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set.html

    r168416 r185147  
    2020
    2121.twoDoubleTrackWithNamedGridLineRepeat {
    22     -webkit-grid-template-rows: repeat(2, 10px (start) auto (end));
    23     -webkit-grid-template-columns: repeat(2, auto (middle) 250px (end));
     22    -webkit-grid-template-rows: repeat(2, 10px [start] auto [end]);
     23    -webkit-grid-template-columns: repeat(2, auto [middle] 250px [end]);
    2424}
    2525
    2626.twoDoubleTrackWithTrailingNamedGridLineRepeat {
    27     -webkit-grid-template-rows: repeat(2, (before) 10px);
    28     -webkit-grid-template-columns: repeat(2, (before) auto);
     27    -webkit-grid-template-rows: repeat(2, [before] 10px);
     28    -webkit-grid-template-columns: repeat(2, [before] auto);
    2929}
    3030
    3131.trailingNamedGridLineRepeat {
    32     -webkit-grid-template-rows: repeat(1, 10px) (end);
    33     -webkit-grid-template-columns: repeat(1, 250px) (end);
     32    -webkit-grid-template-rows: repeat(1, 10px) [end];
     33    -webkit-grid-template-columns: repeat(1, 250px) [end];
    3434}
    3535
    3636.leadingNamedGridLineRepeat {
    37     -webkit-grid-template-rows: (start) repeat(2, 10px);
    38     -webkit-grid-template-columns: (start) repeat(2, 250px);
     37    -webkit-grid-template-rows: [start] repeat(2, 10px);
     38    -webkit-grid-template-columns: [start] repeat(2, 250px);
    3939}
    4040
    4141.mixRepeatAfterNonRepeat {
    4242    -webkit-grid-template-rows: auto repeat(2, 10px);
    43     -webkit-grid-template-columns: (start) 140px repeat(2, 250px);
     43    -webkit-grid-template-columns: [start] 140px repeat(2, 250px);
    4444}
    4545
    4646.mixNonRepeatAfterRepeat {
    47     -webkit-grid-template-rows: repeat(2, 10px) (end) auto;
    48     -webkit-grid-template-columns: repeat(2, 250px) 15% (last);
     47    -webkit-grid-template-rows: repeat(2, 10px) [end] auto;
     48    -webkit-grid-template-columns: repeat(2, 250px) 15% [last];
    4949}
    5050</style>
    … …  
    7070    testGridTemplatesValues(document.getElementById("twoSingleTrackRepeat"), "minmax(15px, 50%) minmax(15px, 50%)", "auto auto");
    7171    testGridTemplatesValues(document.getElementById("twoDoubleTrackRepeat"), "auto minmax(100px, 120px) auto minmax(100px, 120px)", "minmax(5px, 10px) auto minmax(5px, 10px) auto");
    72     testGridTemplatesValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "auto (middle) 250px (end) auto (middle) 250px (end)", "10px (start) auto (end) 10px (start) auto (end)");
    73     testGridTemplatesValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "(before) auto (before) auto", "(before) 10px (before) 10px");
    74     testGridTemplatesValues(document.getElementById("trailingNamedGridLineRepeat"), "250px (end)", "10px (end)");
    75     testGridTemplatesValues(document.getElementById("leadingNamedGridLineRepeat"), "(start) 250px 250px", "(start) 10px 10px");
    76     testGridTemplatesValues(document.getElementById("mixRepeatAfterNonRepeat"), "(start) 140px 250px 250px", "auto 10px 10px");
    77     testGridTemplatesValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 15% (last)", "10px 10px (end) auto");
     72    testGridTemplatesValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "auto [middle] 250px [end] auto [middle] 250px [end]", "10px [start] auto [end] 10px [start] auto [end]");
     73    testGridTemplatesValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "[before] auto [before] auto", "[before] 10px [before] 10px");
     74    testGridTemplatesValues(document.getElementById("trailingNamedGridLineRepeat"), "250px [end]", "10px [end]");
     75    testGridTemplatesValues(document.getElementById("leadingNamedGridLineRepeat"), "[start] 250px 250px", "[start] 10px 10px");
     76    testGridTemplatesValues(document.getElementById("mixRepeatAfterNonRepeat"), "[start] 140px 250px 250px", "auto 10px 10px");
     77    testGridTemplatesValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 15% [last]", "10px 10px [end] auto");
    7878
    7979    debug("");

  • trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set-expected.txt

    r166157 r185147  
    55
    66Test getting grid-template-columns and grid-template-rows set through CSS
    7 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 10px"
    8 PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "(first) 15px"
    9 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "53% (last)"
    10 PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "27% (last)"
    11 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "(first) auto"
    12 PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "auto (last)"
    13 PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "(first) minmax(10%, 15px)"
    14 PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(20px, 50%) (last)"
    15 PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) 10px (last)"
    16 PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav) 15px (last)"
    17 PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) 10% (nav) 15% (last)"
    18 PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav2) 25% (nav2) 75% (last)"
     7PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 10px"
     8PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-template-rows') is "[first] 15px"
     9PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-columns') is "53% [last]"
     10PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-template-rows') is "27% [last]"
     11PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-columns') is "[first] auto"
     12PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-template-rows') is "auto [last]"
     13PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(10%, 15px)"
     14PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(20px, 50%) [last]"
     15PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 10px [last]"
     16PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] 15px [last]"
     17PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] 10% [nav] 15% [last]"
     18PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] 25% [nav2] 75% [last]"
    1919
    2020Test getting and setting grid-template-columns and grid-template-rows through JS
    21 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 18px"
    22 PASS element.style.webkitGridTemplateColumns is "(first) 18px"
    23 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px (last)"
    24 PASS element.style.webkitGridTemplateRows is "66px (last)"
    25 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) 55%"
    26 PASS element.style.webkitGridTemplateColumns is "(first) 55%"
    27 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "40% (last)"
    28 PASS element.style.webkitGridTemplateRows is "40% (last)"
    29 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) auto"
    30 PASS element.style.webkitGridTemplateColumns is "(first) auto"
    31 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "auto (last)"
    32 PASS element.style.webkitGridTemplateRows is "auto (last)"
    33 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) -webkit-min-content"
    34 PASS element.style.webkitGridTemplateColumns is "(first) -webkit-min-content"
    35 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-min-content (last)"
    36 PASS element.style.webkitGridTemplateRows is "-webkit-min-content (last)"
    37 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) -webkit-max-content"
    38 PASS element.style.webkitGridTemplateColumns is "(first) -webkit-max-content"
    39 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content (last)"
    40 PASS element.style.webkitGridTemplateRows is "-webkit-max-content (last)"
    41 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) minmax(55%, 45px)"
    42 PASS element.style.webkitGridTemplateColumns is "(first) minmax(55%, 45px)"
    43 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(30px, 40%) (last)"
    44 PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%) (last)"
    45 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) minmax(220px, -webkit-max-content)"
    46 PASS element.style.webkitGridTemplateColumns is "(first) minmax(22em, -webkit-max-content)"
    47 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, 50px) (last)"
    48 PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em) (last)"
    49 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) minmax(220px, -webkit-min-content)"
    50 PASS element.style.webkitGridTemplateColumns is "(first) minmax(22em, -webkit-min-content)"
    51 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-min-content, 50px) (last)"
    52 PASS element.style.webkitGridTemplateRows is "minmax(-webkit-min-content, 5em) (last)"
    53 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first) minmax(-webkit-min-content, -webkit-max-content)"
    54 PASS element.style.webkitGridTemplateColumns is "(first) minmax(-webkit-min-content, -webkit-max-content)"
    55 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, -webkit-min-content) (last)"
    56 PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) (last)"
    57 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)"
    58 PASS element.style.webkitGridTemplateColumns is "(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)"
    59 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)"
    60 PASS element.style.webkitGridTemplateRows is "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)"
    61 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)"
    62 PASS element.style.webkitGridTemplateColumns is "(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)"
    63 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)"
    64 PASS element.style.webkitGridTemplateRows is "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)"
    65 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "(foo bar) auto (foo) auto (bar)"
    66 PASS element.style.webkitGridTemplateColumns is "(foo bar) auto (foo) auto (bar)"
    67 PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "(foo bar) auto (foo) auto (bar)"
    68 PASS element.style.webkitGridTemplateRows is "(foo bar) auto (foo) auto (bar)"
     21PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 18px"
     22PASS element.style.webkitGridTemplateColumns is "[first] 18px"
     23PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "66px [last]"
     24PASS element.style.webkitGridTemplateRows is "66px [last]"
     25PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] 55%"
     26PASS element.style.webkitGridTemplateColumns is "[first] 55%"
     27PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "40% [last]"
     28PASS element.style.webkitGridTemplateRows is "40% [last]"
     29PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] auto"
     30PASS element.style.webkitGridTemplateColumns is "[first] auto"
     31PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "auto [last]"
     32PASS element.style.webkitGridTemplateRows is "auto [last]"
     33PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] -webkit-min-content"
     34PASS element.style.webkitGridTemplateColumns is "[first] -webkit-min-content"
     35PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-min-content [last]"
     36PASS element.style.webkitGridTemplateRows is "-webkit-min-content [last]"
     37PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] -webkit-max-content"
     38PASS element.style.webkitGridTemplateColumns is "[first] -webkit-max-content"
     39PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content [last]"
     40PASS element.style.webkitGridTemplateRows is "-webkit-max-content [last]"
     41PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(55%, 45px)"
     42PASS element.style.webkitGridTemplateColumns is "[first] minmax(55%, 45px)"
     43PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(30px, 40%) [last]"
     44PASS element.style.webkitGridTemplateRows is "minmax(30px, 40%) [last]"
     45PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(220px, -webkit-max-content)"
     46PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-max-content)"
     47PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, 50px) [last]"
     48PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, 5em) [last]"
     49PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(220px, -webkit-min-content)"
     50PASS element.style.webkitGridTemplateColumns is "[first] minmax(22em, -webkit-min-content)"
     51PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-min-content, 50px) [last]"
     52PASS element.style.webkitGridTemplateRows is "minmax(-webkit-min-content, 5em) [last]"
     53PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first] minmax(-webkit-min-content, -webkit-max-content)"
     54PASS element.style.webkitGridTemplateColumns is "[first] minmax(-webkit-min-content, -webkit-max-content)"
     55PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-max-content, -webkit-min-content) [last]"
     56PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content) [last]"
     57PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
     58PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]"
     59PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
     60PASS element.style.webkitGridTemplateRows is "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]"
     61PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
     62PASS element.style.webkitGridTemplateColumns is "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]"
     63PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
     64PASS element.style.webkitGridTemplateRows is "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]"
     65PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "[foo bar] auto [foo] auto [bar]"
     66PASS element.style.webkitGridTemplateColumns is "[foo bar] auto [foo] auto [bar]"
     67PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "[foo bar] auto [foo] auto [bar]"
     68PASS element.style.webkitGridTemplateRows is "[foo bar] auto [foo] auto [bar]"
    6969
    7070Test getting and setting invalid grid-template-columns and grid-template-rows through JS

  • trunk/LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html

    r168416 r185147  
    1111}
    1212.gridWithFixed {
    13     -webkit-grid-template-columns: (first) 10px;
    14     -webkit-grid-template-rows: (first) 15px;
     13    -webkit-grid-template-columns: [first] 10px;
     14    -webkit-grid-template-rows: [first] 15px;
    1515}
    1616.gridWithPercent {
    17     -webkit-grid-template-columns: 53% (last);
    18     -webkit-grid-template-rows: 27% (last);
     17    -webkit-grid-template-columns: 53% [last];
     18    -webkit-grid-template-rows: 27% [last];
    1919}
    2020.gridWithAuto {
    21     -webkit-grid-template-columns: (first) auto;
    22     -webkit-grid-template-rows: auto (last);
     21    -webkit-grid-template-columns: [first] auto;
     22    -webkit-grid-template-rows: auto [last];
    2323}
    2424.gridWithMinMax {
    25     -webkit-grid-template-columns: (first) minmax(10%, 15px);
    26     -webkit-grid-template-rows: minmax(20px, 50%) (last);
     25    -webkit-grid-template-columns: [first] minmax(10%, 15px);
     26    -webkit-grid-template-rows: minmax(20px, 50%) [last];
    2727}
    2828.gridWithFixedMultiple {
    29     -webkit-grid-template-columns: (first nav) 10px (last);
    30     -webkit-grid-template-rows: (first nav) 15px (last);
     29    -webkit-grid-template-columns: [first nav] 10px [last];
     30    -webkit-grid-template-rows: [first nav] 15px [last];
    3131}
    3232.gridWithPercentageSameStringMultipleTimes {
    33     -webkit-grid-template-columns: (first nav) 10% (nav) 15% (last);
    34     -webkit-grid-template-rows: (first nav2) 25% (nav2) 75% (last);
     33    -webkit-grid-template-columns: [first nav] 10% [nav] 15% [last];
     34    -webkit-grid-template-rows: [first nav2] 25% [nav2] 75% [last];
    3535}
    3636</style>
    … …  
    5353
    5454    debug("Test getting grid-template-columns and grid-template-rows set through CSS");
    55     testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "(first) 10px", "(first) 15px");
    56     testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "53% (last)", "27% (last)");
    57     testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "(first) auto", "auto (last)");
    58     testGridTemplatesValues(document.getElementById("gridWithMinMax"), "(first) minmax(10%, 15px)", "minmax(20px, 50%) (last)");
    59     testGridTemplatesValues(document.getElementById("gridWithFixedMultiple"), "(first nav) 10px (last)", "(first nav) 15px (last)");
    60     testGridTemplatesValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "(first nav) 10% (nav) 15% (last)", "(first nav2) 25% (nav2) 75% (last)");
     55    testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
     56    testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "53% [last]", "27% [last]");
     57    testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "[first] auto", "auto [last]");
     58    testGridTemplatesValues(document.getElementById("gridWithMinMax"), "[first] minmax(10%, 15px)", "minmax(20px, 50%) [last]");
     59    testGridTemplatesValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
     60    testGridTemplatesValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 10% [nav] 15% [last]", "[first nav2] 25% [nav2] 75% [last]");
    6161
    6262    debug("");
    6363    debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
    64     testNonGridTemplatesSetJSValues("(first) 18px", "66px (last)", "(first) 18px", "66px (last)", "(first) 18px", "66px (last)");
    65     testNonGridTemplatesSetJSValues("(first) 55%", "40% (last)", "(first) 55%", "40% (last)", "(first) 55%", "40% (last)");
    66     testNonGridTemplatesSetJSValues("(first) auto", "auto (last)", "(first) auto", "auto (last)", "(first) auto", "auto (last)");
    67     testNonGridTemplatesSetJSValues("(first) -webkit-min-content", "-webkit-min-content (last)", "(first) -webkit-min-content", "-webkit-min-content (last)", "(first) -webkit-min-content", "-webkit-min-content (last)");
    68     testNonGridTemplatesSetJSValues("(first) -webkit-max-content", "-webkit-max-content (last)", "(first) -webkit-max-content", "-webkit-max-content (last)", "(first) -webkit-max-content", "-webkit-max-content (last)");
    69     testNonGridTemplatesSetJSValues("(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)");
    70     testNonGridTemplatesSetJSValues("(first) minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) (last)", "(first) minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) (last)", "(first) minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) (last)", "(first) minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) (last)", "minmax(-webkit-max-content, 50px) (last)");
    71     testNonGridTemplatesSetJSValues("(first) minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) (last)", "(first) minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) (last)", "(first) minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) (last)", "(first) minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) (last)", "minmax(-webkit-min-content, 50px) (last)");
    72     testNonGridTemplatesSetJSValues("(first) minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) (last)", "(first) minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) (last)", "(first) minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) (last)");
    73     testNonGridTemplatesSetJSValues("(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)", "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)", "(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)", "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)", "(first nav) minmax(-webkit-min-content, -webkit-max-content) (last)", "(first nav) minmax(-webkit-max-content, -webkit-min-content) (last)");
    74     testNonGridTemplatesSetJSValues("(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)", "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)", "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)", "(first nav) minmax(-webkit-min-content, -webkit-max-content) (nav) auto (last)", "(first nav2) minmax(-webkit-max-content, -webkit-min-content) (nav2) minmax(10px, 15px) (last)");;
    75     testNonGridTemplatesSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)");
     64    testNonGridTemplatesSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
     65    testNonGridTemplatesSetJSValues("[first] 55%", "40% [last]", "[first] 55%", "40% [last]", "[first] 55%", "40% [last]");
     66    testNonGridTemplatesSetJSValues("[first] auto", "auto [last]", "[first] auto", "auto [last]", "[first] auto", "auto [last]");
     67    testNonGridTemplatesSetJSValues("[first] -webkit-min-content", "-webkit-min-content [last]", "[first] -webkit-min-content", "-webkit-min-content [last]", "[first] -webkit-min-content", "-webkit-min-content [last]");
     68    testNonGridTemplatesSetJSValues("[first] -webkit-max-content", "-webkit-max-content [last]", "[first] -webkit-max-content", "-webkit-max-content [last]", "[first] -webkit-max-content", "-webkit-max-content [last]");
     69    testNonGridTemplatesSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
     70    testNonGridTemplatesSetJSValues("[first] minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) [last]", "[first] minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) [last]", "[first] minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) [last]", "[first] minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) [last]", "minmax(-webkit-max-content, 50px) [last]");
     71    testNonGridTemplatesSetJSValues("[first] minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) [last]", "[first] minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) [last]", "[first] minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) [last]", "[first] minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) [last]", "minmax(-webkit-min-content, 50px) [last]");
     72    testNonGridTemplatesSetJSValues("[first] minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) [last]", "[first] minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) [last]", "[first] minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) [last]");
     73    testNonGridTemplatesSetJSValues("[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]", "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]", "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]", "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]", "[first nav] minmax(-webkit-min-content, -webkit-max-content) [last]", "[first nav] minmax(-webkit-max-content, -webkit-min-content) [last]");
     74    testNonGridTemplatesSetJSValues("[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]", "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]", "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(-webkit-min-content, -webkit-max-content) [nav] auto [last]", "[first nav2] minmax(-webkit-max-content, -webkit-min-content) [nav2] minmax(10px, 15px) [last]");;
     75    testNonGridTemplatesSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
    7676
    7777    debug("");
    … …  
    7979    element = document.createElement("div");
    8080    document.body.appendChild(element);
    81     element.style.webkitGridTemplateColumns = "(foo)";
    82     element.style.webkitGridTemplateRows = "(bar)";
     81    element.style.webkitGridTemplateColumns = "[foo]";
     82    element.style.webkitGridTemplateRows = "[bar]";
    8383    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");
    8484    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "none");
    … …  
    8686    element = document.createElement("div");
    8787    document.body.appendChild(element);
    88     element.style.webkitGridTemplateColumns = "(foo bar)";
     88    element.style.webkitGridTemplateColumns = "[foo bar]";
    8989    element.style.webkitGridTemplateRows = "(bar foo)";
    9090    shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "none");

  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js

    r166157 r185147  
    6767    parentElement.style.width = "800px";
    6868    parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
    69     parentElement.style.webkitGridTemplateColumns = "50px 1fr (last)";
    70     parentElement.style.webkitGridTemplateRows = "2em (middle) 45px";
     69    parentElement.style.webkitGridTemplateColumns = "50px 1fr [last]";
     70    parentElement.style.webkitGridTemplateRows = "2em [middle] 45px";
    7171
    7272    element = document.createElement("div");
    … …  
    7575    element.style.webkitGridTemplateColumns = "inherit";
    7676    element.style.webkitGridTemplateRows = "inherit";
    77     testGridTemplatesValues(element, "50px 750px (last)", "20px (middle) 45px");
     77    testGridTemplatesValues(element, "50px 750px [last]", "20px [middle] 45px");
    7878
    7979    document.body.removeChild(parentElement);
    … …  
    9090    element.style.width = "800px";
    9191    element.style.height = "600px";
    92     element.style.webkitGridTemplateColumns = "150% (middle) 55px";
    93     element.style.webkitGridTemplateRows = "1fr (line) 2fr (line)";
    94     testGridTemplatesValues(element, "1200px (middle) 55px", "200px (line) 400px (line)");
     92    element.style.webkitGridTemplateColumns = "150% [middle] 55px";
     93    element.style.webkitGridTemplateRows = "1fr [line] 2fr [line]";
     94    testGridTemplatesValues(element, "1200px [middle] 55px", "200px [line] 400px [line]");
    9595
    9696    element.style.webkitGridTemplateColumns = "initial";

  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js

    r166157 r185147  
    103103    document.body.appendChild(parentElement);
    104104    parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
    105     parentElement.style.webkitGridTemplateColumns = "50px (last)";
    106     parentElement.style.webkitGridTemplateRows = "(first) 2em";
     105    parentElement.style.webkitGridTemplateColumns = "50px [last]";
     106    parentElement.style.webkitGridTemplateRows = "[first] 2em";
    107107
    108108    element = document.createElement("div");
    … …  
    111111    element.style.webkitGridTemplateColumns = "inherit";
    112112    element.style.webkitGridTemplateRows = "inherit";
    113     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'50px (last)'");
    114     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'(first) 20px'");
     113    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'50px [last]'");
     114    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 20px'");
    115115
    116116    document.body.removeChild(parentElement);
    … …  
    127127    element.style.width = "300px";
    128128    element.style.height = "150px";
    129     element.style.webkitGridTemplateColumns = "150% (last)";
    130     element.style.webkitGridTemplateRows = "(first) 1fr";
    131     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'450px (last)'");
    132     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'(first) 150px'");
     129    element.style.webkitGridTemplateColumns = "150% [last]";
     130    element.style.webkitGridTemplateRows = "[first] 1fr";
     131    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'450px [last]'");
     132    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 150px'");
    133133
    134134    element.style.display = "-webkit-grid";

  • trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js

    r166157 r185147  
    6363    var parentElement = document.createElement("div");
    6464    document.body.appendChild(parentElement);
    65     parentElement.style.webkitGridTemplateColumns = "50px 1fr (last)";
    66     parentElement.style.webkitGridTemplateRows = "101% (middle) 45px";
    67     testGridTemplatesValues(parentElement, "50px 1fr (last)", "101% (middle) 45px");
     65    parentElement.style.webkitGridTemplateColumns = "50px 1fr [last]";
     66    parentElement.style.webkitGridTemplateRows = "101% [middle] 45px";
     67    testGridTemplatesValues(parentElement, "50px 1fr [last]", "101% [middle] 45px");
    6868
    6969    element = document.createElement("div");
    … …  
    7171    element.style.webkitGridTemplateColumns = "inherit";
    7272    element.style.webkitGridTemplateRows = "inherit";
    73     testGridTemplatesValues(element, "50px 1fr (last)", "101% (middle) 45px");
     73    testGridTemplatesValues(element, "50px 1fr [last]", "101% [middle] 45px");
    7474
    7575    document.body.removeChild(parentElement);
    … …  
    8383    element = document.createElement("div");
    8484    document.body.appendChild(element);
    85     element.style.webkitGridTemplateColumns = "150% (middle) 55px";
    86     element.style.webkitGridTemplateRows = "1fr (line) 2fr (line)";
    87     testGridTemplatesValues(element, "150% (middle) 55px", "1fr (line) 2fr (line)");
     85    element.style.webkitGridTemplateColumns = "150% [middle] 55px";
     86    element.style.webkitGridTemplateRows = "1fr [line] 2fr [line]";
     87    testGridTemplatesValues(element, "150% [middle] 55px", "1fr [line] 2fr [line]");
    8888
    8989    element.style.webkitGridTemplateColumns = "initial";

  • trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js

    r166157 r185147  
    8585    var parentElement = document.createElement("div");
    8686    document.body.appendChild(parentElement);
    87     parentElement.style.webkitGridTemplateColumns = "50px (last)";
    88     parentElement.style.webkitGridTemplateRows = "(first) 101%";
     87    parentElement.style.webkitGridTemplateColumns = "50px [last]";
     88    parentElement.style.webkitGridTemplateRows = "[first] 101%";
    8989
    9090    element = document.createElement("div");
    … …  
    9292    element.style.webkitGridTemplateColumns = "inherit";
    9393    element.style.webkitGridTemplateRows = "inherit";
    94     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'50px (last)'");
    95     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'(first) 101%'");
     94    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'50px [last]'");
     95    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 101%'");
    9696
    9797    document.body.removeChild(parentElement);
    … …  
    105105    element = document.createElement("div");
    106106    document.body.appendChild(element);
    107     element.style.webkitGridTemplateColumns = "150% (last)";
    108     element.style.webkitGridTemplateRows = "(first) 1fr";
    109     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'150% (last)'");
    110     shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'(first) 1fr'");
     107    element.style.webkitGridTemplateColumns = "150% [last]";
     108    element.style.webkitGridTemplateRows = "[first] 1fr";
     109    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns')", "'150% [last]'");
     110    shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows')", "'[first] 1fr'");
    111111
    112112    element.style.webkitGridTemplateColumns = "initial";

  • trunk/Source/WebCore/ChangeLog

    r185146 r185147  
     12015-06-02  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Switch from parenthesis to brackets for grid line names
     4        https://bugs.webkit.org/show_bug.cgi?id=144996
     5
     6        Reviewed by Darin Adler.
     7
     8        Grid line names are now enclosed by brackets instead of parentheses
     9        as mentioned in the latest version of the spec. Appartently the CSS
     10        code is now more readable and avoids issues with tools like SASS.
     11
     12        * css/CSSGrammar.y.in:
     13        * css/CSSGridLineNamesValue.cpp:
     14        (WebCore::CSSGridLineNamesValue::customCSSText):
     15
    1162015-06-02  Alexey Proskuryakov  <ap@apple.com>
    217

  • trunk/Source/WebCore/css/CSSGrammar.y.in

    r184040 r185147  
    420420closing_parenthesis: ')' | %prec LOWEST_PREC TOKEN_EOF ;
    421421
     422closing_bracket: ']' | %prec LOWEST_PREC TOKEN_EOF;
     423
    422424charset:
    423425  CHARSET_SYM maybe_space STRING maybe_space ';' {
    … …  
    15861588
    15871589track_names_list:
    1588     '(' maybe_space closing_parenthesis {
     1590    '[' maybe_space closing_bracket {
    15891591        $$.setFromValueList(std::make_unique<CSSParserValueList>());
    15901592    }
    1591     | '(' maybe_space ident_list closing_parenthesis {
     1593    | '[' maybe_space ident_list closing_bracket {
    15921594        $$.setFromValueList(std::unique_ptr<CSSParserValueList>($3));
    15931595    }
    1594     | '(' maybe_space expr_recovery closing_parenthesis {
     1596    | '[' maybe_space expr_recovery closing_bracket {
    15951597        $$.id = CSSValueInvalid;
    15961598        $$.unit = 0;
    … …  
    18651867invalid_block: '{' error_recovery closing_brace { parser->invalidBlockHit(); } ;
    18661868
    1867 invalid_square_brackets_block: '[' error_recovery ']' | '[' error_recovery TOKEN_EOF ;
     1869invalid_square_brackets_block: '[' error_recovery closing_bracket ;
    18681870
    18691871invalid_parentheses_block: opening_parenthesis error_recovery closing_parenthesis;

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

    r166176 r185147  
    3737String CSSGridLineNamesValue::customCSSText() const
    3838{
    39     return "(" + CSSValueList::customCSSText() + ")";
     39    return "[" + CSSValueList::customCSSText() + "]";
    4040}
    4141
Note: See TracChangeset for help on using the changeset viewer.