diff --git a/Userland/Libraries/LibWeb/Dump.cpp b/Userland/Libraries/LibWeb/Dump.cpp index 5b81e10d22..bcf3116aea 100644 --- a/Userland/Libraries/LibWeb/Dump.cpp +++ b/Userland/Libraries/LibWeb/Dump.cpp @@ -165,7 +165,9 @@ void dump_tree(StringBuilder& builder, const Layout::Node& layout_node, bool sho if (box.is_inline_block()) builder.appendff(" {}inline-block{}", inline_block_color_on, color_off); if (box.computed_values().display() == CSS::Display::Flex) - builder.appendff(" {}flex{}", flex_color_on, color_off); + builder.appendff(" {}flex-container{}", flex_color_on, color_off); + if (box.is_flex_item()) + builder.appendff(" {}flex-item{}", flex_color_on, color_off); if (show_box_model) { // Dump the horizontal box properties diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 6e94c15125..6b561d1bbc 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -42,6 +42,8 @@ void FlexFormattingContext::run(Box& box, LayoutMode layout_mode) float tallest_child_height = 0; float widest_child_width = 0; box.for_each_child_of_type([&](Box& child_box) { + child_box.set_flex_item(true); + child_box.set_offset(x, y); tallest_child_height = max(tallest_child_height, child_box.height()); widest_child_width = max(widest_child_width, child_box.width()); diff --git a/Userland/Libraries/LibWeb/Layout/Node.h b/Userland/Libraries/LibWeb/Layout/Node.h index 837ea203db..20e4f3b1f0 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.h +++ b/Userland/Libraries/LibWeb/Layout/Node.h @@ -109,6 +109,9 @@ public: bool is_absolutely_positioned() const; bool is_fixed_position() const; + bool is_flex_item() const { return m_is_flex_item; } + void set_flex_item(bool b) { m_is_flex_item = b; } + const BlockBox* containing_block() const; BlockBox* containing_block() { return const_cast(const_cast(this)->containing_block()); } @@ -182,6 +185,8 @@ private: bool m_visible { true }; bool m_children_are_inline { false }; SelectionState m_selection_state { SelectionState::None }; + + bool m_is_flex_item { false }; }; class NodeWithStyle : public Node {