diff --git a/components/script/dom/webidls/CSSStyleDeclaration.webidl b/components/script/dom/webidls/CSSStyleDeclaration.webidl
index 8d587b9760a..02864d39a77 100644
--- a/components/script/dom/webidls/CSSStyleDeclaration.webidl
+++ b/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;
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index c5b08b44aac..9bb65979f4e 100644
--- a/components/style/properties/properties.mako.rs
+++ b/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" />
 }
 
diff --git a/components/style/properties/shorthand/position.mako.rs b/components/style/properties/shorthand/position.mako.rs
new file mode 100644
index 00000000000..4710afd121e
--- /dev/null
+++ b/components/style/properties/shorthand/position.mako.rs
@@ -0,0 +1,88 @@
+/* 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" />
+
+// https://drafts.csswg.org/css-flexbox/#flex-flow-property
+<%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;
+    loop {
+        if direction.is_none() {
+            if let Ok(value) = input.try(|input| flex_direction::parse(context, input)) {
+                direction = Some(value);
+                continue
+            }
+        }
+        if wrap.is_none() {
+            if let Ok(value) = input.try(|input| flex_wrap::parse(context, input)) {
+                wrap = Some(value);
+                continue
+            }
+        }
+        break
+    }
+
+    if direction.is_none() && wrap.is_none() {
+        return Err(())
+    }
+    Ok(Longhands {
+        flex_direction: direction,
+        flex_wrap: wrap,
+    })
+</%helpers:shorthand>
+
+// https://drafts.csswg.org/css-flexbox/#flex-property
+<%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<(Number, Option<Number>),()> {
+        let grow = 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;
+
+    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 = Some(flex_grow);
+                shrink = flex_shrink;
+                continue
+            }
+        }
+        if basis.is_none() {
+            if let Ok(value) = input.try(LengthOrPercentageOrAutoOrContent::parse) {
+                basis = Some(value);
+                continue
+            }
+        }
+        break
+    }
+
+    if grow.is_none() && basis.is_none() {
+        return Err(())
+    }
+    Ok(Longhands {
+        flex_grow: grow.or(Some(Number(1.0))),
+        flex_shrink: shrink.or(Some(Number(1.0))),
+        flex_basis: basis.or(Some(LengthOrPercentageOrAutoOrContent::Length(Length::Absolute(Au(0)))))
+    })
+</%helpers:shorthand>
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini
index c69efaf3cab..279f55fa353 100644
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/__dir__.ini
+++ b/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",
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm.ini
new file mode 100644
index 00000000000..0bb52b55f16
--- /dev/null
+++ b/tests/wpt/metadata-css/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm.ini
@@ -0,0 +1,3 @@
+[css-flexbox-column-reverse.htm]
+  type: reftest
+  expected: FAIL
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-nowrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-nowrap.htm.ini
deleted file mode 100644
index 787de3b280d..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-nowrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-column-nowrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: column nowrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse-nowrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse-nowrap.htm.ini
deleted file mode 100644
index c6d809585a5..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse-nowrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-column-reverse-nowrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: column-reverse nowrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse-wrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse-wrap.htm.ini
deleted file mode 100644
index ef9ed52428d..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse-wrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-column-reverse-wrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: column-reverse wrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse.htm.ini
deleted file mode 100644
index f94aa2f8c92..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-reverse.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-column-reverse.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: column-reverse]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-wrap-reverse.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-wrap-reverse.htm.ini
deleted file mode 100644
index fb3675dd9a7..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-wrap-reverse.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-column-wrap-reverse.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: column wrap-reverse]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-wrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-wrap.htm.ini
deleted file mode 100644
index 5f960af2a59..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column-wrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-column-wrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: column wrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column.htm.ini
deleted file mode 100644
index 020ea13daa0..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-column.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-column.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: column]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-nowrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-nowrap.htm.ini
deleted file mode 100644
index 0a754375423..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-nowrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-row-reverse-nowrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: row-reverse nowrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.htm.ini
deleted file mode 100644
index ff7b03597e2..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: row-reverse wrap-reverse]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-wrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-wrap.htm.ini
deleted file mode 100644
index f6b63035604..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse-wrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-row-reverse-wrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: row-reverse wrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse.htm.ini
deleted file mode 100644
index 7e5604f5976..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-reverse.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-row-reverse.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: row-reverse]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-wrap-reverse.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-wrap-reverse.htm.ini
deleted file mode 100644
index 46527212625..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-wrap-reverse.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-row-wrap-reverse.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: row wrap-reverse]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-wrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-wrap.htm.ini
deleted file mode 100644
index 1106ebae9b9..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-row-wrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-row-wrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: row wrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-wrap.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-wrap.htm.ini
deleted file mode 100644
index 167643c5189..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-flow-wrap.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-flow-wrap.htm]
-  type: testharness
-  [flexbox | computed style | flex-flow: wrap]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-auto.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-auto.htm.ini
deleted file mode 100644
index 115c9f622a3..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-auto.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-shorthand-auto.htm]
-  type: testharness
-  [flexbox | computed style | flex: auto]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-none.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-none.htm.ini
deleted file mode 100644
index 8c8e31ec0b0..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-none.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-shorthand-none.htm]
-  type: testharness
-  [flexbox | computed style | flex: auto]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-number.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-number.htm.ini
deleted file mode 100644
index 13b8a30d711..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand-number.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-shorthand-number.htm]
-  type: testharness
-  [flexbox | computed style | flex: number]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand.htm.ini
deleted file mode 100644
index 649c9094029..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_flex-shorthand.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_flex-shorthand.htm]
-  type: testharness
-  [flexbox | computed style | flex: invalid]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/percentage-heights-000.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/percentage-heights-000.htm.ini
index 563ef0309dc..33ebe02cd5a 100644
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/percentage-heights-000.htm.ini
+++ b/tests/wpt/metadata-css/css-flexbox-1_dev/html/percentage-heights-000.htm.ini
@@ -9,9 +9,6 @@
   [.flexbox 3]
     expected: FAIL
 
-  [.flexbox 4]
-    expected: FAIL
-
   [.flexbox 5]
     expected: FAIL