Implemented display: inline-flex

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

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`

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(

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

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),