diff options
| author | Andreas Kling <kling@serenityos.org> | 2022-07-19 15:31:01 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-07-19 15:40:41 +0200 |
| commit | cf4b7e343a76821dbe88b4944560e0b2638e66eb (patch) | |
| tree | dc2849fc8fb3012a24ae2b924dcaaa1697d801e2 | |
| parent | ed8930fff593e4452c559e682b563a36a2750b5d (diff) | |
| download | serenity-cf4b7e343a76821dbe88b4944560e0b2638e66eb.zip | |
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.
| -rw-r--r-- | Userland/Libraries/LibWeb/CSS/StyleComputer.cpp | 11 |
1 files 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()) |