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 158919 8f49fff73d6e
parent 158918 10932f3a0ba0
child 158920 2539dbed0ca8
push id37151
push userdholbert@mozilla.com
push date2013-12-05 18:59 +0000
treeherdermozilla-inbound@c4a963c41576 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs702508
milestone28.0a1
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" ]
 	},