Bug 696253, patch 3: implement parsing/computation for CSS property 'flex-direction'. r=dbaron

dom/interfaces/css/nsIDOMCSS2Properties.idl

@@ -762,6 +762,9 @@ interface nsIDOMCSS2Properties : nsISupports
    layout engine responds to them.  In builds with MOZ_FLEXBOX enabled, this
    block should be uncommented (and this interface's uuid should be revved).
    (This would be #ifdef MOZ_FLEXBOX, if that worked in IDL files.)
+           attribute DOMString        MozFlexDirection;
+                                        // raises(DOMException) on setting
+
            attribute DOMString        MozOrder;
                                         // raises(DOMException) on setting
 

layout/base/nsStyleConsts.h

@@ -398,6 +398,12 @@ static inline mozilla::css::Side operator++(mozilla::css::Side& side, int) {
 #endif // MOZ_FLEXBOX
 
 #ifdef MOZ_FLEXBOX
+// 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
 // NOTE: This is the initial value of the integer-valued 'order' property
 // (rather than an internal numerical representation of some keyword).

layout/style/nsCSSKeywordList.h

@@ -206,6 +206,8 @@ CSS_KEY(closest-side, closest_side)
 CSS_KEY(cm, cm)
 CSS_KEY(col-resize, col_resize)
 CSS_KEY(collapse, collapse)
+CSS_KEY(column, column)
+CSS_KEY(column-reverse, column_reverse)
 CSS_KEY(condensed, condensed)
 CSS_KEY(contain, contain)
 CSS_KEY(content-box, content_box)
@@ -373,7 +375,9 @@ CSS_KEY(rotatex, rotatex)
 CSS_KEY(rotatey, rotatey)
 CSS_KEY(rotatez, rotatez)
 CSS_KEY(round, round)
+CSS_KEY(row, row)
 CSS_KEY(row-resize, row_resize)
+CSS_KEY(row-reverse, row_reverse)
 CSS_KEY(rtl, rtl)
 CSS_KEY(running, running)
 CSS_KEY(s, s)

layout/style/nsCSSPropList.h

@@ -1512,6 +1512,16 @@ CSS_PROP_TABLEBORDER(
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_None)
 #ifdef MOZ_FLEXBOX
+CSS_PROP_POSITION(
+    -moz-flex-direction,
+    flex_direction,
+    CSS_PROP_DOMPROP_PREFIXED(FlexDirection),
+    CSS_PROPERTY_PARSE_VALUE,
+    "",
+    VARIANT_HK,
+    kFlexDirectionKTable,
+    offsetof(nsStylePosition, mFlexDirection),
+    eStyleAnimType_EnumU8)
 CSS_PROP_POSITION(
     -moz-order,
     order,

layout/style/nsCSSProps.cpp

@@ -903,6 +903,14 @@ const PRInt32 nsCSSProps::kEmptyCellsKTable[] = {
 };
 
 #ifdef MOZ_FLEXBOX
+const PRInt32 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 PRInt32 nsCSSProps::kJustifyContentKTable[] = {
   eCSSKeyword_flex_start,    NS_STYLE_JUSTIFY_CONTENT_FLEX_START,
   eCSSKeyword_flex_end,      NS_STYLE_JUSTIFY_CONTENT_FLEX_END,

layout/style/nsCSSProps.h

@@ -351,6 +351,7 @@ public:
   static const PRInt32 kElevationKTable[];
   static const PRInt32 kEmptyCellsKTable[];
 #ifdef MOZ_FLEXBOX
+  static const PRInt32 kFlexDirectionKTable[];
   static const PRInt32 kJustifyContentKTable[];
 #endif // MOZ_FLEXBOX
   static const PRInt32 kFloatKTable[];

layout/style/nsComputedDOMStyle.cpp

@@ -2925,6 +2925,16 @@ nsComputedDOMStyle::DoGetBorderImageRepeat()
 }
 
 #ifdef MOZ_FLEXBOX
+nsIDOMCSSValue*
+nsComputedDOMStyle::DoGetFlexDirection()
+{
+  nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue();
+  val->SetIdent(
+    nsCSSProps::ValueToKeywordEnum(GetStylePosition()->mFlexDirection,
+                                   nsCSSProps::kFlexDirectionKTable));
+  return val;
+}
+
 nsIDOMCSSValue*
 nsComputedDOMStyle::DoGetOrder()
 {
@@ -4658,6 +4668,9 @@ nsComputedDOMStyle::GetQueryablePropertyMap(PRUint32* aLength)
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule_style,        ColumnRuleStyle),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_rule_width,        ColumnRuleWidth),
     COMPUTED_STYLE_MAP_ENTRY(_moz_column_width,             ColumnWidth),
+#ifdef MOZ_FLEXBOX
+    COMPUTED_STYLE_MAP_ENTRY(flex_direction,                FlexDirection),
+#endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(float_edge,                    FloatEdge),
     COMPUTED_STYLE_MAP_ENTRY(font_feature_settings,         FontFeatureSettings),
     COMPUTED_STYLE_MAP_ENTRY(font_language_override,        FontLanguageOverride),

layout/style/nsComputedDOMStyle.h

@@ -359,6 +359,7 @@ private:
 
 #ifdef MOZ_FLEXBOX
   /* CSS Flexbox properties */
+  nsIDOMCSSValue* DoGetFlexDirection();
   nsIDOMCSSValue* DoGetOrder();
   nsIDOMCSSValue* DoGetJustifyContent();
 #endif // MOZ_FLEXBOX

layout/style/nsRuleNode.cpp

@@ -6425,6 +6425,12 @@ nsRuleNode::ComputePositionData(void* aStartStruct,
               NS_STYLE_BOX_SIZING_CONTENT, 0, 0, 0, 0);
 
 #ifdef MOZ_FLEXBOX
+  // flex-direction: enum, inherit, initial
+  SetDiscrete(*aRuleData->ValueForFlexDirection(),
+              pos->mFlexDirection, canStoreInRuleTree,
+              SETDSC_ENUMERATED, parentPos->mFlexDirection,
+              NS_STYLE_FLEX_DIRECTION_ROW, 0, 0, 0, 0);
+
   // order: integer, inherit, initial
   SetDiscrete(*aRuleData->ValueForOrder(),
               pos->mOrder, canStoreInRuleTree,

layout/style/nsStyleStruct.cpp

@@ -1126,6 +1126,7 @@ nsStylePosition::nsStylePosition(void)
   mMaxHeight.SetNoneValue();
   mBoxSizing = NS_STYLE_BOX_SIZING_CONTENT;
 #ifdef MOZ_FLEXBOX
+  mFlexDirection = NS_STYLE_FLEX_DIRECTION_ROW;
   mJustifyContent = NS_STYLE_JUSTIFY_CONTENT_FLEX_START;
   mOrder = NS_STYLE_ORDER_INITIAL;
 #endif // MOZ_FLEXBOX
@@ -1163,6 +1164,12 @@ nsChangeHint nsStylePosition::CalcDifference(const nsStylePosition& aOther) cons
   }
 
   // Properties that apply to flexbox containers:
+
+  // flex-direction can swap a flexbox between vertical & horizontal.
+  if (mFlexDirection != aOther.mFlexDirection) {
+    return NS_CombineHint(hint, nsChangeHint_ReflowFrame);
+  }
+
   // Changing justify-content on a flexbox might affect the positioning of its
   // children, but it won't affect any sizing.
   if (mJustifyContent != aOther.mJustifyContent) {

layout/style/nsStyleStruct.h

@@ -1094,6 +1094,7 @@ struct nsStylePosition {
   nsStyleCoord  mMaxHeight;             // [reset] coord, percent, calc, none
   PRUint8       mBoxSizing;             // [reset] see nsStyleConsts.h
 #ifdef MOZ_FLEXBOX
+  PRUint8       mFlexDirection;         // [reset] see nsStyleConsts.h
   PRUint8       mJustifyContent;        // [reset] see nsStyleConsts.h
   PRInt32       mOrder;                 // [reset] integer
 #endif // MOZ_FLEXBOX

layout/style/test/property_database.js

@@ -738,6 +738,14 @@ var gCSSProperties = {
 	},
 /* XXXdholbert In builds with MOZ_FLEXBOX enabled, this should be uncommented.
    (This would be #ifdef MOZ_FLEXBOX, if that worked in JS files.)
+	"-moz-flex-direction": {
+		domProp: "MozFlexDirection",
+		inherited: false,
+		type: CSS_TYPE_LONGHAND,
+		initial_values: [ "row" ],
+		other_values: [ "row-reverse", "column", "column-reverse" ],
+		invalid_values: [ "10px", "30%", "justify", "column wrap" ]
+	},
 	"-moz-order": {
 		domProp: "MozOrder",
 		inherited: false,