Bug 702508 part 1: Support parsing/computing the CSS property "flex-wrap". r=dbaron
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 05 Dec 2013 10:57:50 -0800
changeset 159041 8f49fff73d6e
parent 159040 10932f3a0ba0
child 159042 2539dbed0ca8
push id25771
push usercbook@mozilla.com
push date2013-12-06 12:30 +0000
treeherdermozilla-central@9a92e42151dc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs702508
milestone28.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 702508 part 1: Support parsing/computing the CSS property "flex-wrap". r=dbaron
layout/style/nsCSSKeywordList.h
layout/style/nsCSSPropList.h
layout/style/nsCSSProps.cpp
layout/style/nsCSSProps.h
layout/style/nsComputedDOMStyle.cpp
layout/style/nsComputedDOMStyle.h
layout/style/nsComputedDOMStylePropertyList.h
layout/style/nsRuleNode.cpp
layout/style/nsStyleConsts.h
layout/style/nsStyleStruct.cpp
layout/style/nsStyleStruct.h
layout/style/test/property_database.js
--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -573,16 +573,18 @@ CSS_KEY(visiblestroke, visiblestroke)
 CSS_KEY(w-resize, w_resize)
 CSS_KEY(wait, wait)
 CSS_KEY(wavy, wavy)
 CSS_KEY(weight, weight)
 CSS_KEY(wider, wider)
 CSS_KEY(window, window)
 CSS_KEY(windowframe, windowframe)
 CSS_KEY(windowtext, windowtext)
+CSS_KEY(wrap, wrap)
+CSS_KEY(wrap-reverse, wrap_reverse)
 CSS_KEY(write-only, write_only)
 CSS_KEY(x-large, x_large)
 CSS_KEY(x-small, x_small)
 CSS_KEY(xx-large, xx_large)
 CSS_KEY(xx-small, xx_small)
 CSS_KEY(zoom-in, zoom_in)
 CSS_KEY(zoom-out, zoom_out)
 
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1673,16 +1673,26 @@ CSS_PROP_POSITION(
     // NOTE: The parsing implementation for the 'flex' shorthand property has
     // its own code to parse each subproperty. It does not depend on the
     // longhand parsing defined here.
     VARIANT_HN,
     nullptr,
     offsetof(nsStylePosition, mFlexShrink),
     eStyleAnimType_float) // float, except animations to/from 0 shouldn't work
 CSS_PROP_POSITION(
+    flex-wrap,
+    flex_wrap,
+    FlexWrap,
+    CSS_PROPERTY_PARSE_VALUE,
+    "",
+    VARIANT_HK,
+    kFlexWrapKTable,
+    offsetof(nsStylePosition, mFlexWrap),
+    eStyleAnimType_EnumU8)
+CSS_PROP_POSITION(
     order,
     order,
     Order,
     CSS_PROPERTY_PARSE_VALUE,
     "",
     VARIANT_HI,
     nullptr,
     offsetof(nsStylePosition, mOrder),
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -996,16 +996,23 @@ const int32_t nsCSSProps::kAlignSelfKTab
 const int32_t nsCSSProps::kFlexDirectionKTable[] = {
   eCSSKeyword_row,            NS_STYLE_FLEX_DIRECTION_ROW,
   eCSSKeyword_row_reverse,    NS_STYLE_FLEX_DIRECTION_ROW_REVERSE,
   eCSSKeyword_column,         NS_STYLE_FLEX_DIRECTION_COLUMN,
   eCSSKeyword_column_reverse, NS_STYLE_FLEX_DIRECTION_COLUMN_REVERSE,
   eCSSKeyword_UNKNOWN,-1
 };
 
+const int32_t nsCSSProps::kFlexWrapKTable[] = {
+  eCSSKeyword_nowrap,       NS_STYLE_FLEX_WRAP_NOWRAP,
+  eCSSKeyword_wrap,         NS_STYLE_FLEX_WRAP_WRAP,
+  eCSSKeyword_wrap_reverse, NS_STYLE_FLEX_WRAP_WRAP_REVERSE,
+  eCSSKeyword_UNKNOWN,-1
+};
+
 const int32_t nsCSSProps::kJustifyContentKTable[] = {
   eCSSKeyword_flex_start,    NS_STYLE_JUSTIFY_CONTENT_FLEX_START,
   eCSSKeyword_flex_end,      NS_STYLE_JUSTIFY_CONTENT_FLEX_END,
   eCSSKeyword_center,        NS_STYLE_JUSTIFY_CONTENT_CENTER,
   eCSSKeyword_space_between, NS_STYLE_JUSTIFY_CONTENT_SPACE_BETWEEN,
   eCSSKeyword_space_around,  NS_STYLE_JUSTIFY_CONTENT_SPACE_AROUND,
   eCSSKeyword_UNKNOWN,-1
 };
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -477,16 +477,17 @@ public:
   static const int32_t kCursorKTable[];
   static const int32_t kDirectionKTable[];
   static const int32_t kDisplayKTable[];
   static const int32_t kElevationKTable[];
   static const int32_t kEmptyCellsKTable[];
   static const int32_t kAlignItemsKTable[];
   static const int32_t kAlignSelfKTable[];
   static const int32_t kFlexDirectionKTable[];
+  static const int32_t kFlexWrapKTable[];
   static const int32_t kJustifyContentKTable[];
   static const int32_t kFloatKTable[];
   static const int32_t kFloatEdgeKTable[];
   static const int32_t kFontKTable[];
   static const int32_t kFontKerningKTable[];
   static const int32_t kFontSizeKTable[];
   static const int32_t kFontSmoothingKTable[];
   static const int32_t kFontStretchKTable[];
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -3434,16 +3434,26 @@ CSSValue*
 nsComputedDOMStyle::DoGetFlexShrink()
 {
   nsROCSSPrimitiveValue* val = new nsROCSSPrimitiveValue;
   val->SetNumber(StylePosition()->mFlexShrink);
   return val;
 }
 
 CSSValue*
+nsComputedDOMStyle::DoGetFlexWrap()
+{
+  nsROCSSPrimitiveValue* val = new nsROCSSPrimitiveValue;
+  val->SetIdent(
+    nsCSSProps::ValueToKeywordEnum(StylePosition()->mFlexWrap,
+                                   nsCSSProps::kFlexWrapKTable));
+  return val;
+}
+
+CSSValue*
 nsComputedDOMStyle::DoGetOrder()
 {
   nsROCSSPrimitiveValue* val = new nsROCSSPrimitiveValue;
   val->SetNumber(StylePosition()->mOrder);
   return val;
 }
 
 CSSValue*
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -440,16 +440,17 @@ private:
 
   /* CSS Flexbox properties */
   mozilla::dom::CSSValue* DoGetAlignItems();
   mozilla::dom::CSSValue* DoGetAlignSelf();
   mozilla::dom::CSSValue* DoGetFlexBasis();
   mozilla::dom::CSSValue* DoGetFlexDirection();
   mozilla::dom::CSSValue* DoGetFlexGrow();
   mozilla::dom::CSSValue* DoGetFlexShrink();
+  mozilla::dom::CSSValue* DoGetFlexWrap();
   mozilla::dom::CSSValue* DoGetOrder();
   mozilla::dom::CSSValue* DoGetJustifyContent();
 
   /* SVG properties */
   mozilla::dom::CSSValue* DoGetFill();
   mozilla::dom::CSSValue* DoGetStroke();
   mozilla::dom::CSSValue* DoGetMarkerEnd();
   mozilla::dom::CSSValue* DoGetMarkerMid();
--- a/layout/style/nsComputedDOMStylePropertyList.h
+++ b/layout/style/nsComputedDOMStylePropertyList.h
@@ -105,16 +105,17 @@ COMPUTED_STYLE_PROP(counter_reset,      
 COMPUTED_STYLE_PROP(cursor,                        Cursor)
 COMPUTED_STYLE_PROP(direction,                     Direction)
 COMPUTED_STYLE_PROP(display,                       Display)
 COMPUTED_STYLE_PROP(empty_cells,                   EmptyCells)
 COMPUTED_STYLE_PROP(flex_basis,                    FlexBasis)
 COMPUTED_STYLE_PROP(flex_direction,                FlexDirection)
 COMPUTED_STYLE_PROP(flex_grow,                     FlexGrow)
 COMPUTED_STYLE_PROP(flex_shrink,                   FlexShrink)
+COMPUTED_STYLE_PROP(flex_wrap,                     FlexWrap)
 COMPUTED_STYLE_PROP(float,                         Float)
 //// COMPUTED_STYLE_PROP(font,                     Font)
 COMPUTED_STYLE_PROP(font_family,                   FontFamily)
 COMPUTED_STYLE_PROP(font_kerning,                  FontKerning)
 COMPUTED_STYLE_PROP(font_size,                     FontSize)
 COMPUTED_STYLE_PROP(font_size_adjust,              FontSizeAdjust)
 COMPUTED_STYLE_PROP(font_stretch,                  FontStretch)
 COMPUTED_STYLE_PROP(font_style,                    FontStyle)
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -7036,16 +7036,23 @@ nsRuleNode::ComputePositionData(void* aS
             SETFCT_UNSET_INITIAL);
 
   // flex-shrink: float, inherit, initial
   SetFactor(*aRuleData->ValueForFlexShrink(),
             pos->mFlexShrink, canStoreInRuleTree,
             parentPos->mFlexShrink, 1.0f,
             SETFCT_UNSET_INITIAL);
 
+  // flex-wrap: enum, inherit, initial
+  SetDiscrete(*aRuleData->ValueForFlexWrap(),
+              pos->mFlexWrap, canStoreInRuleTree,
+              SETDSC_ENUMERATED | SETDSC_UNSET_INITIAL,
+              parentPos->mFlexWrap,
+              NS_STYLE_FLEX_WRAP_NOWRAP, 0, 0, 0, 0);
+
   // order: integer, inherit, initial
   SetDiscrete(*aRuleData->ValueForOrder(),
               pos->mOrder, canStoreInRuleTree,
               SETDSC_INTEGER | SETDSC_UNSET_INITIAL,
               parentPos->mOrder,
               NS_STYLE_ORDER_INITIAL, 0, 0, 0, 0);
 
   // justify-content: enum, inherit, initial
--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@@ -420,16 +420,21 @@ static inline mozilla::css::Side operato
 
 // See nsStylePosition
 #define NS_STYLE_FLEX_DIRECTION_ROW             0
 #define NS_STYLE_FLEX_DIRECTION_ROW_REVERSE     1
 #define NS_STYLE_FLEX_DIRECTION_COLUMN          2
 #define NS_STYLE_FLEX_DIRECTION_COLUMN_REVERSE  3
 
 // See nsStylePosition
+#define NS_STYLE_FLEX_WRAP_NOWRAP               0
+#define NS_STYLE_FLEX_WRAP_WRAP                 1
+#define NS_STYLE_FLEX_WRAP_WRAP_REVERSE         2
+
+// See nsStylePosition
 // NOTE: This is the initial value of the integer-valued 'order' property
 // (rather than an internal numerical representation of some keyword).
 #define NS_STYLE_ORDER_INITIAL                  0
 
 // See nsStylePosition
 #define NS_STYLE_JUSTIFY_CONTENT_FLEX_START     0
 #define NS_STYLE_JUSTIFY_CONTENT_FLEX_END       1
 #define NS_STYLE_JUSTIFY_CONTENT_CENTER         2
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -1270,16 +1270,17 @@ nsStylePosition::nsStylePosition(void)
   mHeight.SetAutoValue();
   mMinHeight.SetCoordValue(0);
   mMaxHeight.SetNoneValue();
   mFlexBasis.SetAutoValue();
   mBoxSizing = NS_STYLE_BOX_SIZING_CONTENT;
   mAlignItems = NS_STYLE_ALIGN_ITEMS_INITIAL_VALUE;
   mAlignSelf = NS_STYLE_ALIGN_SELF_AUTO;
   mFlexDirection = NS_STYLE_FLEX_DIRECTION_ROW;
+  mFlexWrap = NS_STYLE_FLEX_WRAP_NOWRAP;
   mJustifyContent = NS_STYLE_JUSTIFY_CONTENT_FLEX_START;
   mOrder = NS_STYLE_ORDER_INITIAL;
   mFlexGrow = 0.0f;
   mFlexShrink = 1.0f;
   mZIndex.SetAutoValue();
 }
 
 nsStylePosition::~nsStylePosition(void) 
@@ -1322,23 +1323,25 @@ nsChangeHint nsStylePosition::CalcDiffer
   if (mAlignSelf != aOther.mAlignSelf ||
       mFlexBasis != aOther.mFlexBasis ||
       mFlexGrow != aOther.mFlexGrow ||
       mFlexShrink != aOther.mFlexShrink ||
       mOrder != aOther.mOrder) {
     return NS_CombineHint(hint, nsChangeHint_AllReflowHints);
   }
 
-  // Properties that apply to flexbox containers:
-
-  // flex-direction can swap a flexbox between vertical & horizontal.
-  // align-items can change the sizing of a flexbox & the positioning
-  // of its children.
+  // Properties that apply to flex containers:
+  // - flex-direction can swap a flex container between vertical & horizontal.
+  // - align-items can change the sizing of a flex container & the positioning
+  //   of its children.
+  // - flex-wrap changes whether a flex container's children are wrapped, which
+  //   impacts their sizing/positioning and hence impacts the container's size.
   if (mAlignItems != aOther.mAlignItems ||
-      mFlexDirection != aOther.mFlexDirection) {
+      mFlexDirection != aOther.mFlexDirection ||
+      mFlexWrap != aOther.mFlexWrap) {
     return NS_CombineHint(hint, nsChangeHint_AllReflowHints);
   }
 
   // Changing justify-content on a flexbox might affect the positioning of its
   // children, but it won't affect any sizing.
   if (mJustifyContent != aOther.mJustifyContent) {
     NS_UpdateHint(hint, nsChangeHint_NeedReflow);
   }
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -1127,16 +1127,17 @@ struct nsStylePosition {
   nsStyleCoord  mHeight;                // [reset] coord, percent, calc, auto
   nsStyleCoord  mMinHeight;             // [reset] coord, percent, calc
   nsStyleCoord  mMaxHeight;             // [reset] coord, percent, calc, none
   nsStyleCoord  mFlexBasis;             // [reset] coord, percent, enum, calc, auto
   uint8_t       mBoxSizing;             // [reset] see nsStyleConsts.h
   uint8_t       mAlignItems;            // [reset] see nsStyleConsts.h
   uint8_t       mAlignSelf;             // [reset] see nsStyleConsts.h
   uint8_t       mFlexDirection;         // [reset] see nsStyleConsts.h
+  uint8_t       mFlexWrap;              // [reset] see nsStyleConsts.h
   uint8_t       mJustifyContent;        // [reset] see nsStyleConsts.h
   int32_t       mOrder;                 // [reset] integer
   float         mFlexGrow;              // [reset] float
   float         mFlexShrink;            // [reset] float
   nsStyleCoord  mZIndex;                // [reset] integer, auto
 
   bool WidthDependsOnContainer() const
     { return WidthCoordDependsOnContainer(mWidth); }
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -3839,16 +3839,24 @@ var gCSSProperties = {
 	"flex-shrink": {
 		domProp: "flexShrink",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,
 		initial_values: [ "1" ],
 		other_values: [ "3", "0", "0.0", "2.5", "123" ],
 		invalid_values: [ "0px", "-5", "1%", "3em", "stretch", "auto" ]
 	},
+	"flex-wrap": {
+		domProp: "flexWrap",
+		inherited: false,
+		type: CSS_TYPE_LONGHAND,
+		initial_values: [ "nowrap" ],
+		other_values: [ "wrap", "wrap-reverse" ],
+		invalid_values: [ "10px", "30%", "justify", "column wrap", "auto" ]
+	},
 	"order": {
 		domProp: "order",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,
 		initial_values: [ "0" ],
 		other_values: [ "1", "99999", "-1", "-50" ],
 		invalid_values: [ "0px", "1.0", "1.", "1%", "0.2", "3em", "stretch" ]
 	},