Bug 696253, patch 2: implement parsing/computation for CSS property 'order'. 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        MozOrder;
+                                        // raises(DOMException) on setting
+
            attribute DOMString        MozJustifyContent;
                                         // raises(DOMException) on setting
 */

layout/base/nsStyleConsts.h

@@ -398,6 +398,11 @@ static inline mozilla::css::Side operator++(mozilla::css::Side& side, int) {
 #endif // MOZ_FLEXBOX
 
 #ifdef MOZ_FLEXBOX
+// 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

layout/style/nsCSSPropList.h

@@ -1512,6 +1512,16 @@ CSS_PROP_TABLEBORDER(
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_None)
 #ifdef MOZ_FLEXBOX
+CSS_PROP_POSITION(
+    -moz-order,
+    order,
+    CSS_PROP_DOMPROP_PREFIXED(Order),
+    CSS_PROPERTY_PARSE_VALUE,
+    "",
+    VARIANT_HI,
+    nsnull,
+    offsetof(nsStylePosition, mOrder),
+    eStyleAnimType_Custom) // <integer>
 CSS_PROP_POSITION(
     -moz-justify-content,
     justify_content,

layout/style/nsComputedDOMStyle.cpp

@@ -2925,6 +2925,14 @@ nsComputedDOMStyle::DoGetBorderImageRepeat()
 }
 
 #ifdef MOZ_FLEXBOX
+nsIDOMCSSValue*
+nsComputedDOMStyle::DoGetOrder()
+{
+  nsROCSSPrimitiveValue* val = GetROCSSPrimitiveValue();
+  val->SetNumber(GetStylePosition()->mOrder);
+  return val;
+}
+
 nsIDOMCSSValue*
 nsComputedDOMStyle::DoGetJustifyContent()
 {
@@ -4658,6 +4666,7 @@ nsComputedDOMStyle::GetQueryablePropertyMap(PRUint32* aLength)
     COMPUTED_STYLE_MAP_ENTRY(image_region,                  ImageRegion),
 #ifdef MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(justify_content,               JustifyContent),
+    COMPUTED_STYLE_MAP_ENTRY(order,                         Order),
 #endif // MOZ_FLEXBOX
     COMPUTED_STYLE_MAP_ENTRY(orient,                        Orient),
     COMPUTED_STYLE_MAP_ENTRY_LAYOUT(_moz_outline_radius_bottomLeft, OutlineRadiusBottomLeft),

layout/style/nsComputedDOMStyle.h

@@ -359,6 +359,7 @@ private:
 
 #ifdef MOZ_FLEXBOX
   /* CSS Flexbox properties */
+  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
+  // order: integer, inherit, initial
+  SetDiscrete(*aRuleData->ValueForOrder(),
+              pos->mOrder, canStoreInRuleTree,
+              SETDSC_INTEGER, parentPos->mOrder,
+              NS_STYLE_ORDER_INITIAL, 0, 0, 0, 0);
+
   // justify-content: enum, inherit, initial
   SetDiscrete(*aRuleData->ValueForJustifyContent(),
               pos->mJustifyContent, canStoreInRuleTree,

layout/style/nsStyleAnimation.cpp

@@ -2553,6 +2553,16 @@ nsStyleAnimation::ExtractComputedValue(nsCSSProperty aProperty,
           break;
         }
 
+#ifdef MOZ_FLEXBOX
+        case eCSSProperty_order: {
+          const nsStylePosition *stylePosition =
+            static_cast<const nsStylePosition*>(styleStruct);
+          aComputedValue.SetIntValue(stylePosition->mOrder,
+                                     eUnit_Integer);
+          break;
+        }
+#endif // MOZ_FLEXBOX
+
         case eCSSProperty_text_decoration_color: {
           const nsStyleTextReset *styleTextReset =
             static_cast<const nsStyleTextReset*>(styleStruct);

layout/style/nsStyleStruct.cpp

@@ -1127,6 +1127,7 @@ nsStylePosition::nsStylePosition(void)
   mBoxSizing = NS_STYLE_BOX_SIZING_CONTENT;
 #ifdef MOZ_FLEXBOX
   mJustifyContent = NS_STYLE_JUSTIFY_CONTENT_FLEX_START;
+  mOrder = NS_STYLE_ORDER_INITIAL;
 #endif // MOZ_FLEXBOX
   mZIndex.SetAutoValue();
 }
@@ -1153,6 +1154,14 @@ nsChangeHint nsStylePosition::CalcDifference(const nsStylePosition& aOther) cons
   }
 
 #ifdef MOZ_FLEXBOX
+  // Properties that apply to flex items:
+  // NOTE: Changes to "order" on a flex item may trigger some repositioning.
+  // If we're in a multi-line flex container, it also may affect our size
+  // (and that of our container & siblings) by shuffling items between lines.
+  if (mOrder != aOther.mOrder) {
+    return NS_CombineHint(hint, nsChangeHint_ReflowFrame);
+  }
+
   // Properties that apply to flexbox containers:
   // Changing justify-content on a flexbox might affect the positioning of its
   // children, but it won't affect any sizing.

layout/style/nsStyleStruct.h

@@ -1095,6 +1095,7 @@ struct nsStylePosition {
   PRUint8       mBoxSizing;             // [reset] see nsStyleConsts.h
 #ifdef MOZ_FLEXBOX
   PRUint8       mJustifyContent;        // [reset] see nsStyleConsts.h
+  PRInt32       mOrder;                 // [reset] integer
 #endif // MOZ_FLEXBOX
   nsStyleCoord  mZIndex;                // [reset] integer, auto
 

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-order": {
+		domProp: "MozOrder",
+		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" ]
+	},
 	"-moz-justify-content": {
 		domProp: "MozJustifyContent",
 		inherited: false,

layout/style/test/test_transitions_per_property.html

@@ -115,6 +115,12 @@ var supported_properties = {
                        // opacity is clamped in computed style
                        // (not parsing/interpolation)
                        test_float_zeroToOne_clamped ],
+/* XXXdholbert In builds with MOZ_FLEXBOX enabled, this should be uncommented.
+   (This would be #ifdef MOZ_FLEXBOX, if that worked in JS files.)
+
+    "-moz-order": [ test_integer_transition ],
+
+*/
     "flood-color": [ test_color_transition ],
     "flood-opacity" : [ test_float_zeroToOne_transition,
                         // opacity is clamped in computed style
@@ -233,7 +239,7 @@ var supported_properties = {
                test_length_percent_calc_transition,
                test_length_clamped, test_percent_clamped ],
     "word-spacing": [ test_length_transition, test_length_unclamped ],
-    "z-index": [ test_zindex_transition, test_pos_integer_or_auto_transition ],
+    "z-index": [ test_integer_transition, test_pos_integer_or_auto_transition ],
 };
 
 var div = document.getElementById("display");
@@ -849,7 +855,7 @@ function test_radius_transition(prop) {
   div.style.removeProperty("padding");
 }
 
-function test_zindex_transition(prop) {
+function test_integer_transition(prop) {
   div.style.setProperty("-moz-transition-property", "none", "");
   div.style.setProperty(prop, "4", "");
   is(cs.getPropertyValue(prop), "4",
@@ -859,12 +865,12 @@ function test_zindex_transition(prop) {
   is(cs.getPropertyValue(prop), "-1",
      "integer-valued property " + prop + ": interpolation of integers");
   check_distance(prop, "6", "1", "-14");
-  div.style.setProperty(prop, "auto", "");
-  is(cs.getPropertyValue(prop), "auto",
-     "integer-valued property " + prop + ": auto not interpolable");
+
+  div.style.setProperty("-moz-transition-property", "none", "");
   div.style.setProperty(prop, "-4", "");
   is(cs.getPropertyValue(prop), "-4",
      "integer-valued property " + prop + ": computed value before transition");
+  div.style.setProperty("-moz-transition-property", prop, "");
   div.style.setProperty(prop, "8", "");
   is(cs.getPropertyValue(prop), "-1",
      "integer-valued property " + prop + ": interpolation of integers");