Changeset 102837 in webkit


Ignore:
Timestamp:
Dec 14, 2011 3:39:24 PM (12 years ago)
Author:
ojan@chromium.org
Message:

Implement flexDirection and flexWrap and make flexFlow a proper shorthand.
​https://bugs.webkit.org/show_bug.cgi?id=74542

Reviewed by Tony Chang.

Source/WebCore:

In a followup patch, I'll cleanup all the *Flow methods in RenderFlexibleBox.

Existing tests cover all the rendering behaviors, so only need to test
the css property parsing.

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):

  • css/CSSMutableStyleDeclaration.cpp:

(WebCore::CSSMutableStyleDeclaration::getPropertyValue):

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseValue):

  • css/CSSPrimitiveValueMappings.h:

(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
(WebCore::CSSPrimitiveValue::operator EFlexDirection):

  • css/CSSProperty.cpp:

(WebCore::CSSProperty::isInheritedProperty):

  • css/CSSPropertyLonghand.cpp:

(WebCore::initShorthandMap):

  • css/CSSPropertyNames.in:
  • css/CSSStyleApplyProperty.cpp:

(WebCore::CSSStyleApplyProperty::CSSStyleApplyProperty):

  • css/CSSStyleSelector.cpp:

(WebCore::CSSStyleSelector::applyProperty):

  • rendering/RenderBox.cpp:

(WebCore::RenderBox::sizesToIntrinsicLogicalWidth):

  • rendering/RenderFlexibleBox.cpp:

(WebCore::RenderFlexibleBox::isColumnFlow):
(WebCore::RenderFlexibleBox::isLeftToRightFlow):
(WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
(WebCore::RenderFlexibleBox::alignChildren):

  • rendering/style/RenderStyle.h:

(WebCore::InheritedFlags::flexDirection):
(WebCore::InheritedFlags::isColumnFlexDirection):
(WebCore::InheritedFlags::setFlexDirection):
(WebCore::InheritedFlags::initialFlexDirection):

  • rendering/style/RenderStyleConstants.h:
  • rendering/style/StyleFlexibleBoxData.cpp:

(WebCore::StyleFlexibleBoxData::StyleFlexibleBoxData):
(WebCore::StyleFlexibleBoxData::operator==):

  • rendering/style/StyleFlexibleBoxData.h:

LayoutTests:

  • css3/flexbox/css-properties-expected.txt:
  • css3/flexbox/script-tests/css-properties.js:

(testFlexFlowValue):

Location:
trunk
Files:
19 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r102834 r102837  
     12011-12-14  Ojan Vafai  <ojan@chromium.org>
     2
     3        Implement flexDirection and flexWrap and make flexFlow a proper shorthand.
     4        https://bugs.webkit.org/show_bug.cgi?id=74542
     5
     6        Reviewed by Tony Chang.
     7
     8        * css3/flexbox/css-properties-expected.txt:
     9        * css3/flexbox/script-tests/css-properties.js:
     10        (testFlexFlowValue):
     11
    1122011-12-14  Ryosuke Niwa  <rniwa@webkit.org>
    213

  • trunk/LayoutTests/css3/flexbox/css-properties-expected.txt

    r102486 r102837  
    4444PASS flexbox.style.webkitFlexAlign is ""
    4545PASS window.getComputedStyle(flexbox, null).webkitFlexAlign is "stretch"
     46PASS flexbox.style.webkitFlexDirection is ""
     47PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is "row"
     48PASS flexbox.style.webkitFlexDirection is ""
     49PASS flexbox.style.webkitFlexDirection is "row"
     50PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is "row"
     51PASS flexbox.style.webkitFlexDirection is "row-reverse"
     52PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is "row-reverse"
     53PASS flexbox.style.webkitFlexDirection is "column"
     54PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is "column"
     55PASS flexbox.style.webkitFlexDirection is "column-reverse"
     56PASS window.getComputedStyle(flexbox, null).webkitFlexDirection is "column-reverse"
     57PASS flexbox.style.webkitFlexWrap is ""
     58PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is "nowrap"
     59PASS flexbox.style.webkitFlexWrap is ""
     60PASS flexbox.style.webkitFlexWrap is "nowrap"
     61PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is "nowrap"
     62PASS flexbox.style.webkitFlexWrap is "wrap"
     63PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is "wrap"
     64PASS flexbox.style.webkitFlexWrap is "wrap-reverse"
     65PASS window.getComputedStyle(flexbox, null).webkitFlexWrap is "wrap-reverse"
    4666PASS flexbox.style.webkitFlexFlow is ""
    4767PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
    … …  
    4969PASS flexbox.style.webkitFlexFlow is ""
    5070PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
    51 PASS flexbox.style.webkitFlexFlow is "row nowrap"
     71PASS flexbox.style.webkitFlexFlow is ""
    5272PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
    53 PASS flexbox.style.webkitFlexFlow is "row wrap"
     73PASS flexbox.style.webkitFlexFlow is "nowrap"
     74PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
     75PASS flexbox.style.webkitFlexFlow is "nowrap"
     76PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
     77PASS flexbox.style.webkitFlexFlow is "wrap"
    5478PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap"
    55 PASS flexbox.style.webkitFlexFlow is "row wrap-reverse"
     79PASS flexbox.style.webkitFlexFlow is "wrap"
     80PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap"
     81PASS flexbox.style.webkitFlexFlow is "wrap-reverse"
     82PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap-reverse"
     83PASS flexbox.style.webkitFlexFlow is "wrap-reverse"
    5684PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap-reverse"
    5785PASS flexbox.style.webkitFlexFlow is "row"
     86PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
     87PASS flexbox.style.webkitFlexFlow is "row"
     88PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
     89PASS flexbox.style.webkitFlexFlow is "row nowrap"
    5890PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
    5991PASS flexbox.style.webkitFlexFlow is "row nowrap"
    … …  
    6193PASS flexbox.style.webkitFlexFlow is "row wrap"
    6294PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap"
     95PASS flexbox.style.webkitFlexFlow is "row wrap"
     96PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap"
     97PASS flexbox.style.webkitFlexFlow is "row wrap-reverse"
     98PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap-reverse"
    6399PASS flexbox.style.webkitFlexFlow is "row wrap-reverse"
    64100PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row wrap-reverse"
    65101PASS flexbox.style.webkitFlexFlow is "row-reverse"
     102PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse nowrap"
     103PASS flexbox.style.webkitFlexFlow is "row-reverse"
     104PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse nowrap"
     105PASS flexbox.style.webkitFlexFlow is "row-reverse nowrap"
    66106PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse nowrap"
    67107PASS flexbox.style.webkitFlexFlow is "row-reverse nowrap"
    … …  
    69109PASS flexbox.style.webkitFlexFlow is "row-reverse wrap"
    70110PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse wrap"
     111PASS flexbox.style.webkitFlexFlow is "row-reverse wrap"
     112PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse wrap"
     113PASS flexbox.style.webkitFlexFlow is "row-reverse wrap-reverse"
     114PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse wrap-reverse"
    71115PASS flexbox.style.webkitFlexFlow is "row-reverse wrap-reverse"
    72116PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse wrap-reverse"
    73117PASS flexbox.style.webkitFlexFlow is "column"
     118PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column nowrap"
     119PASS flexbox.style.webkitFlexFlow is "column"
     120PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column nowrap"
     121PASS flexbox.style.webkitFlexFlow is "column nowrap"
    74122PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column nowrap"
    75123PASS flexbox.style.webkitFlexFlow is "column nowrap"
    … …  
    77125PASS flexbox.style.webkitFlexFlow is "column wrap"
    78126PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column wrap"
     127PASS flexbox.style.webkitFlexFlow is "column wrap"
     128PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column wrap"
     129PASS flexbox.style.webkitFlexFlow is "column wrap-reverse"
     130PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column wrap-reverse"
    79131PASS flexbox.style.webkitFlexFlow is "column wrap-reverse"
    80132PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column wrap-reverse"
    81133PASS flexbox.style.webkitFlexFlow is "column-reverse"
     134PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column-reverse nowrap"
     135PASS flexbox.style.webkitFlexFlow is "column-reverse"
     136PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column-reverse nowrap"
     137PASS flexbox.style.webkitFlexFlow is "column-reverse nowrap"
    82138PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column-reverse nowrap"
    83139PASS flexbox.style.webkitFlexFlow is "column-reverse nowrap"
    … …  
    85141PASS flexbox.style.webkitFlexFlow is "column-reverse wrap"
    86142PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column-reverse wrap"
     143PASS flexbox.style.webkitFlexFlow is "column-reverse wrap"
     144PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column-reverse wrap"
     145PASS flexbox.style.webkitFlexFlow is "column-reverse wrap-reverse"
     146PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column-reverse wrap-reverse"
    87147PASS flexbox.style.webkitFlexFlow is "column-reverse wrap-reverse"
    88148PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column-reverse wrap-reverse"
    … …  
    91151PASS flexbox.style.webkitFlexFlow is ""
    92152PASS flexbox.style.webkitFlexFlow is ""
     153PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row nowrap"
     154PASS flexbox.style.webkitFlexFlow is "column"
     155PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column nowrap"
     156PASS flexbox.style.webkitFlexFlow is "column wrap"
     157PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "column wrap"
     158PASS flexbox.style.webkitFlexFlow is "row-reverse wrap-reverse"
     159PASS window.getComputedStyle(flexbox, null).webkitFlexFlow is "row-reverse wrap-reverse"
    93160PASS successfullyParsed is true
    94161

  • trunk/LayoutTests/css3/flexbox/script-tests/css-properties.js

    r102486 r102837  
    101101shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexAlign', 'stretch');
    102102
     103shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
     104shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
     105
     106flexbox.style.webkitFlexDirection = 'foo';
     107shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
     108
     109flexbox.style.webkitFlexDirection = 'row';
     110shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');
     111shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');
     112
     113flexbox.style.webkitFlexDirection = 'row-reverse';
     114shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');
     115shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');
     116
     117flexbox.style.webkitFlexDirection = 'column';
     118shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');
     119shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');
     120
     121flexbox.style.webkitFlexDirection = 'column-reverse';
     122shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');
     123shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');
     124
     125shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
     126// The initial value is 'stretch'.
     127shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
     128
     129flexbox.style.webkitFlexWrap = 'foo';
     130shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
     131
     132flexbox.style.webkitFlexWrap = 'nowrap';
     133shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'nowrap');
     134shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'nowrap');
     135
     136flexbox.style.webkitFlexWrap = 'wrap';
     137shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');
     138shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');
     139
     140flexbox.style.webkitFlexWrap = 'wrap-reverse';
     141shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');
     142shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');
     143
     144flexbox.style.webkitFlexFlow = '';
    103145shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
    104146shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
    … …  
    107149shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
    108150
    109 var flows = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
     151function testFlexFlowValue(value, expected, expectedComputed)
     152{
     153    flexbox.style.webkitFlexFlow = value;
     154    shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
     155    shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);
     156}
     157
     158var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
    110159var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
    111 flows.forEach(function(flow) {
     160directions.forEach(function(direction) {
    112161    wraps.forEach(function(wrap) {
    113         flexbox.style.webkitFlexFlow = flow + ' ' + wrap;
    114         shouldBeEqualToString('flexbox.style.webkitFlexFlow', (flow + ' ' + wrap).replace(/^ /, '').replace(/ $/, ''));
    115         if (!flow)
    116             flow = 'row';
    117         if (!wrap)
    118             wrap = 'nowrap';
    119         shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', flow + ' ' + wrap);
     162        var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
     163        var expected = direction + ' ' + wrap;
     164        testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
     165        testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
    120166    });
    121167});
    122168
    123169flexbox.style.webkitFlexFlow = '';
     170shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
    124171flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';
    125 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
    126 flexbox.style.webkitFlexFlow = 'wrap-reverse column';
    127 shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
    128 flexbox.style.webkitFlexFlow = 'wrap row';
    129172shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
    130173flexbox.style.webkitFlexFlow = 'column row';
    131174shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
    132175
     176flexbox.style.webkitFlexFlow = '';
     177shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
     178shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row nowrap');
     179flexbox.style.webkitFlexDirection = 'column';
     180shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
     181shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column nowrap');
     182flexbox.style.webkitFlexWrap = 'wrap';
     183shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');
     184shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');
     185flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';
     186shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');
     187shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');
     188
     189
    133190successfullyParsed = true;

  • trunk/Source/WebCore/ChangeLog

    r102836 r102837  
     12011-12-14  Ojan Vafai  <ojan@chromium.org>
     2
     3        Implement flexDirection and flexWrap and make flexFlow a proper shorthand.
     4        https://bugs.webkit.org/show_bug.cgi?id=74542
     5
     6        Reviewed by Tony Chang.
     7
     8        In a followup patch, I'll cleanup all the *Flow methods in RenderFlexibleBox.
     9
     10        Existing tests cover all the rendering behaviors, so only need to test
     11        the css property parsing.
     12
     13        * css/CSSComputedStyleDeclaration.cpp:
     14        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
     15        * css/CSSMutableStyleDeclaration.cpp:
     16        (WebCore::CSSMutableStyleDeclaration::getPropertyValue):
     17        * css/CSSParser.cpp:
     18        (WebCore::CSSParser::parseValue):
     19        * css/CSSPrimitiveValueMappings.h:
     20        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
     21        (WebCore::CSSPrimitiveValue::operator EFlexDirection):
     22        * css/CSSProperty.cpp:
     23        (WebCore::CSSProperty::isInheritedProperty):
     24        * css/CSSPropertyLonghand.cpp:
     25        (WebCore::initShorthandMap):
     26        * css/CSSPropertyNames.in:
     27        * css/CSSStyleApplyProperty.cpp:
     28        (WebCore::CSSStyleApplyProperty::CSSStyleApplyProperty):
     29        * css/CSSStyleSelector.cpp:
     30        (WebCore::CSSStyleSelector::applyProperty):
     31        * rendering/RenderBox.cpp:
     32        (WebCore::RenderBox::sizesToIntrinsicLogicalWidth):
     33        * rendering/RenderFlexibleBox.cpp:
     34        (WebCore::RenderFlexibleBox::isColumnFlow):
     35        (WebCore::RenderFlexibleBox::isLeftToRightFlow):
     36        (WebCore::RenderFlexibleBox::layoutAndPlaceChildren):
     37        (WebCore::RenderFlexibleBox::alignChildren):
     38        * rendering/style/RenderStyle.h:
     39        (WebCore::InheritedFlags::flexDirection):
     40        (WebCore::InheritedFlags::isColumnFlexDirection):
     41        (WebCore::InheritedFlags::setFlexDirection):
     42        (WebCore::InheritedFlags::initialFlexDirection):
     43        * rendering/style/RenderStyleConstants.h:
     44        * rendering/style/StyleFlexibleBoxData.cpp:
     45        (WebCore::StyleFlexibleBoxData::StyleFlexibleBoxData):
     46        (WebCore::StyleFlexibleBoxData::operator==):
     47        * rendering/style/StyleFlexibleBoxData.h:
     48
    1492011-12-13  Jon Lee  <jonlee@apple.com>
    250

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

    r102486 r102837  
    219219    CSSPropertyWebkitFlexPack,
    220220    CSSPropertyWebkitFlexAlign,
     221    CSSPropertyWebkitFlexDirection,
    221222    CSSPropertyWebkitFlexFlow,
     223    CSSPropertyWebkitFlexWrap,
    222224    CSSPropertyWebkitFontSmoothing,
    223225#if ENABLE(CSS_GRID_LAYOUT)
    … …  
    14851487        case CSSPropertyWebkitFlexAlign:
    14861488            return cssValuePool->createValue(style->flexAlign());
     1489        case CSSPropertyWebkitFlexDirection:
     1490            return cssValuePool->createValue(style->flexDirection());
     1491        case CSSPropertyWebkitFlexWrap:
     1492            return cssValuePool->createValue(style->flexWrap());
    14871493        case CSSPropertyWebkitFlexFlow: {
    14881494            RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
    1489             list->append(cssValuePool->createValue(style->flexFlow()));
     1495            list->append(cssValuePool->createValue(style->flexDirection()));
    14901496            list->append(cssValuePool->createValue(style->flexWrap()));
    14911497            return list.release();

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

    r102721 r102837  
    286286                                        CSSPropertyBorderBottomStyle, CSSPropertyBorderLeftStyle };
    287287            return get4Values(properties);
     288        }
     289        case CSSPropertyWebkitFlexFlow: {
     290            const int properties[] = { CSSPropertyWebkitFlexDirection, CSSPropertyWebkitFlexWrap };
     291            return getShorthandValue(properties);
    288292        }
    289293        case CSSPropertyFont:

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

    r102560 r102837  
    16211621        validPrimitive = id == CSSValueStart || id == CSSValueEnd || id == CSSValueCenter || id == CSSValueBaseline || id == CSSValueStretch;
    16221622        break;
    1623     case CSSPropertyWebkitFlexFlow:
    1624         // FIXME: Use parseShorthand once we add flex-direction and flex-wrap.
    1625         // [ row | row-reverse | column | column-reverse ] || [ nowrap | wrap | wrap-reverse ]?
     1623    case CSSPropertyWebkitFlexDirection:
    16261624        validPrimitive = id == CSSValueRow || id == CSSValueRowReverse || id == CSSValueColumn || id == CSSValueColumnReverse;
    1627         if (!validPrimitive)
    1628             validPrimitive = id == CSSValueNowrap || id == CSSValueWrap || id == CSSValueWrapReverse;
    1629         else if (validPrimitive && num == 2) {
    1630             RefPtr<CSSValueList> list = CSSValueList::createSpaceSeparated();
    1631             list->append(cssValuePool()->createIdentifierValue(id));
    1632 
    1633             value = m_valueList->next();
    1634             if (value->id != CSSValueNowrap && value->id != CSSValueWrap && value->id != CSSValueWrapReverse)
    1635                 return false;
    1636 
    1637             list->append(cssValuePool()->createIdentifierValue(value->id));
    1638             addProperty(propId, list, important);
    1639             return true;
    1640         }
     1625        break;
     1626    case CSSPropertyWebkitFlexWrap:
     1627        validPrimitive = id == CSSValueNowrap || id == CSSValueWrap || id == CSSValueWrapReverse;
    16411628        break;
    16421629    case CSSPropertyWebkitMarquee: {
    … …  
    21332120                                    CSSPropertyPaddingBottom, CSSPropertyPaddingLeft };
    21342121        return parse4Values(propId, properties, important);
     2122    }
     2123    case CSSPropertyWebkitFlexFlow:
     2124    {
     2125        const int properties[] = { CSSPropertyWebkitFlexDirection, CSSPropertyWebkitFlexWrap };
     2126        return parseShorthand(propId, properties, 2, important);
    21352127    }
    21362128    case CSSPropertyFont:

  • trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h

    r102486 r102837  
    12011201}
    12021202
    1203 template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EFlexFlow e)
     1203template<> inline CSSPrimitiveValue::CSSPrimitiveValue(EFlexDirection e)
    12041204    : CSSValue(PrimitiveClass)
    12051205{
    … …  
    12211221}
    12221222
    1223 template<> inline CSSPrimitiveValue::operator EFlexFlow() const
     1223template<> inline CSSPrimitiveValue::operator EFlexDirection() const
    12241224{
    12251225    switch (m_value.ident) {

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

    r101288 r102837  
    560560    case CSSPropertyWebkitFlexPack:
    561561    case CSSPropertyWebkitFlexAlign:
     562    case CSSPropertyWebkitFlexDirection:
    562563    case CSSPropertyWebkitFlexFlow:
     564    case CSSPropertyWebkitFlexWrap:
    563565    case CSSPropertyWebkitFontSizeDelta:
    564566#if ENABLE(CSS_GRID_LAYOUT)

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

    r101078 r102837  
    9292    SET_SHORTHAND_MAP_ENTRY(shorthandMap, CSSPropertyBorderSpacing, borderSpacingProperties);
    9393
     94    static const int flexFlowProperties[] = { CSSPropertyWebkitFlexDirection, CSSPropertyWebkitFlexWrap };
     95    SET_SHORTHAND_MAP_ENTRY(shorthandMap, CSSPropertyWebkitFlexFlow, flexFlowProperties);
     96
    9497    static const int listStyleProperties[] = {
    9598        CSSPropertyListStyleImage,

  • trunk/Source/WebCore/css/CSSPropertyNames.in

    r101288 r102837  
    255255#endif
    256256-webkit-flex-align
     257-webkit-flex-direction
    257258-webkit-flex-flow
    258259-webkit-flex-order
    259260-webkit-flex-pack
     261-webkit-flex-wrap
    260262-webkit-font-size-delta
    261263-webkit-highlight

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

    r102650 r102837  
    13371337};
    13381338
    1339 class ApplyPropertyFlexFlow {
    1340 public:
    1341     static void applyInheritValue(CSSStyleSelector*) { }
    1342 
    1343     static void applyInitialValue(CSSStyleSelector* selector)
    1344     {
    1345         selector->style()->setFlexFlow(RenderStyle::initialFlexFlow());
    1346         selector->style()->setFlexWrap(RenderStyle::initialFlexWrap());
    1347     }
    1348 
    1349     static void applyValue(CSSStyleSelector* selector, CSSValue* value)
    1350     {
    1351         if (value->isPrimitiveValue()) {
    1352             selector->style()->setFlexFlow(*static_cast<CSSPrimitiveValue*>(value));
    1353             return;
    1354         }
    1355         if (value->isValueList()) {
    1356             CSSValueList* list = static_cast<CSSValueList*>(value);
    1357             if (list->length() != 2)
    1358                 return;
    1359 
    1360             selector->style()->setFlexFlow(*static_cast<CSSPrimitiveValue*>(list->itemWithoutBoundsCheck(0)));
    1361             selector->style()->setFlexWrap(*static_cast<CSSPrimitiveValue*>(list->itemWithoutBoundsCheck(1)));
    1362         }
    1363     }
    1364 
    1365     static PropertyHandler createHandler()
    1366     {
    1367         return PropertyHandler(&applyInheritValue, &applyInitialValue, &applyValue);
    1368     }
    1369 };
    1370 
    13711339class ApplyPropertyDisplay {
    13721340private:
    … …  
    15541522    setPropertyHandler(CSSPropertyWebkitFlexPack, ApplyPropertyDefault<EFlexPack, &RenderStyle::flexPack, EFlexPack, &RenderStyle::setFlexPack, EFlexPack, &RenderStyle::initialFlexPack>::createHandler());
    15551523    setPropertyHandler(CSSPropertyWebkitFlexAlign, ApplyPropertyDefault<EFlexAlign, &RenderStyle::flexAlign, EFlexAlign, &RenderStyle::setFlexAlign, EFlexAlign, &RenderStyle::initialFlexAlign>::createHandler());
    1556     setPropertyHandler(CSSPropertyWebkitFlexFlow, ApplyPropertyFlexFlow::createHandler());
     1524    setPropertyHandler(CSSPropertyWebkitFlexDirection, ApplyPropertyDefault<EFlexDirection, &RenderStyle::flexDirection, EFlexDirection, &RenderStyle::setFlexDirection, EFlexDirection, &RenderStyle::initialFlexDirection>::createHandler());
     1525    setPropertyHandler(CSSPropertyWebkitFlexWrap, ApplyPropertyDefault<EFlexWrap, &RenderStyle::flexWrap, EFlexWrap, &RenderStyle::setFlexWrap, EFlexWrap, &RenderStyle::initialFlexWrap>::createHandler());
     1526    setPropertyHandler(CSSPropertyWebkitFlexFlow, ApplyPropertyExpanding<SuppressValue, CSSPropertyWebkitFlexDirection, CSSPropertyWebkitFlexWrap>::createHandler());
    15571527
    15581528    setPropertyHandler(CSSPropertyFontStyle, ApplyPropertyFont<FontItalic, &FontDescription::italic, &FontDescription::setItalic, FontItalicOff>::createHandler());

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

    r102835 r102837  
    38023802    case CSSPropertyWebkitFlexPack:
    38033803    case CSSPropertyWebkitFlexAlign:
     3804    case CSSPropertyWebkitFlexDirection:
    38043805    case CSSPropertyWebkitFlexFlow:
     3806    case CSSPropertyWebkitFlexWrap:
    38053807    case CSSPropertyFontStyle:
    38063808    case CSSPropertyFontVariant:

  • trunk/Source/WebCore/rendering/RenderBox.cpp

    r102787 r102837  
    17961796    // In the case of columns that have a stretch alignment, we go ahead and layout at the
    17971797    // stretched size to avoid an extra layout when applying alignment.
    1798     if (parent()->isFlexibleBox() && (!parent()->style()->isColumnFlexFlow() || style()->flexAlign() != AlignStretch))
     1798    if (parent()->isFlexibleBox() && (!parent()->style()->isColumnFlexDirection() || style()->flexAlign() != AlignStretch))
    17991799        return true;
    18001800

  • trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp

    r102090 r102837  
    204204bool RenderFlexibleBox::isColumnFlow() const
    205205{
    206     return style()->isColumnFlexFlow();
     206    return style()->isColumnFlexDirection();
    207207}
    208208
    … …  
    218218    if (isColumnFlow())
    219219        return style()->writingMode() == TopToBottomWritingMode || style()->writingMode() == LeftToRightWritingMode;
    220     return style()->isLeftToRightDirection() ^ (style()->flexFlow() == FlowRowReverse);
     220    return style()->isLeftToRightDirection() ^ (style()->flexDirection() == FlowRowReverse);
    221221}
    222222
    … …  
    637637    }
    638638
    639     if (style()->flexFlow() == FlowColumnReverse) {
     639    if (style()->flexDirection() == FlowColumnReverse) {
    640640        // We have to do an extra pass for column-reverse to reposition the flex items since the start depends
    641641        // on the height of the flexbox, which we only know after we've positioned all the flex items.
    … …  
    688688
    689689    for (RenderBox* child = iterator.first(); child; child = iterator.next()) {
    690         // direction:rtl + flex-flow:column means the cross-axis direction is flipped.
     690        // direction:rtl + flex-direction:column means the cross-axis direction is flipped.
    691691        if (!style()->isLeftToRightDirection() && isColumnFlow()) {
    692692            LayoutPoint location = flowAwareLocationForChild(child);

  • trunk/Source/WebCore/rendering/style/RenderStyle.h

    r102486 r102837  
    726726    EFlexPack flexPack() const { return static_cast<EFlexPack>(rareNonInheritedData->m_flexibleBox->m_flexPack); }
    727727    EFlexAlign flexAlign() const { return static_cast<EFlexAlign>(rareNonInheritedData->m_flexibleBox->m_flexAlign); }
    728     EFlexFlow flexFlow() const { return static_cast<EFlexFlow>(rareNonInheritedData->m_flexibleBox->m_flexFlow); }
    729     bool isColumnFlexFlow() const { return flexFlow() == FlowColumn || flexFlow() == FlowColumnReverse; }
     728    EFlexDirection flexDirection() const { return static_cast<EFlexDirection>(rareNonInheritedData->m_flexibleBox->m_flexDirection); }
     729    bool isColumnFlexDirection() const { return flexDirection() == FlowColumn || flexDirection() == FlowColumnReverse; }
    730730    EFlexWrap flexWrap() const { return static_cast<EFlexWrap>(rareNonInheritedData->m_flexibleBox->m_flexWrap); }
    731731
    … …  
    11481148    void setFlexPack(EFlexPack p) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexPack, p); }
    11491149    void setFlexAlign(EFlexAlign a) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexAlign, a); }
    1150     void setFlexFlow(EFlexFlow flow) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexFlow, flow); }
     1150    void setFlexDirection(EFlexDirection direction) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexDirection, direction); }
    11511151    void setFlexWrap(EFlexWrap w) { SET_VAR(rareNonInheritedData.access()->m_flexibleBox, m_flexWrap, w); }
    11521152#if ENABLE(CSS_GRID_LAYOUT)
    … …  
    14721472    static EFlexPack initialFlexPack() { return PackStart; }
    14731473    static EFlexAlign initialFlexAlign() { return AlignStretch; }
    1474     static EFlexFlow initialFlexFlow() { return FlowRow; }
     1474    static EFlexDirection initialFlexDirection() { return FlowRow; }
    14751475    static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
    14761476    static int initialMarqueeLoopCount() { return -1; }

  • trunk/Source/WebCore/rendering/style/RenderStyleConstants.h

    r102486 r102837  
    178178enum EFlexPack { PackStart, PackEnd, PackCenter, PackJustify };
    179179enum EFlexAlign { AlignStart, AlignEnd, AlignCenter, AlignStretch, AlignBaseline };
    180 enum EFlexFlow { FlowRow, FlowRowReverse, FlowColumn, FlowColumnReverse };
     180enum EFlexDirection { FlowRow, FlowRowReverse, FlowColumn, FlowColumnReverse };
    181181enum EFlexWrap { FlexNoWrap, FlexWrap, FlexWrapReverse };
    182182

  • trunk/Source/WebCore/rendering/style/StyleFlexibleBoxData.cpp

    r102486 r102837  
    3939    , m_flexPack(RenderStyle::initialFlexPack())
    4040    , m_flexAlign(RenderStyle::initialFlexAlign())
    41     , m_flexFlow(RenderStyle::initialFlexFlow())
     41    , m_flexDirection(RenderStyle::initialFlexDirection())
    4242    , m_flexWrap(RenderStyle::initialFlexWrap())
    4343{
    … …  
    5353    , m_flexPack(o.m_flexPack)
    5454    , m_flexAlign(o.m_flexAlign)
    55     , m_flexFlow(o.m_flexFlow)
     55    , m_flexDirection(o.m_flexDirection)
    5656    , m_flexWrap(o.m_flexWrap)
    5757{
    … …  
    6363        && m_heightPositiveFlex == o.m_heightPositiveFlex && m_heightNegativeFlex == o.m_heightNegativeFlex
    6464        && m_flexOrder == o.m_flexOrder && m_flexPack == o.m_flexPack && m_flexAlign == o.m_flexAlign
    65         && m_flexFlow == o.m_flexFlow && m_flexWrap == o.m_flexWrap;
     65        && m_flexDirection == o.m_flexDirection && m_flexWrap == o.m_flexWrap;
    6666}
    6767

  • trunk/Source/WebCore/rendering/style/StyleFlexibleBoxData.h

    r102486 r102837  
    5252    unsigned m_flexPack : 2; // EFlexPack
    5353    unsigned m_flexAlign : 3; // EFlexAlign
    54     unsigned m_flexFlow : 2; // EFlexFlow
     54    unsigned m_flexDirection : 2; // EFlexDirection
    5555    unsigned m_flexWrap : 2; // EFlexWrap
    5656
Note: See TracChangeset for help on using the changeset viewer.