Support flexbox shorthand properties

Support the `flex` and `flex-flow` shorthand properties in
servo. Currently they are marked as experimental, so they are added to
'__dir__.ini'.

Thanks SimonSapin and jdm for help :)

components/script/dom/webidls/CSSStyleDeclaration.webidl

@@ -308,6 +308,9 @@ partial interface CSSStyleDeclaration {
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString transitionDelay;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString transition-delay;
 
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexFlow;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-flow;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexDirection;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-direction;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexWrap;

components/style/properties/properties.mako.rs

@@ -129,6 +129,7 @@ pub mod shorthands {
     <%include file="/shorthand/margin.mako.rs" />
     <%include file="/shorthand/outline.mako.rs" />
     <%include file="/shorthand/padding.mako.rs" />
+    <%include file="/shorthand/position.mako.rs" />
     <%include file="/shorthand/text.mako.rs" />
 }
 

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

@@ -0,0 +1,105 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand name="flex-flow" sub_properties="flex-direction flex-wrap"
+                                     experimental="True">
+    use properties::longhands::{flex_direction, flex_wrap};
+
+    let mut direction = None;
+    let mut wrap = None;
+    let mut any = false;
+    loop {
+        if direction.is_none() {
+            if let Ok(value) = input.try(|input| flex_direction::parse(context, input)) {
+                direction = Some(value);
+                any = true;
+                continue
+            }
+        }
+        if wrap.is_none() {
+            if let Ok(value) = input.try(|input| flex_wrap::parse(context, input)) {
+                wrap = Some(value);
+                any = true;
+                continue
+            }
+        }
+        break
+    }
+
+    if any {
+        Ok(Longhands {
+            flex_direction: direction,
+            flex_wrap: wrap,
+        })
+    } else {
+        Err(())
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="flex" sub_properties="flex-grow flex-shrink flex-basis"
+                                experimental="True">
+    use app_units::Au;
+    use values::specified::{Number, Length, LengthOrPercentageOrAutoOrContent};
+
+    pub fn parse_flexibility(input: &mut Parser)
+                             -> Result<(Option<Number>, Option<Number>),()> {
+        let grow = Some(try!(Number::parse_non_negative(input)));
+        let shrink = input.try(Number::parse_non_negative).ok();
+        Ok((grow, shrink))
+    }
+
+    let mut grow = None;
+    let mut shrink = None;
+    let mut basis = None;
+    let mut any = false;
+
+    if input.try(|input| input.expect_ident_matching("none")).is_ok() {
+        return Ok(Longhands {
+            flex_grow: Some(Number(0.0)),
+            flex_shrink: Some(Number(0.0)),
+            flex_basis: Some(LengthOrPercentageOrAutoOrContent::Auto)
+        })
+    }
+    loop {
+        if grow.is_none() {
+            if let Ok((flex_grow, flex_shrink)) = input.try(parse_flexibility) {
+                grow = flex_grow;
+                shrink = flex_shrink;
+                any = true;
+                continue
+            }
+        }
+        if basis.is_none() {
+            if let Ok(value) = input.try(LengthOrPercentageOrAutoOrContent::parse) {
+                basis = Some(value);
+                any = true;
+                continue
+            }
+        }
+        break
+    }
+    if any {
+        if grow == None {
+            grow = Some(Number(1.0));
+        }
+        if shrink == None && basis == None {
+            basis = Some(LengthOrPercentageOrAutoOrContent::Length(Length::Absolute(Au(0))));
+        }
+        if shrink == None {
+            shrink = Some(Number(1.0));
+        }
+        if basis == None {
+            basis = Some(LengthOrPercentageOrAutoOrContent::Auto);
+        }
+        Ok(Longhands {
+            flex_grow: grow,
+            flex_shrink: shrink,
+            flex_basis: basis,
+        })
+    } else {
+        Err(())
+    }
+</%helpers:shorthand>

tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini

@@ -1,4 +1,5 @@
 prefs: ["layout.flex.enabled:true",
+        "layout.flex-flow.enabled:true",
         "layout.flex-direction.enabled:true",
         "layout.flex-wrap.enabled:true",
         "layout.flex-grow.enabled:true",