From 7514b66a111bff1128f7b64d28ab28ca0edeec7e Mon Sep 17 00:00:00 2001 From: "tony@chromium.org" Date: Wed, 27 Jun 2012 23:05:19 +0000 Subject: [PATCH] Split flex into flex-grow/flex-shrink/flex-basis https://bugs.webkit.org/show_bug.cgi?id=86525 Reviewed by Ojan Vafai. Source/WebCore: Split flex into 3 separate properties per the spec: http://dev.w3.org/csswg/css3-flexbox/#flex-components Tests: css3/flexbox/flex-longhand-parsing.html css3/flexbox/flex-property-parsing.html: Updated test results. * css/CSSComputedStyleDeclaration.cpp: (WebCore): -webkit-flex is no longer enumerable. (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue): Add new css property names and use getCSSPropertyValuesForShorthandProperties for WebkitFlex. Also sort flex propery names. * css/CSSParser.cpp: (WebCore::isValidKeywordPropertyAndValue): Fix indent. (WebCore::CSSParser::parseValue): Add parsing for new properties and handle -webkit-flex: none. (WebCore::CSSParser::parseFlex): Switch to new names (positive -> grow, negative -> shrink, preferred size -> basis) and assign to longhand properties. * css/CSSParser.h: * css/CSSProperty.cpp: (WebCore::CSSProperty::isInheritedProperty): Add new properties. * css/CSSPropertyNames.in: Add new properties. * css/StyleBuilder.cpp: (WebCore::StyleBuilder::StyleBuilder): Delete special handling of applying flex and just use shorthand handlers. * css/StylePropertySet.cpp: (WebCore::StylePropertySet::getPropertyValue): Add new shorthand. (WebCore::StylePropertySet::asText): * css/StylePropertyShorthand.cpp: (WebCore::webkitFlexShorthand): Add new shorthand. (WebCore::shorthandForProperty): * css/StylePropertyShorthand.h: * css/StyleResolver.cpp: (WebCore::StyleResolver::collectMatchingRulesForList): Add to list of properties applied by StyleBuilder. LayoutTests: If -webkit-flex is set to none, when the user reads the value back out, it is now 0 0 auto. 'none' is for convenience, not an actual value. * css3/flexbox/flex-longhand-parsing-expected.txt: * css3/flexbox/flex-longhand-parsing.html: Test flex-grow, flex-shrink and flex-basis. * css3/flexbox/flex-property-parsing-expected.txt: * css3/flexbox/flex-property-parsing.html: Update results for 'none'. * fast/css/getComputedStyle/computed-style-expected.txt: * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt: * fast/css/getComputedStyle/resources/property-names.js: Remove -webkit-flex since it's no longer enumerable. * svg/css/getComputedStyle-basic-expected.txt: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@121380 268f45cc-cd09-0410-ab3c-d52691b4dbfc --- LayoutTests/ChangeLog | 19 ++++++ .../flexbox/flex-longhand-parsing-expected.txt | 39 +++++++++++ .../css3/flexbox/flex-longhand-parsing.html | 68 +++++++++++++++++++ .../flexbox/flex-property-parsing-expected.txt | 44 ++++++------ .../css3/flexbox/flex-property-parsing.html | 45 +++++++------ .../getComputedStyle/computed-style-expected.txt | 1 - .../computed-style-without-renderer-expected.txt | 1 - .../getComputedStyle/resources/property-names.js | 1 - .../svg/css/getComputedStyle-basic-expected.txt | 4 -- Source/WebCore/ChangeLog | 38 +++++++++++ Source/WebCore/css/CSSComputedStyleDeclaration.cpp | 47 ++++++------- Source/WebCore/css/CSSParser.cpp | 78 +++++++++++++--------- Source/WebCore/css/CSSParser.h | 2 +- Source/WebCore/css/CSSProperty.cpp | 3 + Source/WebCore/css/CSSPropertyNames.in | 3 + Source/WebCore/css/StyleBuilder.cpp | 69 +------------------ Source/WebCore/css/StylePropertySet.cpp | 7 ++ Source/WebCore/css/StylePropertyShorthand.cpp | 9 +++ Source/WebCore/css/StylePropertyShorthand.h | 1 + Source/WebCore/css/StyleResolver.cpp | 3 + 20 files changed, 304 insertions(+), 178 deletions(-) create mode 100644 LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt create mode 100644 LayoutTests/css3/flexbox/flex-longhand-parsing.html diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog index 5cfd0bd..af8578d 100644 --- a/LayoutTests/ChangeLog +++ b/LayoutTests/ChangeLog @@ -1,3 +1,22 @@ +2012-06-27 Tony Chang + + Split flex into flex-grow/flex-shrink/flex-basis + https://bugs.webkit.org/show_bug.cgi?id=86525 + + Reviewed by Ojan Vafai. + + If -webkit-flex is set to none, when the user reads the value back out, it is + now 0 0 auto. 'none' is for convenience, not an actual value. + + * css3/flexbox/flex-longhand-parsing-expected.txt: + * css3/flexbox/flex-longhand-parsing.html: Test flex-grow, flex-shrink and flex-basis. + * css3/flexbox/flex-property-parsing-expected.txt: + * css3/flexbox/flex-property-parsing.html: Update results for 'none'. + * fast/css/getComputedStyle/computed-style-expected.txt: + * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt: + * fast/css/getComputedStyle/resources/property-names.js: Remove -webkit-flex since it's no longer enumerable. + * svg/css/getComputedStyle-basic-expected.txt: + 2012-06-27 Erik Arvidsson [V8] Improve variable resolution order on window diff --git a/LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt b/LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt new file mode 100644 index 0000000..da9c6a0 --- /dev/null +++ b/LayoutTests/css3/flexbox/flex-longhand-parsing-expected.txt @@ -0,0 +1,39 @@ +Tests the interaction between the -webkit-flex shorthand propery and the -webkit-flex-grow, -webkit-flex-shrink, and -webkit-flex-basis longhand properties. + +On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". + + +PASS flexitem.style.webkitFlex is "" +PASS getComputedStyle(flexitem).webkitFlex is "0 1 auto" +PASS flexitem.style.webkitFlexGrow is "2" +PASS getComputedStyle(flexitem).webkitFlexGrow is "2" +PASS getComputedStyle(flexitem).webkitFlex is "2 1 auto" +PASS flexitem.style.webkitFlexShrink is "3" +PASS getComputedStyle(flexitem).webkitFlexShrink is "3" +PASS getComputedStyle(flexitem).webkitFlex is "2 3 auto" +PASS flexitem.style.webkitFlexBasis is "0px" +PASS getComputedStyle(flexitem).webkitFlexBasis is "0px" +PASS getComputedStyle(flexitem).webkitFlex is "2 3 0px" +PASS flexitem.style.webkitFlexShrink is "0" +PASS getComputedStyle(flexitem).webkitFlex is "2 0 0px" +PASS flexitem.style.webkitFlexBasis is "50%" +PASS getComputedStyle(flexitem).webkitFlexBasis is "50%" +PASS getComputedStyle(flexitem).webkitFlex is "2 0 50%" +PASS flexitem.style.webkitFlexBasis is "auto" +PASS getComputedStyle(flexitem).webkitFlex is "2 0 auto" +PASS flexitem.style.webkitFlex is "0 0 auto" +PASS flexitem.style.webkitFlexGrow is "0" +PASS flexitem.style.webkitFlexShrink is "0" +PASS flexitem.style.webkitFlexBasis is "auto" +PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" +PASS flexitem.style.webkitFlex is "1.5 0 auto" +PASS getComputedStyle(flexitem).webkitFlex is "1.5 0 auto" +PASS flexitem.style.webkitFlex is "3 1 0px" +PASS flexitem.style.webkitFlexGrow is "3" +PASS flexitem.style.webkitFlexShrink is "1" +PASS flexitem.style.webkitFlexBasis is "0px" +PASS getComputedStyle(flexitem).webkitFlex is "3 1 0px" +PASS successfullyParsed is true + +TEST COMPLETE + diff --git a/LayoutTests/css3/flexbox/flex-longhand-parsing.html b/LayoutTests/css3/flexbox/flex-longhand-parsing.html new file mode 100644 index 0000000..31bb43d --- /dev/null +++ b/LayoutTests/css3/flexbox/flex-longhand-parsing.html @@ -0,0 +1,68 @@ + + + + + + +
+
+
+ + + + diff --git a/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt b/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt index 4a6d882..63c8b80 100644 --- a/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt +++ b/LayoutTests/css3/flexbox/flex-property-parsing-expected.txt @@ -23,7 +23,7 @@ PASS flexitem.style.webkitFlex is "0 1 2em" PASS getComputedStyle(flexitem).webkitFlex is "0 1 32px" PASS flexitem.style.webkitFlex is "0 1 0px" PASS getComputedStyle(flexitem).webkitFlex is "0 1 0px" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" PASS flexitem.style.webkitFlex is "0 0 0px" PASS getComputedStyle(flexitem).webkitFlex is "0 0 0px" @@ -43,17 +43,17 @@ PASS flexitem.style.webkitFlex is "4 1 0px" PASS getComputedStyle(flexitem).webkitFlex is "4 1 0px" PASS flexitem.style.webkitFlex is "0 1 0px" PASS getComputedStyle(flexitem).webkitFlex is "0 1 0px" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" PASS flexitem.style.webkitFlex is "1 2 0px" PASS getComputedStyle(flexitem).webkitFlex is "1 2 0px" @@ -77,37 +77,37 @@ PASS flexitem.style.webkitFlex is "0 1 0px" PASS getComputedStyle(flexitem).webkitFlex is "0 1 0px" PASS flexitem.style.webkitFlex is "0 0 0px" PASS getComputedStyle(flexitem).webkitFlex is "0 0 0px" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" -PASS flexitem.style.webkitFlex is "none" +PASS flexitem.style.webkitFlex is "0 0 auto" PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" PASS flexitem.style.webkitFlex is "initial" PASS getComputedStyle(flexitem).webkitFlex is "0 1 auto" -PASS flexitem.style.webkitFlex is "none" +FAIL flexitem.style.webkitFlex should be 0 0 auto. Was initial. PASS getComputedStyle(flexitem).webkitFlex is "0 0 auto" PASS successfullyParsed is true diff --git a/LayoutTests/css3/flexbox/flex-property-parsing.html b/LayoutTests/css3/flexbox/flex-property-parsing.html index 638e56a..3f301dd 100644 --- a/LayoutTests/css3/flexbox/flex-property-parsing.html +++ b/LayoutTests/css3/flexbox/flex-property-parsing.html @@ -57,7 +57,7 @@ shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 0px'); flexitem.style.webkitFlex = 'none'; flexitem.style.webkitFlex = '-2'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0 0'; @@ -98,27 +98,27 @@ shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 0px'); flexitem.style.webkitFlex = 'none'; flexitem.style.webkitFlex = '-1 5'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1 -1'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '-1 -1'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = 'auto 2em'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '2px 4px'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0px 0px'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1 2 0'; @@ -167,59 +167,59 @@ shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 0px'); flexitem.style.webkitFlex = 'none'; flexitem.style.webkitFlex = '1 2 3'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0 2 3'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1 0 3'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0 0 1'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1 -2 3px'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1 2px 3px'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1 2px auto'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0px 0px 0'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0 0 0 0'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0 0 0px 0'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0 0 0px 0px'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '0 0 0px 0'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1, 2, 3px'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = '1,'; // Invalid, return previous value. -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); flexitem.style.webkitFlex = 'initial'; @@ -227,7 +227,8 @@ shouldBeEqualToString('flexitem.style.webkitFlex', 'initial'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto'); flexitem.style.webkitFlex = 'none'; -shouldBeEqualToString('flexitem.style.webkitFlex', 'none'); +// FIXME: This test case is failing. https://bugs.webkit.org/show_bug.cgi?id=90020 +shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); diff --git a/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt b/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt index 8119ff8..59e3829 100644 --- a/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt +++ b/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt @@ -146,7 +146,6 @@ zoom: 1; -webkit-align-content: stretch; -webkit-align-items: stretch; -webkit-align-self: stretch; --webkit-flex: 0 1 auto; -webkit-flex-direction: row; -webkit-flex-wrap: none; -webkit-justify-content: flex-start; diff --git a/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt b/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt index 9a6d65b..fb13fc3 100644 --- a/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt +++ b/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt @@ -145,7 +145,6 @@ zoom: 1 -webkit-align-content: stretch -webkit-align-items: stretch -webkit-align-self: stretch --webkit-flex: 0 1 auto -webkit-flex-direction: row -webkit-flex-wrap: none -webkit-justify-content: flex-start diff --git a/LayoutTests/fast/css/getComputedStyle/resources/property-names.js b/LayoutTests/fast/css/getComputedStyle/resources/property-names.js index 05dbc98..5098bdc 100644 --- a/LayoutTests/fast/css/getComputedStyle/resources/property-names.js +++ b/LayoutTests/fast/css/getComputedStyle/resources/property-names.js @@ -44,7 +44,6 @@ var propertiesToTest = { "-webkit-column-rule-width": true, "-webkit-column-span": true, "-webkit-column-width": true, - "-webkit-flex": true, "-webkit-flex-direction": true, "-webkit-flex-wrap": true, "-webkit-font-kerning": true, diff --git a/LayoutTests/svg/css/getComputedStyle-basic-expected.txt b/LayoutTests/svg/css/getComputedStyle-basic-expected.txt index ff9b317..2e1900a 100644 --- a/LayoutTests/svg/css/getComputedStyle-basic-expected.txt +++ b/LayoutTests/svg/css/getComputedStyle-basic-expected.txt @@ -290,8 +290,6 @@ rect: style.getPropertyValue(-webkit-align-items) : stretch rect: style.getPropertyCSSValue(-webkit-align-items) : [object CSSPrimitiveValue] rect: style.getPropertyValue(-webkit-align-self) : stretch rect: style.getPropertyCSSValue(-webkit-align-self) : [object CSSPrimitiveValue] -rect: style.getPropertyValue(-webkit-flex) : 0 1 auto -rect: style.getPropertyCSSValue(-webkit-flex) : [object CSSValueList] rect: style.getPropertyValue(-webkit-flex-direction) : row rect: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue] rect: style.getPropertyValue(-webkit-flex-wrap) : none @@ -794,8 +792,6 @@ g: style.getPropertyValue(-webkit-align-items) : stretch g: style.getPropertyCSSValue(-webkit-align-items) : [object CSSPrimitiveValue] g: style.getPropertyValue(-webkit-align-self) : stretch g: style.getPropertyCSSValue(-webkit-align-self) : [object CSSPrimitiveValue] -g: style.getPropertyValue(-webkit-flex) : 0 1 auto -g: style.getPropertyCSSValue(-webkit-flex) : [object CSSValueList] g: style.getPropertyValue(-webkit-flex-direction) : row g: style.getPropertyCSSValue(-webkit-flex-direction) : [object CSSPrimitiveValue] g: style.getPropertyValue(-webkit-flex-wrap) : none diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog index a884889..6dc0996 100755 --- a/Source/WebCore/ChangeLog +++ b/Source/WebCore/ChangeLog @@ -1,3 +1,41 @@ +2012-06-27 Tony Chang + + Split flex into flex-grow/flex-shrink/flex-basis + https://bugs.webkit.org/show_bug.cgi?id=86525 + + Reviewed by Ojan Vafai. + + Split flex into 3 separate properties per the spec: + http://dev.w3.org/csswg/css3-flexbox/#flex-components + + Tests: css3/flexbox/flex-longhand-parsing.html + css3/flexbox/flex-property-parsing.html: Updated test results. + + * css/CSSComputedStyleDeclaration.cpp: + (WebCore): -webkit-flex is no longer enumerable. + (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue): Add new css property names and use + getCSSPropertyValuesForShorthandProperties for WebkitFlex. Also sort flex propery names. + * css/CSSParser.cpp: + (WebCore::isValidKeywordPropertyAndValue): Fix indent. + (WebCore::CSSParser::parseValue): Add parsing for new properties and handle -webkit-flex: none. + (WebCore::CSSParser::parseFlex): Switch to new names (positive -> grow, negative -> shrink, + preferred size -> basis) and assign to longhand properties. + * css/CSSParser.h: + * css/CSSProperty.cpp: + (WebCore::CSSProperty::isInheritedProperty): Add new properties. + * css/CSSPropertyNames.in: Add new properties. + * css/StyleBuilder.cpp: + (WebCore::StyleBuilder::StyleBuilder): Delete special handling of applying flex and just use shorthand handlers. + * css/StylePropertySet.cpp: + (WebCore::StylePropertySet::getPropertyValue): Add new shorthand. + (WebCore::StylePropertySet::asText): + * css/StylePropertyShorthand.cpp: + (WebCore::webkitFlexShorthand): Add new shorthand. + (WebCore::shorthandForProperty): + * css/StylePropertyShorthand.h: + * css/StyleResolver.cpp: + (WebCore::StyleResolver::collectMatchingRulesForList): Add to list of properties applied by StyleBuilder. + 2012-06-27 Kentaro Hara Make Element::elementRareData() and Element::ensureElementRareData() private diff --git a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp index 870dee4..d19e554 100644 --- a/Source/WebCore/css/CSSComputedStyleDeclaration.cpp +++ b/Source/WebCore/css/CSSComputedStyleDeclaration.cpp @@ -237,7 +237,9 @@ static const CSSPropertyID computedProperties[] = { CSSPropertyWebkitAlignContent, CSSPropertyWebkitAlignItems, CSSPropertyWebkitAlignSelf, - CSSPropertyWebkitFlex, + CSSPropertyWebkitFlexBasis, + CSSPropertyWebkitFlexGrow, + CSSPropertyWebkitFlexShrink, CSSPropertyWebkitFlexDirection, CSSPropertyWebkitFlexWrap, CSSPropertyWebkitJustifyContent, @@ -1650,25 +1652,8 @@ PassRefPtr CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropert case CSSPropertyEmptyCells: return cssValuePool().createValue(style->emptyCells()); #if ENABLE(CSS3_FLEXBOX) - case CSSPropertyWebkitFlex: { - RefPtr list = CSSValueList::createSpaceSeparated(); - list->append(cssValuePool().createValue(style->flexGrow())); - list->append(cssValuePool().createValue(style->flexShrink())); - - Length flexBasis = style->flexBasis(); - if (flexBasis.isAuto()) - list->append(cssValuePool().createIdentifierValue(CSSValueAuto)); - else if (flexBasis.isPercent()) - list->append(cssValuePool().createValue(flexBasis.value(), CSSPrimitiveValue::CSS_PERCENTAGE)); - else - list->append(cssValuePool().createValue(flexBasis.value(), CSSPrimitiveValue::CSS_PX)); - - return list.release(); - } - case CSSPropertyWebkitOrder: - return cssValuePool().createValue(style->order()); - case CSSPropertyWebkitJustifyContent: - return cssValuePool().createValue(style->justifyContent()); + case CSSPropertyWebkitAlignContent: + return cssValuePool().createValue(style->alignContent()); case CSSPropertyWebkitAlignItems: return cssValuePool().createValue(style->alignItems()); case CSSPropertyWebkitAlignSelf: @@ -1678,18 +1663,24 @@ PassRefPtr CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropert return cssValuePool().createValue(AlignStretch); } return cssValuePool().createValue(style->alignSelf()); + case CSSPropertyWebkitFlex: + return getCSSPropertyValuesForShorthandProperties(webkitFlexShorthand()); + case CSSPropertyWebkitFlexBasis: + return cssValuePool().createValue(style->flexBasis()); case CSSPropertyWebkitFlexDirection: return cssValuePool().createValue(style->flexDirection()); + case CSSPropertyWebkitFlexFlow: + return getCSSPropertyValuesForShorthandProperties(webkitFlexFlowShorthand()); + case CSSPropertyWebkitFlexGrow: + return cssValuePool().createValue(style->flexGrow()); + case CSSPropertyWebkitFlexShrink: + return cssValuePool().createValue(style->flexShrink()); case CSSPropertyWebkitFlexWrap: return cssValuePool().createValue(style->flexWrap()); - case CSSPropertyWebkitAlignContent: - return cssValuePool().createValue(style->alignContent()); - case CSSPropertyWebkitFlexFlow: { - RefPtr list = CSSValueList::createSpaceSeparated(); - list->append(cssValuePool().createValue(style->flexDirection())); - list->append(cssValuePool().createValue(style->flexWrap())); - return list.release(); - } + case CSSPropertyWebkitJustifyContent: + return cssValuePool().createValue(style->justifyContent()); + case CSSPropertyWebkitOrder: + return cssValuePool().createValue(style->order()); #endif case CSSPropertyFloat: return cssValuePool().createValue(style->floating()); diff --git a/Source/WebCore/css/CSSParser.cpp b/Source/WebCore/css/CSSParser.cpp index cc96a2d..c386891 100644 --- a/Source/WebCore/css/CSSParser.cpp +++ b/Source/WebCore/css/CSSParser.cpp @@ -716,7 +716,7 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int break; case CSSPropertyWebkitFlexDirection: if (valueID == CSSValueRow || valueID == CSSValueRowReverse || valueID == CSSValueColumn || valueID == CSSValueColumnReverse) - return true; + return true; break; case CSSPropertyWebkitFlexWrap: if (valueID == CSSValueNone || valueID == CSSValueWrap || valueID == CSSValueWrapReverse) @@ -2275,11 +2275,26 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important) break; #endif #if ENABLE(CSS3_FLEXBOX) - case CSSPropertyWebkitFlex: - if (id == CSSValueNone) + case CSSPropertyWebkitFlex: { + ShorthandScope scope(this, propId); + if (id == CSSValueNone) { + addProperty(CSSPropertyWebkitFlexGrow, cssValuePool().createValue(0, CSSPrimitiveValue::CSS_NUMBER), important); + addProperty(CSSPropertyWebkitFlexShrink, cssValuePool().createValue(0, CSSPrimitiveValue::CSS_NUMBER), important); + addProperty(CSSPropertyWebkitFlexBasis, cssValuePool().createIdentifierValue(CSSValueAuto), important); + return true; + } + return parseFlex(m_valueList.get(), important); + } + case CSSPropertyWebkitFlexBasis: + // FIXME: Support intrinsic dimensions too. + if (id == CSSValueAuto) validPrimitive = true; else - parsedValue = parseFlex(m_valueList.get()); + validPrimitive = (!id && validUnit(value, FLength | FPercent | FNonNeg)); + break; + case CSSPropertyWebkitFlexGrow: + case CSSPropertyWebkitFlexShrink: + validPrimitive = validUnit(value, FNumber | FNonNeg); break; case CSSPropertyWebkitOrder: validPrimitive = validUnit(value, FNumber); @@ -5780,49 +5795,48 @@ bool CSSParser::parseReflect(CSSPropertyID propId, bool important) #if ENABLE(CSS3_FLEXBOX) -PassRefPtr CSSParser::parseFlex(CSSParserValueList* args) +bool CSSParser::parseFlex(CSSParserValueList* args, bool important) { if (!args || !args->size() || args->size() > 3) - return 0; + return false; static const double unsetValue = -1; - double positiveFlex = unsetValue; - double negativeFlex = unsetValue; - RefPtr preferredSize; + double flexGrow = unsetValue; + double flexShrink = unsetValue; + RefPtr flexBasis; while (CSSParserValue* arg = args->current()) { if (validUnit(arg, FNumber | FNonNeg)) { - if (positiveFlex == unsetValue) - positiveFlex = arg->fValue; - else if (negativeFlex == unsetValue) - negativeFlex = arg->fValue; + if (flexGrow == unsetValue) + flexGrow = arg->fValue; + else if (flexShrink == unsetValue) + flexShrink = arg->fValue; else if (!arg->fValue) { - // flex() only allows a preferred size of 0 (sans units) if the positive and negative flex values have already been set. - preferredSize = cssValuePool().createValue(0, CSSPrimitiveValue::CSS_PX); + // flex only allows a basis of 0 (sans units) if flex-grow and flex-shrink values have already been set. + flexBasis = cssValuePool().createValue(0, CSSPrimitiveValue::CSS_PX); } else { - // We only allow 3 numbers without units if the last value is 0. E.g., flex(1 1 1) is invalid. - return 0; + // We only allow 3 numbers without units if the last value is 0. E.g., flex:1 1 1 is invalid. + return false; } - } else if (!preferredSize && (arg->id == CSSValueAuto || validUnit(arg, FLength | FPercent | FNonNeg))) - preferredSize = parseValidPrimitive(arg->id, arg); + } else if (!flexBasis && (arg->id == CSSValueAuto || validUnit(arg, FLength | FPercent | FNonNeg))) + flexBasis = parseValidPrimitive(arg->id, arg); else { - // Not a valid arg for flex(). - return 0; + // Not a valid arg for flex. + return false; } args->next(); } - if (positiveFlex == unsetValue) - positiveFlex = 0; - if (negativeFlex == unsetValue) - negativeFlex = 1; - if (!preferredSize) - preferredSize = cssValuePool().createValue(0, CSSPrimitiveValue::CSS_PX); + if (flexGrow == unsetValue) + flexGrow = 0; + if (flexShrink == unsetValue) + flexShrink = 1; + if (!flexBasis) + flexBasis = cssValuePool().createValue(0, CSSPrimitiveValue::CSS_PX); - RefPtr flex = CSSValueList::createSpaceSeparated(); - flex->append(cssValuePool().createValue(clampToFloat(positiveFlex), CSSPrimitiveValue::CSS_NUMBER)); - flex->append(cssValuePool().createValue(clampToFloat(negativeFlex), CSSPrimitiveValue::CSS_NUMBER)); - flex->append(preferredSize); - return flex; + addProperty(CSSPropertyWebkitFlexGrow, cssValuePool().createValue(clampToFloat(flexGrow), CSSPrimitiveValue::CSS_NUMBER), important); + addProperty(CSSPropertyWebkitFlexShrink, cssValuePool().createValue(clampToFloat(flexShrink), CSSPrimitiveValue::CSS_NUMBER), important); + addProperty(CSSPropertyWebkitFlexBasis, flexBasis, important); + return true; } #endif diff --git a/Source/WebCore/css/CSSParser.h b/Source/WebCore/css/CSSParser.h index 625e1e0..785793f 100644 --- a/Source/WebCore/css/CSSParser.h +++ b/Source/WebCore/css/CSSParser.h @@ -189,7 +189,7 @@ public: bool parseReflect(CSSPropertyID, bool important); - PassRefPtr parseFlex(CSSParserValueList* args); + bool parseFlex(CSSParserValueList* args, bool important); // Image generators bool parseCanvas(CSSParserValueList*, RefPtr&); diff --git a/Source/WebCore/css/CSSProperty.cpp b/Source/WebCore/css/CSSProperty.cpp index 7a3d715..01519f3 100644 --- a/Source/WebCore/css/CSSProperty.cpp +++ b/Source/WebCore/css/CSSProperty.cpp @@ -552,8 +552,11 @@ bool CSSProperty::isInheritedProperty(CSSPropertyID propertyID) case CSSPropertyWebkitAlignItems: case CSSPropertyWebkitAlignSelf: case CSSPropertyWebkitFlex: + case CSSPropertyWebkitFlexBasis: case CSSPropertyWebkitFlexDirection: case CSSPropertyWebkitFlexFlow: + case CSSPropertyWebkitFlexGrow: + case CSSPropertyWebkitFlexShrink: case CSSPropertyWebkitFlexWrap: case CSSPropertyWebkitJustifyContent: case CSSPropertyWebkitOrder: diff --git a/Source/WebCore/css/CSSPropertyNames.in b/Source/WebCore/css/CSSPropertyNames.in index caaaf0e..1af3925 100644 --- a/Source/WebCore/css/CSSPropertyNames.in +++ b/Source/WebCore/css/CSSPropertyNames.in @@ -268,8 +268,11 @@ z-index -webkit-align-items -webkit-align-self -webkit-flex +-webkit-flex-basis -webkit-flex-direction -webkit-flex-flow +-webkit-flex-grow +-webkit-flex-shrink -webkit-flex-wrap -webkit-justify-content #endif diff --git a/Source/WebCore/css/StyleBuilder.cpp b/Source/WebCore/css/StyleBuilder.cpp index c2b1240..670322d 100644 --- a/Source/WebCore/css/StyleBuilder.cpp +++ b/Source/WebCore/css/StyleBuilder.cpp @@ -1716,70 +1716,6 @@ public: } }; -class ApplyPropertyFlex { -public: - static void applyInheritValue(StyleResolver* styleResolver) - { - ApplyPropertyDefaultBase::applyInheritValue(styleResolver); - ApplyPropertyDefaultBase::applyInheritValue(styleResolver); - ApplyPropertyDefaultBase::applyInheritValue(styleResolver); - } - - static void applyInitialValue(StyleResolver* styleResolver) - { - styleResolver->style()->setFlexGrow(RenderStyle::initialFlexGrow()); - styleResolver->style()->setFlexShrink(RenderStyle::initialFlexShrink()); - styleResolver->style()->setFlexBasis(RenderStyle::initialFlexBasis()); - } - - static void applyValue(StyleResolver* styleResolver, CSSValue* value) - { - if (value->isPrimitiveValue()) { - CSSPrimitiveValue* primitiveValue = static_cast(value); - if (primitiveValue->getIdent() == CSSValueNone) { - styleResolver->style()->setFlexGrow(0); - styleResolver->style()->setFlexShrink(0); - styleResolver->style()->setFlexBasis(Length(Auto)); - } - return; - } - - if (!value->isValueList()) - return; - CSSValueList* valueList = static_cast(value); - if (valueList->length() != 3) - return; - - float flexValue = 0; - if (!getFlexValue(valueList->itemWithoutBoundsCheck(0), flexValue)) - return; - styleResolver->style()->setFlexGrow(flexValue); - - if (!getFlexValue(valueList->itemWithoutBoundsCheck(1), flexValue)) - return; - styleResolver->style()->setFlexShrink(flexValue); - - ApplyPropertyLength<&RenderStyle::flexBasis, &RenderStyle::setFlexBasis, &RenderStyle::initialFlexBasis, AutoEnabled>::applyValue(styleResolver, valueList->itemWithoutBoundsCheck(2)); - } - - static PropertyHandler createHandler() - { - return PropertyHandler(&applyInheritValue, &applyInitialValue, &applyValue); - } -private: - static bool getFlexValue(CSSValue* value, float& flexValue) - { - if (!value->isPrimitiveValue()) - return false; - CSSPrimitiveValue* primitiveValue = static_cast(value); - if (!primitiveValue->isNumber()) - return false; - flexValue = primitiveValue->getFloatValue(); - return true; - } - -}; - #if ENABLE(CSS_EXCLUSIONS) template ), CSSWrapShape* (*initialFunction)()> class ApplyPropertyWrapShape { @@ -2030,9 +1966,10 @@ StyleBuilder::StyleBuilder() setPropertyHandler(CSSPropertyWebkitAlignContent, ApplyPropertyDefault::createHandler()); setPropertyHandler(CSSPropertyWebkitAlignItems, ApplyPropertyDefault::createHandler()); setPropertyHandler(CSSPropertyWebkitAlignSelf, ApplyPropertyDefault::createHandler()); - setPropertyHandler(CSSPropertyWebkitFlex, ApplyPropertyFlex::createHandler()); + setPropertyHandler(CSSPropertyWebkitFlexBasis, ApplyPropertyLength<&RenderStyle::flexBasis, &RenderStyle::setFlexBasis, &RenderStyle::initialFlexBasis, AutoEnabled>::createHandler()); setPropertyHandler(CSSPropertyWebkitFlexDirection, ApplyPropertyDefault::createHandler()); - setPropertyHandler(CSSPropertyWebkitFlexFlow, ApplyPropertyExpanding::createHandler()); + setPropertyHandler(CSSPropertyWebkitFlexGrow, ApplyPropertyDefault::createHandler()); + setPropertyHandler(CSSPropertyWebkitFlexShrink, ApplyPropertyDefault::createHandler()); setPropertyHandler(CSSPropertyWebkitFlexWrap, ApplyPropertyDefault::createHandler()); setPropertyHandler(CSSPropertyWebkitJustifyContent, ApplyPropertyDefault::createHandler()); setPropertyHandler(CSSPropertyWebkitOrder, ApplyPropertyDefault::createHandler()); diff --git a/Source/WebCore/css/StylePropertySet.cpp b/Source/WebCore/css/StylePropertySet.cpp index 60afd5e..7fc836f 100644 --- a/Source/WebCore/css/StylePropertySet.cpp +++ b/Source/WebCore/css/StylePropertySet.cpp @@ -162,6 +162,8 @@ String StylePropertySet::getPropertyValue(CSSPropertyID propertyID) const case CSSPropertyBorderStyle: return get4Values(borderStyleShorthand()); #if ENABLE(CSS3_FLEXBOX) + case CSSPropertyWebkitFlex: + return getShorthandValue(webkitFlexShorthand()); case CSSPropertyWebkitFlexFlow: return getShorthandValue(webkitFlexFlowShorthand()); #endif @@ -755,6 +757,11 @@ String StylePropertySet::asText() const case CSSPropertyWebkitFlexWrap: shorthandPropertyID = CSSPropertyWebkitFlexFlow; break; + case CSSPropertyWebkitFlexBasis: + case CSSPropertyWebkitFlexGrow: + case CSSPropertyWebkitFlexShrink: + shorthandPropertyID = CSSPropertyWebkitFlex; + break; #endif case CSSPropertyWebkitMaskPositionX: case CSSPropertyWebkitMaskPositionY: diff --git a/Source/WebCore/css/StylePropertyShorthand.cpp b/Source/WebCore/css/StylePropertyShorthand.cpp index 2265248..045bd24 100644 --- a/Source/WebCore/css/StylePropertyShorthand.cpp +++ b/Source/WebCore/css/StylePropertyShorthand.cpp @@ -314,6 +314,13 @@ const StylePropertyShorthand& webkitFlexFlowShorthand() DEFINE_STATIC_LOCAL(StylePropertyShorthand, webkitFlexFlowLonghands, (flexFlowProperties, WTF_ARRAY_LENGTH(flexFlowProperties))); return webkitFlexFlowLonghands; } + +const StylePropertyShorthand& webkitFlexShorthand() +{ + static const CSSPropertyID flexProperties[] = { CSSPropertyWebkitFlexGrow, CSSPropertyWebkitFlexShrink, CSSPropertyWebkitFlexBasis }; + DEFINE_STATIC_LOCAL(StylePropertyShorthand, webkitFlexLonghands, (flexProperties, WTF_ARRAY_LENGTH(flexProperties))); + return webkitFlexLonghands; +} #endif const StylePropertyShorthand& webkitMarginCollapseShorthand() @@ -480,6 +487,8 @@ const StylePropertyShorthand& shorthandForProperty(CSSPropertyID propertyID) case CSSPropertyWebkitColumnRule: return webkitColumnRuleShorthand(); #if ENABLE(CSS3_FLEXBOX) + case CSSPropertyWebkitFlex: + return webkitFlexShorthand(); case CSSPropertyWebkitFlexFlow: return webkitFlexFlowShorthand(); #endif diff --git a/Source/WebCore/css/StylePropertyShorthand.h b/Source/WebCore/css/StylePropertyShorthand.h index a058538..ee331c7 100644 --- a/Source/WebCore/css/StylePropertyShorthand.h +++ b/Source/WebCore/css/StylePropertyShorthand.h @@ -88,6 +88,7 @@ const StylePropertyShorthand& webkitColumnsShorthand(); const StylePropertyShorthand& webkitColumnRuleShorthand(); #if ENABLE(CSS3_FLEXBOX) const StylePropertyShorthand& webkitFlexFlowShorthand(); +const StylePropertyShorthand& webkitFlexShorthand(); #endif const StylePropertyShorthand& webkitMarginCollapseShorthand(); const StylePropertyShorthand& webkitMarqueeShorthand(); diff --git a/Source/WebCore/css/StyleResolver.cpp b/Source/WebCore/css/StyleResolver.cpp index 7e857ad..865c4ad 100644 --- a/Source/WebCore/css/StyleResolver.cpp +++ b/Source/WebCore/css/StyleResolver.cpp @@ -4313,8 +4313,11 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value) case CSSPropertyWebkitAlignItems: case CSSPropertyWebkitAlignSelf: case CSSPropertyWebkitFlex: + case CSSPropertyWebkitFlexBasis: case CSSPropertyWebkitFlexDirection: case CSSPropertyWebkitFlexFlow: + case CSSPropertyWebkitFlexGrow: + case CSSPropertyWebkitFlexShrink: case CSSPropertyWebkitFlexWrap: case CSSPropertyWebkitJustifyContent: case CSSPropertyWebkitOrder: -- 2.7.4