From cf4b7e343a76821dbe88b4944560e0b2638e66eb Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Tue, 19 Jul 2022 15:31:01 +0200 Subject: [PATCH] LibWeb: Blockify `inline-flex` to `flex` Previously, `inline-flex` would blockify to `block` since blockification didn't take the inner display type into account. This is still not perfect, but it fixes a lot of situations where inline-level flex containers would be demoted to regular block containers. --- Userland/Libraries/LibWeb/CSS/StyleComputer.cpp | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index a77b9ef4da..83fea3dc0d 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -1132,8 +1132,15 @@ void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::El case BoxTypeTransformation::None: break; case BoxTypeTransformation::Blockify: - if (!display.is_block_outside()) - style.set_property(CSS::PropertyID::Display, IdentifierStyleValue::create(CSS::ValueID::Block)); + if (!display.is_block_outside()) { + // FIXME: We only want to change the outer display type here, but we don't have a nice API + // to do that specifically. For now, we simply check for "inline-flex" and convert + // that to "flex". + if (display.is_flex_inside()) + style.set_property(CSS::PropertyID::Display, IdentifierStyleValue::create(CSS::ValueID::Flex)); + else + style.set_property(CSS::PropertyID::Display, IdentifierStyleValue::create(CSS::ValueID::Block)); + } break; case BoxTypeTransformation::Inlinify: if (!display.is_inline_outside())