Add remaining longhand flexbox style properties

Add the remaining longhand CSS properties of flexbox for servo,
including `flex-wrap`, `flex-grow`, `flex-shrink`, `justify-content`,
`align-items`, `align-self` and `align-content`.

tests for the remaining longhand properties are also enabled. Test for
default value of `align-self` is modified because the new default value
for this property is "auto" is current flexbox CR.

components/layout/incremental.rs

@@ -219,8 +219,15 @@ pub fn compute_damage(old: Option<&Arc<ServoComputedValues>>, new: &ServoCompute
         get_inheritedtable.border_spacing,
         get_column.column_gap,
         get_position.flex_direction,
+        get_position.flex_wrap,
+        get_position.justify_content,
+        get_position.align_items,
+        get_position.align_content,
+        get_position.order,
         get_position.flex_basis,
-        get_position.order
+        get_position.flex_grow,
+        get_position.flex_shrink,
+        get_position.align_self
     ]) || add_if_not_equal!(old, new, damage,
                             [ REPAINT, STORE_OVERFLOW, REFLOW_OUT_OF_FLOW ], [
         get_position.top, get_position.left,

components/script/dom/webidls/CSSStyleDeclaration.webidl

@@ -310,7 +310,21 @@ partial interface CSSStyleDeclaration {
 
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexDirection;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-direction;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexWrap;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-wrap;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString justifyContent;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString justify-content;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignItems;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-items;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignContent;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-content;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString order;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexBasis;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-basis;
-  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString order;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexGrow;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-grow;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexShrink;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-shrink;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignSelf;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-self;
 };

components/style/properties/longhand/position.mako.rs

@@ -61,12 +61,22 @@
 // http://www.w3.org/TR/css3-flexbox/
 
 // Flex container properties
-${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse", experimental=True)}
+${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse")}
+
+${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse")}
+
+${helpers.single_keyword("justify-content", "flex-start flex-end center space-between space-around")}
+
+${helpers.single_keyword("align-items", "stretch flex-start flex-end center baseline")}
+
+${helpers.single_keyword("align-content", "stretch flex-start flex-end center space-between space-around")}
 
 // Flex item properties
-${helpers.predefined_type("flex-grow", "Number", "0.0", "parse_non_negative", products="gecko")}
+${helpers.predefined_type("flex-grow", "Number", "0.0", "parse_non_negative")}
 
-${helpers.predefined_type("flex-shrink", "Number", "1.0", "parse_non_negative", products="gecko")}
+${helpers.predefined_type("flex-shrink", "Number", "1.0", "parse_non_negative")}
+
+${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center baseline")}
 
 // https://drafts.csswg.org/css-flexbox/#propdef-order
 <%helpers:longhand name="order">
@@ -94,8 +104,6 @@ ${helpers.predefined_type("flex-basis",
                           "LengthOrPercentageOrAutoOrContent",
                           "computed::LengthOrPercentageOrAutoOrContent::Auto")}
 
-${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse", products="gecko")}
-
 ${helpers.predefined_type("width",
                           "LengthOrPercentageOrAuto",
                           "computed::LengthOrPercentageOrAuto::Auto",

tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_computedstyle_align-self-invalid.htm

@@ -17,7 +17,7 @@ body {
 
     var passed =
 	    getComputedStyle(body).getPropertyValue("align-self") ==
-	    "stretch";
+	    "auto";
     body.textContent = body.className = passed ? "PASS" : "FAIL";
 </script>
 </body></html>

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-content-center.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-content-center.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-content-flex-end.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-content-flex-end.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-content-flex-start.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-content-flex-start.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-content-space-around.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-content-space-around.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-content-space-between.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-content-space-between.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-items-baseline.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-items-baseline.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-items-center.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-items-center.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-items-flex-end.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-items-flex-end.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-items-flex-start.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-items-flex-start.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-items-invalid.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-items-invalid.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-items-stretch.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-items-stretch.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-self-baseline.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-self-baseline.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-self-center.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-self-center.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-self-flex-end.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-self-flex-end.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-self-flex-start.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-self-flex-start.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-self-invalid.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-self-invalid.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_align-self-stretch.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_align-self-stretch.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-nowrap.htm.ini

@@ -1,3 +1,3 @@
 [flexbox_computedstyle_flex-flow-nowrap.htm]
   type: reftest
-  expected: FAIL
+  expected: PASS

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-nowrap.htm.ini

@@ -1,3 +1,3 @@
 [flexbox_computedstyle_flex-flow-row-nowrap.htm]
   type: reftest
-  expected: FAIL
+  expected: PASS

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row.htm.ini

@@ -1,3 +1,3 @@
 [flexbox_computedstyle_flex-flow-row.htm]
   type: reftest
-  expected: FAIL
+  expected: PASS

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-grow-0.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-grow-0.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-grow-invalid.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-grow-invalid.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-grow-number.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-grow-number.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-0-auto.htm.ini

@@ -1,3 +1,3 @@
 [flexbox_computedstyle_flex-shorthand-0-auto.htm]
   type: reftest
-  expected: FAIL
+  expected: PASS

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-initial.htm.ini

@@ -1,3 +1,3 @@
 [flexbox_computedstyle_flex-shorthand-initial.htm]
   type: reftest
-  expected: FAIL
+  expected: PASS

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-invalid.htm.ini

@@ -1,3 +1,3 @@
 [flexbox_computedstyle_flex-shorthand-invalid.htm]
   type: reftest
-  expected: FAIL
+  expected: PASS

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shrink-0.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-shrink-0.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shrink-invalid.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-shrink-invalid.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shrink-number.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-shrink-number.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-wrap-invalid.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-wrap-invalid.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-wrap-nowrap.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-wrap-nowrap.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-wrap-wrap-reverse.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-wrap-wrap-reverse.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-wrap-wrap.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_flex-wrap-wrap.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_justify-content-center.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_justify-content-center.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_justify-content-flex-end.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_justify-content-flex-end.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_justify-content-flex-start.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_justify-content-flex-start.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_justify-content-space-around.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_justify-content-space-around.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_justify-content-space-between.htm.ini

@@ -1,3 +0,0 @@
-[flexbox_computedstyle_justify-content-space-between.htm]
-  type: reftest
-  expected: FAIL