LibWeb: Blockify children of parents with display:grid or display:flex

1 files changed, 7 insertions, 2 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
index 6cd2c26a45..050d0ac08d 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -923,7 +923,7 @@ enum class BoxTypeTransformation {
     Inlinify,
 };
 
-static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const&, Optional<CSS::Selector::PseudoElement> const&)
+static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement> const&)
 {
     auto display = style.display();
 
@@ -933,7 +933,12 @@ static BoxTypeTransformation required_box_type_transformation(StyleProperties co
 
     // FIXME: Containment in a ruby container inlinifies the box’s display type, as described in [CSS-RUBY-1].
 
-    // FIXME: A parent with a grid or flex display value blockifies the box’s display type. [CSS-GRID-1] [CSS-FLEXBOX-1]
+    // A parent with a grid or flex display value blockifies the box’s display type. [CSS-GRID-1] [CSS-FLEXBOX-1]
+    if (element.parent() && element.parent()->layout_node()) {
+        auto const& parent_display = element.parent()->layout_node()->computed_values().display();
+        if (parent_display.is_grid_inside() || parent_display.is_flex_inside())
+            return BoxTypeTransformation::Blockify;
+    }
 
     return BoxTypeTransformation::None;
 }