Implemented display: inline-flex

9 files changed, 28 insertions, 26 deletions

diff --git a/components/layout/block.rs b/components/layout/block.rs
index f7370e00a4e..23c7858932a 100644
--- a/components/layout/block.rs
+++ b/components/layout/block.rs
@@ -566,7 +566,7 @@ impl BlockFlow {
             } else {
                 BlockType::FloatNonReplaced
             }
-        } else if self.is_inline_block() {
+        } else if self.is_inline_block_or_inline_flex() {
             if self.fragment.is_replaced() {
                 BlockType::InlineBlockReplaced
             } else {
@@ -1557,8 +1557,9 @@ impl BlockFlow {
         debug_assert_eq!(self.fragment.margin_box_inline_size(), self.base.position.size.inline);
     }
 
-    fn is_inline_block(&self) -> bool {
-        self.fragment.style().get_box().display == display::T::inline_block
+    fn is_inline_block_or_inline_flex(&self) -> bool {
+        self.fragment.style().get_box().display == display::T::inline_block ||
+        self.fragment.style().get_box().display == display::T::inline_flex
     }
 
     /// Computes the content portion (only) of the intrinsic inline sizes of this flow. This is
diff --git a/components/layout/construct.rs b/components/layout/construct.rs
index 660d4f64834..433524f13ff 100644
--- a/components/layout/construct.rs
+++ b/components/layout/construct.rs
@@ -937,9 +937,14 @@ impl<'a, ConcreteThreadSafeLayoutNode: ThreadSafeLayoutNode>
         ConstructionResult::ConstructionItem(construction_item)
     }
 
-    fn build_fragment_for_inline_block(&mut self, node: &ConcreteThreadSafeLayoutNode)
-                                       -> ConstructionResult {
-        let block_flow_result = self.build_flow_for_block(node, None);
+    /// Build the fragment for an inline-block or inline-flex, based on the `display` flag
+    fn build_fragment_for_inline_block_or_inline_flex(&mut self, node: &ConcreteThreadSafeLayoutNode,
+                                                      display: display::T) -> ConstructionResult {
+        let block_flow_result = match display {
+            display::T::inline_block => self.build_flow_for_block(node, None),
+            display::T::inline_flex => self.build_flow_for_flex(node, None),
+            _ => panic!("The flag should be inline-block or inline-flex")
+        };
         let (block_flow, abs_descendants) = match block_flow_result {
             ConstructionResult::Flow(block_flow, abs_descendants) => (block_flow, abs_descendants),
             _ => unreachable!()
@@ -1548,7 +1553,8 @@ impl<'a, ConcreteThreadSafeLayoutNode> PostorderNodeMutTraversal<ConcreteThreadS
 
             // Inline-block items contribute inline fragment construction results.
             (display::T::inline_block, float::T::none, _) => {
-                let construction_result = self.build_fragment_for_inline_block(node);
+                let construction_result = self.build_fragment_for_inline_block_or_inline_flex(node,
+                                                                                              display::T::inline_block);
                 self.set_flow_construction_result(node, construction_result)
             }
 
@@ -1597,6 +1603,12 @@ impl<'a, ConcreteThreadSafeLayoutNode> PostorderNodeMutTraversal<ConcreteThreadS
                 self.set_flow_construction_result(node, construction_result)
             }
 
+            (display::T::inline_flex, _, _) => {
+                let construction_result = self.build_fragment_for_inline_block_or_inline_flex(node,
+                                                                                              display::T::inline_flex);
+                self.set_flow_construction_result(node, construction_result)
+            }
+
             // Block flows that are not floated contribute block flow construction results.
             //
             // TODO(pcwalton): Make this only trigger for blocks and handle the other `display`
diff --git a/components/layout/inline.rs b/components/layout/inline.rs
index 833d93c3039..1608ad652f9 100644
--- a/components/layout/inline.rs
+++ b/components/layout/inline.rs
@@ -1146,6 +1146,7 @@ impl InlineFlow {
             match (display_value, vertical_align_value) {
                 (display::T::inline, vertical_align::T::top) |
                 (display::T::block, vertical_align::T::top) |
+                (display::T::inline_flex, vertical_align::T::top) |
                 (display::T::inline_block, vertical_align::T::top) if
                         inline_metrics.space_above_baseline >= Au(0) => {
                     *largest_block_size_for_top_fragments = max(
@@ -1154,6 +1155,7 @@ impl InlineFlow {
                 }
                 (display::T::inline, vertical_align::T::bottom) |
                 (display::T::block, vertical_align::T::bottom) |
+                (display::T::inline_flex, vertical_align::T::bottom) |
                 (display::T::inline_block, vertical_align::T::bottom) if
                         inline_metrics.space_below_baseline >= Au(0) => {
                     *largest_block_size_for_bottom_fragments = max(
diff --git a/components/style/properties/longhand/box.mako.rs b/components/style/properties/longhand/box.mako.rs
index 3b5cd6bba4c..56707e9c1bb 100644
--- a/components/style/properties/longhand/box.mako.rs
+++ b/components/style/properties/longhand/box.mako.rs
@@ -18,10 +18,11 @@
         values = """inline block inline-block
             table inline-table table-row-group table-header-group table-footer-group
             table-row table-column-group table-column table-cell table-caption
-            list-item flex none
+            list-item flex inline-flex
+            none
         """.split()
         if product == "gecko":
-            values += """inline-flex grid inline-grid ruby ruby-base ruby-base-container
+            values += """grid inline-grid ruby ruby-base ruby-base-container
                 ruby-text ruby-text-container contents flow-root -webkit-box
                 -webkit-inline-box -moz-box -moz-inline-box -moz-grid -moz-inline-grid
                 -moz-grid-group -moz-grid-line -moz-stack -moz-inline-stack -moz-deck
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 75ea5dff3d5..0e58caf6bdb 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -1898,8 +1898,10 @@ pub fn apply_declarations<'a, F, I>(viewport_size: Size2D<Au>,
     let is_item = matches!(context.inherited_style.get_box().clone_display(),
         % if product == "gecko":
         computed_values::display::T::grid |
+        computed_values::display::T::inline_grid |
         % endif
-        computed_values::display::T::flex);
+        computed_values::display::T::flex |
+        computed_values::display::T::inline_flex);
     let (blockify_root, blockify_item) = match flags.contains(SKIP_ROOT_AND_ITEM_BASED_DISPLAY_FIXUP) {
         false => (is_root_element, is_item),
         true => (false, false),
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/display_inline-flex_exist.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/display_inline-flex_exist.htm.ini
deleted file mode 100644
index 91449bc2efe..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/display_inline-flex_exist.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[display_inline-flex_exist.htm]
-  type: testharness
-  [CSS Flexible Box Test: display_inline-flex]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_display-inline.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_display-inline.htm.ini
deleted file mode 100644
index bfb3632381e..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_computedstyle_display-inline.htm.ini
+++ /dev/null
@@ -1,5 +0,0 @@
-[flexbox_computedstyle_display-inline.htm]
-  type: testharness
-  [flexbox | computed style | display: inline-flex]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_inline.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_inline.htm.ini
deleted file mode 100644
index fdd0f79122b..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_inline.htm.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[flexbox_inline.htm]
-  type: reftest
-  expected: FAIL
diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/ttwf-reftest-flex-inline.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/ttwf-reftest-flex-inline.htm.ini
deleted file mode 100644
index 4f004f76131..00000000000
--- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/ttwf-reftest-flex-inline.htm.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[ttwf-reftest-flex-inline.htm]
-  type: reftest
-  expected: FAIL