Changeset 158744 in webkit


Ignore:
Timestamp:
Nov 6, 2013 7:54:08 AM (10 years ago)
Author:
svillar@igalia.com
Message:

[CSS Grid Layout] Add support for named grid areas
https://bugs.webkit.org/show_bug.cgi?id=120045

Reviewed by Andreas Kling.

From Blink r155555, r155850 and r155889 by <jchaffraix@chromium.org>

Source/WebCore:

Added support for named grid areas. Basically a named grid area is
now a valid grid position. The shorthand parsing of grid-area was
split from the grid-{row|column} as the rules for expanding are
slightly different.

Unknown grid area names are treated as 'auto' as per the
specification. This means that for those cases we need to trigger
the auto-placement algorithm.

Tests: fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html

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

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::valueForGridPosition):

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseValue):
(WebCore::CSSParser::parseGridPosition):
(WebCore::gridMissingGridPositionValue):
(WebCore::CSSParser::parseGridItemPositionShorthand):
(WebCore::CSSParser::parseGridAreaShorthand):
(WebCore::CSSParser::parseSingleGridAreaLonghand):

  • css/CSSParser.h:
  • css/StyleResolver.cpp:

(WebCore::StyleResolver::adjustRenderStyle):
(WebCore::StyleResolver::adjustGridItemPosition):
(WebCore::createGridPosition):

  • css/StyleResolver.h:
  • rendering/RenderGrid.cpp:

(WebCore::RenderGrid::resolveGridPositionFromStyle):

  • rendering/style/GridPosition.h:

(WebCore::GridPosition::isNamedGridArea):
(WebCore::GridPosition::setNamedGridArea):
(WebCore::GridPosition::namedGridLine):

LayoutTests:

Added a couple of new tests to check that both known and unknown
named grid areas are properly handled.

Also extended some of the existing tests to use named grid areas
as any other possible grid position.

  • fast/css-grid-layout/grid-item-area-get-set-expected.txt:
  • fast/css-grid-layout/grid-item-area-get-set.html:
  • fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt: Added.
  • fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html: Added.
  • fast/css-grid-layout/grid-item-column-row-get-set-expected.txt:
  • fast/css-grid-layout/grid-item-column-row-get-set.html:
  • fast/css-grid-layout/grid-item-end-after-get-set-expected.txt:
  • fast/css-grid-layout/grid-item-end-after-get-set.html:
  • fast/css-grid-layout/grid-item-named-grid-area-resolution-expected.txt: Added.
  • fast/css-grid-layout/grid-item-named-grid-area-resolution.html: Added.
  • fast/css-grid-layout/grid-item-start-before-get-set-expected.txt:
  • fast/css-grid-layout/grid-item-start-before-get-set.html:
  • fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js:
Location:
trunk
Files:
4 added
18 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r158743 r158744  
     12013-10-24  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Add support for named grid areas
     4        https://bugs.webkit.org/show_bug.cgi?id=120045
     5
     6        Reviewed by Andreas Kling.
     7
     8        From Blink r155555, r155850 and r155889 by <jchaffraix@chromium.org>
     9
     10        Added a couple of new tests to check that both known and unknown
     11        named grid areas are properly handled.
     12
     13        Also extended some of the existing tests to use named grid areas
     14        as any other possible grid position.
     15
     16        * fast/css-grid-layout/grid-item-area-get-set-expected.txt:
     17        * fast/css-grid-layout/grid-item-area-get-set.html:
     18        * fast/css-grid-layout/grid-item-bad-named-area-auto-placement-expected.txt: Added.
     19        * fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html: Added.
     20        * fast/css-grid-layout/grid-item-column-row-get-set-expected.txt:
     21        * fast/css-grid-layout/grid-item-column-row-get-set.html:
     22        * fast/css-grid-layout/grid-item-end-after-get-set-expected.txt:
     23        * fast/css-grid-layout/grid-item-end-after-get-set.html:
     24        * fast/css-grid-layout/grid-item-named-grid-area-resolution-expected.txt: Added.
     25        * fast/css-grid-layout/grid-item-named-grid-area-resolution.html: Added.
     26        * fast/css-grid-layout/grid-item-start-before-get-set-expected.txt:
     27        * fast/css-grid-layout/grid-item-start-before-get-set.html:
     28        * fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js:
     29
    1302013-11-06  Chris Fleizach  <cfleizach@apple.com>
    231
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt

    r156638 r158744  
    44
    55
    6 Test getting -webkit-grid-area set through CSS
     6Test getting grid-area set through CSS
    77PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "1"
    88PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
    99PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    1010PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     11PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "thirdArea"
     12PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
     13PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "thirdArea"
     14PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "thirdArea"
    1115PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
    1216PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
    1317PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    1418PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     19PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
     20PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "secondArea"
     21PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "firstArea"
     22PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "secondArea"
    1523PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1"
    1624PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "10"
     
    2129PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "span 8"
    2230PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "9"
     31PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
     32PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 1"
     33PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     34PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "1 foobar"
    2335
    24 Test getting and setting -webkit-grid-area set through JS
     36Test getting and setting grid-area set through JS
    2537PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "-1"
    2638PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-area-get-set.html

    r157389 r158744  
    88<link href="resources/grid.css" rel="stylesheet">
    99<style>
     10.grid {
     11    -webkit-grid-template: "firstArea secondArea"
     12                           "thirdArea thirdArea";
     13}
     14
    1015#oneValueGridArea {
    1116    -webkit-grid-area: 1;
    1217}
    1318
     19#oneValueIdentGridArea {
     20    -webkit-grid-area: thirdArea;
     21}
     22
    1423#twoValueGridArea {
    1524    -webkit-grid-area: -1 / span 1;
     25}
     26
     27#twoValueIdentGridArea {
     28    -webkit-grid-area: firstArea / secondArea;
    1629}
    1730
     
    2336    -webkit-grid-area: -5 / 5 span / span 8 / 9;
    2437}
     38
     39#fourValueMixedGridArea {
     40    -webkit-grid-area: firstArea / span / nonExistent / "foobar";
     41}
    2542</style>
    2643<script src="../../resources/js-test-pre.js"></script>
     
    2946<div class="grid">
    3047    <div id="oneValueGridArea"></div>
     48    <div id="oneValueIdentGridArea"></div>
    3149    <div id="twoValueGridArea"></div>
     50    <div id="twoValueIdentGridArea"></div>
    3251    <div id="threeValueGridArea"></div>
    3352    <div id="fourValueGridArea"></div>
     53    <div id="fourValueMixedGridArea"></div>
    3454</div>
    3555<script>
     
    80100    }
    81101
    82     debug("Test getting -webkit-grid-area set through CSS");
     102    debug("Test getting grid-area set through CSS");
    83103    testGridAreaCSSParsing("oneValueGridArea", "1");
     104    testGridAreaCSSParsing("oneValueIdentGridArea", "thirdArea", "thirdArea", "thirdArea", "thirdArea");
    84105    testGridAreaCSSParsing("twoValueGridArea", "-1", "span 1");
     106    testGridAreaCSSParsing("twoValueIdentGridArea", "firstArea", "secondArea", "firstArea", "secondArea");
    85107    testGridAreaCSSParsing("threeValueGridArea", "span 1", "10", "-1");
    86108    testGridAreaCSSParsing("fourValueGridArea", "-5", "span 5", "span 8", "9");
     109    testGridAreaCSSParsing("fourValueMixedGridArea", "firstArea", "span 1", "auto", "1 foobar");
    87110
    88111    debug("");
    89     debug("Test getting and setting -webkit-grid-area set through JS");
     112    debug("Test getting and setting grid-area set through JS");
    90113    testGridAreaJSParsing("-1");
    91114    testGridAreaJSParsing("-1 / span 5");
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set-expected.txt

    r154996 r158744  
    55
    66Test getting -webkit-grid-column and -webkit-grid-row set through CSS
    7 PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
    8 PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-start') is "auto"
    9 PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-end') is "auto"
    10 PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
    11 PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
    12 PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     7PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
     8PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-column-start') is "auto"
     9PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     10PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
     11PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-row-start') is "auto"
     12PASS getComputedStyle(gridItemWithNoCSSRule, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    1313PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column') is "10 / auto"
    1414PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column-start') is "10"
     
    9595PASS getComputedStyle(gridItemWithSpanNumberString, '').getPropertyValue('-webkit-grid-row-start') is "-1"
    9696PASS getComputedStyle(gridItemWithSpanNumberString, '').getPropertyValue('-webkit-grid-row-end') is "span 2 last"
     97PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-column') is "thirdArea / thirdArea"
     98PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
     99PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-column-end') is "thirdArea"
     100PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-row') is "firstArea / firstArea"
     101PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
     102PASS getComputedStyle(gridItemWithSingleNamedGridArea, '').getPropertyValue('-webkit-grid-row-end') is "firstArea"
     103PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-column') is "thirdArea / span 1"
     104PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
     105PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-column-end') is "span 1"
     106PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-row') is "firstArea / span 2"
     107PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-row-start') is "firstArea"
     108PASS getComputedStyle(gridItemWithNamedGridAreaAndSpan, '').getPropertyValue('-webkit-grid-row-end') is "span 2"
    97109
    98110Test the initial value
     
    183195PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 2 last"
    184196PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "-1 nav"
     197PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "5 / auto"
     198PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "5"
     199PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     200PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "8 / auto"
     201PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "8"
     202PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     203PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
     204PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
     205PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     206PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
     207PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
     208PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     209PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "span 3 first / auto"
     210PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "span 3 first"
     211PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     212PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "span 1 last / auto"
     213PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "span 1 last"
     214PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    185215
    186216Test setting grid-column and grid-row back to 'auto' through JS
     
    397427PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
    398428PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    399 PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
    400 PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
    401 PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
    402 PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
    403 PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
    404 PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    405429PASS successfullyParsed is true
    406430
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html

    • Property svn:executable set to *
    r155263 r158744  
    88</script>
    99<style>
     10.grid {
     11    -webkit-grid-template: "firstArea secondArea"
     12                           "thirdArea thirdArea";
     13}
     14
    1015.gridItemWithPositiveInteger {
    1116    -webkit-grid-column: 10;
     
    6368    -webkit-grid-column: 1 /span 3 "first";
    6469    -webkit-grid-row: -1 / "last" 2 span ;
     70}
     71.gridItemWithSingleNamedGridArea {
     72    -webkit-grid-column: thirdArea;
     73    -webkit-grid-row: firstArea;
     74}
     75.gridItemWithNamedGridAreaAndSpan {
     76    -webkit-grid-column: thirdArea / span;
     77    -webkit-grid-row: firstArea / span 2;
    6578}
    6679</style>
     
    6881</head>
    6982<body>
    70 <!-- The first has no properties set on it. -->
    71 <div id="gridElement"></div>
    72 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
    73 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
    74 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
    75 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
    76 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
    77 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
    78 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
    79 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
    80 <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
    81 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
    82 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
    83 <div class="gridItemWithString" id="gridItemWithString"></div>
    84 <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div>
    85 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></div>
     83<div class="grid">
     84    <!-- The first has no properties set on it. -->
     85    <div id="gridItemWithNoCSSRule"></div>
     86    <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
     87    <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
     88    <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
     89    <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
     90    <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
     91    <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
     92    <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
     93    <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
     94    <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
     95    <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
     96    <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
     97    <div class="gridItemWithString" id="gridItemWithString"></div>
     98    <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div>
     99    <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></div>
     100    <div class="gridItemWithSingleNamedGridArea" id="gridItemWithSingleNamedGridArea"></div>
     101    <div class="gridItemWithNamedGridAreaAndSpan" id="gridItemWithNamedGridAreaAndSpan"></div>
     102</div>
    86103<script>
    87104    description('Test that setting and getting grid-column and grid-row works as expected');
    88105
    89106    debug("Test getting -webkit-grid-column and -webkit-grid-row set through CSS");
    90     testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto");
     107    testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto");
    91108    testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
    92109    testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
     
    103120    testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last");
    104121    testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last");
     122    testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea / thirdArea", "firstArea / firstArea");
     123    testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / span 1", "firstArea / span 2");
    105124
    106125    debug("");
     
    130149    testColumnRowJSParsing("3 'first' / 2 'last'", "5 'nav' / 'last' 7 span", "3 first / 2 last", "5 nav / span 7 last");
    131150    testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'nav'", "span 3 first / -3 last", "span 2 last / -1 nav");
     151    testColumnRowJSParsing("5 / none", "8 / foobar", "5 / auto", "8 / auto");
     152    testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar", "auto / auto", "auto / auto");
     153    testColumnRowJSParsing("span 'first' 3 / none", "'last' span / foobar", "span 3 first / auto", "span 1 last / auto");
    132154
    133155    debug("");
     
    155177    testColumnRowInvalidJSParsing("4 5", "5 8");
    156178    testColumnRowInvalidJSParsing("4 /", "5 /");
    157     testColumnRowInvalidJSParsing("5 / none", "8 / foobar");
    158179    testColumnRowInvalidJSParsing("5 5", "8 auto");
    159180    testColumnRowInvalidJSParsing("5 / /", "8 / /");
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set-expected.txt

    r154438 r158744  
    4747PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
    4848PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     49PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column') is "auto / firstArea"
     50PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-start') is "auto"
     51PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-end') is "firstArea"
     52PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row') is "auto / thirdArea"
     53PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-start') is "auto"
     54PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-end') is "thirdArea"
    4955
    5056Test the initial value
     
    7985PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
    8086PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     87PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / thirdArea"
     88PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
     89PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "thirdArea"
     90PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / secondArea"
     91PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
     92PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "secondArea"
     93PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
     94PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
     95PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     96PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / secondArea"
     97PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
     98PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "secondArea"
     99PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / secondArea"
     100PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
     101PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "secondArea"
     102PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
     103PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
     104PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    81105
    82106Test setting grid-column-end and grid-row-end back to 'auto' through JS
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-end-after-get-set.html

    r157389 r158744  
    88<link href="resources/grid.css" rel="stylesheet">
    99<style>
     10.grid {
     11    -webkit-grid-template: "firstArea secondArea"
     12                           "thirdArea thirdArea";
     13}
     14
    1015.gridItemWithPositiveInteger {
    1116    -webkit-grid-column-end: 10;
     
    3237    -webkit-grid-row-end: auto;
    3338}
     39.gridItemWithArea {
     40    -webkit-grid-column-end: firstArea;
     41    -webkit-grid-row-end: thirdArea;
     42}
    3443</style>
    3544<script src="resources/grid-item-column-row-parsing-utils.js"></script>
     
    3746</head>
    3847<body>
    39 <!-- The first has no properties set on it. -->
    4048<div class="grid">
     49    <!-- The first has no properties set on it. -->
    4150    <div id="gridElement"></div>
    4251    <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
     
    4655    <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
    4756    <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
     57    <div class="gridItemWithArea" id="gridItemWithArea"></div>
    4858</div>
    4959<script>
     
    5868    testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / span 1");
    5969    testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
     70    testColumnRowCSSParsing("gridItemWithArea", "auto / firstArea", "auto / thirdArea");
    6071
    6172    debug("");
     
    7485    testColumnEndRowEndJSParsing("span 7", "span 2");
    7586    testColumnEndRowEndJSParsing("auto", "auto");
     87    testColumnEndRowEndJSParsing("thirdArea", "secondArea");
     88    testColumnEndRowEndJSParsing("nonExistentArea", "secondArea", "auto", "secondArea");
     89    testColumnEndRowEndJSParsing("secondArea", "nonExistentArea", "secondArea", "auto");
    7690
    7791    debug("");
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set-expected.txt

    r154438 r158744  
    44
    55
    6 Test getting -webkit-grid-column-start and -webkit-grid-row-start set through CSS
     6Test getting grid-column-start and grid-row-start set through CSS
    77PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-start') is 'auto'
    88PASS getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column') is 'auto / auto'
     
    4545PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-start') is "auto"
    4646PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     47PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column') is "firstArea / auto"
     48PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-start') is "firstArea"
     49PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     50PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row') is "thirdArea / auto"
     51PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-start') is "thirdArea"
     52PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    4753
    4854Test the initial value
     
    7783PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
    7884PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     85PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "thirdArea / auto"
     86PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "thirdArea"
     87PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     88PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "secondArea / auto"
     89PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "secondArea"
     90PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     91PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "auto / auto"
     92PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "auto"
     93PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     94PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "secondArea / auto"
     95PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "secondArea"
     96PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
     97PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column') is "secondArea / auto"
     98PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-start') is "secondArea"
     99PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-column-end') is "auto"
     100PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row') is "auto / auto"
     101PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-start') is "auto"
     102PASS getComputedStyle(gridItem, '').getPropertyValue('-webkit-grid-row-end') is "auto"
    79103
    80104Test setting grid-column-start and grid-row-start back to 'auto' through JS
  • trunk/LayoutTests/fast/css-grid-layout/grid-item-start-before-get-set.html

    r157389 r158744  
    88<link href="resources/grid.css" rel="stylesheet">
    99<style>
     10.grid {
     11    -webkit-grid-template: "firstArea secondArea"
     12                           "thirdArea thirdArea";
     13}
     14
    1015.gridItemWithPositiveInteger {
    1116    -webkit-grid-column-start: 10;
     
    3237    -webkit-grid-row-start: auto;
    3338}
     39.gridItemWithArea {
     40    -webkit-grid-column-start: firstArea;
     41    -webkit-grid-row-start: thirdArea;
     42}
    3443</style>
    3544<script src="resources/grid-item-column-row-parsing-utils.js"></script>
     
    4655    <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
    4756    <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
     57    <div class="gridItemWithArea" id="gridItemWithArea"></div>
    4858</div>
    4959<script>
    5060    description('Test that setting and getting grid-column-start and grid-row-start works as expected');
    5161
    52     debug("Test getting -webkit-grid-column-start and -webkit-grid-row-start set through CSS");
     62    debug("Test getting grid-column-start and grid-row-start set through CSS");
    5363    var gridElement = document.getElementById("gridElement");
    5464    shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column-start')", "'auto'");
     
    6373    testColumnRowCSSParsing("gridItemWithOnlySpan", "span 1 / auto", "span 1 / auto");
    6474    testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
     75    testColumnRowCSSParsing("gridItemWithArea", "firstArea / auto", "thirdArea / auto");
    6576
    6677    debug("");
     
    7990    testColumnStartRowStartJSParsing("span 3", "span 20");
    8091    testColumnStartRowStartJSParsing("auto", "auto");
     92    testColumnStartRowStartJSParsing("thirdArea", "secondArea");
     93    testColumnStartRowStartJSParsing("nonExistentArea", "secondArea", "auto", "secondArea");
     94    testColumnStartRowStartJSParsing("secondArea", "nonExistentArea", "secondArea", "auto");
    8195
    8296    debug("");
  • trunk/LayoutTests/fast/css-grid-layout/resources/grid-item-column-row-parsing-utils.js

    r154438 r158744  
    3131{
    3232    var gridItem = document.createElement("div");
    33     document.body.appendChild(gridItem);
     33    var gridElement = document.getElementsByClassName("grid")[0];
     34    gridElement.appendChild(gridItem);
    3435    gridItem.style.webkitGridColumn = columnValue;
    3536    gridItem.style.webkitGridRow = rowValue;
     
    3738    checkColumnRowValues(gridItem, expectedColumnValue ? expectedColumnValue : columnValue, expectedRowValue ? expectedRowValue : rowValue);
    3839
    39     document.body.removeChild(gridItem);
     40    gridElement.removeChild(gridItem);
    4041}
    4142
     
    5253}
    5354
    54 window.testColumnStartRowStartJSParsing = function(columnStartValue, rowStartValue)
     55window.testColumnStartRowStartJSParsing = function(columnStartValue, rowStartValue, expectedColumnStartValue, expectedRowStartValue)
    5556{
    5657    var gridItem = document.createElement("div");
    57     document.body.appendChild(gridItem);
     58    var gridElement = document.getElementsByClassName("grid")[0];
     59    gridElement.appendChild(gridItem);
    5860    gridItem.style.webkitGridColumnStart = columnStartValue;
    5961    gridItem.style.webkitGridRowStart = rowStartValue;
    6062
    61     checkColumnRowValues(gridItem, columnStartValue + " / auto", rowStartValue + " / auto");
     63    if (expectedColumnStartValue === undefined)
     64        expectedColumnStartValue = columnStartValue;
     65    if (expectedRowStartValue === undefined)
     66        expectedRowStartValue = rowStartValue;
    6267
    63     document.body.removeChild(gridItem);
     68    checkColumnRowValues(gridItem, expectedColumnStartValue + " / auto", expectedRowStartValue + " / auto");
     69
     70    gridElement.removeChild(gridItem);
    6471}
    6572
    66 window.testColumnEndRowEndJSParsing = function(columnEndValue, rowEndValue)
     73window.testColumnEndRowEndJSParsing = function(columnEndValue, rowEndValue, expectedColumnEndValue, expectedRowEndValue)
    6774{
    6875    var gridItem = document.createElement("div");
    69     document.body.appendChild(gridItem);
     76    var gridElement = document.getElementsByClassName("grid")[0];
     77    gridElement.appendChild(gridItem);
    7078    gridItem.style.webkitGridColumnEnd = columnEndValue;
    7179    gridItem.style.webkitGridRowEnd = rowEndValue;
    7280
    73     checkColumnRowValues(gridItem, "auto / " + columnEndValue, "auto / " + rowEndValue);
     81    if (expectedColumnEndValue === undefined)
     82        expectedColumnEndValue = columnEndValue;
     83    if (expectedRowEndValue === undefined)
     84        expectedRowEndValue = rowEndValue;
    7485
    75     document.body.removeChild(gridItem);
     86    checkColumnRowValues(gridItem, "auto / " + expectedColumnEndValue, "auto / " + expectedRowEndValue);
     87
     88    gridElement.removeChild(gridItem);
    7689}
    7790
  • trunk/Source/WebCore/ChangeLog

    r158743 r158744  
     12013-10-24  Sergio Villar Senin  <svillar@igalia.com>
     2
     3        [CSS Grid Layout] Add support for named grid areas
     4        https://bugs.webkit.org/show_bug.cgi?id=120045
     5
     6        Reviewed by Andreas Kling.
     7
     8        From Blink r155555, r155850 and r155889 by <jchaffraix@chromium.org>
     9
     10        Added support for named grid areas. Basically a named grid area is
     11        now a valid grid position. The shorthand parsing of grid-area was
     12        split from the grid-{row|column} as the rules for expanding are
     13        slightly different.
     14
     15        Unknown grid area names are treated as 'auto' as per the
     16        specification. This means that for those cases we need to trigger
     17        the auto-placement algorithm.
     18
     19        Tests: fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
     20               fast/css-grid-layout/grid-item-named-grid-area-resolution.html
     21
     22        * css/CSSComputedStyleDeclaration.cpp:
     23        (WebCore::valueForGridPosition):
     24        * css/CSSParser.cpp:
     25        (WebCore::CSSParser::parseValue):
     26        (WebCore::CSSParser::parseGridPosition):
     27        (WebCore::gridMissingGridPositionValue):
     28        (WebCore::CSSParser::parseGridItemPositionShorthand):
     29        (WebCore::CSSParser::parseGridAreaShorthand):
     30        (WebCore::CSSParser::parseSingleGridAreaLonghand):
     31        * css/CSSParser.h:
     32        * css/StyleResolver.cpp:
     33        (WebCore::StyleResolver::adjustRenderStyle):
     34        (WebCore::StyleResolver::adjustGridItemPosition):
     35        (WebCore::createGridPosition):
     36        * css/StyleResolver.h:
     37        * rendering/RenderGrid.cpp:
     38        (WebCore::RenderGrid::resolveGridPositionFromStyle):
     39        * rendering/style/GridPosition.h:
     40        (WebCore::GridPosition::isNamedGridArea):
     41        (WebCore::GridPosition::setNamedGridArea):
     42        (WebCore::GridPosition::namedGridLine):
     43
    1442013-11-06  Chris Fleizach  <cfleizach@apple.com>
    245
  • trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp

    r158721 r158744  
    11681168    if (position.isAuto())
    11691169        return cssValuePool().createIdentifierValue(CSSValueAuto);
     1170
     1171    if (position.isNamedGridArea())
     1172        return cssValuePool().createValue(position.namedGridLine(), CSSPrimitiveValue::CSS_STRING);
    11701173
    11711174    RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
  • trunk/Source/WebCore/css/CSSParser.cpp

    r158515 r158744  
    27142714        break;
    27152715
    2716     case CSSPropertyWebkitGridArea:
    27172716    case CSSPropertyWebkitGridColumn:
    27182717    case CSSPropertyWebkitGridRow: {
     
    27222721        return parseGridItemPositionShorthand(propId, important);
    27232722    }
     2723
     2724    case CSSPropertyWebkitGridArea:
     2725        if (!cssGridLayoutEnabled())
     2726            return false;
     2727        return parseGridAreaShorthand(important);
    27242728
    27252729    case CSSPropertyWebkitGridTemplate:
     
    48724876    }
    48734877
     4878    if (value->id != CSSValueSpan && value->unit == CSSPrimitiveValue::CSS_IDENT) {
     4879        m_valueList->next();
     4880        return cssValuePool().createValue(value->string, CSSPrimitiveValue::CSS_STRING);
     4881    }
     4882
    48744883    RefPtr<CSSPrimitiveValue> numericValue;
    48754884    RefPtr<CSSPrimitiveValue> gridLineName;
     
    49124921}
    49134922
     4923static PassRefPtr<CSSValue> gridMissingGridPositionValue(CSSValue* value)
     4924{
     4925    if (value->isPrimitiveValue() && toCSSPrimitiveValue(value)->isString())
     4926        return value;
     4927
     4928    return cssValuePool().createIdentifierValue(CSSValueAuto);
     4929}
     4930
    49144931bool CSSParser::parseGridItemPositionShorthand(CSSPropertyID shorthandId, bool important)
    49154932{
    49164933    ShorthandScope scope(this, shorthandId);
    49174934    const StylePropertyShorthand& shorthand = shorthandForProperty(shorthandId);
    4918     if (!parseValue(shorthand.properties()[0], important))
    4919         return false;
    4920 
    4921     size_t index = 1;
    4922     for (; index < shorthand.length(); ++index) {
    4923         if (!m_valueList->current())
    4924             break;
    4925 
     4935    ASSERT(shorthand.length() == 2);
     4936
     4937    RefPtr<CSSValue> startValue = parseGridPosition();
     4938    if (!startValue)
     4939        return false;
     4940
     4941    RefPtr<CSSValue> endValue;
     4942    if (m_valueList->current()) {
    49264943        if (!isForwardSlashOperator(m_valueList->current()))
    49274944            return false;
     
    49304947            return false;
    49314948
    4932         if (!parseValue(shorthand.properties()[index], important))
    4933             return false;
    4934     }
    4935 
    4936     // Only some values out of the {2|4} positions were specified, the other values should be set to 'auto'.
    4937     // FIXME: If the first property was <ident>, the opposite value should be the same <ident>.
    4938     for (; index < shorthand.length(); ++index)
    4939         addProperty(shorthand.properties()[index], cssValuePool().createIdentifierValue(CSSValueAuto), important);
    4940 
     4949        endValue = parseGridPosition();
     4950        if (!endValue || m_valueList->current())
     4951            return false;
     4952    } else
     4953        endValue = gridMissingGridPositionValue(startValue.get());
     4954
     4955    addProperty(shorthand.properties()[0], startValue, important);
     4956    addProperty(shorthand.properties()[1], endValue, important);
     4957    return true;
     4958}
     4959
     4960bool CSSParser::parseGridAreaShorthand(bool important)
     4961{
     4962    ASSERT(cssGridLayoutEnabled());
     4963
     4964    ShorthandScope scope(this, CSSPropertyWebkitGridArea);
     4965    ASSERT(shorthandForProperty(CSSPropertyWebkitGridArea).length() == 4);
     4966
     4967    RefPtr<CSSValue> rowStartValue = parseGridPosition();
     4968    if (!rowStartValue)
     4969        return false;
     4970
     4971    RefPtr<CSSValue> columnStartValue;
     4972    if (!parseSingleGridAreaLonghand(columnStartValue))
     4973        return false;
     4974
     4975    RefPtr<CSSValue> rowEndValue;
     4976    if (!parseSingleGridAreaLonghand(rowEndValue))
     4977        return false;
     4978
     4979    RefPtr<CSSValue> columnEndValue;
     4980    if (!parseSingleGridAreaLonghand(columnEndValue))
     4981        return false;
     4982
     4983    if (!columnStartValue)
     4984        columnStartValue = gridMissingGridPositionValue(rowStartValue.get());
     4985
     4986    if (!rowEndValue)
     4987        rowEndValue = gridMissingGridPositionValue(rowStartValue.get());
     4988
     4989    if (!columnEndValue)
     4990        columnEndValue = gridMissingGridPositionValue(columnStartValue.get());
     4991
     4992    addProperty(CSSPropertyWebkitGridRowStart, rowStartValue, important);
     4993    addProperty(CSSPropertyWebkitGridColumnStart, columnStartValue, important);
     4994    addProperty(CSSPropertyWebkitGridRowEnd, rowEndValue, important);
     4995    addProperty(CSSPropertyWebkitGridColumnEnd, columnEndValue, important);
     4996    return true;
     4997}
     4998
     4999bool CSSParser::parseSingleGridAreaLonghand(RefPtr<CSSValue>& property)
     5000{
     5001    if (!m_valueList->current())
     5002        return true;
     5003
     5004    if (!isForwardSlashOperator(m_valueList->current()))
     5005        return false;
     5006
     5007    if (!m_valueList->next())
     5008        return false;
     5009
     5010    property = parseGridPosition();
    49415011    return true;
    49425012}
  • trunk/Source/WebCore/css/CSSParser.h

    r158389 r158744  
    167167    PassRefPtr<CSSValue> parseGridPosition();
    168168    bool parseGridItemPositionShorthand(CSSPropertyID, bool important);
     169    bool parseGridAreaShorthand(bool important);
     170    bool parseSingleGridAreaLonghand(RefPtr<CSSValue>&);
    169171    bool parseGridTrackList(CSSPropertyID, bool important);
    170172    PassRefPtr<CSSPrimitiveValue> parseGridTrackSize();
  • trunk/Source/WebCore/css/StyleResolver.cpp

    r158599 r158744  
    13641364        style->setDisplay(INLINE_BLOCK);
    13651365
    1366     adjustGridItemPosition(style);
     1366    adjustGridItemPosition(style, parentStyle);
    13671367
    13681368#if ENABLE(SVG)
     
    13911391}
    13921392
    1393 void StyleResolver::adjustGridItemPosition(RenderStyle* style) const
    1394 {
     1393void StyleResolver::adjustGridItemPosition(RenderStyle* style, RenderStyle* parentStyle) const
     1394{
     1395    const GridPosition& columnStartPosition = style->gridItemColumnStart();
     1396    const GridPosition& columnEndPosition = style->gridItemColumnEnd();
     1397    const GridPosition& rowStartPosition = style->gridItemRowStart();
     1398    const GridPosition& rowEndPosition = style->gridItemRowEnd();
     1399
    13951400    // If opposing grid-placement properties both specify a grid span, they both compute to ‘auto’.
    1396     if (style->gridItemColumnStart().isSpan() && style->gridItemColumnEnd().isSpan()) {
     1401    if (columnStartPosition.isSpan() && columnEndPosition.isSpan()) {
    13971402        style->setGridItemColumnStart(GridPosition());
    13981403        style->setGridItemColumnEnd(GridPosition());
    13991404    }
    14001405
    1401     if (style->gridItemRowStart().isSpan() && style->gridItemRowEnd().isSpan()) {
     1406    if (rowStartPosition.isSpan() && rowEndPosition.isSpan()) {
    14021407        style->setGridItemRowStart(GridPosition());
    14031408        style->setGridItemRowEnd(GridPosition());
    14041409    }
     1410
     1411    // Unknown named grid area compute to 'auto'.
     1412    const NamedGridAreaMap& map = parentStyle->namedGridArea();
     1413
     1414#define CLEAR_UNKNOWN_NAMED_AREA(prop, Prop) \
     1415    if (prop.isNamedGridArea() && !map.contains(prop.namedGridLine())) \
     1416        style->setGridItem##Prop(GridPosition());
     1417
     1418    CLEAR_UNKNOWN_NAMED_AREA(columnStartPosition, ColumnStart);
     1419    CLEAR_UNKNOWN_NAMED_AREA(columnEndPosition, ColumnEnd);
     1420    CLEAR_UNKNOWN_NAMED_AREA(rowStartPosition, RowStart);
     1421    CLEAR_UNKNOWN_NAMED_AREA(rowEndPosition, RowEnd);
    14051422}
    14061423
     
    19852002static bool createGridPosition(CSSValue* value, GridPosition& position)
    19862003{
    1987     // For now, we only accept: 'auto' | [ <integer> || <string> ] | span && <integer>?
     2004    // We accept the specification's grammar:
     2005    // 'auto' | [ <integer> || <string> ] | [ span && [ <integer> || string ] ] | <ident>
    19882006    if (value->isPrimitiveValue()) {
    1989 #if !ASSERT_DISABLED
    19902007        CSSPrimitiveValue* primitiveValue = toCSSPrimitiveValue(value);
     2008        // We translate <ident> to <string> during parsing as it makes handling it simpler.
     2009        if (primitiveValue->isString()) {
     2010            position.setNamedGridArea(primitiveValue->getStringValue());
     2011            return true;
     2012        }
     2013
    19912014        ASSERT(primitiveValue->getValueID() == CSSValueAuto);
    1992 #endif
    19932015        return true;
    19942016    }
  • trunk/Source/WebCore/css/StyleResolver.h

    r157672 r158744  
    347347
    348348    void adjustRenderStyle(RenderStyle* styleToAdjust, RenderStyle* parentStyle, Element*);
    349     void adjustGridItemPosition(RenderStyle* styleToAdjust) const;
     349    void adjustGridItemPosition(RenderStyle* styleToAdjust, RenderStyle* parentStyle) const;
    350350
    351351    bool fastRejectSelector(const RuleData&) const;
  • trunk/Source/WebCore/rendering/RenderGrid.cpp

    r158163 r158744  
    895895size_t RenderGrid::resolveGridPositionFromStyle(const GridPosition& position, GridPositionSide side) const
    896896{
    897     // FIXME: Handle other values for grid-{row,column} like ranges or line names.
    898897    switch (position.type()) {
    899898    case ExplicitPosition: {
     
    916915        return adjustGridPositionForSide(endOfTrack - resolvedPosition, side);
    917916    }
    918     case AutoPosition:
    919         // 'auto' depends on the opposite position for resolution (e.g. grid-row: auto / 1).
     917    case NamedGridAreaPosition:
     918    {
     919        NamedGridAreaMap::const_iterator it = style().namedGridArea().find(position.namedGridLine());
     920        // Unknown grid area should have been computed to 'auto' by now.
     921        ASSERT(it != style()->namedGridArea().end());
     922        const GridCoordinate& gridAreaCoordinate = it->value;
     923        switch (side) {
     924        case ColumnStartSide:
     925            return gridAreaCoordinate.columns.initialPositionIndex;
     926        case ColumnEndSide:
     927            return gridAreaCoordinate.columns.finalPositionIndex;
     928        case RowStartSide:
     929            return gridAreaCoordinate.rows.initialPositionIndex;
     930        case RowEndSide:
     931            return gridAreaCoordinate.rows.finalPositionIndex;
     932        }
    920933        ASSERT_NOT_REACHED();
    921934        return 0;
     935    }
     936    case AutoPosition:
    922937    case SpanPosition:
    923         // FIXME: Handle span positions.
     938        // 'auto' and span depend on the opposite position for resolution (e.g. grid-row: auto / 1 or grid-column: span 3 / "myHeader").
    924939        ASSERT_NOT_REACHED();
    925940        return 0;
  • trunk/Source/WebCore/rendering/style/GridPosition.h

    r154996 r158744  
    3939    AutoPosition,
    4040    ExplicitPosition, // [ <integer> || <string> ]
    41     SpanPosition
     41    SpanPosition, // span && [ <integer> || <string> ]
     42    NamedGridAreaPosition // <ident>
    4243};
    4344
     
    5556    bool isAuto() const { return m_type == AutoPosition; }
    5657    bool isSpan() const { return m_type == SpanPosition; }
     58    bool isNamedGridArea() const { return m_type == NamedGridAreaPosition; }
    5759
    5860    void setExplicitPosition(int position, const String& namedGridLine)
     
    7375    }
    7476
     77    void setNamedGridArea(const String& namedGridArea)
     78    {
     79        m_type = NamedGridAreaPosition;
     80        m_namedGridLine = namedGridArea;
     81    }
     82
    7583    int integerPosition() const
    7684    {
     
    8189    String namedGridLine() const
    8290    {
    83         ASSERT(type() == ExplicitPosition || type() == SpanPosition);
     91        ASSERT(type() == ExplicitPosition || type() == SpanPosition || type() == NamedGridAreaPosition);
    8492        return m_namedGridLine;
    8593    }
Note: See TracChangeset for help on using the changeset viewer.