diff --git a/servo/components/layout/block.rs b/servo/components/layout/block.rs index a4eb30ce6063..7859cb9a9f86 100644 --- a/servo/components/layout/block.rs +++ b/servo/components/layout/block.rs @@ -567,7 +567,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 { @@ -1558,8 +1558,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/servo/components/layout/construct.rs b/servo/components/layout/construct.rs index 6671a07b4ade..95603f8dea75 100644 --- a/servo/components/layout/construct.rs +++ b/servo/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 { - 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 { + 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/servo/components/layout/inline.rs b/servo/components/layout/inline.rs index 8a086d34320e..d255b0309633 100644 --- a/servo/components/layout/inline.rs +++ b/servo/components/layout/inline.rs @@ -1151,6 +1151,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( @@ -1159,6 +1160,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/servo/components/style/properties/longhand/box.mako.rs b/servo/components/style/properties/longhand/box.mako.rs index ec3097210ad2..5bac0d7dab70 100644 --- a/servo/components/style/properties/longhand/box.mako.rs +++ b/servo/components/style/properties/longhand/box.mako.rs @@ -19,10 +19,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/servo/components/style/properties/properties.mako.rs b/servo/components/style/properties/properties.mako.rs index ec6873f436af..ca30e123dcc8 100644 --- a/servo/components/style/properties/properties.mako.rs +++ b/servo/components/style/properties/properties.mako.rs @@ -1953,8 +1953,10 @@ pub fn apply_declarations<'a, F, I>(viewport_size: Size2D, 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),